@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";
}
/**** 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-d.quicklookitem-wrapper,
.quicklookitem-inner {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.quicklookitem-wrapper {
    z-index: 3000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
}

    .quicklookitem-wrapper[data-state="open"] {
        opacity: 1;
        overflow: auto;
    }

    .quicklookitem-wrapper .quicklookitem-inner {
        width: 1250px;
        height: auto;
        max-height: none;
        max-width: calc(100vw - 32px);
        margin: 16px;
        background: white;
        -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        top: 10px;
        position: relative;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
        top: 0px;
    }

.quicklookitem-inner .quicklookitem-inner-left,
.quicklookitem-inner .quicklookitem-inner-right {
    width: 50%;
    float: left;
}

.quicklookitem-inner-right {
    padding: 32px;
    position: relative;
}

    .quicklookitem-inner-right[data-isstarbuy="true"] {
        padding: 80px 32px 32px 32px;
        background-color: var(--starbuyColourOne);
    }

        .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: white;
            background-color: var(--starbuyColourThree);
        }

    .quicklookitem-inner-right > div {
        width: 100%;
        float: left;
        margin-bottom: 16px;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---name {
        font-size: 1.25em;
        font-family: 'citrfontbold';
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---prices {
        font-size: 0.9em;
    }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices > div {
            float: left;
            margin-right: 8px;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy {
            color: var(--starbuyColourThree);
        }

            .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy + .quicklookitem-inner-right---prices-price {
                color: #999;
                text-decoration: line-through;
            }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy-explainer {
            color: var(--starbuyColourThree);
            font-size: 0.7em;
            width:100%;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-price {
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
            color: #999;
            text-decoration: line-through;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
        border: 1px solid #2f76ec;
        background: #e8f4ff;
        color: #2f76ec;
        padding: 8px;
        text-align: center;
        font-size: 0.9em;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        background: #2f76ec;
        color: white;
        border-radius: 4px;
        padding: 16px;
        text-align: center;
        display: block;
        float: left;
        width: 100%;
    }


.quicklookitem-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    background: black;
    cursor: pointer;
    z-index: 3001;
}

@media screen and (max-width : 1023px) {
    .quicklookitem-wrapper {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }

    .quicklookitem-inner .quicklookitem-inner-left,
    .quicklookitem-inner .quicklookitem-inner-right {
        width: 100%;
    }

    .quicklookitem-inner-right {
        padding: 16px;
    }

        .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button {
            width: auto;
            margin-top: 0;

        }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty-label,
            .quicklookitem-inner-right .add-to-cart-area-1 .add-to-cart-area-dropdown select {
                line-height: 36px;
                height: 36px;
            }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input {
                padding: 0 8px;
                width: 40px;
            }

        .quicklookitem-inner-right .add-to-cart-area-msg,
        .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
            font-size: 11px;
        }

        .quicklookitem-inner-right[data-isstarbuy="true"] {
            padding: 40px 16px 16px 16px;
        }

            .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
                height: 32px;
                line-height: 32px;
                font-size: 0.9em;
            }

        .quicklookitem-inner-right > div {
            margin-bottom: 8px;
        }

    .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div {
        background-size: cover !important;
    }

        .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div:after {
            padding-bottom: 80%;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        padding: 8px;
    }
}
 .imm-widget-anchor{
     display:flex !important;
     margin-bottom:0px !important;
     background: rgb(255, 255, 255);
 }
 .finance-output{
     width:100%;
 }
 .finance-output iframe{
     margin:0px auto;
     width:90% !important;
 }
.finance-hidden-price{
    display:none;
}
.view-all-link-container {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 0 1.25rem;
    width: 100%;
}
.view-all-link {
    font-size: 1rem;
    color: #0077cc;
}
.view-all-link:hover,
.view-all-link:focus {
    color: #004b99;
    text-decoration: underline;
}
/* Not found Page */
.not-found-page {
    display: flex;
    justify-content: center;
    width: 100%;
}

.not-found-container {
    align-items: center;
    background: #fff;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem;
    position: relative;
    width: 100%;
    z-index: 0;
    text-align: center;
}

    .not-found-container::before {
        align-items: center;
        bottom: 0;
        color: #f7f7f7;
        content: '404';
        display: flex;
        font-size: 20rem;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

.not-found-container-has-background::before {
    content: '';
}

.not-found-title {
    font-size: 4rem;
}

.not-found-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Classes only found in the default contents for the page. These may not be present, if the contents has been overridden. */
.not-found-paragraph-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.not-found-first-paragraph,
.not-found-second-paragraph {
    font-size: 2rem;
}

.not-found-link-container {
    display: flex;
    flex-direction: column;
}

.not-found-homepage-link {
    background-color: cornflowerblue;
    border-radius: 0.5rem;
    color: #fff;
    padding: 1rem;
}
/*
 *********************************
 * Collections Landing Page Styles
 *********************************
 */

 :root {
    --collections--content-search-gap: 2rem;
    --collections--clear-btn-color: #D54939;
    --collections--search-wrapper-count-color: #2f76ec;
    --collections--content-grid-columns: 1fr;
 }

 .filters-open {
    overflow-y: hidden
}

 .content-collection-landing-page {
    display: flex;
    justify-content: center;
}

.content-collection-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 90%;
}

#content-collection-search {
    grid-template-columns: var(--collections--content-grid-columns);
    gap: 3rem;
    display: grid;
    background: #fff;
}

#content-collection-search .search-column {
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: var(--collections--content-search-gap);
}

#content-collection-search .search-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

#content-collection-search .search-wrapper:nth-child(n+2) {
    padding-top: var(--collections--content-search-gap);
    border-top: 1px solid #ccc;
}

#content-collection-search .search-wrapper:last-child {
    margin-top: auto;
}

#content-collection-search  .search-wrapper h4 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 150%;
}

#content-collection-search  .search-wrapper > div {
    grid-row: 2;
    grid-column: 1 / -1;
}

#content-collection-search .tags {
    max-height: 33vh;
    overflow-y: auto;
}

.content-collection-title {
    margin: 0;
}

.content-collection-no-results-message {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}

.content-collection-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.content-collection-card {
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px -1px #eee;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 150ms ease-in-out;
    padding: 0px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    background-color: #f9f9f9;
}

.content-collection-info-container {
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-collection-card:hover {
    background: #fcfcfc;
    transform: scale(1.01);
}

.content-collection-card-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
}

.content-collection-image-container {
    width: 100%;
    padding-top: 75%;
    position: relative;
    background-color: #e5e5e5;
    overflow: hidden;
}

    .content-collection-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.content-collection-tag-container {
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.25rem;
}

.content-collection-landing-page-content {
    width: 100%;
}

    .content-collection-landing-page-content[data-isempty="True"] {
        display: none;
    }

.search-tag, .content-collection-tag {
    border-radius: 0.75rem;
    border: 1px solid #2f76ec;
    color: #2f76ec;
    font-size: 0.75rem;
    padding: 0.4rem;
    transition: all 150ms ease-in-out;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.search-tag:hover {
    background: #1563e0;
    color: white;
    cursor: pointer;
}

.content-collection-filter-tag {
    background: #2f76ec;
    color: #fff;
}

.search-container {
    position: relative;
}

.clear-btn, .clear-tags-button {
    font-size: 14px;
    cursor: pointer;
}

.clear-btn {
    background: var(--collections--clear-btn-color);
    border-radius: 100%;
    color: #fff;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    z-index: 10;
}

.clear-tags-button {
    color: var(--collections--clear-btn-color);
    text-decoration: underline;
}

.content-collection-description {
    font-size: 14px;
    color: #555;
}

.content-collection-date {
    font-size: 12px;
    color: #777;
    margin-top: auto;
}

.content-collection-hidden-element {
    display: none !important;
}

.search-wrapper-count {
    width: 3rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--collections--search-wrapper-count-color);
}


a.filter-button {
    text-align: center;
    padding: 0.75rem;
    color: #666;
    border: 1px solid;
    cursor: pointer;
}

a.filter-button:hover {
    border: 1px solid;
}

#TagSelectArea .tag-toggle-filters {
    display: flex;
    gap: 0.5rem;
    flex: 1 0 100%;
    padding: 0.5rem;
    background: #f4f4f4;
    margin-bottom: 1rem;
}

.content-collection-filter-type-button {
    flex:1;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #f4f4f4;
    color: #000;
    border: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem;
    text-transform: uppercase;
    border-radius: 0.25rem;
    height: auto;
    line-height: 100%;
    cursor: pointer;
}

.content-collection-filter-type-button:hover {
    background: #1563e0;
    color: #fff;
 }

.content-collection-filter-type-button.content-collection-filter-type-button-active {
    background: #2f76ec;
    color:white;
    cursor: default;
}

.collection-filter-actions {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    gap: 0.5rem;
    margin-top: auto;
}

.collection-filter-actions > span {
    cursor: pointer;
    height: 48px;
    text-align: center;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: #2f76ec;
    color: #fff;
}

.ffclose:before {
    font: normal normal normal 14px / 1 feather;
    content: "\e117";
    color: #ffffff;
    line-height: 48px;
}

 #content-collection-search > .search-column {
    display: none;
 }

.filters-open #content-collection-search > .search-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100;
    padding: 2rem;
    display: flex;
}

.content-collection-nopointer {
    pointer-events: none;
}

.content-collection-nopointer.collection-filter-actions ~.search-wrapper-count {
    border-color: #ccc;
}

.content-collection-nopointer.collection-filter-actions > span {
    background: #ccc;
}

@media screen and (min-width: 768px) {
    .content-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --collections--content-grid-columns: 300px 1fr;
    }

    #content-collection-search > .search-column {
        display: flex;
     }

    #content-collection-search #collections-related-wrapper.search-wrapper,
    #filter-button {
        display: none;
    }
}

@media screen and (min-width: 1440px) {
    .content-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1660px) {
    .content-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/*
 *******************************
 * Collection Article Styles
 *******************************
 */

 :root {
    --collection-content-width: 80%;

    --collection-image-aspect-ratio: 2.35 / 1;
    --collection-image-border-radius: 0.5rem;

    --collection-content-image-border-radius: 0.5rem;
    --collection-content-link-color: #2163d6;
 }

 div[data-type="collection"] #FAFImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

div[data-type="collection"] #FAFImg .collection-image {
    height: auto;
    width: 100%;
    aspect-ratio: var(--collection-image-aspect-ratio, 2.35 / 1);
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
    display: flex;
    margin: 0;
    border-radius: var(--collection-image-border-radius, 0.5rem);
}

div[data-type="collection"] #FAFDesc {
    display: block;
    max-width: var(--collection-content-width, 80%);
    margin: auto;
    background: transparent;
    margin-block: 2rem;
}

    div[data-type="collection"] #FAFDesc img {
        width: 100%;
        height: auto;
        border-radius: var(--collection-content-image-border-radius, --collection-image-border-radius, 0.5rem);
    }

    div[data-type="collection"] #FAFDesc a {
        color: var(--collection-content-link-color, #2163d6);
        text-decoration: underline;
    }

@media screen and (max-width: 500px) {
    :root {
        --collection-content-width: 100%;
        --collection-image-aspect-ratio: 1;
    }
}
#aiRecCmdPaletteBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPaletteBackdrop.cmd-palette-visible {
        opacity: 1;
    }

@property --cmd-gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#aiRecCmdPalettePanel {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    max-height: 70vh;
    border: 4px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--cmd-gradient-angle), #DAE343, #00AEEC, #DAE343) border-box;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.35);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: cmdGradientRotate 3s linear infinite;
    width: min(90vw, 1024px);
}

@keyframes cmdGradientRotate {
    to {
        --cmd-gradient-angle: 360deg;
    }
}

#aiRecCmdPalettePanel.cmd-palette-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#aiRecCmdPalettePanel .cmd-palette-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
}

#aiRecCmdPalettePanel .cmd-palette-search-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-input,
#aiRecCmdPalettePanel .cmd-palette-textarea {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    color: #111827;
    background: transparent;
    line-height: 1.5;
}

#aiRecCmdPalettePanel .cmd-palette-textarea {
    padding: 1rem;
    resize: none;
}

    #aiRecCmdPalettePanel .cmd-palette-input::placeholder,
    #aiRecCmdPalettePanel .cmd-palette-textarea::placeholder {
        color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-search-btn {
    display: none;
}

#aiRecCmdPalettePanel .cmd-palette-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: cmdPaletteSpin 0.6s linear infinite;
}

@keyframes cmdPaletteSpin {
    to {
        transform: rotate(360deg);
    }
}

#aiRecCmdPalettePanel .cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#aiRecCmdPalettePanel .cmd-palette-result {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

    #aiRecCmdPalettePanel .cmd-palette-result:hover,
    #aiRecCmdPalettePanel .cmd-palette-result.cmd-palette-result-active {
        background-color: #f9fafb;
    }

    #aiRecCmdPalettePanel .cmd-palette-result:last-child {
        border-bottom: none;
    }

#aiRecCmdPalettePanel .cmd-palette-result-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #f9fafb;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-info {
    flex: 1;
    min-width: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#aiRecCmdPalettePanel .cmd-palette-result-brand {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-meta {
    text-align: right;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-price {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-original {
    font-weight: 400;
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0.375rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-sale {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-in {
    color: #16a34a;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-out {
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-empty,
#aiRecCmdPalettePanel .cmd-palette-error {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-error {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.75rem;
    color: #9ca3af;
    border-radius: 0 0 10px 10px;
}

#aiRecCmdPalettePanel .cmd-palette-footer-logo {
    height: 20px;
    width: auto;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPalettePanel .cmd-palette-footer-logo:hover {
        opacity: 1;
    }

#aiRecCmdPalettePanel .cmd-palette-footer-hints {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

#aiRecCmdPalettePanel .cmd-palette-footer kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1.4;
    box-shadow: 0 1px 0 #d1d5db;
}

#aiRecCmdPalettePanel .cmd-palette-model-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter,
#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select,
#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    box-sizing: border-box;
    height: 32px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 4px;
    outline: none;
    margin: 0;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    border: none;
    color: #374151;
    background: #fff;
}

    #aiRecCmdPalettePanel .cmd-palette-model-filter:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select {
    flex: 1;
    min-width: 0;
    padding: 0 22px 0 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
    border: 1px solid #d1d5db;
    color: #374151;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-provider-select:focus,
    #aiRecCmdPalettePanel .cmd-palette-model-select:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    flex-shrink: 0;
    padding: 0 10px;
    background: #323e48;
    border: 1px solid #323e48;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    min-height: auto;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-edit-sp-btn:hover {
        background: #435361;
        border-color: #435361;
    }

.cmd-palette-sp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 55vw;
    min-width: 500px;
    height: 100vh;
    z-index: 100000;
    background: #1e1e1e;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #2d2d2d;
    flex-shrink: 0;
    background: #323e48;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-title {
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions button {
        width: auto;
        height: auto;
        margin: 0;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    background: #252526;
    color: #ccc;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn:hover {
        background: #2a2d2e;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save {
    background: #0e639c;
    border-color: #0e639c;
    color: #fff;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save:hover {
        background: #1177bb;
        border-color: #1177bb;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.6;
    border: none;
    padding: 2rem;
    resize: none;
    outline: none;
    overflow-y: auto;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea,
    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea:hover {
        background: #303234;
        color: #fff;
        border-radius: 0;
    }

@media (max-width: 680px) {
    #aiRecCmdPalettePanel {
        top: 1rem;
        width: auto;
        left: 1rem;
        right: 1rem;
        transform: translateY(-12px);
        max-width: none;
    }

        #aiRecCmdPalettePanel.cmd-palette-visible {
            transform: translateY(0);
        }
}
.recommendations-container {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    position: relative;
    width: 100%;
    --recommendations-gap: 1rem;
    --recommendations-padding: 1rem;
}

.recommendations-repeater-prev,
.recommendations-repeater-next {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    cursor: pointer;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    top: 50%;
    transition: color 0.25s ease-in-out;
    width: 1.5rem;
    z-index: 10;
}

    .recommendations-repeater-prev:hover,
    .recommendations-repeater-next:hover {
        color: dodgerblue;
    }

    .recommendations-repeater-prev[aria-disabled="true"],
    .recommendations-repeater-next[aria-disabled="true"] {
        display: none;
    }

.recommendations-repeater-prev {
    left: 0.5rem;
}

    .recommendations-repeater-prev:before {
        content: '\e941';
        font-family: 'feather';
    }

.recommendations-repeater-next {
    right: 0.5rem;
}

    .recommendations-repeater-next:before {
        content: '\e942';
        font-family: 'feather';
    }

.recommendations-repeater {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    gap: var(--recommendations-gap);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--recommendations-padding);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    --recommendations-page-size: 6;
}

    .recommendations-repeater::-webkit-scrollbar {
        display: none;
    }

body.new-basket .basket-wrapper a.recommendations-item,
a.recommendations-item,
.recommendations-item {
    border: 1px solid #ededed;
    border-radius: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-sizing: border-box;
    color: #000;
    display: flex;
    flex: 0 0 calc((100cqi - 2 * var(--recommendations-padding) - (var(--recommendations-page-size) - 1) * var(--recommendations-gap)) / var(--recommendations-page-size));
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    transition: transform 0.25s ease-in-out;
}

    .recommendations-item:hover {
        transform: scale(1.02);
    }

    .recommendations-item .imgCtr {
        border: 1px solid #ededed;
        border-radius: 2rem;
    }

.recommendations-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .recommendations-item-details .pricingRepeater.fafSalePR {
        flex-wrap: wrap;
        line-height: normal;
    }

.recommendations-page-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.recommendations-page-dot {
    background: #ccc;
    border-radius: 100%;
    cursor: pointer;
    height: 0.5rem;
    transition: background 0.25s ease-in-out;
    width: 0.5rem;
}

    .recommendations-page-dot:hover {
        background: #999;
    }

    .recommendations-page-dot[aria-current="true"] {
        background: #000;
    }

.recommendations-repeater-footer {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: end;
}

@keyframes recommendations-border-rotate {
    from {
        --recommendations-border-angle: 0deg;
    }

    to {
        --recommendations-border-angle: 360deg;
    }
}

@property --recommendations-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.recommendations-repeater-footer-badge {
    animation: recommendations-border-rotate 2s linear infinite;
    border-radius: 0.5rem;
    letter-spacing: 0.1rem;
    padding: 0.15rem 0.4rem;
    position: relative;
}

    .recommendations-repeater-footer-badge::before {
        animation: recommendations-border-rotate 3s linear infinite;
        background: conic-gradient(from var(--recommendations-border-angle), #dae343, #00aeec, #dae343);
        border-radius: inherit;
        content: '';
        inset: 0;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 1.5px;
        position: absolute;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
    }

@media only screen and (max-width: 1279px) {
    .recommendations-repeater {
        --recommendations-page-size: 4;
    }
}

@media only screen and (max-width: 899px) {
    .recommendations-repeater {
        --recommendations-page-size: 3;
    }
}

@media only screen and (max-width: 768px) {
    .recommendations-repeater {
        --recommendations-page-size: 2;
    }
}
/* CSS Document *//* ==================== 01-CC-Brand.css ======================================
   THE RESKIN SURFACE. This is the file you fill in to make a new client.

   It loads first. Everything after it - 02's derived ramps, 03-08's component
   tokens, the homepage stripes, the PLP and PDP - reads from here. Nothing here
   reads from anywhere else, which is what makes it safe to rewrite wholesale.

   FOUR BLOCKS, in the order you fill them:
     TYPE ROLES   which font file does which job
     BRAND        the raw colour, radius and button values
     COPY         every word the stylesheets write
     SWITCHES     choices between known options (only the differences)

   Lines tagged with a SET THIS marker are placeholders and will look wrong until
   replaced. Everything else is a sane default you may leave alone. Delete the
   marker once you have set the values under it - that is how you signal the
   decision was made rather than skipped.

   (This paragraph deliberately does not reproduce the marker exactly. Lint
   matches the arrowed form, and prose that spelled it out made the check fire on
   its own instructions, so a correctly filled file could never pass.)

   RULES
   - Raw values only. No selectors, no rules. If you need a rule, it belongs in
     99-CC-Custom.css, and read that file's header first.
   - Never hardcode a colour, radius, shadow or font size anywhere else. If a
     value is missing, add a token to the component that owns it, not here.
   - tools/lint.ps1 fails while any SET THIS marker remains.

   WHY EVERY BLOCK BELOW USES `:root:root`, NOT `:root`
   This file loads FIRST (01), and the component files that declare a token's
   default load AFTER it (03 nav, 05 carousels). Two `:root` declarations of the
   same token have identical specificity, so the LATER one wins - which means a
   plain `:root` here would be silently overridden by the very default it is
   meant to replace. Thirteen switches shipped inert that way before this was
   caught, each one a real visual regression that no error message reported.

   `:root:root` is (0,2,0) and beats a component's `:root` at (0,1,0) regardless
   of load order, so the reskin surface wins by construction. It is deliberately
   the ONE place in the kit that plays a specificity trick, and it is confined to
   token declarations.

   It does not disturb the nav state machinery: the Solid State and
   transparent-over-hero blocks in 03 are body-level selectors at (0,4,1) and
   above, so they still re-point nav tokens per state exactly as before.

   Keep `:root:root` on any block you add. lint.ps1 checks for it.
   =========================================================================== */


/* ===========================================================================
   1. TYPE ROLES
   ---------------------------------------------------------------------------
   The four (optionally five) typographic jobs. Every rule in the kit names a
   ROLE, never a font, so a reskin repoints a role here and nothing else is
   edited. The slots themselves are declared in 02 and map to files in /font/.

     --font-body     running text, inputs, CTA labels
     --font-heading  semantic headings only - the h1-h6 rule in 02, nothing else
     --font-bold     bold UI emphasis: nav links, prices, stock and form labels,
                     button text, facet headers, banner and section titles
     --font-display  the editorial face - big stripe statements, feature titles
     --font-accent   optional fifth face; leave pointed at body if unused

   --font-heading AND --font-bold ARE A SPLIT OF ONE OLD ROLE.
   --font-bold used to serve both, which meant a regular-weight interface was
   not expressible: dropping the weight took the headings with it. The h1-h6
   rule in 02 now names --font-heading and the other 30 rules keep --font-bold,
   so the two move independently. 02 defaults --font-heading to var(--font-bold),
   which is byte-identical to the old behaviour, so a site whose 01 predates the
   token needs no edit.

   THIS KIT SHIPS THE SPLIT SET: --font-bold points at the BODY face, so every
   emphasis use above renders regular, and only headings carry weight. Point
   --font-bold back at 'citrfontbold' for the older look where labels, prices and
   nav links are bold too.

   WHAT THIS DOES NOT REACH. The platform's own stylesheets (Modules/CSS/**,
   citr-*.css at the site root, ~186 declarations) name `citrfontreg` and
   `citrfontbold` LITERALLY. Those rules are outside this tree and cannot be
   repointed from here, so platform-rendered bold text - basket, checkout,
   account pages - stays bold no matter what these tokens say. Repointing
   --font-bold splits our typography from the platform's on purpose; on pages the
   platform styles heavily that split is visible.

   To go single-weight EVERYWHERE, including those 186 declarations, do it in the
   assets instead: ship the regular face as font/bold.* as well as font/body.*,
   which makes the `citrfontbold` slot itself regular. Then leave --font-bold on
   'citrfontbold' and point --font-heading at var(--font-display), because the
   bold slot no longer has any weight to give a heading.

   HARD CONSTRAINT - font/body.* and font/bold.* are NOT optional.
   Both slots must always contain a real font file, whatever the roles above say,
   or platform-styled text loses its face entirely.

   `citrfontboldalt` (display) and `citrfontaccent` are ours alone - no platform
   rule names them, so those slots are genuinely optional.

   A client with one text face for both body and bold ships that file twice, as
   font/body.* and font/bold.*. The duplication is required, not waste.
   =========================================================================== */
/* THIS CLIENT: Inter Tight 400 (body) runs text, inputs, nav and links;
   Inter Tight 500 (bold) is the label weight - buttons and the platform's
   ~186 citrfontbold declarations. Cormorant Garamond 400 (display) carries
   section headings and tiles; Cormorant 300 (accent) carries the big light
   statements - hero, feature banner, shop the look. Both Cormorant slots get a
   TRUE italic, and body gets a 300 face, as extra @font-face rules in 99:
   the design italicises one word of most headings and sets running copy at
   300. */
:root:root {
    --font-body:    'citrfontreg';
    --font-heading: var(--font-display);
    --font-bold:    'citrfontbold';
    --font-display: 'citrfontboldalt';
    --font-accent:  'citrfontaccent';
}


/* ===========================================================================
   2. BRAND
   ---------------------------------------------------------------------------
   Raw values. 02-CC-Global.css derives shade, opacity, border, overlay and
   shadow ramps from these with oklch(), so you set a handful of colours and the
   whole system follows. Do not add derived values here.
   =========================================================================== */
:root:root {
    /* Core palette. Navy is the brand: the offers bar, the filled button, the
       link hover. Ink is text. Sale red is the nav's Sale item only.
       Contrast: White on Navy 13.4:1, Ink on White 17.9:1, Sale on White
       5.6:1, Slate on White 5.9:1 and on Mist 5.4:1. */
    --brand: #193050;
    --brand-dark: var(--brand);
    --brand-accent: #193050;
    --brand-link: #193050;
    --brand-focus: #0E1D33;
    --sale: #C62828;

    /* Ink on brand surfaces */
    --text-on-brand: #FFFFFF;
    --text-on-accent: #FFFFFF;

    /* Canvas and ink. Raised is the design's Mist panel (#F4F5F7): product
       image wells, brand tiles, the Ludlow text panel. */
    --background: #FFFFFF;
    --background-raised: #F4F5F7;
    --text: #14181F;
    --text-inverse: #FFFFFF;

    /* Geometry. Square everywhere; the search field is the one pill. */
    --global-radius: 0;
    --global-innerRadius: 0;
    --global-border: 1px solid var(--skin-line);

    /* CTA type ramp - the design's "View all": Navy fill, White Inter Tight 500
       12px uppercase at 1.6px tracking, 48px tall, 32px side padding. Hover
       darkens and never resizes. */
    --global-buttonSize: var(--skin-fs-12);
    --global-buttonFontFamily: var(--font-bold);
    --global-buttonLetterSpacing: var(--skin-trackButton);
    --global-buttonLineHeight: 1.2;
    --global-buttonTextTransform: uppercase;
    --global-buttonColor: var(--text-on-brand);
    --global-buttonBorder: 1px solid var(--brand);
    --global-buttonRadius: 0;
    --global-buttonBackground: var(--brand);
    --global-buttonPadding: 1.05rem 2rem;
    --global-buttonBackgroundHover: var(--brand-focus);
    --global-buttonColorHover: var(--text-on-brand);
    --global-buttonBorderHover: 1px solid var(--brand-focus);
    --global-buttonPaddingHover: var(--global-buttonPadding);
    --global-buttonRadiusHover: 0;
    --global-buttonTransition: var(--skin-transition);

    /* Add-to-bag: the same Navy primary */
    --global-addToCart-background: var(--brand-accent);
    --global-addToCart-border: none;
    --global-addToCart-color: var(--text-on-accent);
    --global-addToCart-backgroundHover: var(--brand-focus);
    --global-addToCart-borderHover: none;
    --global-addToCart-colorHover: var(--text-on-accent);

    /* ---- Nav bar: SOLID state ------------------------------------------
       INERT: this client does not opt in to cl-nav-over-hero. The bar is
       solid White on every page, so these stay at the kit values and are
       never read. Values must name RAW colours, never var(--navLinks). */
    --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);
}


/* ===========================================================================
   2b. CLIENT PALETTE AND SCALE (--skin-*)
   ---------------------------------------------------------------------------
   Everything the design uses that has no kit token. CC-Home and 99 read only
   these and the kit tokens, never a literal.
   =========================================================================== */
:root:root {
    /* Neutrals */
    --skin-white: #FFFFFF;
    --skin-slate: #5A6676;          /* secondary text, captions; 5.9:1 on White */
    --skin-line: #E4E7EB;           /* hairlines, bordered arrow buttons */
    --skin-lineStrong: #C3C9D1;     /* the search pill and add buttons */
    --skin-well: #E8EBEF;           /* image ground while a photo loads */
    --skin-bullet: #788698;         /* offers-bar separator, on Navy */
    --skin-navySoft: #3A5070;       /* feature banner ground while it loads */

    /* Overlays: Ink at the design's three strengths, flat, no gradient */
    --skin-scrimHero: rgb(20 24 31 / 0.28);
    --skin-scrimBanner: rgb(20 24 31 / 0.3);
    --skin-scrimTile: rgba(20, 24, 31, 0.4);
    --skin-whiteHalf: rgb(255 255 255 / 0.45);   /* inactive hero marker */

    /* Faces, by job */
    --skin-font-sans: var(--font-body);
    --skin-font-label: var(--font-bold);
    --skin-font-serif: var(--font-display);
    --skin-font-serifLight: var(--font-accent);

    /* Type scale (design px / 16). Mobile -> desktop where the design gives
       two sizes. */
    --skin-fs-10: 0.625rem;
    --skin-fs-11: 0.6875rem;
    --skin-fs-12: 0.75rem;
    --skin-fs-13: 0.8125rem;
    --skin-fs-14: 0.875rem;
    --skin-fs-brand: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);    /* brand tile names 20 -> 24 */
    --skin-fs-tile: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);     /* category tiles 20 -> 24 */
    --skin-fs-section: clamp(1.5rem, 1.4rem + 0.35vw, 1.75rem);   /* section headings 24 -> 28 */
    --skin-fs-feature: clamp(1.75rem, 1.65rem + 0.35vw, 2rem);    /* banner, shop the look 28 -> 32 */
    --skin-fs-hero: clamp(2rem, 1.75rem + 0.7vw, 2.5rem);         /* hero 32 -> 40 */

    /* Weight for running copy: 99 declares a 300 face of the body slot */
    --skin-weightLight: 300;

    /* Tracking */
    --skin-trackBody: 0.02em;    /* the design's 0.32px on 16px */
    --skin-trackNav: 0.1em;      /* nav, 1.2px on 12px */
    --skin-trackButton: 0.133em; /* buttons, 1.6px on 12px */
    --skin-trackHero: 0.025em;   /* uppercase hero, 1px on 40px */

    /* Geometry and rhythm */
    --skin-radiusRound: 999px;
    --skin-touch: 2.75rem;                              /* 44px targets */
    --skin-sectionY: clamp(3.5rem, 3.1rem + 1.2vw, 4.5rem); /* 56 -> 72 between sections */
    --skin-tilesTop: clamp(1.75rem, 1.5rem + 0.8vw, 2.5rem); /* 28 -> 40 above the tiles */
    --skin-headerGap: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem); /* 20 -> 28 heading row to content */
    --skin-tileGap: 0.75rem;                            /* 12px */
    --skin-cardGap: 1rem;                               /* 16px product cards */
    --skin-bannerHeight: clamp(30rem, 46vw, 41.25rem);  /* feature banner 480 -> 660 */
    --skin-lookMinHeight: 40rem;                        /* shop the look photo, 640px */
    --skin-brandTile: 8.75rem;                          /* brand tiles 140px tall */
    --skin-textMeasure: 37.5rem;                        /* the SEO block, 600px */
    --skin-mobileBar: 64px;                             /* mobile bar row */
    --skin-searchMobile: 44px;                          /* mobile search pill */
    --skin-transition: 0.2s ease;

    /* The design's chevrons, 1.2px stroke, as a MASK for 05's arrow glyph so
       they take --splideArrowColor. Inline: a referenced .svg does not
       display on iPhone. Drawn pointing right; 05 mirrors it for prev. */
    --skin-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
    /* The shop-the-look add button's plus, 1.6px stroke, also a mask */
    --skin-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");

    /* PDP (product page design, 2026-11-04) */
    --skin-stock: #2E7D4F;                              /* "In stock" + its dot; 5.2:1 on White */
    --skin-pdpGap: clamp(2.5rem, 1.5rem + 3vw, 4rem);   /* gallery to details, 40 -> 64 */
    --skin-pdpPanel: 32.5rem;                           /* details column, 520px */
    --skin-pdpStickyTop: 100px;                         /* details column pins under the bar */
    --skin-fs-pdpTitle: clamp(1.75rem, 1.5rem + 0.7vw, 2.25rem); /* product name 28 -> 36 */

    /* CC-detail's own switches (it declares them on :root, so :root:root wins) */
    --detail-pdpTopBackground: var(--background);       /* White page, not a raised band */
    --detail-titleColor: var(--text);
    --detail-nameSize: var(--skin-fs-pdpTitle);
    --detail-priceSize: 1.25rem;                        /* 20px */
    --detail-textSize: var(--skin-fs-13);
    --detail-brandBadge-background: transparent;        /* brand is a plain Slate link */
    --detail-brandBadge-color: var(--skin-slate);
    --detail-brandBadge-size: var(--skin-fs-12);
    /* The design's 1.4px line icons for the "Why buy" list, as MASKS (painted
       Navy by 99): star = rewards, van = delivery, card = Klarna, tag = Star
       Buys / coupons, bubble = talk to us */
    --skin-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M12 3l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.6 6.7 19.5l1.1-6L3.4 9.3l6-.8z'/%3E%3C/svg%3E");
    --skin-icon-van: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
    --skin-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='6' width='18' height='12'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");
    --skin-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
    --skin-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E");
    --skin-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M4 10l8-6 8 6v10H4zM10 20v-6h4v6'/%3E%3C/svg%3E");
}


/* ===========================================================================
   3. COPY
   ---------------------------------------------------------------------------
   Every word the CSS puts on the page - strings the STYLESHEET writes, not
   content the client edits in the back office. Each consumer reads
   var(--copy-x, "<neutral default>").
   =========================================================================== */
:root:root {

    /* Footer newsletter - platform-emitted, read by 06. The design's words. */
    --copy-newsletterTitle: "Stay in the know";
    --copy-newsletterBody: "Be the first to hear about new arrivals and members-only offers.";

    /* Homepage stripes - statement carries no eyebrow; no signature line */
    --copy-statementEyebrow: "";
    --copy-signature: none;

    /* PDP - platform-emitted product page furniture */
    --copy-otherColours: "Colour";   /* the design's label above the swatches */
    --copy-rrp: "";                   /* the design shows the was-price struck through, no prefix */
    --copy-pdpDetails: "The details"; /* heading over the long description (99) */
    --copy-saleBadge: "Sale";         /* badge on range / related cards (99) */

    /* PLP - platform-emitted listing furniture and stock states. The design
       says "bag", not "cart". */
    --copy-addToCart: "Add to bag";
    --copy-stockNotification: "Stock Notification";
    --copy-specialOrder: "Special Order";
    --copy-comingSoon: "Coming Soon";
    --copy-search: "Search";
}


/* ===========================================================================
   4. SWITCHES
   ---------------------------------------------------------------------------
   Only differences from the framework defaults. Defaults live with the
   component that owns them - 03 for the bar, 05 for carousels, 06 for the
   footer.
   =========================================================================== */
:root:root {

    /* --- Page rhythm (defaults in 02) ------------------------------------ */

    /* The design's side inset: 16px on a phone, 40px at 1440. 02's default
       runs 20 -> 48. */
    --gutter: clamp(1rem, 2.8vw, 2.5rem);

    /* Edge to edge: no page container. */
    /* --container-maxWidth: 1440px; */

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

    /* A LIGHT solid bar: White, Ink links and icons, a 1px Line hairline
       instead of the accent seam, Navy hover. Never transparent. */
    --navBackground: var(--background);
    --navIcons: var(--text);
    --navLinks: var(--text);
    --navLinks-hover: var(--brand);
    --navBorderBottom: 1px solid var(--skin-line);
    --mobileNavBackground: var(--background);
    --mobileNavLinkColor: var(--text);
    --mobileHamburgerColor: var(--text);
    --dropdownAreaLinks: var(--text);
    --dropdownAreaTitle: var(--text);

    /* Nav links: Inter Tight 400, 12px, uppercase, 1.2px tracking; the
       mobile menu's rows are 13px */
    --nav-fontSize: var(--skin-fs-12);
    --mobile-navLinkSize: var(--skin-fs-13);
    --navItemsFontFamily: var(--font-body);
    --navItemsLetterSpacing: var(--skin-trackNav);
    --navItemsTextTransform: uppercase;

    /* Bar geometry. The design's bar is 56px of logo in 12px padding, so
       80px rather than 03's 115; the body offset follows the token. The icon
       cluster is two 36px icons, so it is narrowed from 03's 250px, which is
       what lets the pinned search pill sit right beside it. --searchTop
       lifts the pill (it lives in the row under the bar) back up into the
       bar, centred. */
    --navBarHeight: 80px;
    --navIconsWidth: 5rem;
    --searchTop: -60px;

    /* Hover is the colour shift only - no underline device */
    --navUnderline-display: none;

    /* The Sale item is red TEXT, not 03's filled pill */
    --sale-color: var(--sale);
    --sale-background: transparent;
    --sale-border: 0;
    --sale-padding: 0;
    --sale-colorHover: var(--sale-dark);
    --sale-backgroundHover: transparent;
    --sale-borderHover: 0;
    --sale-paddingHover: 0;

    /* Platform CTA strip (TopSubBanner.ascx, banner 3) = the design's Navy
       offers bar: 32px, White 12px, one line per entry. 99 turns the row
       into the scrolling marquee and hides the entry icons. */
    --ctaBackground: var(--brand);
    --ctaBorderTop: 0;
    --ctaColor: var(--text-inverse);
    --ctaDescColor: var(--text-inverse);
    --ctaTitleFontFamily: var(--font-body);
    --ctaTitleFontSize: var(--skin-fs-12);
    --ctaFontSize: var(--skin-fs-12);
    --ctaPaddingBlock: 0.375rem;

    /* Exposed search, pinned right beside the icons: a 280px x 40px pill
       with a Strong Line border, glyph left. The MODE is the body class
       cl-search-exposed in default.aspx, AND 99 restates it for every page
       (the other templates are the platform's and carry no class).
       The pill is 280px from 1440 up and narrows to 160px by 1100 (144px
       floor) so the nine live nav items keep their room (99, Nav). */
    --searchMaxWidth: clamp(9rem, 35.3vw - 14.25rem, 17.5rem);
    --searchWidth: clamp(9rem, 35.3vw - 14.25rem, 17.5rem);
    --searchHeight: 40px;
    --searchRadius: var(--skin-radiusRound);
    --searchBorder: 1px solid var(--skin-lineStrong);
    --searchLeft: auto;
    --searchRight: calc(var(--navIconsWidth) + 0.5rem);
    --search-inputSize: var(--skin-fs-12);
    --searchText: var(--text);
    --searchIconColor: var(--skin-slate);
    --searchPlaceholderColor: var(--skin-slate);

    /* Brand assets. The wordmark is the design's PNG: one Navy colour, the
       horse a transparent knockout. It is painted as an IMAGE (the three
       lines below), so it keeps its Navy on the White bar. Bag, account and
       search are the design's 1.4px line icons, written INLINE: a referenced
       .svg does not display on iPhone. */
    --logo: url('/layout/generalLyout/logo.png');
    --logoMask: none;
    --logoImage: var(--logo);
    --logoInk: transparent;
    --logoWidth: clamp(6.6rem, 10.4vw, 9.4rem);   /* 40px tall on a phone, 56px at 1440 */
    --icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
    --icon-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    --navIconSize: 18px;

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

    /* Hairline dashes, 32px, square. The hero recolours them White in
       CC-Home. */
    --splidePaginationWidth: 2rem;
    --splidePaginationHeight: 1px;
    --splidePaginationRadius: 0;
    --splidePaginationWidthActive: 2rem;
    --splidePaginationBg: var(--skin-lineStrong);
    --splidePaginationActiveBg: var(--text);

    /* Arrows: a bare 1.2px chevron in a 44px box, no disc. The product and
       brand rails re-dress them as bordered squares in CC-Home. */
    --splideArrowSize: var(--skin-touch);
    --splideArrowBg: transparent;
    --splideArrowHoverBg: transparent;
    --splideArrowColor: var(--text);
    --splideArrowHoverColor: var(--brand);
    --splideArrowHoverOpacity: 1;
    --splideArrowGlyph: var(--skin-icon-chevron);
    --splideArrowGlyphSize: 50%;

    /* Hero stage, read by hero-fade: 780px at 1440 */
    --heroHeight: clamp(35rem, 54vw, 48.75rem);

    /* --- Footer (defaults in 06) ----------------------------------------- */

    /* A White footer under a Line hairline: Ink 14px column headings, Ink
       12px links, Slate small print. */
    --footer-background: var(--background);
    --footer-innerBackground: var(--background);
    --footer-text: var(--text);
    --footer-titles: var(--text);
    --footer-links: var(--text);
    --footer-linksHover: var(--brand);
    --footer-underlineColor: var(--skin-line);
    --footer-titleSize: var(--skin-fs-14);
    --footer-textSize: var(--skin-fs-12);
    --newsletter-inputBackground: var(--background);
    --newsletter-inputText: var(--text);
    --newsletter-inputPlaceholder: var(--skin-slate);
    --company-text: var(--skin-slate);
    --tagline-background: var(--background);
    --tagline-text: var(--skin-slate);
}
/* 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;
}
/* ======================= Start of global/banners.css ==================== */

.splide .bannerTxtCtr, .splide .bannerTxtCtr:hover {
    justify-content: flex-end;
    gap: 8px;
    background: radial-gradient(ellipse at 50% 100%, #00000054 0%, #273a6000 50%);
}

.splide .bannerTxtCtr > span {
    padding: 0;
    margin: 0;
    line-height: 120%;
	text-transform: uppercase !important;
    letter-spacing: 0;
        background: transparent;
}
.splide .bannerTxtCtr > span.bannerView  {
    padding: 8px 16px;
    border: 1px solid var(--color5);
    font-size: 11px;
    margin-top: 8px;
}

.splide .bannerTxtCtr > span.bannerTitle  {
	text-transform: uppercase !important;
    letter-spacing: -0.5px;
    font-weight: 700;
    order: -1;
}

.splide  .bannerTxtCtr {
    container-type: inline-size;
    container-name: banner;
    padding: 32px;
    text-wrap-style: balance;
}

.brands .bannerTxtCtr {
    display:none
}

.brands img {
    object-fit: contain;
}

@container banner (max-width: 350px) {
  .splide .bannerTxtCtr > span.bannerView {
    display:none
  }
}

.textUnder .splide__slide {
    background: var(--cg-color-1);
}

.textUnder  a {
    display: flex;
    flex-direction: column-reverse;
}

.textUnder  a .bannerView {
    background: transparent;
    color: var(--cg-color-3);
}

.textUnder  a:hover .bannerView {
    background: var(--cg-color-5);
    color: var(--cg-color-1);
}

.textUnder .bannerTxtCtr, .textUnder .bannerTxtCtr:hover  {
    position: relative;
    background: none;
    flex: 1;
}
.textUnder .splide__pagination {
    position: relative;
    border: 0;
    bottom: 0;
    padding: 16px;
}

.textUnder .is-active {
    background: var(--cg-color-1) !important;
    opacity: 1;
}

.textUnder .splide__pagination__page {
    opacity: 1;
    transform: scale(1) !important;
}

.textOver  a .bannerView {
    background: var(--cg-color-3) !important;
    color: var(--cg-color-1) !important;
    border: none !important;
}

.textOver  a:hover .bannerView {
    background: var(--cg-color-1) !important;
    color: var(--cg-color-3) !important;
}

.textLarge .bannerTitle  {
    font-size: clamp(1.7rem, 2.5vw, 3rem);
}        /* ==================== Navigation Variables ==================== */
:root {
    /* Navigation Typography */
    --nav-fontSize: var(--fontSize-sm);
    --dropdown-titleSize: var(--fontSize-base);
    --dropdown-linkSize: var(--fontSize-base);
    --login-titleSize: var(--fontSize-md);
    --login-linkSize: var(--fontSize-sm);
    --search-inputSize: var(--fontSize-base);
    --navPadding: 5px 20px;

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

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

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

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

         --navBorderBottom       the accent seam under the bar. Set to 0 where
                                 the bar (or a full-bleed hero beneath it)
                                 provides its own edge.
         --navItemsLetterSpacing tracking on the top-level nav links.
         --navItemsTextTransform case of those links. Leave `none` to let the
                                 CMS author's own capitalisation stand.
         --navUnderline-display  the underline-draw hover device on nav links.
                                 `none` disables it; hover feedback then comes
                                 from the --navLinks -> --navLinks-hover shift.
         --ctaStrip-display      the platform CTA strip above the bar
                                 (TopSubBanner.ascx). `none` hides it. It is
                                 applied to the strip's WRAPPER, not to
                                 .ctaContainer: the wrapper is what paints
                                 --ctaBackground, and hiding it takes the
                                 container inside it with it. One token, and
                                 .ctaContainer keeps its own flex layout for
                                 whenever the strip IS shown. */
    --navBorderBottom: 2px solid var(--brand-link-light);
    /* Nav link FACE. Defaults to the body face, which is what these inherited
       before the token existed on every site whose platform rules do not name
       one. Point it at --font-bold or --font-accent for a nav in a different
       voice from body copy. It exists because a site that needed this had no
       way to ask for it except by hardcoding a face name into this file. */
    --navItemsFontFamily: var(--font-body);
    --navItemsLetterSpacing: normal;
    --navItemsTextTransform: none;
    --navUnderline-display: block;
    --ctaStrip-display: block;

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

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

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

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

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

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

    /* Desktop bar height. The masthead's height, the page's top offset and
       the top of an open nav dropdown all read this, so the dropdown always
       hangs from the bar's bottom edge. It is measured from the top of the
       bar: the dropdown's containing block is .navIcons, which is fixed at
       top 0 inside the (transformed) masthead. cl-nav-2row re-points it at
       --nav2RowHeight. Mobile keeps its own offsets. */
    --navBarHeight: 115px;

    /* The platform's click-off layer (#body-wrapper-overlay) behind an open
       dropdown or account/search/basket panel. A click on it closes them
       all, so it must render; these only set how it looks. Defaults keep it
       invisible. A dim, e.g. var(--black-50) and blur(2px), is the
       platform's own look. */
    --navOverlayBackground: transparent;
    --navOverlayBlur: none;

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

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

    /* Masked brand assets -- see the Brand Assets section at the foot of this
       file. Every SVG here is INLINE, as a data URI, never a file path: a
       referenced .svg does not display on iPhone. lint.ps1 fails on any
       url(...) or src/href that points at an .svg file, anywhere in the tree.

       A client sets its own in 01-CC-Brand.css, as data URIs (or, for a
       raster wordmark, a .png path). Replacing a FILE under /layout/ does
       nothing: these used to be file paths, and on sites built before the
       change the client's art lives in those files - update-site.ps1 refuses
       to push this file to such a site until the art is inlined in its 01.

       The icon defaults are the kit's own glyphs. The logo default is a
       deliberately blank-looking bar, never another company's mark: 01 must
       set --logo, and lint fails until it does.

       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. */
    --navIconSize: 22px;
    --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='32' viewBox='0 0 160 32'%3E%3Crect y='12' width='160' height='8' fill='white'/%3E%3C/svg%3E");
    --icon-bag: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.979 5.978C16.7747 4.86263 16.1863 3.85403 15.3158 3.12734C14.4454 2.40065 13.3479 2.00178 12.214 2C11.0803 2.00202 9.98302 2.40099 9.11277 3.12766C8.24252 3.85433 7.65422 4.8628 7.45 5.978H3V22H21.328V5.978H16.979ZM4.739 20.262H19.589V7.716H4.74L4.739 20.262ZM12.214 3.739C13.624 3.739 14.804 4.689 15.184 5.978H9.244C9.43066 5.33391 9.82088 4.76759 10.3563 4.36379C10.8917 3.96 11.5434 3.74045 12.214 3.738V3.739Z' fill='white'/%3E%3C/svg%3E");
    --icon-account: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4021 3.897C13.3911 3.89806 14.3392 4.29138 15.0385 4.99066C15.7378 5.68994 16.1311 6.63807 16.1321 7.627C16.1311 8.61593 15.7378 9.56406 15.0385 10.2633C14.3392 10.9626 13.3911 11.3559 12.4021 11.357C11.4131 11.3559 10.4649 10.9627 9.76544 10.2634C9.066 9.56415 8.67246 8.61602 8.67113 7.627C8.67245 6.63815 9.06586 5.69018 9.76508 4.99095C10.4643 4.29173 11.4123 3.89832 12.4011 3.897M20.4311 14.032C19.2781 12.867 17.7801 12.182 15.9751 11.97C16.617 11.4428 17.1341 10.7799 17.489 10.0289C17.844 9.27795 18.0281 8.45764 18.0281 7.627C18.0263 6.13537 17.433 4.70535 16.3783 3.65051C15.3237 2.59567 13.8938 2.00212 12.4021 2C10.9102 2.00159 9.47972 2.59491 8.42464 3.6498C7.36956 4.7047 6.77599 6.13502 6.77413 7.627C6.77413 9.374 7.57413 10.937 8.82813 11.97C7.02313 12.182 5.52313 12.867 4.37013 14.032C1.99013 16.439 1.99813 21.842 2.00013 21.992L3.89713 21.973C3.89713 21.945 3.90313 17.191 5.72913 15.356C6.76413 14.316 8.21813 13.789 10.0521 13.789H14.7511C16.5841 13.789 18.0391 14.316 19.0731 15.356C20.8991 17.19 20.9061 21.954 20.9061 21.983L22.8021 22C22.8041 21.851 22.8131 16.439 20.4311 14.032Z' fill='white'/%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.548 17.187C8.78753 17.1851 7.0997 16.485 5.85486 15.2401C4.61002 13.9953 3.90985 12.3075 3.908 10.547C3.91012 8.7867 4.6104 7.09913 5.85521 5.8545C7.10002 4.60988 8.7877 3.90985 10.548 3.908C12.3085 3.90985 13.9963 4.61002 15.2411 5.85486C16.486 7.0997 17.1861 8.78753 17.188 10.548C17.1861 12.3085 16.486 13.9963 15.2411 15.2411C13.9963 16.486 12.3085 17.1851 10.548 17.187ZM17.177 15.934C18.4186 14.4137 19.0962 12.5108 19.095 10.548C19.095 5.834 15.26 2 10.548 2C5.835 2 2 5.834 2 10.548C2 15.26 5.835 19.095 10.548 19.095C12.4585 19.0945 14.3132 18.4505 15.813 17.267L20.546 22L21.896 20.651L17.177 15.934Z' fill='white'/%3E%3C/svg%3E");

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

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

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

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

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

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

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

    /* Search */
    --searchBackground: 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 - the USP strip; see the CTA Bar block for the anatomy.
       --ctaColor inks the entry title, --ctaDescColor the line under it, and
       --ctaFontSize sizes that line. --ctaDivider is a rule between entries
       (none by default; e.g. 1px solid var(--black-10)). */
    --ctaBackground: var(--background-raised);
    --ctaBorderTop: 2px solid var(--brand-accent);
    --ctaBorderBottom: 0;
    --ctaColor: var(--text);
    --ctaDescColor: var(--black-80);
    --ctaTitleFontFamily: var(--font-bold);
    --ctaTitleFontSize: var(--fontSize-md);
    --ctaFontSize: var(--fontSize-xs);
    --ctaIconSize: 1.5rem;
    --ctaIconGap: .875rem;
    --ctaPaddingBlock: .75rem;
    --ctaDivider: none;

    /* 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 (a fixed full-page
                      sibling of the page, see the rule below, so it CANNOT
                      be a nav ancestor) and html + 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);
}

/* ==================== Click-off Overlay ==================== */

/* The platform shows #body-wrapper-overlay (fixed, full page, z-index 9,
   under the z-index 100 masthead) whenever a dropdown or panel opens, and
   its click handler is what closes them (citr-home.js: clearAll). This was
   display:none, which left an open dropdown with no way to close it except
   clicking its own link again. Restyle it; never hide it. */
#body-wrapper-overlay.open-slide-menu {
    background: var(--navOverlayBackground);
    backdrop-filter: var(--navOverlayBlur);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (min-width: 1024px) {
    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        max-height: calc(100vh - var(--navBarHeight));
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    body.cl-nav-2row {
        padding-top: var(--nav2RowHeight) !important;
        /* so the dropdown hangs from the taller bar too */
        --navBarHeight: var(--nav2RowHeight);
    }
}



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

body {
    padding-top: var(--navBarHeight) !important;
}

/* Mobile
   Every rule down to the closing brace below is mobile-only. A stray `}`
   after .menu-icons-header used to close this block early, so the next four
   rules leaked to every width - most visibly the 103px body offset, which on
   desktop sat 12px short of the 115px bar and tucked the first stripe (and
   the platform CTA strip) under it. */
@media screen and (max-width: 1024px) {
    .menu-icons-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--navIconsGap);
    }

    .logoContainer {
        width: auto !important;
    }

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

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

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

    .ctrNavigation {
        top: 50px !important;
    }
}

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

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

    .wrapper.masthead {
        height: var(--navBarHeight);
    }

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

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

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

    /* From the top of the bar (see --navBarHeight), so it opens at the bar's
       bottom edge. It was a literal 42px, which on a 115px bar opened over
       the links themselves. */
    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: var(--navBarHeight);
    }

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

}

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

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

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

.logoContainer {
    width: var(--logoWidth) !important;
    padding: 0px
}

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

/* The platform CTA strip (TopSubBanner.ascx, banner collection 3), drawn as
   a USP bar: one row of entries in equal columns, each an icon beside a title
   and a one-line description. Per entry: ImagePath = the icon, Title = the
   bold line, Description = the line under it, NavigateLink = where it goes.
   NavigateLinkText is not shown.

   The icon is the entry's back-office image, painted as uploaded - so upload
   it in the colour the bar wants (a transparent PNG, ~48px square). The
   control drops any entry without an ImagePath, so every entry needs one.

   The control is the maintained BannerCollectionDisplayGrid, so the markup is
   cc-banner__*. These rules are scoped under .ctaContainer to out-rank 04's
   foundation (absolute body, cover image, gradient), which would otherwise
   draw each entry as a photo banner.

   Under 640px the row keeps its anatomy and swipes sideways, one entry per
   snap, with the next one peeking. */

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

.wrapper:has(.ctaContainer) {
    display: var(--ctaStrip-display);
    background: var(--ctaBackground);
    border-top: var(--ctaBorderTop);
    border-bottom: var(--ctaBorderBottom);
}

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;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

div[id*="CTA_bannerCollectionPanel"]::-webkit-scrollbar {
    display: none;
}

/* Equal columns while the row fits; min-width stops an entry wrapping, so a
   row that does not fit scrolls from its start instead of squeezing. */
.ctaContainer .cc-banner {
    flex: 1 1 0;
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ctaIconGap);
    padding: var(--ctaPaddingBlock) 1rem;
    border-left: var(--ctaDivider);
    border-radius: 0;
    overflow: visible;
    scroll-snap-align: start;
}

.ctaContainer .cc-banner:first-child {
    border-left: none;
}

.ctaContainer .cc-banner__img {
    flex: 0 0 var(--ctaIconSize);
    width: var(--ctaIconSize);
    height: var(--ctaIconSize);
}

.ctaContainer .cc-banner__img img {
    object-fit: contain;
    transition: none;
}

.ctaContainer .cc-banner__body {
    position: static;
    inset: auto;
    padding: 0;
    gap: 0;
    background: none;
    justify-content: center;
}

.ctaContainer .text-wrap {
    gap: .125rem;
    align-items: flex-start;
}

.ctaContainer .cc-banner__title {
    font-family: var(--ctaTitleFontFamily);
    font-size: var(--ctaTitleFontSize);
    line-height: 1.2;
    color: var(--ctaColor);
    text-underline-offset: .2em;
}

.ctaContainer .cc-banner__desc {
    font-size: var(--ctaFontSize);
    line-height: 1.3;
    color: var(--ctaDescColor);
    opacity: 1;
}

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

.ctaContainer .cc-banner:hover .cc-banner__title {
    text-decoration: underline;
}

@media screen and (max-width: 639px) {
    .ctaContainer .cc-banner {
        flex: 0 0 80%;
        min-width: 0;
        justify-content: flex-start;
    }
}

/* ==================== 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 artwork differs. 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 artwork and no edit here.

   To reskin: set the tokens (--logo, --icon-bag, --icon-account,
   --icon-search) in 01-CC-Brand.css. An SVG goes in INLINE, as a data URI -
   a referenced .svg does not display on iPhone, and lint fails on one. A
   raster wordmark may be a .png path under /layout/generalLyout/.
   =========================================================================== */

/* --- Wordmark ---
   The platform <img> is left in flow so the container keeps exactly the box it
   already had (sized in the Logo section above); only the PAINT changes.

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

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

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

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

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

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

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

/* The same platform can also paint a logo as a BACKGROUND on the .logo link
   inside the container (`.logoContainer > .logo.navOption`), at some
   breakpoints only - on mobile it showed as a second wordmark beside this
   one. The link is kept, since it is the click target; only its paint goes.
   This file owns the wordmark, so nothing the platform paints in the box is
   ever wanted, in either mode.

   (0,3,0) rather than (0,2,0): the platform's own rule is outside this tree
   and its weight is unknown, so this matches the masthead scoping used
   throughout the file instead of relying on load order. */
.wrapper.masthead .logoContainer .logo {
    background-image: none;
}

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

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

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

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

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

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

   Search needs both selectors: the .menu-icons-header toggle is hidden
   elsewhere in this file, and the visible glyph is the
   <span class="icon-search"> inside #search. Everything is scoped to the
   masthead / #search, so the PDP's .cc-lookup-service-lookupbutton.icon-search
   keeps the platform glyph. */
.wrapper.masthead [data-link="basket"]::before,
.wrapper.masthead [data-link="login"]::before,
.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    content: "";
    display: inline-block;
    width: var(--navIconSize);
    height: var(--navIconSize);
    vertical-align: middle;
    /* currentColor, NOT a --navSolid-* token: the toggle already gets
       `color: var(--navIcons)` from the Nav Icon rules above, and the Solid
       State block re-points --navIcons per state. Naming a state token here
       would pin the icons to ONE state and break transparent-over-hero. */
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.wrapper.masthead [data-link="basket"]::before {
    -webkit-mask-image: var(--icon-bag);
            mask-image: var(--icon-bag);
}

.wrapper.masthead [data-link="login"]::before {
    -webkit-mask-image: var(--icon-account);
            mask-image: var(--icon-account);
}

.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    -webkit-mask-image: var(--icon-search);
            mask-image: var(--icon-search);
}


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

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

   Interior pages never carry the class.

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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




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


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

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

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

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


/* cc-brand -- Brand Logo */

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

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

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


/* CC-HomepageTitles */

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

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

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

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

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


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


/* Scroll-in Animation */

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

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

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


/* Footer Width */

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

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

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

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

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

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

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

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


/* Inner footer column max width */

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


/* Main column ordering */

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

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

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

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

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

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


/* Social and Newsletter */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* Footer Column Links */

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

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

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

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


/* Contact and Opening Hours */

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

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

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

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

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

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

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


/* Payment Icons */

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

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


/* Tagline */

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


/* Footer: Mobile */

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

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

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

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

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

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

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

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

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


/* Footer Column Inner Flex */

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


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

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

.modular-footer-socials:after {
    content: "";
    display: block;
    height: 40px;
    width: 150px;
    /* var(--logo), not a hardcoded path. A literal here means a site whose
       wordmark is not at that exact filename gets someone else's mark, or
       nothing, from a FRAMEWORK file it must not edit. Three builds have now
       had to work around it in their client layer. */
    background: var(--logo) center center / contain no-repeat;
    order: -1;
}

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

/* Newsletter description text */
.modular-footer-newsletter---container:before {
    content: var(--copy-newsletterBody, "Sign up for news and offers.");
    display: block;
    margin-bottom: 1rem;
    opacity: .8;
}
/* ==================== 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 and look .... 03, --ctaStrip-display, --cta*
     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: Hatton Park Saddlery (HAPS). A White canvas with Ink type and
   one Navy brand colour; square corners, hairline Line rules, no shadows.
   Cormorant Garamond for every heading, light and often with one italic
   word; Inter Tight for everything functional - 12px uppercase-tracked nav,
   12px underlined text links, 300-weight running copy. Photography leads and
   sits under flat Ink scrims. Source of truth: the "Homepage (applied)"
   design export, 2026-11-04 (kit briefs/HAPS.md).

   PROMOTION CANDIDATES
     - the offers-bar MARQUEE (below, Nav): the CTA strip as a scrolling
       ticker rather than a row of USP columns. First occurrence - leave it
       here until a second client asks for it.
     - extra faces for a slot (Fonts): a light body weight and true italics.
       MRGL declared a fifth face in its 99 too, so a "slot weights" mechanism
       in 02 is now on its second sighting.
   =========================================================================== */


/* ==================== Fonts (02 additions) ==================== */

/* Extra faces for slots 02 already declares. Same family names, so every
   rule that names the role picks these up by weight or style alone:
     citrfontreg 300      running copy (--skin-weightLight)
     citrfontboldalt ital the italic word in a display heading
     citrfontaccent ital  the italic word in a light heading
   Static single-weight files (font/light.*, font/*-italic.*), like the slot
   files themselves. Without them the browser would fake an oblique. */
@font-face {
    font-family: 'citrfontreg';
    src: url('/sitespecific/customcontent/font/light.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'citrfontboldalt';
    src: url('/sitespecific/customcontent/font/display-italic.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/display-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'citrfontaccent';
    src: url('/sitespecific/customcontent/font/accent-italic.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/accent-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


/* ==================== Global ==================== */

body {
    letter-spacing: var(--skin-trackBody);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Respect reduced motion: the scroll reveal, image zooms and the offers
   marquee stop. Carousels are deliberately NOT listed - Splide handles
   reduced motion itself, and forcing transform or transition on its list
   pins or kills it (see Yester's 99 for the long version). */
@media (prefers-reduced-motion: reduce) {
    [data-animate] .cc-banner,
    .cc-banner__img img,
    .faf-product-image,
    div[id*="CTA_bannerCollectionPanel"] {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}


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

/* Desktop: wordmark, then the links running LEFT from it (03 centres them),
   then the search pill and the icons pinned right. The links stop short of
   the pill: it is absolutely positioned by 03 and would otherwise sit on top
   of the last items. Same three-class shape as 03's rules, later in the
   bundle. The 24px link gap is the design's 28 less 4: the live nav has nine
   items to the design's eight. */
@media screen and (min-width: 1024px) {
    .wrapper.masthead > .grid,
    .wrapper.masthead .container,
    .wrapper.masthead .container > .col-1 {
        height: 100%;
    }

    /* 40px between wordmark, links and icons at 1440, as designed, easing
       to 24px by 1120 */
    .wrapper.masthead .navIcons {
        align-items: center;
        height: 100%;
        padding-inline: 1.5rem;
        gap: clamp(1.5rem, 5vw - 2rem, 2.5rem);
    }

    /* 03 sizes the box from --logoWidth, but as a flex item it still shrank
       to make room for the nine-item nav (87px of a 150px wordmark). */
    .wrapper.masthead .logoContainer {
        flex: 0 0 auto;
        align-self: stretch;
    }

    .wrapper.masthead #navi {
        flex: 1 1 auto;
        justify-content: flex-start;
        padding-inline: 0;
        margin-right: calc(var(--searchWidth) + 1rem);
    }

    /* 24px at 1440, easing to 16px by 1200 */
    .wrapper.masthead #navi .CSSFacetNavModules {
        justify-content: flex-start;
        gap: 0 clamp(1rem, 3vw - 1.2rem, 1.5rem);
    }

    /* A label never breaks inside itself ("Stable & / Yard" stacked into
       three lines once the bar ran short). Instead the bands below buy
       the width back step by step. */
    .wrapper.masthead .NodeLevel0 > a {
        white-space: nowrap;
    }
}

/* Narrower desktops. Nine live labels (the design has eight) only fit
   beside a 280px pill from ~1440 up, so the bar tightens in steps. Bands
   are MEDIA widths, which include a ~17px scrollbar - measured on the live
   DOM with the scrollbar showing, 0px overflow at every width 1030-1920. */
@media screen and (min-width: 1024px) and (max-width: 1400px) {
    :root:root {
        --navItemsLetterSpacing: 0.05em;
    }
}

/* small laptops: 11px labels, light tracking, 10px gaps */
@media screen and (min-width: 1024px) and (max-width: 1320px) {
    :root:root {
        --nav-fontSize: 11px;
        --navItemsLetterSpacing: 0.02em;
    }

    .wrapper.masthead #navi .CSSFacetNavModules {
        gap: 0 0.625rem;
    }

    .wrapper.masthead .navIcons {
        padding-inline: 1rem;
    }
}

/* the last stretch above the 1024 hamburger switch: no tracking, tighter
   gaps between wordmark, links and icons. :root:root because 01 declares
   its tokens there - a bare :root here loses. */
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    :root:root {
        --navItemsLetterSpacing: 0;
    }

    .wrapper.masthead #navi .CSSFacetNavModules {
        gap: 0 0.5rem;
    }

    .wrapper.masthead .navIcons {
        gap: 1rem;
    }
}

/* Exposed search on EVERY page. 03 gates it on <body class="cl-search-
   exposed">, but only default.aspx is ours to give that class: the PLP,
   PDP, basket and account templates are the platform's. Without it the bar
   falls back to 03's toggle (magnifier in the cluster, no pill) and the
   extra icon squeezes the links. These are 03's exposed-search rules,
   restated through .wrapper.masthead (on every page) at equal or higher
   specificity than 03's body-class versions. */
.wrapper.masthead [data-link="search"],
.wrapper.masthead .icon-search:not(#search .icon-search) {
    display: none !important;
}

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

.wrapper.masthead #TopBanner1_clSearch1_containerSearch {
    display: flex;
    justify-content: center;
    max-width: var(--searchMaxWidth);
    width: 100%;
    position: relative;
}

.wrapper.masthead .srchCtr.tbcnt .icon-search {
    width: var(--searchHeight);
    height: var(--searchHeight);
    line-height: var(--searchHeight);
    min-width: var(--searchHeight);
    pointer-events: none;
    top: -1px;
}

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

@media screen and (max-width: 1024px) {
    body .wrapper.masthead #search.srchCtr,
    .wrapper.masthead #TopBanner1_clSearch1_containerSearch {
        max-width: none;
    }
}

/* OLD-THEME GTM TAG. A Custom HTML tag in GTM-NNTZQBB (the old theme's)
   still fires on every page. Its script MOVES #search into
   .menu-icons-header (adds .searchActive) and its <style> - injected into
   <body>, so it beats equal-specificity rules here - widens the cluster to
   400px, every icon to 75px, adds 16px right margins to the links, moves the
   account icon last, squares and right-aligns the search glyph, and floats
   the basket count off the bag. Result: the bar spilt off the right edge,
   pill hidden (03 lifts an absolute #search 60px up), count adrift.
   THE REAL FIX IS PAUSING THAT TAG. Until then the rules below cope with
   #search in either place; with the tag gone, the :has() rules simply stop
   matching. */
.wrapper.masthead .navIcons [class*="icon-"] {
    min-width: 0;
}

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

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

.wrapper.masthead #search .icon-search {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: var(--searchHeight);
    height: var(--searchHeight);
    line-height: var(--searchHeight);
    min-width: var(--searchHeight);
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--searchIconColor);
}

/* The count sits on the bag's top-right shoulder (the glyph is centred in
   the 42px toggle). 08 is not deployed live, so this is the whole rule. */
.wrapper.masthead [data-link="basket"] {
    position: relative;
}

.wrapper.masthead [data-link="basket"] .basketPip {
    position: absolute;
    top: calc(50% - 1.1rem);
    left: calc(50% + 0.2rem);
    right: auto;
    bottom: auto;
    transform: none;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    text-align: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--text-inverse);
}

@media screen and (min-width: 1024px) {
    .wrapper.masthead #navi .NodeLevel0 {
        margin: 0;
    }

    /* #search moved into the cluster: in flow, the cluster sized by its
       contents, and the links no longer leave room for an absolute pill */
    .wrapper.masthead .navIcons .menu-icons-header:has(> #search) {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        gap: 0.25rem;
        align-items: center;
    }

    .wrapper.masthead .navIcons:has(.menu-icons-header > #search) #navi {
        margin-right: 0;
    }

    .wrapper.masthead .menu-icons-header > #search.srchCtr {
        display: flex !important;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: var(--searchWidth);
        max-width: none;
        min-width: 0;
        margin: 0 0.5rem 0 0;
        padding: 0;
        opacity: 1;
    }
}

/* Phone and tablet with #search moved into the cluster: account and bag
   back to the right (the tag sets the cluster 100% wide, flex-start, and
   the bag 25% !important), and the field hung as the full-width row under
   the bar, where 03 puts it when it is left in .menuOptions. .menuOptions
   (empty now, still in flow) holds the row's height so the bar's White and
   its hairline cover it. */
@media screen and (max-width: 1024px) {
    .wrapper.masthead .navIcons .menu-icons-header:has(> #search) {
        width: auto;
        min-width: 0;
        max-width: none;
        justify-content: flex-end;
    }

    .wrapper.masthead .menu-icons-header > [data-link="basket"] {
        width: auto !important;
    }

    .wrapper.masthead:has(.menu-icons-header > #search) .menuOptions {
        min-height: calc(var(--searchHeight) + 10px);
    }

    .wrapper.masthead .menu-icons-header > #search.srchCtr {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: var(--navPadding);
        opacity: 1;
    }
}

/* The live nav's last item is "Sale & Outlet", so 03's Outlet button device
   (pushed to the far right, boxed) catches it. The design keeps Sale inline
   with the others as red text only (the colour is 03's --sale-* tokens, set
   in 01). Same selector as 03, later in the bundle. */
.wrapper.masthead .NodeLevel0[data-nodename*='Outlet'],
.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover {
    margin-left: 0;
    border: 0;
    padding: 0;
    background: transparent;
}

/* Phone and tablet: menu button left of the wordmark, account and bag
   right, the search pill full width on the row beneath (03's exposed mode). */
@media screen and (max-width: 1024px) {
    .wrapper.masthead .navIcons {
        position: relative;
    }

    /* margin, not padding: 03 paints the wordmark as the box's background,
       which starts in the padding area, so padding would not move it */
    .wrapper.masthead .logoContainer {
        margin-left: calc(var(--skin-touch) + 0.25rem);
    }

    /* the cluster stands down as a positioning context so the menu button
       anchors to the bar's left edge, not to the icons */
    .wrapper.masthead .menu-icons-header {
        position: static;
    }

    .wrapper.masthead .menu-icons-header > .icon-menu.mobile {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* The offers bar (platform CTA strip, banner 3) as the design's MARQUEE:
   one line of "Lead link rest of the line", separated by bullets, drifting
   right to left and pausing on hover. Colours and sizes are 03 tokens set in
   01; this is only the movement and the inline anatomy.

   The design loops a doubled list so the strip never shows a gap. The
   platform emits each entry once and the kit carries no per-strip JS, so
   this runs the single list from the right edge of the bar to fully off the
   left - a short empty stretch shows once per loop. Recorded as a departure
   in briefs/HAPS.md. The entry icons (ImagePath, still required or the
   control drops the entry) are hidden. */
.wrapper:has(.ctaContainer) {
    overflow: hidden;
}

.ctaContainer {
    overflow: hidden;
}

div[id*="CTA_bannerCollectionPanel"] {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    animation: skin-marquee 45s linear infinite;
}

.ctaContainer:hover div[id*="CTA_bannerCollectionPanel"] {
    animation-play-state: paused;
}

@keyframes skin-marquee {
    from { transform: translateX(100vw); }
    to   { transform: translateX(-100%); }
}

.ctaContainer .cc-banner,
.ctaContainer .cc-banner:first-child {
    flex: 0 0 auto;
    min-width: 0;
    gap: 1.75rem;
    padding: var(--ctaPaddingBlock) 0 var(--ctaPaddingBlock) 1.75rem;
    border: 0;
}

/* the bullet that separates entries */
.ctaContainer .cc-banner::after {
    content: "\2022";
    color: var(--skin-bullet);
    font-size: var(--ctaFontSize);
}

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

/* title then line, on one line: the title is the underlined lead */
.ctaContainer .text-wrap {
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
}

.ctaContainer .cc-banner__title {
    order: -1;
    line-height: 1.67;
    text-decoration: none;
    text-underline-offset: 3px;
}

.ctaContainer .cc-banner__desc {
    font-weight: var(--skin-weightLight);
    line-height: 1.67;
}

@media screen and (max-width: 639px) {
    .ctaContainer .cc-banner,
    .ctaContainer .cc-banner:first-child {
        flex: 0 0 auto;
        gap: 1.25rem;
        padding-left: 1.25rem;
    }
}

/* Seamless loop. TopSubBanner's script repeats and doubles the entries and
   adds .is-looped, so sliding exactly half the width lands on an identical
   frame - no gap, and the bar starts full rather than empty. The duration is
   set per page by the script from the entry count. Without the script the
   single-list fallback above still runs. */
div[id*="CTA_bannerCollectionPanel"].is-looped {
    animation: skin-marquee-loop var(--skin-marqueeDuration, 45s) linear infinite;
}

@keyframes skin-marquee-loop {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    div[id*="CTA_bannerCollectionPanel"],
    div[id*="CTA_bannerCollectionPanel"].is-looped {
        animation: none;
    }
}

/* Pinned under the nav. The masthead is position: fixed and the body is
   padded by its height, so the strip starts directly beneath it; sticky at
   that same offset keeps it there as the page scrolls. z-index sits above
   page content but under the masthead (100) and its open-menu overlay. */
.wrapper:has(.ctaContainer) {
    position: sticky;
    top: var(--navBarHeight);
    z-index: 90;
}

@media screen and (max-width: 1024px) {
    .wrapper:has(.ctaContainer) {
        top: 103px;   /* matches 03's mobile body offset */
    }
}

/* Empty collection (banner not set up yet): no bar at all, not a bare
   navy band. */
.wrapper:has(.ctaContainer):not(:has(.cc-banner)) {
    display: none;
}

/* Hand-over from the old announcements carousel (TopSubBanner, banner 1):
   once the marquee has entries, retire the carousel and the 30px spacer it
   pushes onto the next block. Delete with the carousel. */
.wrapper:has(.ctaContainer .cc-banner) ~ .subBannerSplide {
    display: none;
}

.wrapper:has(.ctaContainer .cc-banner) ~ .subBannerSplide + div {
    margin-top: 0;
}


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

/* none - chevron, dashes and arrow chrome are 01 token values; per-stripe
   placement is in CC-Home */


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

/* The design's footer is quiet: a hairline above, link columns with 14px
   Inter Tight headings (no rule under them), the newsletter at the end,
   small print in Slate. Colours and sizes are 06 tokens set in 01; these
   rules are the type and the furniture the design does not have. */
#modular-footer-wrapper {
    border-top: 1px solid var(--skin-line);
    font-family: var(--skin-font-sans);
}

/* --font-heading is Cormorant on this site; the design never sets Cormorant
   this small, so the column headings go back to Inter Tight. */
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
    font-family: var(--skin-font-sans);
    font-size: var(--footer-titleSize);
    font-weight: normal;
    letter-spacing: var(--skin-trackBody);
    text-transform: none;
    border: 0;
    margin-bottom: 0.625rem;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4::after {
    display: none;
}

#modular-footer-wrapper .modular-footer-retaillinks a,
#modular-footer-wrapper .modular-footer-retaillinks [class*="contact-address"] {
    font-size: var(--footer-textSize);
    font-weight: var(--skin-weightLight);
    line-height: 1.67;
    text-decoration: none;
}

/* 06 paints the wordmark at the head of the newsletter row; the design's
   footer carries no logo. */
.modular-footer-socials:after {
    display: none;
}

/* The platform's own opening-hours block. Its markup comes out malformed
   (Monday's <dt> closes its <dl> before the times), and the back office
   already carries the hours as a custom "Opening Times" link column, so the
   page showed them twice, once broken. Hidden; untick it in the back office
   and this rule can go. The selector repeats 06's `container-inner > div` chain, which sets
   display: flex and would otherwise out-rank it. */
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div.modular-footer-retaillinks---openinghours {
    display: none;
}

/* newsletter: a square field and a Navy button */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
    height: var(--skin-touch);
    border: 1px solid var(--skin-lineStrong) !important;
    font-family: var(--skin-font-sans);
    font-size: var(--skin-fs-12);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit,
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit:hover {
    height: var(--skin-touch);
    display: inline-flex;
    align-items: center;
    padding: 0 1.5rem;
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--text-on-brand);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    text-transform: uppercase;
    cursor: pointer;
}

#modular-footer-wrapper .modular-footer-citruslime---tagline,
#modular-footer-wrapper .modular-footer-citruslime---tagline a {
    font-size: var(--skin-fs-10);
    color: var(--skin-slate);
}


/* ==================== PLP / PDP (faf, detail overrides) ==================== */

/* PLP: none - it stays on the framework, driven by this client's tokens.

   PDP: the "Product page" design (desktop 1440 + mobile 390, 2026-11-04).
   Everything is scoped to #webdes_pdp, the platform's PDP wrapper: this file
   is site-wide, and on the PDP it loads BEFORE the platform's detail CSS and
   CC-detail (citr-pdp.css = global part, global/, detail part, detail/), so
   the id is also what lets these rules win.
   Three helper scripts in assets/ (loaded from TopSubBanner.ascx) do what CSS
   cannot: pdp-imageLayout (large tiles + brand filler tile + "Show more"),
   pdpAttributeButtons (size buttons for the platform's <select>) and
   pdpQtyStepper (- / + around the qty box). Those two draw their own buttons
   from this client's tokens.
   The "Why buy" list (#seconddetails) is built by the live site's own
   js/sitelocal.js; its open/close is styled here, not by the old theme. */

/* ---- page frame ---- */
#webdes_pdp {
    position: relative;
    padding-top: 3.25rem;                       /* room for the breadcrumb */
}
#webdes_pdp .productPageTop .container,
#webdes_pdp .productPageTop .maxInner {
    max-width: none;
    background: var(--background);
}
#webdes_pdp .productPageTop .maxInner {
    padding-inline: var(--gutter);
}
#webdes_pdp .grid.fixed.productPageTop,
#webdes_pdp .productPageTop .container,
#webdes_pdp .productPageTop .maxInner,
#webdes_pdp .productPageTop .zflex-w,
#webdes_pdp #prodInfoRight {
    overflow: visible !important;               /* sticky fails inside overflow:hidden */
}

/* breadcrumb: emitted at the very end of the page; drawn at the top */
#webdes_pdp #pdp_area2,
#webdes_pdp #pdp_area2 .grid,
#webdes_pdp #pdp_area2 .container,
#webdes_pdp #pdp_area2 .maxInner {
    position: static;
}
#webdes_pdp span.breadcrumbs {
    position: absolute;
    top: 1.25rem;
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
}
#webdes_pdp span.breadcrumbs #BreadcrumbPane {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
#webdes_pdp span.breadcrumbs a {
    padding: 0;
    opacity: 1;
    color: var(--skin-slate);
    text-decoration: none;
}
#webdes_pdp span.breadcrumbs a:hover { color: var(--text); }
/* the platform draws a chevron from a::before + a::after; the design has "/" */
#webdes_pdp span.breadcrumbs a::after,
#webdes_pdp span.breadcrumbs a:first-child::before { display: none; }
#webdes_pdp span.breadcrumbs a + a::before {
    content: "/";
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin-right: 0.5rem;
    background: none;
    border-radius: 0;
    transform: none;
    transition: none;
    color: var(--skin-slate);
}
#webdes_pdp span.breadcrumbs a:last-child { color: var(--text); }

/* not in the design */
#webdes_pdp #brand-logo-area,                   /* pdp-imageLayout still reads it for the filler tile */
#webdes_pdp .MIVicon,
#webdes_pdp .pdp-pips,
#webdes_pdp .pdp-pips-container,
#webdes_pdp #CustomerRewardPane,                /* the Why-buy list carries rewards */
#webdes_pdp #seconddetails > p.reasons,
#webdes_pdp .add-to-cart-area-dropdown-qty-label,
#webdes_pdp #detailMivThumb a[href*="#ModularShortDescription"],   /* a hidden "tile" the platform adds */
#webdes_pdp #cart-pills:empty {
    display: none !important;
}

/* ---- gallery: 2-up square tiles on Mist (desktop) ---- */
#webdes_pdp #detailMiv,
#webdes_pdp #detailMivThumb .col-thumbnail,
#webdes_pdp #pdpLogoTile {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0;
    padding: 0;
    flex: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--background-raised);
    border: 0;
    border-radius: 0;
    filter: none !important;
    cursor: zoom-in;
}
#webdes_pdp #detailMiv > a {
    display: block;
    width: 100%;
    height: 100%;
}
#webdes_pdp #detailMiv img,
#webdes_pdp #detailMivThumb .col-thumbnail img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain;
    mix-blend-mode: multiply;                   /* the photos' white pad takes the Mist */
    border-radius: 0;
}
#webdes_pdp #pdpLogoTile { cursor: default; }
#webdes_pdp #pdpLogoTile a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#webdes_pdp #pdpLogoTile img {
    max-width: 40%;
    max-height: 40%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
#webdes_pdp #detailMivThumb .col-thumbnail:focus-visible,
#webdes_pdp #detailMiv a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
#webdes_pdp #pdpShowMoreBtn {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 1rem 0 0;
    padding: 0;
    min-height: var(--skin-touch);
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--skin-fs-12);
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

@media screen and (min-width: 1024px) {
    #webdes_pdp .productPageTop .zflex-w:has(> #prodInfoLeft) {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start !important;
        gap: var(--skin-pdpGap);
    }
    #webdes_pdp #prodInfoLeft {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin: 0;
        border: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
        align-content: start;
    }
    #webdes_pdp #detailMivThumb {
        display: contents;
    }
    /* one image only: it spans both columns */
    #webdes_pdp #prodInfoLeft:not(:has(#detailMivThumb > .col-thumbnail:not([href*="#ModularShortDescription"]))) #detailMiv {
        grid-column: 1 / -1;
    }
    #webdes_pdp #prodInfoRight {
        flex: 0 1 var(--skin-pdpPanel);
        width: auto;
        max-width: var(--skin-pdpPanel);
        min-width: 0;
        position: sticky;
        top: var(--skin-pdpStickyTop);
        align-self: flex-start;
    }
}

/* phone + tablet: a swipe strip of full-width squares */
@media screen and (max-width: 1023px) {
    #webdes_pdp { padding-top: 2.75rem; }
    #webdes_pdp span.breadcrumbs {
        top: 0.75rem;
        font-size: var(--skin-fs-11);
    }
    #webdes_pdp .productPageTop .maxInner { padding-inline: 0; }
    #webdes_pdp .productPageTop .zflex-w:has(> #prodInfoLeft) {
        display: flex !important;
        flex-direction: column;
    }
    #webdes_pdp #prodInfoLeft {
        display: flex;
        width: 100%;
        gap: 2px;
        padding: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    #webdes_pdp #prodInfoLeft::-webkit-scrollbar { display: none; }
    #webdes_pdp #detailMivThumb {
        display: contents;
    }
    #webdes_pdp #detailMiv,
    #webdes_pdp #detailMivThumb .col-thumbnail {
        flex: 0 0 100% !important;
        scroll-snap-align: start;
    }
    #webdes_pdp #prodInfoRight {
        width: 100%;
        padding-inline: var(--gutter);
    }
}

/* ---- details column ---- */
#webdes_pdp #prodInfoRight #firstdetails {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
}
/* #prodInfoRight in each: CC-detail orders the short description and the
   colour picker with two ids and loads later */
#webdes_pdp #prodInfoRight #firstdetails > * { order: 20; }
#webdes_pdp #prodInfoRight #firstdetails > #Brand { order: 1; }
#webdes_pdp #prodInfoRight #firstdetails > h1 { order: 2; }
#webdes_pdp #prodInfoRight #firstdetails > .productPrices { order: 3; }
#webdes_pdp #prodInfoRight #firstdetails > klarna-placement { order: 4; }
#webdes_pdp #prodInfoRight #firstdetails > div[data-hideshow] { order: 5; }
#webdes_pdp #prodInfoRight #firstdetails > .productColourPicker { order: 6; }
#webdes_pdp #prodInfoRight #firstdetails > #cart-target { order: 7; }
#webdes_pdp #prodInfoRight #firstdetails > .zflex-ws:has(.productSize) { order: 8; }
#webdes_pdp #prodInfoRight #firstdetails > .cc-lookup-service-wrapper { order: 9; }

#webdes_pdp a#Brand {
    padding: 0;
    width: fit-content;
    font-family: var(--font-body);
    line-height: 1.25rem;
    text-underline-offset: 4px;
    text-decoration: underline;
}
#webdes_pdp h1#devProductName {
    margin: 0.75rem 0 0;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0;
}
#webdes_pdp #firstdetails > .productPrices { margin-top: 1rem; }
#webdes_pdp #firstdetails > .productPrices + .productPrices:not(:has(*:not(:empty))) { display: none; }
#webdes_pdp #firstdetails > .productPrices,
#webdes_pdp #firstdetails > .productPrices > div {
    justify-content: flex-start;
    text-align: left;
}
#webdes_pdp .productPriceBlock + div:has(span) {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.75rem;
}
#webdes_pdp span#productPrice {
    width: auto;
    padding: 0;
    font-family: var(--font-body);              /* the platform's .boldfont makes it bold */
    line-height: 1.75rem;
    text-align: left;
}
#webdes_pdp span#productPriceWas {
    padding: 0;
    font-size: var(--skin-fs-14);
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
    text-decoration: line-through;
}
#webdes_pdp span#productPriceDiscount {
    padding: 0.1875rem 0.375rem;
    font-size: var(--skin-fs-10);
    font-family: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
#webdes_pdp #firstdetails > klarna-placement { margin-top: 0.25rem; }

/* short description: the platform marks it data-hideshow="false" and CC-detail
   hides it; the design shows it under the price */
#webdes_pdp #prodInfoRight #firstdetails > div[data-hideshow="false"] {
    display: block !important;
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
    font-size: var(--skin-fs-13);
    line-height: 1.375rem;
    font-weight: var(--skin-weightLight);
}

/* colour picker: sibling-colour products, each its own photo */
#webdes_pdp #firstdetails .productColourPicker {
    margin: 1.75rem 0 0;
    padding: 0 !important;
    border: 0;
    background: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}
#webdes_pdp #firstdetails .productColourPicker.colourPicker::before {
    content: var(--copy-otherColours, "Other Colours Available");
    flex: 0 0 100%;
    margin: 0 0 0.125rem;
    font-family: var(--font-body);
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    color: var(--text);
}
#webdes_pdp #firstdetails .productColourPicker.colourPicker a {
    width: 3.25rem;                             /* 52 x 64 */
    height: 4rem;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--skin-line);
    border-radius: 0;
    background: var(--background);
    transition: border-color var(--skin-transition);
}
#webdes_pdp #firstdetails .productColourPicker.colourPicker a:hover,
#webdes_pdp #firstdetails .productColourPicker.colourPicker a:focus-visible {
    border-color: var(--text);
}
#webdes_pdp .productColourPicker img.colorPickerImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* ---- add to basket ---- */
#webdes_pdp div#cart-target {
    margin-top: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
/* one column: options, then qty + button, then the stock panel (the platform
   sets some of these rows side by side) */
#webdes_pdp .add-to-cart-area,
#webdes_pdp .add-to-cart-area-1 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
#webdes_pdp .add-to-cart-area-1 > div,
#webdes_pdp .add-to-cart-area-dropdown {
    width: 100%;
    max-width: none;
}
#webdes_pdp .add-to-cart-area-1 { margin-bottom: 0 !important; }
#webdes_pdp .add-to-cart-area-dropdown select {
    height: 44px;
    border: 1px solid var(--skin-lineStrong);
    border-radius: 0;
    font-size: var(--skin-fs-13);
}
#webdes_pdp .col-1.zflex-s.add-to-cart-area-1-row-2 { margin-top: 1.5rem; }
#webdes_pdp .add-to-cart-area-1-row-2 > div {
    flex-wrap: nowrap;
    gap: 0.5rem;
}
#webdes_pdp .add-to-cart-area-dropdown-qty { flex: 0 0 auto; }
#webdes_pdp .add-to-cart-area-button.bgStandard {
    flex: 1 1 auto;
    width: auto;
    height: 56px;
    margin: 0;
    padding: 0 1.5rem;
    line-height: 56px;
    border-radius: 0;
    font-family: var(--font-bold);
    font-size: var(--skin-fs-12);
    text-transform: uppercase;
    letter-spacing: var(--skin-trackButton);
}
#webdes_pdp .add-to-cart-area-button[data-available="false"] {
    background: var(--text);                    /* "Notify": the platform paints it blue */
}

/* stock + despatch: the design's two-cell panel */
#webdes_pdp .col-1.add-to-cart-area-2 {
    margin: 1.25rem 0 0;
    padding: 0;
    border: 0;
}
#webdes_pdp .add-to-cart-area-2::after {
    text-align: left;
    font-size: var(--skin-fs-12);
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
}
#webdes_pdp .add-to-cart-area-1:not([data-selected="true"]) ~ .add-to-cart-area-2 .add-to-cart-area-msg {
    display: none;
}
#webdes_pdp .col-1.flex-grow1.add-to-cart-area-msg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--skin-line);
    font-size: var(--skin-fs-13);
}
#webdes_pdp .col-1.add-to-cart-area-msg-stock,
#webdes_pdp .col-1.add-to-cart-area-msg-handling {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 0;
    font-family: var(--font-body);
}
#webdes_pdp .col-1.add-to-cart-area-msg-stock { border-right: 1px solid var(--skin-line); }
#webdes_pdp .add-to-cart-area-msg-stock::before,
#webdes_pdp .add-to-cart-area-msg-handling::before {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--skin-fs-11);
    line-height: 1rem;
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
}
#webdes_pdp .add-to-cart-area-msg-stock::after,
#webdes_pdp .add-to-cart-area-msg-handling::after {
    float: none;
    width: auto;
    text-align: left !important;
    font-size: var(--skin-fs-13);
    line-height: 1.25rem;
    color: var(--text);
}
#webdes_pdp .add-to-cart-area-msg-stock::after {
    content: "\25CF\00a0\00a0" attr(data-amountmsg);   /* the design's green dot */
    color: var(--skin-stock);
}

/* size guide: pdpAttributeButtons moves it into the Size heading; this is the
   fallback place when it cannot */
#webdes_pdp .productSize > a {
    padding: 0;
    background: none;
    border: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--skin-fs-12);
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Click & Collect, drawn as a row of the list below it */
#webdes_pdp .cc-lookup-service-wrapper.col-1.ctrMgr8-top.ctrMgr16-bottom {
    margin: 1.5rem 0 0 !important;
    padding: 1rem 0 !important;
    border: 0;
    border-top: 1px solid var(--skin-line);
    border-radius: 0;
    background: none;
    font-size: var(--skin-fs-12);
}
#webdes_pdp .cc-lookup-service-wrapper > .zflex-sb {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 0.625rem !important;
}
#webdes_pdp #cc-title {
    display: flex;
    gap: 0.875rem;
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
}
#webdes_pdp #cc-title::before {
    content: "";
    flex: 0 0 20px;
    height: 20px;
    background: var(--brand);
    -webkit-mask: var(--skin-icon-home) center / contain no-repeat;
    mask: var(--skin-icon-home) center / contain no-repeat;
}
#webdes_pdp #cc-tagline {
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
}
#webdes_pdp .cc-lookup-service-entrysection {
    gap: 0.5rem;
    margin-bottom: 0.5rem !important;
}
#webdes_pdp .cc-lookup-service-entrysection > div { flex-basis: 100%; }
#webdes_pdp .col-1.cc-lookup-service-lookupbutton-location {
    justify-content: flex-start;
    padding: 0;
    min-height: var(--skin-touch);
    background: none;
    border: 0;
    color: var(--text);
    font-size: var(--skin-fs-12);
    text-decoration: underline;
    text-underline-offset: 4px;
}
#webdes_pdp .col-1.cc-lookup-service-lookupbutton-location:hover {
    background: none;
    color: var(--brand);
    border: 0;
}
#webdes_pdp span.icon-drop.coStandard:before { color: var(--brand); }
#webdes_pdp .col-1.zflex-s.pos-rel.cc-lookup-service-entry {
    gap: 0;
    height: 44px;
    border: 1px solid var(--skin-lineStrong) !important;
}
#webdes_pdp .cc-lookup-service-entry input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 0.875rem;
    border: 0 !important;
    border-radius: 0;
    font-size: var(--skin-fs-13);
    background: transparent;
}
#webdes_pdp .cc-lookup-service-lookupbutton.icon-search {
    flex: 0 0 auto;
    width: 3.25rem;
    padding: 0;
    justify-content: center;
    background: none;
    border: 0;
    border-left: 1px solid var(--skin-line);
    border-radius: 0;
}
#webdes_pdp .cc-lookup-service-lookupbutton.icon-search::before { color: var(--text); }
#webdes_pdp .cc-lookup-service-wrapper .no-user-select a {
    font-size: var(--skin-fs-11);
    color: var(--skin-slate);
}
#webdes_pdp .cc-lookup-service-warningtext {
    font-size: var(--skin-fs-12);
    font-weight: var(--skin-weightLight);
}

/* ---- the "Why buy" list (sitelocal.js): ruled rows with line icons ---- */
#webdes_pdp #seconddetails { padding: 0; }
#webdes_pdp #seconddetails .cg-accordions {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--skin-line);
}
#webdes_pdp #seconddetails .cg-accordion {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--skin-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
#webdes_pdp #seconddetails .cg-accordion > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
#webdes_pdp #seconddetails .cg-accordion__header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin: 0;
    padding: 1rem 0;
    min-height: var(--skin-touch);
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
}
#webdes_pdp #seconddetails .cg-accordion__header > span:not(.icon) { flex: 1 1 auto; }
#webdes_pdp #seconddetails .cg-accordion__header::after {
    content: "+";
    flex: 0 0 auto;
    font-size: var(--skin-fs-14);
    color: var(--skin-slate);
}
#webdes_pdp #seconddetails .cg-accordion > input:checked + .cg-accordion__header::after { content: "\2212"; }
#webdes_pdp #seconddetails .cg-accordion > input:focus-visible + .cg-accordion__header {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
#webdes_pdp #seconddetails .cg-accordion__header .icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    background: var(--brand);
    -webkit-mask: var(--skin-icon-star) center / contain no-repeat;
    mask: var(--skin-icon-star) center / contain no-repeat;
}
#webdes_pdp #seconddetails .cg-accordion__header .icon > * { display: none; }
#webdes_pdp #seconddetails #cta-starbuys .icon,
#webdes_pdp #seconddetails #cta-coupons .icon { -webkit-mask-image: var(--skin-icon-tag); mask-image: var(--skin-icon-tag); }
#webdes_pdp #seconddetails #cta-finance .icon { -webkit-mask-image: var(--skin-icon-card); mask-image: var(--skin-icon-card); }
#webdes_pdp #seconddetails #cta-delivery .icon { -webkit-mask-image: var(--skin-icon-van); mask-image: var(--skin-icon-van); }
#webdes_pdp #seconddetails #cta-talk .icon { -webkit-mask-image: var(--skin-icon-chat); mask-image: var(--skin-icon-chat); }
#webdes_pdp #seconddetails .cg-accordion__content {
    display: none;
    padding: 0 0 1rem 2.125rem;
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
}
#webdes_pdp #seconddetails .cg-accordion > input:checked ~ .cg-accordion__content { display: block; }
#webdes_pdp #seconddetails .cg-accordion__content p { margin: 0 0 0.5rem; }
#webdes_pdp #seconddetails .cg-accordion__content a { color: var(--text); text-underline-offset: 3px; }

/* ---- lower page: "The details" + accordions, then the range and related rails ---- */
#webdes_pdp #pdp_area2 .container.ctrPad32 {
    padding: var(--skin-sectionY) var(--gutter) 0;
    background: var(--background);
}
#webdes_pdp .maxInner.cssGrid.detailOrder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--skin-pdpPanel));
    column-gap: var(--skin-pdpGap);
    row-gap: 0;
    align-items: start;
    max-width: none;
    padding: 0;
}
#webdes_pdp .detailOrder > * { grid-column: 1 / -1; }
#webdes_pdp .detailOrder > div.detalCTA {
    grid-column: 1 !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
}
#webdes_pdp .detailOrder > .productAccordian { grid-column: 2; }

/* the section heading is the platform's product name: shown as the design's words */
#webdes_pdp h2.col-1.product-section-header.productName {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
}
#webdes_pdp h2.col-1.product-section-header.productName::before {
    content: var(--copy-pdpDetails, "The details");
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--skin-fs-section);
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--text);
}
#webdes_pdp .col-1.season {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    padding: 0;
    border: 0;
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
}
#webdes_pdp .col-1.season p { margin: 0; }
#webdes_pdp .col-1.season p + p::before {
    content: "\00b7";
    margin-right: 0.75rem;
}
#webdes_pdp .detalCTA #ModularLongDescription {
    -webkit-column-count: 1;
    column-count: 1;
    max-width: 40rem;
    padding: 0;
    font-size: var(--skin-fs-14);
    line-height: 1.5rem;
    font-weight: var(--skin-weightLight);
}
#webdes_pdp #longDescription ul,
#webdes_pdp #manualTechInfo ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 2rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--skin-fs-13);
    line-height: 1.375rem;
}
#webdes_pdp #longDescription li,
#webdes_pdp #manualTechInfo li {
    display: flex;
    gap: 0.625rem;
    margin: 0;
}
#webdes_pdp #longDescription li::before,
#webdes_pdp #manualTechInfo li::before {
    content: "\2014";
    color: var(--skin-bullet);
}

/* platform accordions: ruled rows, 56px */
#webdes_pdp .productAccordian {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--skin-line);
}
#webdes_pdp .productAccordian .accordianBox {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--skin-line);
    border-radius: 0;
    background: none;
}
#webdes_pdp .productAccordian .accordianHeader {
    display: flex;
    justify-content: flex-start;
    gap: 0.375rem;
    align-items: center;
    min-height: 3.5rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--skin-fs-13);
    font-weight: 400;
    color: var(--text);
    text-transform: none;
    cursor: pointer;
}
#webdes_pdp .productAccordian .accordianHeader .fa { display: none; }
#webdes_pdp .productAccordian .accordianHeader > * { margin: 0; padding: 0; text-align: left; flex: 0 0 auto; width: auto; }
#webdes_pdp .productAccordian .accordianHeader::after {
    content: "+";
    margin-left: auto;
    font-size: var(--skin-fs-14);
    color: var(--skin-slate);
}
#webdes_pdp .productAccordian .accordianCtn {
    padding: 0 0 1rem;
    font-size: var(--skin-fs-13);
    line-height: 1.375rem;
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
    background: none;
}

/* Range Viewer ("Also in the range") and Related Items ("You may also like"):
   the platform's Flexslider rails, laid out as the design's grids. !important
   beats the widths and transform Flexslider writes inline. */
#webdes_pdp .detailOrder > div#ShowRangeViewer,
#webdes_pdp .detailOrder > div#ShowRelatedRepeater {
    padding: var(--skin-sectionY) 0 0;
}
#webdes_pdp #ShowRangeViewer h2,
#webdes_pdp #ShowRelatedRepeater h2 {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--skin-fs-section);
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    color: var(--text);
}
#webdes_pdp #ShowRangeViewer .flexslider,
#webdes_pdp #ShowRelatedRepeater .flexslider {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
#webdes_pdp #ShowRangeViewer .flex-viewport,
#webdes_pdp #ShowRelatedRepeater .flex-viewport {
    overflow: visible !important;
    height: auto !important;
}
#webdes_pdp #ShowRangeViewer ul.slides,
#webdes_pdp #ShowRelatedRepeater ul.slides {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: var(--skin-cardGap);
    width: auto !important;
    margin: 0;
    padding: 0;
    transform: none !important;
    transition: none !important;
}
#webdes_pdp #ShowRelatedRepeater ul.slides {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
#webdes_pdp #ShowRangeViewer ul.slides > li,
#webdes_pdp #ShowRelatedRepeater ul.slides > li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    display: block !important;
}
#webdes_pdp ul.slides > li.clone,
#webdes_pdp #ShowRangeViewer ul.slides::before,
#webdes_pdp #ShowRangeViewer ul.slides::after,
#webdes_pdp #ShowRelatedRepeater ul.slides::before,
#webdes_pdp #ShowRelatedRepeater ul.slides::after { display: none !important; }   /* Flexslider's clearfix would be a grid item */
#webdes_pdp #ShowRangeViewer .flex-control-nav,
#webdes_pdp #ShowRangeViewer .flex-direction-nav,
#webdes_pdp #ShowRelatedRepeater .flex-control-nav,
#webdes_pdp #ShowRelatedRepeater .flex-direction-nav {
    display: none;
}
#webdes_pdp ul.slides > li > a {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: var(--text);
    text-decoration: none;
}
#webdes_pdp ul.slides .imgCtr {
    position: relative;
    aspect-ratio: 3 / 4;
    height: auto;
    padding: 0;
    background-color: var(--background-raised);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    border-radius: 0;
}
#webdes_pdp ul.slides > li:has([data-onsale="True"]) .imgCtr::before {
    content: var(--copy-saleBadge, "Sale");
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    padding: 0.1875rem 0.375rem;
    background: var(--sale);
    color: var(--text-inverse);
    font-family: var(--font-bold);
    font-size: var(--skin-fs-10);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
#webdes_pdp ul.slides > li > a > .ctrPad8-top {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0;
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
}
#webdes_pdp ul.slides .item-repeater-info-name {
    order: -1;
    font-size: var(--skin-fs-12);
    color: var(--text);
}
#webdes_pdp ul.slides .pricingRepeater {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}
#webdes_pdp ul.slides .pricingRepeater > div.hideme { display: none; }
#webdes_pdp ul.slides .nowPrice-repeater,
#webdes_pdp ul.slides .standardPrice-repeater {
    font-family: var(--font-body);
    font-size: var(--skin-fs-12);
    line-height: 1.25rem;
    color: var(--text);
}
#webdes_pdp ul.slides [data-onsale="True"] .nowPrice-repeater { color: var(--sale); }
#webdes_pdp ul.slides [data-onsale="True"] .standardPrice-repeater {
    font-weight: var(--skin-weightLight);
    color: var(--skin-slate);
    text-decoration: line-through;
}

@media screen and (max-width: 1023px) {
    #webdes_pdp #pdp_area2 .container.ctrPad32 { padding-top: var(--skin-sectionY); }
    /* !important: the platform's own small-screen .cssGrid is 12 columns */
    #webdes_pdp .maxInner.cssGrid.detailOrder { grid-template-columns: minmax(0, 1fr) !important; }
    /* ...and its phone rule spans every child 1/13 !important, which makes 11
       zero-width implicit columns; pin them all to the one column */
    #webdes_pdp .detailOrder > *,
    #webdes_pdp .detailOrder > div.detalCTA,
    #webdes_pdp .detailOrder > .productAccordian {
        grid-column: 1 / -1 !important;
        min-width: 0;
        max-width: 100%;
    }
    #webdes_pdp .detailOrder > .productAccordian { margin-top: 2rem; }
    #webdes_pdp #longDescription ul,
    #webdes_pdp #manualTechInfo ul { grid-template-columns: minmax(0, 1fr); }
    /* rails swipe on small screens */
    #webdes_pdp #ShowRangeViewer ul.slides,
    #webdes_pdp #ShowRelatedRepeater ul.slides {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 42%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    #webdes_pdp ul.slides > li { scroll-snap-align: start; }
}
/* PAULS ALPs Styling */
.ALPDescription-desktop-brand {display: none;}
span[class*="css-image"] {display: block; font-size:0px}
[class*="gridALPs"] > div, [class*="grirow"] > div {display: grid;grid-gap: 1em;padding: 0 0 24px 0;}
[class*="gridALPs"] > div > a, [class*="grirow"] > div > a {position: relative;width: 100%;height: 100%;overflow: hidden;}
[class*="gridALPs"] > div > a:hover .bannerViewGrid, [class*="grirow"] > div > a:hover .bannerViewGrid {background: #df952b; border-color: #df952b;}

[class*="gridALPs"] .photo span {background-size: cover !important;position: relative;}
.LPTitle h3, [class*="gridALPs"] h3 {position: relative;z-index: 2;margin: 16px 0 32px 0;padding: 24px 0 0 0;border-top: 1px solid #999999;}
.LPTitle.LPTitle h3 {padding-top: 32px;}
.LPTitle h3::after,
[class*="gridALPs"] h3::after,
.gridALPtitle > .bannerTitle::after {content: "";display: block;width: 50px;height: 5px;background: #db2113;margin-top: 12px;}

.gridALPs1 > div {grid-template-columns: repeat(1, 1fr);-ms-grid-columns: 1fr;}
.gridALPs2 > div {grid-template-columns: repeat(2, 1fr);-ms-grid-columns: 1fr 1fr;}
.gridALPs3 > div {grid-template-columns: repeat(3, 1fr); -ms-grid-columns: 1fr 1fr 1fr;}
.gridALPs4 > div {grid-template-columns: repeat(4, 1fr);-ms-grid-columns: 1fr 1fr 1fr 1fr;padding: 24px 0 0 0;border-top: 1px solid #999;}
.gridALPs5 > div {grid-template-columns: repeat(5, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;}
.gridALPs6 > div {grid-template-columns: repeat(6, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.gridALPs7 > div {grid-template-columns: repeat(7, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}

div[class*="grid"] > div.gg-0 {grid-gap: 0vw;}
div[class*="grid"] > div.gg-1 {grid-gap: 1vw;}
div[class*="grid"] > div.gg-2 {grid-gap: 2vw;}
div[class*="grid"] > div.gg-3 {grid-gap: 3vw;}
div[class*="grid"] > div.gg-4 {grid-gap: 4vw;}
div[class*="grid"] > div.gg-5 {grid-gap: 5vw;}

div[class*="grid"] > div.gp-0 {padding: 0em;}
div[class*="grid"] > div.gp-1 {padding: 1em;}
div[class*="grid"] > div.gp-2 {padding: 2em;}
div[class*="grid"] > div.gp-3 {padding: 3em;}
div[class*="grid"] > div.gp-4 {padding: 4em;}
div[class*="grid"] > div.gp-5 {padding: 5em;}

div[class*="grid"] > div.grayscale > div {-webkit-filter: grayscale(100%);filter: grayscale(100%);background-color: transparent !important; opacity: .25;}
div[class*="grid"] > div.grayscale > div:hover {-webkit-filter: grayscale(0%);filter: grayscale(0%); opacity: 1;}

[class*="gridALPs"] > div > a.gridALPtitle {height: auto;}
.gridALPtitle img {filter: brightness(0) invert(1);width: 100%;/* height: 40px; */}
.gridALPtitle > .bannerTitle {display: flex;flex-direction: column;z-index: 1;color: #333;line-height: 1.75em;margin: 32px 0;padding: 24px 0 0 0;border-top: 1px solid #999999;text-shadow: none;transform: skewX(
360deg
);text-transform: initial;}
.gridALPtitle > .bannerDesc {display: block;font-size: 14px;color: #262626;line-height: 2em;-webkit-columns: 2;-moz-columns: 2;-o-columns: 2;columns: 2;-webkit-column-gap: 32px;-moz-column-gap: 32px;-o-column-gap: 32px;column-gap: 32px;text-transform: initial !important;}
.gridALPtitle > .bannerDesc a {color: #db2113; text-decoration: underline;}
.noIvert  img {filter: unset;width: 50%;}


.photo {background-size: cover; background-position: center; height: 100%; display: block; background: #dae1ef;}
.photo span::after {padding-bottom: 100%;content: "";display: block;width: 100%; background: #00000000; -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; height: 100%;}
.photo.h-15 span::after {padding-bottom: 15%;}
.photo.h-25 span::after {padding-bottom: 25%;}
.photo.h-33 span::after {padding-bottom: 33%;}
.photo.h-40 span::after {padding-bottom: 40%;}
.photo.h-50 span::after {padding-bottom: 50%;}
.photo.h-66 span::after {padding-bottom: 66%;}
.photo.h-75 span::after {padding-bottom: 75%;}
.photo.h-125 span::after {padding-bottom: 125%;}
.photo.h-150 span::after {padding-bottom: 150%;}
.photo.h-185 span::after {padding-bottom: 185%;}

[class*="gridALPs"]:not(.gridALPs1) > div > a .photo span::after {background: #00000022;}

.photo.scroller::after {content: url(/layout/alpimages/mouseScroll.svg); position: absolute;top: 32px;right:  32px;width: 34px; display: none !important;}

.ALPDescription-desktop-desc p:empty {display: none !important;}

span.bannerTxt {position: absolute;z-index: 3;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: flex-start;justify-content: flex-end;flex-wrap: wrap;text-align: left;width: 100%;flex-direction: column;padding: 32px;}
span.bannerTxt > span.bannerTitle {color: #fff;font-size: 24px !important;filter: drop-shadow(0px 2px 1px #0002);text-align: left;}
span.bannerTxt > span.bannerTitle > span {display: block;font-size: 16px;color: #efefef;}
span.bannerTxt > span.bannerView {font-size: small;border: 1px solid #ffffff4a;border-radius: 5px;padding: 8px 16px;text-transform: uppercase;color: #fff; margin-top: 8px; background: transparent;}
a:hover span.bannerTxt > span.bannerView {background: #86c8bc;}
span.bannerTxt > span.bannerTitle:empty, span.bannerTxt > span.bannerView:empty {display: none;}
span.bannerTitle img {max-width: 100px;position: relative;transform: none;left: 0;top: 0;filter: brightness(0) invert(1);}

span.bannerTxt.flex-right {justify-content: flex-end;align-content: flex-end;text-align: right;}
span.bannerTxt.flex-right > span.bannerDesc {max-width: 440px;color: #ffffff;}

.gridALPs1:first-of-type > div {padding-top: 16px;border-top: 1px solid #999;}
.gridALPs1 a.gridALPtitle span.bannerTxt {max-width: 310px;height: 260px;background: #db2015eb;padding: 32px;font-size: 18px;top: 0;left: 0;margin: 16px;display: flex;justify-content: center;flex-direction: column;}
.gridALPs1 a.gridALPtitle span.bannerTxt > span.bannerTitle {text-transform: none;filter: none;text-align: left;font-size: 22px !important;padding: 0 0 16px 0;text-shadow: none;}
.gridALPs1 a.gridALPtitle span.bannerTxt > span.bannerTitle > span {display: block;font-size: 18px;margin-top: 16px;clear: both;float: left;width: 100%;}
.gridALPs1 a.gridALPtitle span.bannerTxt > span.bannerTitle > span::before {content: "";display: block;width: 50px;height: 4px;background: #f4c621;margin-bottom: 12px;}

.ALP-sizes, .ALP-colour {position: relative;}
.ALP-sizes > div {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;}
.ALP-sizes > div a {border: 1px solid #999999;width: 64px;height: 64px;margin: 0 8px 8px 0;color: #313131;display: inline-block;border-radius: 100%;line-height: 64px;text-align: center;font-family: 'citrfontbold';background: #fbfbfb;}
.ALP-sizes > div a:hover {border-color: #313131; background: #efefef}

.gridALPs1 a.yulex > img {position: absolute;z-index: 1;max-width: 280px;top: 32px;right: 32px;}

[class*="gridALPs"] > div.pureText {padding: 32px 0;grid-gap: 32px;}
[class*="gridALPs"] > div.pureText > a {justify-content: flex-start;align-content: flex-start;color: #333;}
[class*="gridALPs"] > div.pureText > a > span.bannerTxt {position: static;padding: 0;justify-content: flex-start;align-items: flex-start;}
[class*="gridALPs"] > div.pureText > a > span.bannerTxt > span.bannerTitle {text-align: left;color: #333;filter: none;text-transform: none;font-size: 3em;}
[class*="gridALPs"] > div.pureText > a > span.bannerTxt > span.bannerDesc {text-align: left;}
[class*="gridALPs"] > div.pureText > a > span.bannerTxt.flex-end > span.bannerDesc {text-align: right;}

.gridALPs6 > div.display-text {grid-gap: 32px;}
.gridALPs6 > div.display-text > a {padding-bottom: 32px;}
.gridALPs6 > div.display-text > a > span.photo {background: transparent;}
.gridALPs6 > div.display-text > a > span.bannerTxt {text-align: left;position: relative;bottom: calc(100% - 32px);color: #333;padding: 0;}
.gridALPs6 > div.display-text > a > span.bannerTxt > span.bannerDesc {color: #333;}
.gridALPs6 > div.display-text > a > span.bannerTxt > span.bannerDesc > span {font-size: 0.8em; display: block;}
.gridALPs6 > div.display-text > a > span.bannerTxt > span.bannerDesc > span:first-child {margin-bottom: 1.8em;}

.ALP-colour > div {display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;width: 100%;max-width: 540px;}
.ALP-colour > div > a::after {content: "";width: 62px;height: 62px;border-radius: 100%;z-index: 10;display: block;border: 11px solid #fff;top: 0px;left: 0px;position: absolute;-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;}
.ALP-colour > div > a {display: block;width: 64px;height: 64px;border-radius: 100%;text-indent: -9999px;background: transparent;overflow: inherit;border: 1px solid #999999;margin: 0 8px 8px 0;}

.ALP-colour > div > a:hover {border-color: #fff;}
.ALP-colour > div > a:hover::after {border: 0px solid #fff;}
.ALP-colour > div > a[href*="white"]:hover::after {border: 1px solid #efefef;}

.ALP-colour > div > a[href*="blue"] {background: #5083c1;}
.ALP-colour > div > a[href*="pink"] {background: #de9fd0;}
.ALP-colour > div > a[href*="red"] {background: #d04c4c;}
.ALP-colour > div > a[href*="yellow"] {background: #fef047;}
.ALP-colour > div > a[href*="green"] {background: #a9c76f;}
.ALP-colour > div > a[href*="gold"] {background: #dec052;}
.ALP-colour > div > a[href*="orange"] {background: #dea052;}
.ALP-colour > div > a[href*="purple"] {background: #a656c7;}
.ALP-colour > div > a[href*="black"] {background: #000;}
.ALP-colour > div > a[href*="brown"] {background: #b97b64;}
.ALP-colour > div > a[href*="white"] {background: #fff}
.ALP-colour > div > a[href*="grey"] {background: #a0a0a0;}

.FAFResults {position: relative;}
.alp-all-btn {overflow: hidden;margin: 0;display: inline-block;}
.alp-all-btn > a {padding: 16px;border: 2px solid #db2113;color: #db2113;text-transform: uppercase;font-family: 'citrfontbold';position: absolute;top: 0;right: 0;}
.alp-all-btn > a:hover {background: #db2113; color: #fff;}
.mobile .alp-all-btn > a {padding: 8px; font-size: 12px;}

.light .bannerTxt {background: #ffffffeb !important;}
.light img {filter: invert();}
.light .bannerTitle {color: #272727eb !important;}
.dark .bannerTxt {background: #272727eb !important;}

.ffBut {
    display: flex;
    margin: -8px;
    width: 100%;
    flex-wrap: wrap;
    grid-gap: 1em;
    margin: 0px !important;
}
.ffBut > a {
    border: 1px solid #333;
    padding: 8px 16px;
    font-family: 'citrfontbold';
    width: auto;
    flex-grow: 1;
    text-transform: uppercase;
    text-align: center;
}
.ffBut > a:hover { border: 1px solid #333;
    background: #333333;
    color: #fff;
}
.ffBut > a.true {border: 1px solid #d02b47; color: #d02b47}
.ffBut > a.true:hover { border: 1px solid #d02b47;
    background: #d02b47;
    color: #fff;
}
/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	#displayType > div.FAF.FAFLanding > div.mobile > div > div:nth-child(2) {height: 34px;}

	[class*="gridALPs"] h3 {font-size: 18px;}

    .photo span::after,
    .photo.h-25 span::after,
    .photo.h-33 span::after,
    .photo.h-40 span::after,
    .photo.h-50 span::after,
    .photo.h-66 span::after,
    .photo.h-75 span::after,
    .photo.h-125 span::after,
    .photo.h-150 span::after {padding-bottom: 100% !important;}
    .photo.h-15 span::after {padding-bottom: 50% !important;}

    .gridALPs2 > div,
    .gridALPs3 > div {grid-template-columns: repeat(1, 1fr); -ms-grid-columns: 1fr;}

    .gridALPs4 > div,
    .gridALPs5 > div,
    .gridALPs6 > div,
    .gridALPs7 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}

    [class*="gridALPs"] > div > a .bannerViewGrid, [class*="grirow"] > div > a .bannerViewGrid {background: #df952b; border-color: #df952b;}

    [class*="gridALPs"] > div > a.gridALPtitle .photo span::after {background: none;padding-bottom: 50% !important;}

    [class*="gridALPs"] .bannerViewGrid {display: none;}
    [class*="gridALPs"] .bannerTitleGrid {font-size: 0.9em;}
	.gridALPtitle > .bannerDesc {-webkit-columns: 1;-moz-columns: 1;-o-columns: 1;columns: 1;}

    .gridALPs1 a.gridALPtitle span.bannerTxt {position: static;max-width: 100%;padding: 16px;}
    .gridALPs1 a.gridALPtitle span.bannerTxt > span.bannerTitle {font-size: 18px;}
    .gridALPs1 a.gridALPtitle span.bannerTxt > span.bannerTitle > span {display: block;}
    .photo.scroller::after {display: none;}

    .photo.h-185 span::after {padding-bottom: 185% !important;background: none !important;}
    .gridALPtitle img {max-width: 240px;}
    [class*="gridALPs"] > div.pureText > a > span.bannerTxt, [class*="gridALPs"] > div.pureText > a, [class*="gridALPs"] > div.pureText > a > span.bannerTxt.flex-end > span.bannerDesc {align-items: center;text-align: center;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (max-width : 1024px) {

    form[action*="./cube?facet=cube"] .FAFFilters {order: 3 !important;}
	.mobile .ALPBannerImages-Brand  { display: none; }
	.mobile .metaControls h2 { margin:0}

    .photo span::after,
    .photo.h-25 span::after,
    .photo.h-33 span::after,
    .photo.h-40 span::after,
    .photo.h-50 span::after,
    .photo.h-66 span::after {padding-bottom: 75% !important;}
    .photo.h-15 span::after {padding-bottom: 33% !important;}

    .gridALPs2 > div,
    .gridALPs3 > div,
    .gridALPs4 > div,
    .gridALPs5 > div {grid-template-columns: repeat(1, 1fr); -ms-grid-columns: 1fr;}
    .gridALPs6 > div,
    .gridALPs7 > div {grid-template-columns: repeat(3, 1fr); -ms-grid-columns: 1fr 1fr 1fr;}

    [class*="gridALPs"]:not(.gridALPs1) > div > a .photo span::after , [class*="grirow"] > div > a .photo span::after {background: #00000088;}
    [class*="gridALPs"] > div > a .bannerViewGrid, [class*="grirow"] > div > a .bannerViewGrid {background: #df952b; border-color: #df952b;}
    [class*="gridALPs"] > div > a.gridALPtitle .photo span::after {background: none;padding-bottom: 50% !important;}
    [class*="gridALPs"] .bannerViewGrid {display: none;}
    .photo.h-185 span::after {padding-bottom: 185% !important;background: none !important;}
    [class*="gridALPs"] > div.pureText > a > span.bannerTxt, [class*="gridALPs"] > div.pureText > a, [class*="gridALPs"] > div.pureText > a > span.bannerTxt.flex-end > span.bannerDesc {align-items: center;text-align: center;}

}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px) {
    .gridALPs2 > div,
    .gridALPs4 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}
    [class*="gridALPs"] > div > a .photo span::after, [class*="grirow"] > div > a .photo span::after {background: #00000088;}
    [class*="gridALPs"] > div > a .bannerViewGrid, [class*="grirow"] > div > a .bannerViewGrid {background: #df952b; border-color: #df952b;}
    [class*="gridALPs"] > div > a.gridALPtitle .photo span::after {background: none;padding-bottom: 50% !important;}
    .photo.h-185 span::after {padding-bottom: 185% !important;background: none !important;}
}


#FafKnockoutResults #FAFDesc {order:-1;margin-bottom: 16px;}
#FafKnockoutResults #FAFDesc .gridALPs1:first-of-type > div {padding-top: 0px;border-top: none}


/* Custom PAUL HTML header  ------------------------------------------------------------------------------------- */
.gridALPtemplate {display: flex;background: #f3f3f3;align-content: center;}
.templateTxt {padding: 16px;text-align: center;align-items: center;display: flex;flex-direction: column;justify-content: center;grid-gap: 16px;}
.templateTitle {display: block;font-family: 'citrfontbold';font-size: 28px;text-transform: uppercase;}
.templateLinks {display: flex;grid-gap: 16px;width: 100%;}
.templateLinks > a {outline: 1px solid #333;padding: 8px 16px;font-family: 'citrfontbold';width: 100%;text-transform: uppercase;}
.templateLinks > a:hover {outline: 1px solid #333;background:#333333;color:#fff}
.gridALPtemplate .templatePhoto {position: relative;height: 100%;}
.gridALPtemplate img {object-fit: cover;max-width: 33.33%;}
@media screen and (max-width : 1024px) {
    .gridALPtemplate img { display:none}
    .templateLinks {flex-wrap:wrap}
    .templateLinks > a {width: auto;flex-grow: 1;}
}

.alp-link > div {margin: 1em 0 1em 0;}
.alp-code-view,
.alp-link-wrap {display: flex;flex-flow: row nowrap;grid-gap: 32px;}
.alp-link-wrap > div.alp-link {display: flex;flex-flow: column nowrap;padding: 32px;background: #f4f4f4; }
.alp-link-wrap .grow1 { flex-grow: 1;}
.alp-link-wrap > div.alp-link p {margin: 0 0 32px 0;font-size: 14px;}
.alp-link-wrap > div.alp-link label {font-family: 'citrfontbold';font-size: 18px;margin: 0;}
.alp-link-wrap > div.alp-link input,
.alp-link-wrap > div.alp-link select {border-radius: 0;background: #fff;border: 1px solid #d8d8d8;padding: 0 0 0 16px;}
.alp-link-wrap select { margin-bottom:8px}
.alp-code-view .alp-code-copy > pre {font-size: 12px; position: relative;  left: -100px;}
.alp-code-view .alp-code-copy,
.alp-code-view .alp-code-preview {padding: 32px; border: 1px solid #dfdfdf;}
.bannerInput, .addNew {display:flex;align-items: stretch;margin-bottom:8px;grid-gap: 8px;}
.bannerInput a  {background: #ffd6d6;display: flex;justify-content: space-around;align-content: center;align-items: center;padding: 0 16px;color: #6e1313;cursor: pointer;font-family: feather;}
.bannerInput a:before {content: "\e117";}
.add {background:#212121;color:#fff;padding:8px 16px;cursor: pointer;border-radius:4px;}
.alp-link-wrap [type="checkbox"]:before{
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
}
.move {
    padding: 16px 16px 0 0;
}


div[class*="alp-grid-"] > div {display: grid;grid-gap: 16px;margin: 0 0 32px 0;border-bottom: 1px solid #999;padding: 0 0 32px 0;}
div[class*="alp-grid-"]:last-of-type > div {border-bottom: none;margin: 0;padding: 0;}
div[class*="alp-grid-"] > div a.alp-grid-photo {background: #efefef; background-position: center; height: 100%; display: block; position: relative; background-size: cover !important;}
div[class*="alp-grid-"] > div a.alp-grid-photo::after {content: "";display: block;width: 100%;height: 100%;padding-bottom: 100%;background: #00000000;-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;}
div[class*="alp-grid-"] > div a.alp-grid-photo:hover::after {background: #00000088;}

.alp-grid-1 > div {grid-template-columns: repeat(1, 1fr); -ms-grid-columns: 1fr;}
.alp-grid-2 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}
.alp-grid-3 > div {grid-template-columns: repeat(3, 1fr); -ms-grid-columns: 1fr 1fr 1fr;}
.alp-grid-4 > div {grid-template-columns: repeat(4, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr;}
.alp-grid-5 > div {grid-template-columns: repeat(5, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;}
.alp-grid-6 > div {grid-template-columns: repeat(6, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr}

div[class*="alp-grid-"].alp-grid-photo-10 > div a.alp-grid-photo::after {padding-bottom: 10%;}
div[class*="alp-grid-"].alp-grid-photo-20 > div a.alp-grid-photo::after {padding-bottom: 20%;}
div[class*="alp-grid-"].alp-grid-photo-25 > div a.alp-grid-photo::after {padding-bottom: 25%;}
div[class*="alp-grid-"].alp-grid-photo-33 > div a.alp-grid-photo::after {padding-bottom: calc(100% / 3);}
div[class*="alp-grid-"].alp-grid-photo-50 > div a.alp-grid-photo::after {padding-bottom: 50%;}
div[class*="alp-grid-"].alp-grid-photo-66 > div a.alp-grid-photo::after {padding-bottom: calc( (100% / 3) * 2 );}
div[class*="alp-grid-"].alp-grid-photo-75 > div a.alp-grid-photo::after {padding-bottom: 75%;}
div[class*="alp-grid-"].alp-grid-photo-125 > div a.alp-grid-photo::after {padding-bottom: 125%;}
div[class*="alp-grid-"].alp-grid-photo-150 > div a.alp-grid-photo::after {padding-bottom: 150%;}
div[class*="alp-grid-"].alp-grid-photo-200 > div a.alp-grid-photo::after {padding-bottom: 200%;}

div[class*="alp-grid-"].alp-grid-main > div {}
div[class*="alp-grid-"].alp-grid-main > div .ALPtxtGrid {background: var(--co2);width: max(20%, 280px);padding: 32px;justify-content: flex-end;align-items: flex-start;text-align: left;height: calc(100% - 64px);left: 32px;top: 32px;opacity: .9;}
div[class*="alp-grid-"].alp-grid-main > div .ALPtxtGrid .ALPtxtGridTitle {    text-transform: none;    font-size: 2em;line-height: 1.5em;}
div[class*="alp-grid-"].alp-grid-main > div .ALPtxtGrid .ALPtxtGridTitle::after {content: "";margin: 32px 0;display: block;background: var(--co1);width: 40px;height: 4px;}
div[class*="alp-grid-"].alp-grid-main > div .ALPtxtGrid img {width: min(120px, 100%);}
div[class*="alp-grid-"].alp-grid-main > div a.alp-grid-photo {}
div[class*="alp-grid-"].alp-grid-main > div a.alp-grid-photo::after {padding-bottom: 35%;background: none;}

div[class*="alp-grid-"].alp-grid-text > div {display: block;-webkit-columns: 2;-moz-columns: 2;-o-columns: 2;columns: 2;-webkit-column-gap: 32px;-moz-column-gap: 32px;-o-column-gap: 32px;column-gap: 32px;position: relative;}
div[class*="alp-grid-"].alp-grid-text > div::after {content: "";display: block;width: 40px;height: 4px;background: var(--co1);position: absolute;bottom: 32px;right: 0;}

div[class*="alp-grid-"].alp-grid-text > div .ALPtxtGridTitle {font-size: 3em;width: 100%;font-family: 'citrfontbold';line-height: 100%;}
div[class*="alp-grid-"].alp-grid-text > div .ALPtxtGridTitle::after {content: "";background: var(--co1);width: 40px;height: 4px;display: block;margin: 32px 0;}
div[class*="alp-grid-"].alp-grid-text > div .ALPtxtGridDesc {position: relative;}
div[class*="alp-grid-"].alp-grid-text > div .ALPtxtGridDesc p {-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid;font-weight: normal;font-size: 14px;line-height: 1.75em;}
div[class*="alp-grid-"].alp-grid-text > div .ALPtxtGridDesc > p:first-of-type {font-size: 1.25em;}
div[class*="alp-grid-"].alp-grid-text > div .ALPtxtGridDesc > p:last-child {margin: 0;}

div[class*="alp-grid-"].alp-grid-nobg > div a.alp-grid-photo::after {background: none;}

div.alp-grid-brand > div > a.alp-grid-photo {border: 1px solid #dfdfdf;font-size: 0;text-indent: -9999px;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}
div.alp-grid-brand > div > a.alp-grid-photo::after {background: transparent !important;}

.alp-grid-button > div a {padding: 20px 24px;display: flex;border: 2px solid #var(--co2); color: #var(--co2);font-size: 14px;font-family: 'citrfontbold';justify-content: space-between;text-transform: uppercase;letter-spacing: 2px;}
.alp-grid-button > div a:hover {background: var(--co1); border-color: var(--co1); color: #fff;}
.alp-grid-button > div a::after {content: "\e095";font-family: 'feather';}

div.alp-grid-sizes,
div.alp-grid-col {position: relative;}

div.alp-grid-sizes > div,
div.alp-grid-col > div {border: none;}

div.alp-grid-sizes > div {display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;justify-content: flex-start;grid-gap: 16px;}
div.alp-grid-sizes > div > a {border: 1px solid;width: 54px;height: 54px;color: var(--co2);display: inline-block;border-radius: 100%;line-height: 54px;text-align: center;font-family: 'citrfontbold';background: transparent;}
div.alp-grid-sizes > div > a:hover {background: #000;color: #fff;}

div.alp-grid-col > div {display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;width: 100%;justify-content: flex-start;grid-gap: 16px;}
div.alp-grid-col > div > a::after {content: "";width: 52px;height: 52px;border-radius: 100%;z-index: 10;display: block;border: 11px solid #fff;top: 0px;left: 0px;position: absolute;-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;}
div.alp-grid-col > div > a {display: block;width: 54px;height: 54px;border-radius: 100%;text-indent: -9999px;background: transparent;overflow: inherit;border: 1px solid #999999;margin: 0;position: relative;}
div.alp-grid-col > div > a:hover {border-color: #fff;}
div.alp-grid-col > div > a:hover::after {border: 0px solid #fff;}
div.alp-grid-col > div > a[href*="white"]:hover::after {border: 1px solid #efefef;}
div.alp-grid-col > div > a[href*="blue"] {background: #5083c1;}
div.alp-grid-col > div > a[href*="pink"] {background: #de9fd0;}
div.alp-grid-col > div > a[href*="red"] {background: #d04c4c;}
div.alp-grid-col > div > a[href*="yellow"] {background: #fef047;}
div.alp-grid-col > div > a[href*="green"] {background: #a9c76f;}
div.alp-grid-col > div > a[href*="gold"] {background: #dec052;}
div.alp-grid-col > div > a[href*="orange"] {background: #dea052;}
div.alp-grid-col > div > a[href*="purple"] {background: #a656c7;}
div.alp-grid-col > div > a[href*="black"] {background: #000;}
div.alp-grid-col > div > a[href*="brown"] {background: #674232;}
div.alp-grid-col > div > a[href*="white"] {background: #fff}
div.alp-grid-col > div > a[href*="grey"] {background: #a0a0a0;}
div.alp-grid-col > div > a[href*="silver"] {background: #dbdbdb;}

.ALPDescription-desktop .ALPDescription-desktop-desc > h2 {border-bottom: 1px solid #999; padding: 0 0 32px 0; margin: 0;}
.ALPDescription-desktop-desc a {font-weight:bold}
.mobile a {font-weight:bold}


.ALPtxtGrid {position:absolute;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: flex-start;justify-content: flex-end;flex-wrap: wrap;text-align: left;padding: 32px;z-index: 2;width: 100%;height: 100%;flex-direction: column;-ms-flex-direction: column;color: white;}
.ALPtxtGridDesc:empty, .ALPtxtGridTitle:empty, .ALPtxtGridView:empty{display:none;}
.ALPtxtGrid > span {padding: 1em 2em;}
.ALPtxtGrid .ALPtxtGridDesc {font-size: smaller; padding: 0 !important;}
.ALPtxtGrid .ALPtxtGridTitle {font-size: 20px;font-family: 'citrfontbold';font-weight: normal;letter-spacing: normal;font-size: 1.5em;filter: drop-shadow(0px 2px 1px #0002);z-index: 10;position: relative;}
.ALPtxtGrid .ALPtxtGridView {padding: 10px 24px;-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;border: 2px solid;text-transform: uppercase;font-size: 12px;margin-top: 6px;z-index: 10;position: relative;}
.ALPtxtGrid img {position:absolute;top:0;width: 100%;height: 100%;z-index: 0;left: 0;object-fit: cover;}
.lazyload { 
    object-fit: cover;
}

div[class*="alp-grid-"] > div a:hover .ALPtxtGridView {background: var(--co1);border-color: var(--co1);}

[class*="alp-grid-filter"],
[class*="alp-grid-filter"] a {-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;}
.alp-grid-filter-grayscale a {filter: grayscale(1);}
.alp-grid-filter-grayscale a:hover {filter: grayscale(0);}

@media screen and (max-width : 1023px) {
	.alp-grid-3 > div {grid-template-columns: repeat(1, 1fr); -ms-grid-columns: 1fr;}
	.alp-grid-4 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}
	.alp-grid-6 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}
}

@media screen and (max-width : 768px) {
	.alp-link > div {margin: 0 0 1em 0;}
	.ALPtxtGrid { padding:8px;}
    
    .alp-grid-2 > div{grid-template-columns: repeat(1, 1fr); -ms-grid-columns: 1fr;}
	.alp-grid-3 > div,
	.alp-grid-4 > div,
	.alp-grid-5 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr;}

	div[class*="alp-grid-"].alp-grid-story > div > .alp-grid-photo > .ALPtxtGrid > .bannerLinksGrid {flex-flow: row wrap;}
	div[class*="alp-grid-"].alp-grid-story > div > .alp-grid-photo > .ALPtxtGrid > .bannerLinksGrid > a {flex-basis: 100%; width: 100%;}

	div[class*="alp-grid-"] > div {padding-bottom: 16px;margin-bottom: 16px;grid-gap: 16px;}

	div[class*="alp-grid-"] > div a.alp-grid-photo::after,
	div[class*="alp-grid-"] > div a.alp-grid-photo:hover::after {background: #0000003b;}
	div[class*="alp-grid-"] > div a .ALPtxtGridView {background: var(--co1);border-color: var(--co1);}

	div[class*="alp-grid-"].alp-grid-text > div {-webkit-columns: 1;-moz-columns: 1;-o-columns: 1;columns: 1;}

	div[class*="alp-grid-"].alp-grid-main > div .ALPtxtGrid {left: 0;top: 0;width: 100%;height: 100%;justify-content: center;text-align: center;align-items: center;background: #1e1e28eb;opacity: 1;}
    div[class*="alp-grid-"].alp-grid-main > div .ALPtxtGrid .ALPtxtGridTitle {font-size: 1.5em;display: none;}
    div[class*="alp-grid-"].alp-grid-main > div a.alp-grid-photo::after {padding-bottom: 50%;}

    div[class*="alp-grid-"]:last-of-type > div {margin-bottom: 32px;}
}

.more::after {
    content: "Read More";
    display: inline-block;
    margin: 0px 0 24px 0;
    cursor: pointer;
    color: cornflowerblue;
    font-size: 12px;
    border-bottom: 1px solid;
}
#longdesc {max-width: 675px;margin: auto;position: relative;margin-bottom: 65px;}
#longdesc p { margin:0}
#longdesc .more {position:absolute;background:#fff;bottom: -50px;width: 100%;}
#longdesc.open .more:after {margin: 0 0 12px 0;}
#longdesc  .extra {display: none;}
#longdesc.open .extra, .open .extra { display: inline !important;}
#linkText {text-align: center;margin-top: 35px;}
#linkText a {margin:0 8px;text-decoration: underline;}



.size-chart {width: 100%;}
.size-chart tr {border-top: 1px solid #d7d7d7;margin: 0;display: inline-flex;float: left;clear: both;width: 100%;align-content: center;align-items: center;justify-content: flex-start;}
.size-chart tr:last-of-type {border-bottom: 1px solid #d7d7d7;}
.size-chart td {padding: 8px 16px;}
.size-chart tr:nth-child(odd) {background: #f4f4f4;}
.size-chart tr td:first-of-type {min-width: 40px; max-width: 100px; font-family: 'citrfontbold'; width: 100%;}
.size-chart tr td:nth-child(2)  {flex-grow:1}
.size-chart .slideOption {display: inline-block;padding: 4px 16px; text-align: center;background: var(--BLUE); color:#fff; border-radius: 100px !important;}

           
.splitContent { display:flex; gap:32px}
.splitTitle { min-width:35%}
.splitTitle { margin:0; font-weight: 700; font-size: clamp(1rem, 10vw, 2rem); }
@media screen and (max-width : 1023px) {
	.splitContent { flex-direction:column}
}                                                                                   /* ==================================================
   Banner Collections - Live Output CSS
   
   Upload to: /modules/css/faf/anna-collections.css
   
   Generated HTML uses modifier classes:
   - anna-lifestyle--cols-{1-6}
   - anna-lifestyle--ar-{ratio}
   - anna-lifestyle--mobile-{stack|swipe}
   - anna-product--cols-{3-8}
   - anna-product--ar-{ratio}
   - anna-product--mobile-{stack|swipe}
   - anna-link--thumb-{20|24|28|32|36|40|48}
   - anna-content--ar-{ratio}
   - anna-content--flip
   ================================================== */


/* -- Shared section title -- */
.LPTitle {float: none;display: block;clear: both;margin: 0 !important;}
.LPTitle h3::after {
     color;
     background: var(--color2);
}
.LPTitle.LPTitle h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
  border-top: 1px solid #cacaca;
}

/* ==================================================
   LIFESTYLE BANNERS
   ================================================== */
.anna-lifestyle {
  display: grid;
  gap: 16px;
  padding: 16px 0;
}
.anna-lifestyle__card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  container: Card / inline-size;
}
.anna-lifestyle__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anna-lifestyle__img--contain { object-fit: contain; }
.anna-lifestyle__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(transparent, rgba(0,0,0,0.35)); }
.anna-lifestyle__title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: #fff; }
.anna-lifestyle__cta { display: inline-block; padding: 8px 20px; background: #fff; color: #1a1a1a; border-radius: 24px; font-size: 13px; font-weight: 600; }
@container Card (max-width: 300px) { .anna-lifestyle__cta { display: none; } }

/* Lifestyle columns */
.anna-lifestyle--cols-1 { grid-template-columns: repeat(1, 1fr); }
.anna-lifestyle--cols-2 { grid-template-columns: repeat(2, 1fr); }
.anna-lifestyle--cols-3 { grid-template-columns: repeat(3, 1fr); }
.anna-lifestyle--cols-4 { grid-template-columns: repeat(4, 1fr); }
.anna-lifestyle--cols-5 { grid-template-columns: repeat(5, 1fr); }
.anna-lifestyle--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Lifestyle aspect ratios */
.anna-lifestyle--ar-1-1 .anna-lifestyle__card { aspect-ratio: 1 / 1; }
.anna-lifestyle--ar-4-3 .anna-lifestyle__card { aspect-ratio: 4 / 3; }
.anna-lifestyle--ar-3-2 .anna-lifestyle__card { aspect-ratio: 3 / 2; }
.anna-lifestyle--ar-16-9 .anna-lifestyle__card { aspect-ratio: 16 / 9; }
.anna-lifestyle--ar-21-9 .anna-lifestyle__card { aspect-ratio: 21 / 9; }
.anna-lifestyle--ar-2-3 .anna-lifestyle__card { aspect-ratio: 2 / 3; }
.anna-lifestyle--ar-3-4 .anna-lifestyle__card { aspect-ratio: 3 / 4; }
.anna-lifestyle--ar-9-16 .anna-lifestyle__card { aspect-ratio: 9 / 16; }


/* ==================================================
   PRODUCT CARDS
   ================================================== */
.anna-product {
  display: grid;
  gap: 16px;
  padding: 16px 0;
}
.anna-product__card { display: block; text-decoration: none; color: #1a1a1a; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s; }
.anna-product__card:hover {border: 1px solid #dddddd;}
.anna-product__img-wrap { background: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 12px; }
.anna-product__img-wrap:has(.anna-product__img--cover) { padding:0}
.anna-product__img {max-width: 100%;max-height: 100%;height: 100%;width: 100%;object-fit: contain;mix-blend-mode: darken;}
.anna-product__img--cover { object-fit: cover; mix-blend-mode: normal; }
.anna-product__label { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.anna-product__arrow { font-size: 18px; color: #999; }

/* Product columns */
.anna-product--cols-3 { grid-template-columns: repeat(3, 1fr); }
.anna-product--cols-4 { grid-template-columns: repeat(4, 1fr); }
.anna-product--cols-5 { grid-template-columns: repeat(5, 1fr); }
.anna-product--cols-6 { grid-template-columns: repeat(6, 1fr); }
.anna-product--cols-7 { grid-template-columns: repeat(7, 1fr); }
.anna-product--cols-8 { grid-template-columns: repeat(8, 1fr); }

/* Product aspect ratios */
.anna-product--ar-1-1 .anna-product__img-wrap { aspect-ratio: 1 / 1; }
.anna-product--ar-4-3 .anna-product__img-wrap { aspect-ratio: 4 / 3; }
.anna-product--ar-3-2 .anna-product__img-wrap { aspect-ratio: 3 / 2; }
.anna-product--ar-16-9 .anna-product__img-wrap { aspect-ratio: 16 / 9; }
.anna-product--ar-21-9 .anna-product__img-wrap { aspect-ratio: 21 / 9; }
.anna-product--ar-2-3 .anna-product__img-wrap { aspect-ratio: 2 / 3; }
.anna-product--ar-3-4 .anna-product__img-wrap { aspect-ratio: 3 / 4; }
.anna-product--ar-9-16 .anna-product__img-wrap { aspect-ratio: 9 / 16; }


/* ==================================================
   LINK PILLS
   ================================================== */
.anna-link { display: flex; gap: 10px; padding: 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.anna-link::-webkit-scrollbar { display: none; }
.anna-link__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 1px solid #e0e0e0; border-radius: 999px; text-decoration: none; color: #1a1a1a; font-size: 13px; font-weight: 600; white-space: nowrap; background: #fff; transition: all 0.2s; }
.anna-link__pill:hover { border-color: #bbb; }
.anna-link__pill--active { background: #1a3a2a; color: #fff; border-color: #1a3a2a; }

/* Link thumbnail sizes */
.anna-link__thumb { border-radius: 50%; object-fit: cover; }
.anna-link--thumb-20 .anna-link__thumb { width: 20px; height: 20px; }
.anna-link--thumb-24 .anna-link__thumb { width: 24px; height: 24px; }
.anna-link--thumb-28 .anna-link__thumb { width: 28px; height: 28px; }
.anna-link--thumb-32 .anna-link__thumb { width: 32px; height: 32px; }
.anna-link--thumb-36 .anna-link__thumb { width: 36px; height: 36px; }
.anna-link--thumb-40 .anna-link__thumb { width: 40px; height: 40px; }
.anna-link--thumb-48 .anna-link__thumb { width: 48px; height: 48px; }


/* ==================================================
   CONTENT BLOCK
   ================================================== */
.anna-content {
  display: flex;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
}
.anna-content--flip { flex-direction: row-reverse; }

.anna-content__img-wrap { flex: 0 0 40%; overflow: hidden; }
.anna-content__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anna-content__img--contain { object-fit: contain; }

.anna-content__body {
  flex: 1;
  padding: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color3);
}
.anna-content__logo {max-height: 50px;margin-bottom: 14px;object-fit: contain;mix-blend-mode: darken;}
.anna-content__heading { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; color: #1a1a1a; }
.anna-content__desc {font-size: 0.9rem;color: #555;line-height: 1.7;margin-bottom: 32px;max-width: 650px;text-wrap-style: balance;}

.anna-content__links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.anna-content__link { text-decoration: none; color: #1a1a1a; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.anna-content__link-thumb { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #e0e0e0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f8f8f8; }
.anna-content__link-thumb img { width: 100%; height: 100%; object-fit: cover; }
.anna-content__link span { font-size: 13px; font-weight: 600; text-decoration: underline; }

.anna-content__cta { display: inline-block; padding: 12px 36px; color: #fff; border-radius: 24px; font-weight: 700; font-size: 13px; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; }

/* Content aspect ratios */
.anna-content--ar-1-1 .anna-content__img-wrap { aspect-ratio: 1 / 1; }
.anna-content--ar-4-3 .anna-content__img-wrap { aspect-ratio: 4 / 3; }
.anna-content--ar-3-2 .anna-content__img-wrap { aspect-ratio: 3 / 2; }
.anna-content--ar-16-9 .anna-content__img-wrap { aspect-ratio: 16 / 9; }
.anna-content--ar-21-9 .anna-content__img-wrap { aspect-ratio: 21 / 9; }
.anna-content--ar-2-3 .anna-content__img-wrap { aspect-ratio: 2 / 3; }
.anna-content--ar-3-4 .anna-content__img-wrap { aspect-ratio: 3 / 4; }
.anna-content--ar-9-16 .anna-content__img-wrap { aspect-ratio: 9 / 16; }


/* ==================================================
   RESPONSIVE - STACK MODE
   
   Stack progressively reduces columns at each 
   breakpoint. Applied when --mobile-stack is set.
   ================================================== */

/* -- Mobile: up to 767px -- */
@media screen and (max-width: 767.9px) {
  /* Lifestyle stack */
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-1 { grid-template-columns: 1fr; }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-2 { grid-template-columns: 1fr; }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-5 { grid-template-columns: repeat(2, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-6 { grid-template-columns: repeat(2, 1fr); }

  /* Product stack */
  .anna-product--mobile-stack.anna-product--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-6 { grid-template-columns: repeat(3, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-7 { grid-template-columns: repeat(3, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-8 { grid-template-columns: repeat(3, 1fr); }

  /* Lifestyle swipe */
  .anna-lifestyle--mobile-swipe {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
  }
  .anna-lifestyle--mobile-swipe::-webkit-scrollbar { display: none; }
  .anna-lifestyle--mobile-swipe .anna-lifestyle__card {
    flex: 0 0 75%;
    scroll-snap-align: start;
  }

  /* Product swipe */
  .anna-product--mobile-swipe {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
  }
  .anna-product--mobile-swipe::-webkit-scrollbar { display: none; }
  .anna-product--mobile-swipe .anna-product__card {
    flex: 0 0 40%;
    scroll-snap-align: start;
  }

  /* Content stack */
  .anna-content,
  .anna-content--flip { flex-direction: column; }
  .anna-content__img-wrap { flex: none; }
  .anna-content__body { padding: 24px 16px; }
  .anna-content__link-thumb { width: 60px; height: 60px; }
  .anna-content__links { gap: 14px; }

  /* General mobile tidy */
  .anna-lifestyle { gap: 12px; }
  .anna-product { gap: 12px; }
}

/* -- Tablet: 768px to 1023px -- */
@media screen and (min-width: 768px) and (max-width: 1023.99px) {
  /* Lifestyle stack */
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-1 { grid-template-columns: 1fr; }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-4 { grid-template-columns: repeat(3, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .anna-lifestyle--mobile-stack.anna-lifestyle--cols-6 { grid-template-columns: repeat(3, 1fr); }

  /* Lifestyle swipe (tablet still uses grid, just fewer cols) */
  .anna-lifestyle--mobile-swipe.anna-lifestyle--cols-4 { grid-template-columns: repeat(3, 1fr); }
  .anna-lifestyle--mobile-swipe.anna-lifestyle--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .anna-lifestyle--mobile-swipe.anna-lifestyle--cols-6 { grid-template-columns: repeat(3, 1fr); }

  /* Product stack */
  .anna-product--mobile-stack.anna-product--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-4 { grid-template-columns: repeat(3, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-6 { grid-template-columns: repeat(4, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-7 { grid-template-columns: repeat(4, 1fr); }
  .anna-product--mobile-stack.anna-product--cols-8 { grid-template-columns: repeat(4, 1fr); }

  /* Product swipe (tablet still uses grid, just fewer cols) */
  .anna-product--mobile-swipe.anna-product--cols-5 { grid-template-columns: repeat(4, 1fr); }
  .anna-product--mobile-swipe.anna-product--cols-6 { grid-template-columns: repeat(4, 1fr); }
  .anna-product--mobile-swipe.anna-product--cols-7 { grid-template-columns: repeat(4, 1fr); }
  .anna-product--mobile-swipe.anna-product--cols-8 { grid-template-columns: repeat(4, 1fr); }

  /* Content tablet */
  .anna-content__img-wrap { flex: 0 0 45%; }
}

/* -- Small desktop: 1024px to 1439px -- */
@media screen and (min-width: 1024px) and (max-width: 1439.99px) {
  /* Lifestyle - reduce by 1 col for 4+ */
  .anna-lifestyle--cols-4 { grid-template-columns: repeat(3, 1fr); }
  .anna-lifestyle--cols-5 { grid-template-columns: repeat(4, 1fr); }
  .anna-lifestyle--cols-6 { grid-template-columns: repeat(4, 1fr); }

  /* Product - reduce by 1-2 cols for 5+ */
  .anna-product--cols-5 { grid-template-columns: repeat(4, 1fr); }
  .anna-product--cols-6 { grid-template-columns: repeat(5, 1fr); }
  .anna-product--cols-7 { grid-template-columns: repeat(5, 1fr); }
  .anna-product--cols-8 { grid-template-columns: repeat(6, 1fr); }
}
@media screen and (max-width: 1024px) {

    div.cg-overflow-x-ctr-mobile { 
        overflow-x: scroll;
        display: flex;
        flex-flow: row;
        flex-wrap: nowrap;}
     
    .cg-overflow-x-ctr-mobile > div{
        min-width: 80%;
    }
    
 }

/*
 _________Contents________  

1. Buttons

2. Image

3. Colors
    a.Text Color
    b.Background Color

4. Fonts
    a.Font Sizing / Line Height
    b.Alignment
    c.Transform
    d.Weight
    e.Text Wrap

5. Layout
    a.Grid Column
    b.Grid Gap
    c.Column
    d.Padding
    e.Margin
    f.Flex Grow
    g.Gap

6. Borders
    a.Border
    b.Box Style
    c.Border Radius

7. Flex
    a.Flex Direction
    b.wrap
    c.justify-content
    d.align-content
    e.align-items


8.Overflow

9.Fill Available


*/

/* ________Buttons________ */

a.cg-button {
    color: var(--cg-color-white);
    background: var(--BLUE);
    padding: .5rem 1rem;
    width: fit-content;
    text-decoration: none;
}

/* ________Image________ */
.cg-img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}


/* ________Colors________ */

/* Text Color */

.cg-color-1 {
    color: var(--cg-color-1);
}

.cg-color-2 {
    color: var(--cg-color-2);
}

.cg-color-3 {
    color: var(--cg-color-3);
}

.cg-color-4 {
    color: var(--cg-color-4);
}

.cg-color-5 {
    color: var(--cg-color-5);
}

.cg-color-6 {
    color: var(--cg-color-6);
}

.cg-color-7 {
    color: var(--cg-color-7);
}

.cg-color-8 {
    color: var(--cg-color-8);
}

.cg-color-9 {
    color: var(--cg-color-9);
}


.cg-color-blk {
    color: var(--cg-color-black);
}

.cg-color-wht {
    color: var(--cg-color-white);
}

/* Background Color */

.cg-bg-color-1 {
    background-color: var(--cg-color-1);
}

.cg-bg-color-2 {
    background-color: var(--cg-color-2);
}

.cg-bg-color-3 {
    background-color: var(--cg-color-3);
}

.cg-bg-color-4 {
    background-color: var(--cg-color-4);
}

.cg-bg-color-5 {
    background-color: var(--cg-color-5);
}

.cg-bg-color-6 {
    background-color: var(--cg-color-6);
}

.cg-bg-color-7 {
    background-color: var(--cg-color-7);
}

.cg-bg-color-8 {
    background-color: var(--cg-color-8);
}

.cg-bg-color-9 {
    background-color: var(--cg-color-9);
}


.cg-bg-color-blk {
    background-color: var(--cg-color-black);
}

.cg-bg-color-wht {
    background-color: var(--cg-color-white);
}


/* ________Fonts________ */

/* Font Sizing*/

.cg-font-xs {
    font-size: .5rem;
}

.cg-font-s {
    font-size: .7rem;
}

.cg-font-sm {
    font-size: .8rem;
}

.cg-font-m {
    font-size: 1rem;
}

.cg-font-ml {
    font-size: 1.5rem;
}

.cg-font-l {
    font-size: 2rem;
}

.cg-font-xl {
    font-size: 2.5rem;
}

.cg-font-xxl {
    font-size: 5rem;
}

.cg-font-xxxl {
    font-size: 6rem;
}

@media screen and (max-width: 767.99px) {
    .cg-font-xxl, .cg-font-xxxl {
        font-size: 2.5rem;
    }
}


.cg-line-height-1 {
    line-height: 1rem;
}

.cg-line-height-15 {
    line-height: 1.5rem;
}

.cg-line-height-125 {
    line-height: 1.25rem;
}

.cg-line-height-175 {
    line-height: 1.75rem;
}

.cg-line-height-2 {
    line-height: 2rem;
}

.cg-line-height-3 {
    line-height: 3rem;
}

.cg-line-height-4 {
    line-height: 4rem;
}

.cg-line-height-5 {
    line-height: 5rem;
}

@media screen and (max-width: 767.99px) {
    .cg-line-height-4, .cg-line-height-5 {
        line-height: 3rem;
    }
}

/*  Alignment */

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

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

.cg-text-center {
    text-align: center;
}

.cg-text-justify {
    text-align: justify;
}

.cg-text-nowrap {
    white-space: nowrap;
}

/*  Transformation */

.cg-text-lowercase {
    text-transform: lowercase;
}

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

.cg-text-capitalize {
    text-transform: capitalize;
}

/* Weight */

.cg-weight-lighter {
    font-weight: lighter;
}

.cg-weight-normal {
    font-weight: normal;
}

.cg-weight-bold {
    font-weight: bold;
}

.cg-weight-bolder {
    font-weight: bolder;
}

/* Text Wrap */

.cg-text-wrap {
    text-wrap: wrap;
}

.cg-text-nowrap {
    text-wrap: nowrap;
}

.cg-text-balance {
    text-wrap: balance;
}

.cg-text-pretty {
    text-wrap: pretty;
}

/* Letter Spacing */

.cg-letter-spacing-tighter {
    letter-spacing: -0.05em;
}

.cg-letter-spacing-tight {
    letter-spacing: -0.025em;
}

.cg-letter-spacing-normal {
    letter-spacing: 0em;
}

.cg-letter-spacing-wide {
    letter-spacing: 0.025em;
}

.cg-letter-spacing-wider {
    letter-spacing: 0.05em;
}

.cg-letter-spacing-widest {
    letter-spacing: 0.1em;
}


/* ________Layout________ */


/* Grid Column */

[class*="cg-grid-col-"]{
    display: grid;
}

.cg-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
}

.cg-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cg-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cg-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.cg-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
}

.cg-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
}

.cg-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
}

.cg-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
}

.cg-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
}

@media screen and (max-width: 1023.99px) {
    [class*="cg-grid-col-"] {
        grid-template-columns: repeat(1, 1fr);
    }

    .cg-grid-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-grid-col-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .cg-grid-col-5 {
        grid-template-columns: repeat(1, 1fr)
    }

    .cg-grid-col-6 {
        grid-template-columns: repeat(2, 1fr)
    }

    .cg-grid-col-8 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-grid-col-10 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-grid-col-12 {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

@media screen and (max-width: 767.99px) {
    [class*="cg-grid-col-"] {
        grid-template-columns: repeat(1, 1fr);
    }

    .cg-grid-col-2>div {
        grid-template-columns: repeat(1, 1fr);
    }

    .cg-grid-col-4>div {
        grid-template-columns: repeat(2, 1fr)
    }

    .cg-grid-col-5>div {
        grid-template-columns: repeat(1, 1fr)
    }

    .cg-grid-col-6>div {
        grid-template-columns: repeat(2, 1fr)
    }
}


/* Grid Gap */

.cg-grid-gap-0 {
    grid-gap: 0em !important;
}

.cg-grid-gap-1 {
    grid-gap: 1rem;
}

.cg-grid-gap-2 {
    grid-gap: 2rem;
}

.cg-grid-gap-3 {
    grid-gap: 3rem;
}

.cg-grid-gap-4 {
    grid-gap: 4rem;
}


/* Column */

.cg-col-1 {
    width: 100%
}

.cg-col-2 {
    width: 50%
}

.cg-col-3 {
    width: 33.33%
}

.cg-col-4 {
    width: 25%
}

.cg-col-5 {
    width: 20%
}

.cg-col-6 {
    width: 16.66%
}

.cg-col-8 {
    width: 12.50%
}

.cg-col-9 {
    width: 11.11%
}

.cg-col-10 {
    width: 10%
}

.cg-col-12 {
    width: 8.33%
}

.cg-col-90p {
    width: 90%
}

.cg-col-80p {
    width: 80%
}

.cg-col-75p {
    width: 75%
}

.cg-col-70p {
    width: 70%
}

.cg-col-66p {
    width: 66.66%
}

.cg-col-60p {
    width: 60%
}

.cg-col-40p {
    width: 40%
}

.cg-col-30p {
    width: 30%
}

.cg-col-25p {
    width: 25%
}

.cg-col-20p {
    width: 20%
}

.cg-col-10p {
    width: 10%
}

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

    .cg-col-1,
    .cg-col-2,
    .cg-col-3,
    .cg-col-4,
    .cg-col-5,
    .cg-col-6,
    .cg-col-7,
    .cg-col-90p,
    .cg-col-80p,
    .cg-col-75p,
    .cg-col-70p,
    .cg-col-66p,
    .cg-col-60p,
    .cg-col-40p,
    .cg-col-30p,
    .cg-col-25p,
    .cg-col-20p,
    .cg-col-10p {
        width: 100%
    }

    .cg-col-8 {
        width: 12.50%
    }

    .cg-col-9 {
        width: 11.11%
    }

    .cg-col-10 {
        width: 10%
    }

    .cg-col-12 {
        width: 8.33%
    }
}

/* Padding */

.cg-pad-0 {
    padding: 0rem;
}

.cg-pad-1 {
    padding: 1rem;
}

.cg-pad-2 {
    padding: 2rem;
}

.cg-pad-3 {
    padding: 3rem;
}

.cg-pad-4 {
    padding: 4rem;
}

.cg-pad-5 {
    padding: 5rem;
}

.cg-pad-6 {
    padding: 6rem;
}

/*top*/

.cg-pad-t-0 {
    padding-top: 0rem;
}

.cg-pad-t-1 {
    padding-top: 1rem;
}

.cg-pad-t-2 {
    padding-top: 2rem;
}

.cg-pad-t-3 {
    padding-top: 3rem;
}

.cg-pad-t-4 {
    padding-top: 4rem;
}

.cg-pad-t-5 {
    padding-top: 5rem;
}

.cg-pad-t-6 {
    padding-top: 6rem;
}


/*bottom*/

.cg-pad-b-0 {
    padding-bottom: 0rem;
}

.cg-pad-b-1 {
    padding-bottom: 1rem;
}

.cg-pad-b-2 {
    padding-bottom: 2rem;
}

.cg-pad-b-3 {
    padding-bottom: 3rem;
}

.cg-pad-b-4 {
    padding-bottom: 4rem;
}

.cg-pad-b-5 {
    padding-bottom: 5rem;
}

.cg-pad-b-6 {
    padding-bottom: 6rem;
}


/*Left*/
.cg-pad-l-0 {
    padding-left: 0rem;
}

.cg-pad-l-1 {
    padding-left: 1rem;
}

.cg-pad-l-2 {
    padding-left: 2rem;
}

.cg-pad-l-3 {
    padding-left: 3rem;
}

.cg-pad-l-4 {
    padding-left: 4rem;
}

.cg-pad-l-5 {
    padding-left: 5rem;
}

.cg-pad-l-6 {
    padding-left: 6rem;
}


/*Right*/

.cg-pad-r-0 {
    padding-right: 0rem;
}

.cg-pad-r-1 {
    padding-right: 1rem;
}

.cg-pad-r-2 {
    padding-right: 2rem;
}

.cg-pad-r-3 {
    padding-right: 3rem;
}

.cg-pad-r-4 {
    padding-right: 4rem;
}

.cg-pad-r-5 {
    padding-right: 5rem;
}

.cg-pad-r-6 {
    padding-right: 6rem;
}


/*Block*/

.cg-pad-block-0 {
    padding-block: 0rem;
}

.cg-pad-block-1 {
    padding-block: 1rem;
}

.cg-pad-block-2 {
    padding-block: 2rem;
}

.cg-pad-block-3 {
    padding-block: 3rem;
}

.cg-pad-block-4 {
    padding-block: 4rem;
}

.cg-pad-block-5 {
    padding-block: 5rem;
}

.cg-pad-block-6 {
    padding-block: 6rem;
}


/*Inline*/

.cg-pad-inline-0 {
    padding-inline: 0rem;
}

.cg-pad-inline-1 {
    padding-inline: 1rem;
}

.cg-pad-inline-2 {
    padding-inline: 2rem;
}

.cg-pad-inline-3 {
    padding-inline: 3rem;
}

.cg-pad-inline-4 {
    padding-inline: 4rem;
}

.cg-pad-inline-5 {
    padding-inline: 5rem;
}

.cg-pad-inline-6 {
    padding-inline: 6rem;
}

/* margin */

.cg-mrg-0 {
    margin: 0rem;
}

.cg-mrg-1 {
    margin: 1rem;
}

.cg-mrg-2 {
    margin: 2rem;
}

.cg-mrg-3 {
    margin: 3rem;
}

.cg-mrg-4 {
    margin: 4rem;
}

.cg-mrg-5 {
    margin: 5rem;
}

.cg-mrg-6 {
    margin: 6rem;
}

.cg-mrg-auto {
    margin: auto;
}


/*top*/

.cg-mrg-t-0 {
    margin-top: 0rem;
}

.cg-mrg-t-1 {
    margin-top: 1rem;
}

.cg-mrg-t-2 {
    margin-top: 2rem;
}

.cg-mrg-t-3 {
    margin-top: 3rem;
}

.cg-mrg-t-4 {
    margin-top: 4rem;
}

.cg-mrg-t-5 {
    margin-top: 5rem;
}

.cg-mrg-t-6 {
    margin-top: 6rem;
}

.cg-mrg-t-auto {
    margin-top: auto;
}


/*bottom*/

.cg-mrg-b-0 {
    margin-bottom: 0rem;
}

.cg-mrg-b-1 {
    margin-bottom: 1rem;
}

.cg-mrg-b-2 {
    margin-bottom: 2rem;
}

.cg-mrg-b-3 {
    margin-bottom: 3rem;
}

.cg-mrg-b-4 {
    margin-bottom: 4rem;
}

.cg-mrg-b-5 {
    margin-bottom: 5rem;
}

.cg-mrg-b-6 {
    margin-bottom: 6rem;
}

.cg-mrg-b-auto {
    margin-bottom: auto;
}

/*Left*/
.cg-mrg-l-0 {
    margin-left: 0rem;
}

.cg-mrg-l-1 {
    margin-left: 1rem;
}

.cg-mrg-l-2 {
    margin-left: 2rem;
}

.cg-mrg-l-3 {
    margin-left: 3rem;
}

.cg-mrg-l-4 {
    margin-left: 4rem;
}

.cg-mrg-l-5 {
    margin-left: 5rem;
}

.cg-mrg-l-6 {
    margin-left: 6rem;
}

.cg-mrg-l-auto {
    margin-left: 6rem;
}

/*Right*/

.cg-mrg-r-0 {
    margin-right: 0rem;
}

.cg-mrg-r-1 {
    margin-right: 1rem;
}

.cg-mrg-r-2 {
    margin-right: 2rem;
}

.cg-mrg-r-3 {
    margin-right: 3rem;
}

.cg-mrg-r-4 {
    margin-right: 4rem;
}

.cg-mrg-r-5 {
    margin-right: 5rem;
}

.cg-mrg-r-6 {
    margin-right: 6rem;
}

.cg-mrg-r-auto {
    margin-right: auto;
}


/*Block*/

.cg-mrg-block-0 {
    margin-block: 0rem;
}

.cg-mrg-block-1 {
    margin-block: 1rem;
}

.cg-mrg-block-2 {
    margin-block: 2rem;
}

.cg-mrg-block-3 {
    margin-block: 3rem;
}

.cg-mrg-block-4 {
    margin-block: 4rem;
}

.cg-mrg-block-5 {
    margin-block: 5rem;
}

.cg-mrg-block-6 {
    margin-block: 6rem;
}

.cg-mrg-block-auto {
    margin-block: 6rem;
}

/*Inline*/

.cg-mrg-inline-0 {
    margin-inline: 0rem;
}

.cg-mrg-inline-1 {
    margin-inline: 1rem;
}

.cg-mrg-inline-2 {
    margin-inline: 2rem;
}

.cg-mrg-inline-3 {
    margin-inline: 3rem;
}

.cg-mrg-inline-4 {
    margin-inline: 4rem;
}

.cg-mrg-inline-5 {
    margin-inline: 5rem;
}

.cg-mrg-inline-6 {
    margin-inline: 6rem;
}

.cg-mrg-inline-auto {
    margin-inline: auto;
}

/* ________Borders________ */

/* Borders */

.cg-border-0 {
    border-width: 0px;
}

.cg-border-2 {
    border-width: 2px;
}

.cg-border-4 {
    border-width: 4px;
}

.cg-border-8 {
    border-width: 8px;
}

.cg-border {
    border-width: 1px;
}

.cg-border-t-0 {
    border-top-width: 0px;
}

.cg-border-t-2 {
    border-top-width: 2px;
}

.cg-border-t-4 {
    border-top-width: 4px;
}

.cg-border-t-8 {
    border-top-width: 8px;
}

.cg-border-t {
    border-top-width: 1px;
}

.cg-border-r-0 {
    border-right-width: 0px;
}

.cg-border-r-2 {
    border-right-width: 2px;
}

.cg-border-r-4 {
    border-right-width: 4px;
}

.cg-border-r-8 {
    border-right-width: 8px;
}

.cg-border-r {
    border-right-width: 1px;
}

.cg-border-b-0 {
    border-bottom-width: 0px;
}

.cg-border-b-2 {
    border-bottom-width: 2px;
}

.cg-border-b-4 {
    border-bottom-width: 4px;
}

.cg-border-b-8 {
    border-bottom-width: 8px;
}

.cg-border-b {
    border-bottom-width: 1px;
}

.cg-border-l-0 {
    border-left-width: 0px;
}

.cg-border-l-2 {
    border-left-width: 2px;
}

.cg-border-l-4 {
    border-left-width: 4px;
}

.cg-border-l-8 {
    border-left-width: 8px;
}

.cg-border-l {
    border-left-width: 1px;
}

/* Border Style */

.cg-border-solid {
    border-style: solid;
}

.cg-border-dashed {
    border-style: dashed;
}

.cg-border-dotted {
    border-style: dotted;
}

.cg-border-double {
    border-style: double;
}

.cg-border-hidden {
    border-style: hidden;
}

.cg-border-none {
    border-style: none;
}

/* Border Color */

.cg-border-color-1 {
    border-color: var(--cg-color-1)
}

.cg-border-color-2 {
    border-color: var(--cg-color-2)
}

.cg-border-color-3 {
    border-color: var(--cg-color-3)
}

.cg-border-color-4 {
    border-color: var(--cg-color-4)
}

.cg-border-color-5 {
    border-color: var(--cg-color-5)
}

.cg-border-color-6 {
    border-color: var(--cg-color-6)
}

.cg-border-color-7 {
    border-color: var(--cg-color-7)
}

.cg-border-color-8 {
    border-color: var(--cg-color-8)
}

.cg-border-color-9 {
    border-color: var(--cg-color-9)
}

.cg-border-color-blk {
    border-color: var(--cg-color-black);
}

.cg-border-color-wht {
    border-color: var(--cg-color-white);
}

/* Border Radius */

.cg-border-radius-0 {
    border-radius: 0px;
}

.cg-border-radius-sm {
    border-radius: 0.125rem;
    ;
}

.cg-border-radius {
    border-radius: 0.25rem;
}

.cg-border-radius-md {
    border-radius: 0.375rem;
}

.cg-border-radius-l {
    border-radius: 0.5rem;
}

.cg-border-radius-xl {
    border-radius: 0.75rem;
}

.cg-border-radius-xxl {
    border-radius: 1rem;
}

.cg-border-radius-xxxl {
    border-radius: 1.5rem;
}

.cg-border-radius-full {
    border-radius: 9999px;
}

/* Border radius Top Left*/

.cg-border-radius-tl-0 {
    border-top-left-radius: 0px;
}

.cg-border-radius-tl-sm {
    border-top-left-radius: 0.125rem;
    ;
}

.cg-border-radius-tl {
    border-top-left-radius: 0.25rem;
}

.cg-border-radius-tl-md {
    border-top-left-radius: 0.375rem;
}

.cg-border-radius-tl-l {
    border-top-left-radius: 0.5rem;
}

.cg-border-radius-tl-xl {
    border-top-left-radius: 0.75rem;
}

.cg-border-radius-tl-xxl {
    border-top-left-radius: 1rem;
}

.cg-border-radius-tl-xxxl {
    border-top-left-radius: 1.5rem;
}

.cg-border-radius-tl-full {
    border-top-left-radius: 9999px;
}

/* Border radius Top Right*/

.cg-border-radius-tr-0 {
    border-top-right-radius: 0px;
}

.cg-border-radius-tr-sm {
    border-top-right-radius: 0.125rem;
    ;
}

.cg-border-radius-tr {
    border-top-right-radius: 0.25rem;
}

.cg-border-radius-tr-md {
    border-top-right-radius: 0.375rem;
}

.cg-border-radius-tr-l {
    border-top-right-radius: 0.5rem;
}

.cg-border-radius-tr-xl {
    border-top-right-radius: 0.75rem;
}

.cg-border-radius-tr-xxl {
    border-top-right-radius: 1rem;
}

.cg-border-radius-tr-xxxl {
    border-top-right-radius: 1.5rem;
}

.cg-border-radius-tr-full {
    border-top-right-radius: 9999px;
}

/* Border radius Bottom Left */

.cg-border-radius-bl-0 {
    border-bottom-left-radius: 0px;
}

.cg-border-radius-bl-sm {
    border-bottom-left-radius: 0.125rem;
    ;
}

.cg-border-radius-bl {
    border-bottom-left-radius: 0.25rem;
}

.cg-border-radius-bl-md {
    border-bottom-left-radius: 0.375rem;
}

.cg-border-radius-bl-l {
    border-bottom-left-radius: 0.5rem;
}

.cg-border-radius-bl-xl {
    border-bottom-left-radius: 0.75rem;
}

.cg-border-radius-bl-xxl {
    border-bottom-left-radius: 1rem;
}

.cg-border-radius-bl-xxxl {
    border-bottom-left-radius: 1.5rem;
}

.cg-border-radius-bl-full {
    border-bottom-left-radius: 9999px;
}

/* Border radius Bottom Right */

.cg-border-radius-br-0 {
    border-bottom-right-radius: 0px;
}

.cg-border-radius-br-sm {
    border-bottom-right-radius: 0.125rem;
    ;
}

.cg-border-radius-br {
    border-bottom-right-radius: 0.25rem;
}

.cg-border-radius-br-md {
    border-bottom-right-radius: 0.375rem;
}

.cg-border-radius-br-l {
    border-bottom-right-radius: 0.5rem;
}

.cg-border-radius-br-xl {
    border-bottom-right-radius: 0.75rem;
}

.cg-border-radius-br-xxl {
    border-bottom-right-radius: 1rem;
}

.cg-border-radius-br-xxxl {
    border-bottom-right-radius: 1.5rem;
}

.cg-border-radius-br-full {
    border-bottom-right-radius: 9999px;
}

/* ________Flex________ */

.cg-flex {
    display: flex;
}

/* Flex Direction */

.cg-flex-row {
    flex-direction: row;
}

.cg-flex-row-reverse {
    flex-direction: row-reverse;
}

.cg-flex-col {
    flex-direction: column;
}

.cg-flex-col-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */

.cg-flex-wrap {
    flex-wrap: wrap
}

.cg-flex-wrap-reverse {
    flex-wrap: wrap-reverse
}

.cg-flex-nowrap {
    flex-wrap: nowrap
}

/* Justify Content */

.cg-justify-normal {
    justify-content: normal;
}

.cg-justify-start {
    justify-content: flex-start;
}

.cg-justify-end {
    justify-content: flex-end;
}

.cg-justify-center {
    justify-content: center;
}

.cg-justify-between {
    justify-content: space-between;
}

.cg-justify-around {
    justify-content: space-around;
}

.cg-justify-evenly {
    justify-content: space-evenly;
}

.cg-justify-stretch {
    justify-content: stretch;
}

/* Align Content */

.cg-content-normal {
    align-content: normal;
}

.cg-content-center {
    align-content: center;
}

.cg-content-start {
    align-content: flex-start;
}

.cg-content-end {
    align-content: flex-end;
}

.cg-content-between {
    align-content: space-between;
}

.cg-content-around {
    align-content: space-around;
}

.cg-content-evenly {
    align-content: space-evenly;
}

.cg-content-baseline {
    align-content: baseline;
}

.cg-content-stretch {
    align-content: stretch;
}

/* Align Items */

.cg-items-start {
    align-items: flex-start;
}

.cg-items-end {
    align-items: flex-end;
}

.cg-items-center {
    align-items: center;
}

.cg-items-baseline {
    align-items: baseline;
}

.cg-items-stretch {
    align-items: stretch;
}

/* Flex Grow */

.cg-flex-grow{
    flex-grow: 1;
}

.cg-flex-grow-0{
    flex-grow: 0;
}

/* Gap */

.cg-gap-0{
    gap: 0px;
}

.cg-gap-25{
    gap: .25rem;
}

.cg-gap-05{
    gap: .5rem;
}

.cg-gap-75{
    gap: .75rem;
}

.cg-gap-1{
    gap: 1rem;
}

.cg-gap-1-25{
    gap: 1.25rem;
}

.cg-gap-1-5{
    gap: 1.5rem;
}

.cg-gap-1-75{
    gap: 1.75rem;
}

.cg-gap-2{
    gap: 2rem;
}

/* ________Overflow________ */

.cg-overflow-auto {
    overflow: auto;
}

.cg-overflow-hidden {
    overflow: hidden;
}

.cg-overflow-clip {
    overflow: clip;
}

.cg-overflow-visible {
    overflow: visible;
}

.cg-overflow-scroll {
    overflow: scroll;
}

.cg-overflow-x-auto {
    overflow-x: auto;
}

.cg-overflow-y-auto {
    overflow-y: auto;
}

.cg-overflow-x-hidden {
    overflow-x: hidden;
}

.cg-overflow-y-hidden {
    overflow-y: hidden;
}

.cg-overflow-x-clip {
    overflow-x: clip;
}

.cg-overflow-y-clip {
    overflow-y: clip;
}

.cg-overflow-x-visible {
    overflow-x: visible;
}

.cg-overflow-y-visible {
    overflow-y: visible;
}

.cg-overflow-x-scroll {
    overflow-x: scroll;
}

.cg-overflow-y-scroll {
    overflow-y: scroll;
}

/* ________Fill Available________ */


@media screen and (min-width: 1023.99px) {
    .cg-fill-available{
        height: -webkit-fill-available;
    } 
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            .cg-accordions {
    width: 100%;
    margin: 0 auto;
  }
  
  .cg-accordion {
      border: 1px solid #ccc;
      margin-bottom: 0;
      overflow: hidden;
      /* transition: border-color .5s ease; */
  }
  
  .cg-accordion:hover {
    border-color: #000;
  }
  
  .cg-accordion__header {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 32px 0 0;
  }
  .cg-accordion__header:after, .cg-accordion__header:before {
    content: '';
    position: absolute;
    right: 0.5em;
    width: 2px;
    height: 0.75em;
    background-color: #666;
    transition: all 0.2s;
  }
  .cg-accordion__header:after {
    transform: rotate(90deg);
  }
  
  .cg-accordion:has(input:checked) .cg-accordion__header {
    color: #000;
  }
  
  .cg-accordion__content {
    max-height: 0;
    overflow: hidden;
    /* transition: max-height 0.5s ease; */
    font-size: smaller;
  }
  
  .cg-accordion input {
    display: none;
  }
  
  .cg-accordion:has(input:checked) {
    border-color: #000;
    background-color: #fff;
  }

  
  .cg-accordion input:checked ~ .cg-accordion__header:before {
      transform: rotate(270deg) !important;
    background-color: #000;
   }
  
  .cg-accordion input:checked ~ .cg-accordion__header:after {
      transform: rotate(270deg) !important;
    background-color: #000;
   }
  
  .cg-accordion input:checked ~ .cg-accordion__content {
      max-height: 1000px; /* Adjust based on content length */
      margin-top: 8px;
  }                                                                                                                                                       .mainControls, .helpfulTools {
    padding: 1rem;
    display: flex;
    flex-flow: wrap;
    gap: 1rem;
    background: rgb(241, 241, 241);
    border-radius: 10px;
    align-items: center;
}

.mainControls h2, .helpfulTools h2 {
    flex: 1 1 100%;
    margin-top: 0px;
}

.mainControls .button, .helpfulTools .button {
    margin-top: 25px;
}

.mainControls input, .mainControls select {
    background: rgb(255, 255, 255);
}

.cg-col-1:has(.mainControls) {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

.cardControls {
    padding: 1rem 0;
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.cg-col-1:has(.cardControls) {
    padding-top: 1rem;
}

.previewContainer {
    padding: 1rem;
}

.generatedCode, .pasteCode {
    padding: 1rem;
}

[data-tooltip]:hover::before {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    background: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0.5rem;
    transform: translateY(-79px);
    max-width: 250px;
    border: 2px solid;
}

[data-tooltip]:has([disabled="disabled"]):hover::before {
    content: "Scroll is forced over 4 cards, for a better mobile user expreience";
}

[data-card]:hover::before {
    display: block;
    position: absolute;
    content: "Click and hold to drag and move position";
    background: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0.5rem;
    transform: translateY(-55px);
    border: 2px solid;
}

[data-card]:hover {
    cursor: move;
}

.icon-arrow-up::before {
    content: "";
    font-size: 1.5rem;
    padding: 0.5rem;
}

.open.icon-arrow-up::before {
    content: "";
}

.accordion-header {
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    padding: 1rem;
    background: rgb(255, 255, 255);
    border: 2px solid rgb(241, 241, 241);
    cursor: pointer;
    display: flex !important;
}

.accordion-header h3 {
    display: flex;
    flex-flow: column;
    padding-left: 0;
    padding-right: 1rem;
    margin-block: 0px;
    margin-right: auto;
    font-size: small;
    font-weight: 400;
}

.accordion-header .button {
    background: none;
    border: 2px solid red;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    padding: 0.5rem;
}

.accordion-header .button:hover {
    background: red;
    color: rgb(255, 255, 255);
}

.accordion-header:hover {
    border: 2px solid rgb(202, 202, 202);
}

.accordion-header.open {
    border-radius: 10px 10px 0px 0px;
    border-width: 2px 2px 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: rgb(202, 202, 202);
    border-right-color: rgb(202, 202, 202);
    border-left-color: rgb(202, 202, 202);
    border-image: initial;
    border-bottom-style: initial;
    border-bottom-color: initial;
}

.accordion-content {
    padding: 1rem;
    border-width: 0px 2px 2px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: rgb(202, 202, 202);
    border-bottom-color: rgb(202, 202, 202);
    border-left-color: rgb(202, 202, 202);
    border-image: initial;
    background: rgb(241, 241, 241);
    border-top-style: initial;
    border-top-color: initial;
    border-radius: 0px 0px 10px 10px;
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.accordion-content .button {
    width: fit-content;
}

.accordion-content h3 {
    margin: 0px;
    padding-inline: 0.5rem; }

.accordion-content input, .accordion-content textarea {
    background: rgb(255, 255, 255);
}

.card-input {
margin-bottom:8px}

.card-input.active {
    
    opacity:1
}
.card-input:not(.active) {
    /* opacity: 0.5; */
}
.card-input:not(.active) .icon-check {
    border: 2px solid #cacaca;
    background: transparent;
}
.card-input:not(.active) .icon-check:before {
    content: "\e115";
    color: #adadad;
}
.accordion-header { gap:16px}
.card-input strong { flex-grow:1}
                                                                                                                                                                

.repeater h2 {
    text-align:center
}
.repeater > div p  {
    display:none;
}

.repeater .nowPrice-repeater  {
    font-weight:800
}

.repeater .splide__slide > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-repeater-info {
    display: flex;
    clear: both;
    flex-direction: column;
    gap: 8px;
}



.repeater .imgCtr {
    background-color: #efefef !important;
    /* mix-blend-mode: exclusion; */
    background-blend-mode: darken;
}

.repeater a {
    background-blend-mode: overlay;
}

.repeaterbutton {
    display:none
}
.repeater .pricingRepeater {display: flex;gap: 16px;align-items: flex-end;}

.repeater .nowPrice-repeater {font-size:larger}
.repeater .standardPrice-repeater {
    text-decoration: line-through;
}
.repeater .percentOff-repeater:after {
    content:" Off"
}




.repeater > div > a {
    margin: 0 auto 32px;
    float: none;
    display: inline-block;
    width: 100%;
    text-align: center;
}
.repeater img {
        aspect-ratio: 1;
object-fit: contain;
background: #fff;
padding: 16px;

}
.repeater li {
    display: flex;
    flex-direction: column;
    gap: 16px;

}
.repeater a {
    color: var(--bg-color);
}

.percentOff-repeater {
        color:red;
    }
                                         

   .repeater a:first-child {
    background: var(--color-light);
}
.repeater a img {
    background: var(--color-light);
    mix-blend-mode: darken;
}                                                                                                                                                                                                       .splide__container {
    box-sizing: border-box;
    position: relative
}

.splide__list {
    backface-visibility: hidden;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0!important;
    padding: 0!important
}

.splide.is-initialized:not(.is-active) .splide__list {
    display: block
}

.splide__pagination {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    pointer-events: none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto;
    background: none;
}

.splide:not(.is-overflow) .splide__pagination {
    display: none
}

.splide__progress__bar {
    width: 0
}

.splide {
    position: relative;
    visibility: hidden
}

.splide.is-initialized,.splide.is-rendered {
    visibility: visible
}

.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    list-style-type: none!important;
    margin: 0;
    position: relative
}

.splide__slide img {
    vertical-align: bottom
}

.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: transparent;
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause {
    display: none
}

.splide__toggle.is-active .splide__toggle__pause {
    display: inline
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0
}

@keyframes splide-loading {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.splide__track--fade>.splide__list>.splide__slide {
    margin: 0!important;
    opacity: 0;
    z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
    opacity: 1;
    z-index: 1
}

.splide--rtl {
    direction: rtl
}

.splide__track--ttb>.splide__list {
    display: block
}

.splide__arrow {
    border: 0;
    opacity: 1;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    background: rgb(255, 255, 255) !important;
    color: var(--cg-color-1);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.splide__arrow svg {
    fill: var(--bg-color);
    height: 1.2em;
    width: 1.2em
}

.splide__arrow:hover:not(:disabled) {
    opacity: 1
}

.splide__arrow:disabled {
    display:none !important
}

.splide__arrow:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__arrow--prev {
    left: 1rem
}
.offsetButtons .splide__arrow--prev {
    left: -1rem
}

.splide__arrow--prev svg {
    transform: scaleX(-1)
}

.splide__arrow--next {
    right: 1rem
}

.offsetButtons .splide__arrow--next {
    right: -1rem
}

.splide.is-focus-in .splide__arrow:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__pagination {
    bottom: .5em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1
}

.splide__pagination__page {
    background: #ccc;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 8px
}

.splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1.4);
    z-index: 1
}

.splide__pagination__page:hover {
    cursor: pointer;
    opacity: .9
}

.splide__pagination__page:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__progress__bar {
    background: #ccc;
    height: 3px
}

.splide__slide {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.splide__slide:focus {
    outline: 0
}

@supports(outline-offset: -3px) {
    .splide__slide:focus-visible {
        outline:3px solid #0bf;
        outline-offset: -3px
    }
}

@media screen and (-ms-high-contrast:none) {
    .splide__slide:focus-visible {
        border: 3px solid #0bf
    }
}

@supports(outline-offset: -3px) {
    .splide.is-focus-in .splide__slide:focus {
        outline:3px solid #0bf;
        outline-offset: -3px
    }
}

@media screen and (-ms-high-contrast:none) {
    .splide.is-focus-in .splide__slide:focus {
        border: 3px solid #0bf
    }

    .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
        border-color: #0bf
    }
}

.splide__toggle {
    cursor: pointer
}

.splide__toggle:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__track--nav>.splide__list>.splide__slide {
    border: 3px solid transparent;
    cursor: pointer
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: 3px solid #000
}

.splide__arrows--rtl .splide__arrow--prev {
    left: auto;
    right: 1em
}

.splide__arrows--rtl .splide__arrow--prev svg {
    transform: scaleX(1)
}

.splide__arrows--rtl .splide__arrow--next {
    left: 1em;
    right: auto
}

.splide__arrows--rtl .splide__arrow--next svg {
    transform: scaleX(-1)
}

.splide__arrows--ttb .splide__arrow {
    left: 50%;
    transform: translate(-50%)
}

.splide__arrows--ttb .splide__arrow--prev {
    top: 1em
}

.splide__arrows--ttb .splide__arrow--prev svg {
    transform: rotate(-90deg)
}

.splide__arrows--ttb .splide__arrow--next {
    bottom: 1em;
    top: auto
}

.splide__arrows--ttb .splide__arrow--next svg {
    transform: rotate(90deg)
}

.splide__pagination--ttb {
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    left: auto;
    padding: 1em 0;
    right: .5em;
    top: 0
}

/* Hide any empty text spans */
.splide .bannerTxtCtr span:empty {
  display: none;
}

/* Remove the gradient when no span has content */
.splide .bannerTxtCtr:not(:has(span:not(:empty))),
.splide .bannerTxtCtr:not(:has(span:not(:empty))):hover {
  background: none;
}
                                                                                                                                                                                                                                                                                                                 @font-face {
    font-family: 'citrfontbold';
    src: url('/font/worksans-medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* @font-face {
   
    src: url('/font/worksans-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */


:root {
    --fixedwidth: 100%;
    --butradius: 0px;

    --color1: #193050ff;
    --color2: #788698ff;
    --color3: #efefef;
    --color4: #e6e9ecff;
    --color5: #ffffffff;
    --color6: #000000ff;
    
}

/* Header & navigation styles (masthead, logo, nav icons, search/login/basket
   drop-downs, CTA strips, mega-menu) live in Navigation-Header.css */

/* -- global  -- */
.bgStandard {
    background: var(--color1);
}

/* .container, .wrapper {background: var(--bg-color)}  */
.innerWidth {
    max-width: 1660px;
    margin: auto;
    float: none;
}

.innerWidthText {
    max-width: 900px;
    margin: auto;
    float: none;
}

.innerWidthText p {
    margin: 32px 0;
}

html,
body {
    font-weight: 400;
    font-style: normal;
    color: #000;
     font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.current,
.bannerTitle,
.mainFont,
.ctaTitle,
.boldfont {
    font-family: 'citrfontbold';
    font-weight: 800;
    font-style: normal;
}


[class*="icon-"], [data-icon]:before, .fa {
    font-family: 'icons', 'feather' !important;
}


.fixed {
    max-width: 100%;
}

.ctaIcon,
[class*="icon-"]:hover {
    color: var(--color1);
}

.container {/* background: transparent; */}

.here {
    color: #e65204;
    font-weight: 700;
    border-bottom: 1px solid #e65204;
}

.here:hover {
    border-bottom: 1px solid #e65204;
}

@media screen and (max-width : 1024px) {
    .ctrPadTop16 {
        padding: 16px
    }
}


/* -- Width  -- */
.maxInner {
    max-width: 1240px;
}

.fixed {
    max-width: var(--fixedwidth)
}

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

    .fixed {
        max-width: 100%
    }
}

@media screen and (min-width : 321px) and (max-width : 414px) {

    .fixed {
        max-width: 100%
    }
}

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

    .fixed {
        max-width: 100%
    }
}

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

    .fixed {
        max-width: 100%
    }
}

@media screen and (min-width : 1025px) and (max-width : 1440px) {

    .fixed {
        max-width: 100%
    }
}

@media screen and (min-width : 1440px) and (max-width : var(--fixedwidth)) {

    .fixed {
        max-width: var(--fixedwidth)
    }
}

@media screen and (min-width : var(--fixedwidth)) {

    .fixed {
        max-width: var(--fixedwidth)
    }
}


.container>.ctrPad32,
.fixed>.ctrPad32 {
    padding: 32px;
}

@media screen and (max-width : var(--fixedwidth)) {

    .container>.ctrPad32,
    .fixed>.ctrPad32 {
        padding: 32px
    }
}

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

    .container>.ctrPad32,
    .fixed>.ctrPad32 {
        padding: 16px
    }
}

.footer a:hover,
.footer a:hover p,
a,
.checkList li:before {
    color: #000;
}

.CCartBut>div:first-of-type>a {
    font-size: 11px
}

.fafbackground {
    background: #fff
}

.social a {
    background-color: #212121 !important;
}


/* -- forms buttons  -- */
#ContinueLink {
    font-size: 10px
}

button,
.button,
.dark .button,
.dark button,
.col-1 .dropdownA2B .a2bButtonGo,
.but {
    text-transform: uppercase;
    font-family: 'citrfontbold';
    display: inline-block;
    background: var(--color1);
    border-radius: 50px;
}

button:hover,
.button:hover,
.a2bButtonGo:hover {}

#clLogin1-dev .ghost-button.ghost-button {
    border: 1px solid #e65204;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    background: #e65204;
    font-family: 'citrfontbold';
    display: inline-block;
}
}

.ghost-button.ghost-button {
    border: 1px solid #222222;
    color: #05070d;
    text-transform: uppercase;
    font-size: 14px;
    background: transparent;
    font-family: 'citrfontbold';
    display: inline-block;
}

.ghost-button.ghost-button:hover {
    border: 1px solid var(--color1);
    background: var(--color1);
    color: #f6f6f6;
}

button.ghost-button,
a.ghost-button {
    background: transparent;
    border: 1px solid var(--color1);
    color: var(--color1);
}

/* CSS Document */
form[action*="facet"] #body-wrapper-overlay~*,
form[action*="facet"] #body-wrapper-overlay+div .container,
form[action*="collection="] #body-wrapper-overlay+div .container,
.fafbackground {
    background: #FFFFFF
}


.wrapper #FafKnockoutResults .FAFFilters,
.FAFResults,
.FAF {
    background: #FFFFFF !important
}

form[action*="facet"] #body-wrapper-overlay+div .fixed,
form[action*="collection="] #body-wrapper-overlay+div .fixed {
    max-width: 100%
}


/* -- accordian  -- */
.accordianHeader>span.fa-unsorted:before,
.accordianHeader>span.fa-unsorted:after {
    height: 3px;
    border-radius: 3px;
}

.active .accordianHeader>span.fa-unsorted:before,
.active .accordianHeader>span.fa-unsorted:after {
    background: #3e5b3e;
}


/* -- Top Banners  -- */



/* -- Footer  -- */
.footer,
.footer .container {
    background: #f6f6f6;
    padding-bottom: 13px;
}


.btn-newsletter {
    color: #fafafa;
    background: #e65204;
    padding: 10px;
    border-radius: 7px;
    /* font-family: 'citrBold'; */
    /* font-family: 'citrfontreg'; */
}

.btn-newsletter:hover {
    background: #777;
}

.footer-btn-contain {
    margin-top: 30px;
}

.footer a:hover,
.footer a:hover p {
    color: #2c4f96;
}

.cards {
    color: #ffffff;
    background: #2c4f96;
    opacity: 1;
}

.footer .mainFont {
    font-size: larger;
    font-family: 'citrfontbold';
    color: #2c4f96;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.social a {
    background-color: #ffffff00 !important;
}

.social a:hover {
    filter: invert(0);
}

input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    border: 1px solid #585858;
}

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

.footer img {
    max-width: 100%;
    height: 100%;
}

.gutter64 {
    margin: 0 -32px;
}

.gutter64>li,
.gutter64>a,
.gutter64>div,
.gutter64>span,
.gutter64>img {
    padding: 0 32px;
}

.social a {
    filter: invert(1);
}

.social.social a:hover {
    background-color: transparent !important;
}

.footerNewsletter {
    color: #212329;
    margin: auto;
    /* float: inherit; */
    text-align: center;
    padding: 32px 32px 32px 32px;
}

.footerLogo img {
    max-width: 145px;
    /* transform: translateX(-50%) translateY(-50%); */
    background: #2d2e33;
    height: auto;
}

.footer {
    margin-bottom: 0px !important;
}

#footerEmail {
    background: #fff;
    /* font-family: 'citrfontreg'; */
    /* font-size: 14px; */
    /* height: 36px; */
    border: 2px solid #d5d5d5;
}

.citrusDate {
    margin: 0;
}

.foverlay{
    background: rgb(0 0 0 / 68%);
}

@media screen and (max-width: 767px) {
    .footer .mainFont:after {
        margin: 16px auto
    }

    .footerBrands a {
        width: 50%
    }

    .footer .zflex-sb {
        display: inline;
        width: 100%;
    }

    .footer .zflex-sb>div {
        margin: 0 0 64px 0;
    }

    .footer,
    .footer .container {
        padding-bottom: 17px;
    }
}

.fafbackground {
    background: #ffffff;
}


.footerRow:last-of-type {
    border-top: none;
    margin: 0px 0 32px;
}

.footer-grid-container {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px;
    justify-items: left;
}

.footer-logo-container {
    text-align: center;
}

.filter-red {
    filter: invert(12%) sepia(63%) saturate(7339%) hue-rotate(10deg) brightness(93%) contrast(120%);
    margin-right: 20px;
}

.footer-logo {
    margin: 30px;
}

.footer a,
.footer span,
.footer p {
    /* font-family: 'citrfontreg'; */
    color: #142b3b;
    font-size: 14px;
}

.footer .mainFont:after {
    content: "";
    width: 50px;
    height: 2px;
    background: #2c4f96;
    display: block;
    margin: 20px 0px 20px 0px;
}

.address-container .mainFont:after {
    content: "";
    width: 50px;
    height: 2px;
    background: #b48360;
    display: block;
    margin: 20px 0px 20px 0px;
}

.address-item img{
    margin-right: 1em;
}

@media screen and (max-width: 767px) {
    .footer-grid-container {
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(1, 1fr);
        -ms-grid-columns: 1fr;
        text-align: left;
        margin-left: 25px;
    }

}

@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    .footer-grid-container {
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(2, 1fr);
        margin-left: 57px;
        text-align: left;
        -ms-grid-columns: 1fr 1fr;
    }
}

.footerNewsletter {
    padding: 16px;
    text-align: center;
    color: #000;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-items: center;
}

.footerNewsletter>div {
    text-align: left;
}

.footerNewsletter>div:first-child {
    margin: 0 44px 0 0;
}

.footerNewsletter>div:first-child h3,
.footerNewsletter>div:first-child p {
    margin: 0;
}

.footerNewsletter>div:first-child h3 {
    text-transform: uppercase;
    font-size: 24px;
}

.footerNewsletter>div:first-child p {
    font-size: 14px;
}

.footerNewsletter>div.social {
    display: flex;
}

.footerNewsletter>div.zflexInline {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-grow: 2;
    margin: 0px;
}

.footerNewsletter div>h3 {
    margin: 0;
    font-size: 2em;
}

.footerNewsletter div>p {
    margin: 8px 0 0 0;
}

.footerNewsletter>div>input {
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    width: 100%;
    height: 54px;
    line-height: 54px;
    flex: 1;
    border-right: none;
}

.footerNewsletter>div>input:focus {
    background: none;
}

.footerNewsletter>div>input::placeholder {
    color: #000000;
    text-transform: uppercase;
    font-family: 'citrfontbold';
    font-size: 16px;
}

.footerNewsletter>div.zflexInline>a {
    border-radius: 0;
    height: 54px;
    line-height: 52px;
    background: #d5d5d5;
    margin: 0;
    font-size: 16px;
    width: auto;
    text-transform: uppercase;
    font-family: 'citrfontbold';
    color: #2c4f96;
}

.footerNewsletter>div.zflexInline>a:hover {
}

.footerNewsletter>div>#newsletter-footer-text {
    width: 100%;
    padding: 8px 0;
    text-align: left;
}

.footerNewsletter>div>#newsletter-footer-text:empty {
    display: none;
}

.footerNewsletter>div.social>a {
    border-radius: 0;
    background-color: #000 !important;
    margin: 0px 6px;
    height: 54px;
    width: 54px;
    line-height: 54px;
    display: block;
}


.footerBackground{
    background-image: url("/Images/Equiflair Banner Background_AdobeStock_215552699.jpeg?width=1200&quality=50");
    background-size: cover;
}

.social-card-container {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    margin-left: auto;
    -ms-grid-columns: 1fr 1fr;
    height: 400px;
    width: auto;
}

.filter-white {
    filter: invert(98%) sepia(99%) saturate(2%) hue-rotate(354deg) brightness(110%) contrast(100%);
}

.address-item {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 10px;
}

.address-container .mainFont {
    font-size: larger;
    /* font-family: 'citrfontreg'; */
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.address-container p {
    /* font-family: 'citrfontreg'; */
    color: #f6f6f6 !important;
    font-size: 14px;
    margin: 0px !important;
}

.address-item a {
    /* font-family: 'citrfontreg'; */
    color: #f6f6f6 !important;
    font-size: 14px;
    margin: 0px !important;
}

.address-container {
    margin-top: 20px;
}

.social-card-container .social a {
    filter: invert(0);
}

@media screen and (max-width: 767px) {
    .social-card-container {
        grid-template-columns: repeat(1, 1fr);
        -ms-grid-columns: 1fr 1fr;
        text-align: left;
        margin-left: 25px;
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    .social-card-container {
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(1, 1fr);
        text-align: left;
        -ms-grid-columns: 1fr 1fr;
    }
}

/* -- Newsletter  -- */
.footer-heading {
    /* margin: 40px 0px 40px 0px; */
    background: #2c4f96;
}

.footer-heading h3 {
    font-family: 'citrfontbold';
    font-size: 35px !important;
    color: #Fff;
}

.bg-light-grey {
    background: #e9e9e9;
}

.footer-heading p {
    /* font-family: 'citrfontreg'; */
    color: #f6f6f6;
    font-size: 14px;
    margin-top: 40px;
}

#newsletter-footer-submit {
    /* margin-top:20px; */
    /* border-radius:4px; */
    /* color:#fff; */
    /* background:#aaa; */
    /* font-size: 14px; */
    /* padding: 0px 20px 0px 20px; */
    /* text-transform: initial; */
    /* height: 30px; */
    /* line-height: 28px; */
}

#newsletter-footer-submit:hover {
}

/* -- Logo Overides  -- */

.highlight {
    position: relative;
    margin: 32px 0;
    text-align: center;
}

.highlight:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 1px solid #000000;
    width: 100%;
    transform: translateY(-50%);
    z-index: 0;
}

.highlight span {
    font-size: 20px;
    background: var(--bg-color);
    z-index: 1;
    position: relative;
    padding: 0 32px;
    margin: auto;
    float: none;
    font-family: 'citrfontbold';
}

.highlight.invert:after {
    border-top: 1px solid #a8acbe;
}

.highlight.invert span {
    background: #2c2d33;
    color: #fff;
}

.banner-awards a {
    pointer-events: none;
}

.invert,
.invert .container {
    background: #111111;
}

.invert * {
    color: #ffffff;
}

/* CSS Document */
/* CSS Grid Banners - FACET COLLECTIONS PAGE --------------------------------------------------------------- */
div[class*="css-image"],
span[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,
span[class*="css-image"].bgContain {
    background-size: contain !important;
    background-color: white !important;
}

span[class*="css-image"] {
    display: block;
}

[class*="gridBanner"]>div,
[class*="grirow"]>div {
    display: grid;
    padding: 0 0 1em 0;
    grid-gap: 3em;
}

[class*="gridBanner"]>div>a,
[class*="grirow"]>div>a {
    position: relative;
    width: 100%;
    height: 100%
}

[class*="gridBanner"]>div>a:hover .photo span:after,
[class*="grirow"]>div>a:hover .photo span:after {
    opacity: 1;
}

[class*="grirow"]>div {
    display: grid;
    padding: 0;
}

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

@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)
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.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)
    }
}

.gg1,
.gg1>div {
    grid-gap: 1em;
}

.gg0,
.gg0>div {
    grid-gap: 0em !important;
}

.bannerTxtCtr {
    position: absolute;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: center;
    padding: 32px 16px;
    z-index: 2;
    width: 100%;
    height: 100%;
    flex-direction: column;
    -ms-flex-direction: column;
    color: white;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d0e12+0,0d0e12+100&0+50,0.39+100 */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */
}

.bannerDesc:empty,
.bannerTitleGrid:empty,
.bannerView:empty {
    display: none;
}

.bannerDesc {
    font-size: smaller;
    padding: 0 !important;
}

.bannerTitle {
    font-size: x-large;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: 'citrfontbold';
    font-weight: normal;
}

.bannerView {
    font-size: small
}

.textBottom .bannerTxtCtr {
    background: none;
    position: relative;
    height: auto;
    order: 1;
    padding: 16px 0 32px;
    color: #000;
}

.textBottom>div {
    padding-bottom: 20px;
}

.textBottom>div a {
    display: inline-grid;
}

.textBottom .bannerDescGrid,
.textBottom .bannerTitleGrid,
.textBottom .bannerViewGrid {
    color: #222;
    padding: 0;
}

.textBottom .bannerTitleGrid {
    -webkit-line-clamp: 1;
}

.textBottom .bannerView {
    right: 0;
    margin: 0;
    border: none;
}

.textBottom .bannerTitle {
    text-shadow: none;
    font-size: 16px;
}

.alignleft,
.alignleft .bannerTxtCtr {
    text-align: left;
    align-items: end
}

.gBrandsBut {
    padding: 1em;
    background: #000;
    margin-bottom: 1em;
}

.gBrandsBut>div>a {
    text-align: center;
    padding: 1em 2em;
    color: #fff;
    text-decoration: underline;
    font-size: 14px;
    border: 1px solid #fff;
}

.gBrandsBut>div>a:hover {
    color: #BF1009;
    border: 1px solid #bf1009;
}

.gBrandsLogo {
    padding: 16px 0
}

.gGradient .bannerTxtCtrGrid {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d0e12+0,0d0e12+100&0+50,0.39+100 */
    background: -moz-linear-gradient(top, rgba(13, 14, 18, 0) 0%, rgba(13, 14, 18, 0) 50%, rgba(13, 14, 18, 0.39) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(13, 14, 18, 0) 0%, rgba(13, 14, 18, 0) 50%, rgba(13, 14, 18, 0.39) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(13, 14, 18, 0) 0%, rgba(13, 14, 18, 0) 50%, rgba(13, 14, 18, 0.39) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000d0e12', endColorstr='#630d0e12', GradientType=0);
    /* IE6-9 */
}

.All125 .photo span:after,
.All125 .photo:after,
.All125 .photo div:after {
    padding-bottom: 125%;
}

.All100 .photo span:after,
.All100 .photo:after,
.All100 .photo div:after {
    padding-bottom: 100%;
}

.All75 .photo span:after,
.all75 .photo:after,
.All75 .photo div:after {
    padding-bottom: 75%;
}

.All50 .photo span:after,
.All50 .photo:after,
.All50 .photo div:after {
    padding-bottom: 50%;
}

.All30 .photo span:after,
.All30 .photo:after,
.All30 .photo div:after {
    padding-bottom: 30%;
}

.All125v .photo span:after,
.All125v .photo:after,
.All125v .photo div:after {
    padding-bottom: calc(125vh - 75px);
}

.All100v .photo span:after,
.All100v .photo:after,
.All100v .photo div:after {
    padding-bottom: calc(100vh - 75px);
}

.All75v .photo span:after,
.all75v .photo:after,
.All75v .photo div:after {
    padding-bottom: calc(75vh - 75px);
}

.All50v .photo span:after,
.All50v .photo:after,
.All50v .photo div:after {
    padding-bottom: calc(50vh - 75px);
}

.All30v .photo span:after,
.All30v .photo:after,
.All30v .photo div:after {
    padding-bottom: calc(30vh - 75px);
}

.Banner>.photo {
    overflow: hidden;
    background: none;
}

.Banner>.photo>div {
    transform: scale3d(1, 1, 1);
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.Banner:hover>.photo>div {
    transform: scale3d(1.04, 1.04, 1.04);
}

@media screen and (max-width: 767.9px) {
    [class*="grirow"]>div {
        /* grid-template-columns: repeat(1, 1fr) !important; */
        -ms-grid-columns: 1fr 1fr
    }

    .grirow2>div {
        /* grid-template-columns: repeat(1, 1fr) !important; */
        -ms-grid-columns: 1fr 1fr
    }

    .grirow4>div {
        grid-template-columns: repeat(1, 1fr) !important;
        -ms-grid-columns: 1fr 1fr;
    }

    .grirow5>div {
        grid-template-columns: repeat(1, 1fr) !important;
        -ms-grid-columns: 1fr 1fr;
    }

    .grirow6>div {
        grid-template-columns: repeat(2, 1fr) !important;
        -ms-grid-columns: 1fr 1fr
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    [class*="grirow"]>div {
        /* grid-template-columns: repeat(1, 1fr) !important; */
        -ms-grid-columns: 1fr 1fr
    }

    .grirow2>div {
        /* grid-template-columns: repeat(1, 1fr) !important; */
        -ms-grid-columns: 1fr 1fr
    }

    .grirow4>div {
        grid-template-columns: repeat(2, 1fr) !important;
        -ms-grid-columns: 1fr 1fr
    }

    .grirow5>div {
        grid-template-columns: repeat(2, 1fr) !important;
        -ms-grid-columns: 1fr 1fr
    }

    .grirow6>div {
        grid-template-columns: repeat(2, 1fr) !important;
        -ms-grid-columns: 1fr 1fr
    }
}

/* Fallback for older devices */
.modernizr-no-cssgrid [class*="gridBanner"]>div,
.modernizr-no-cssgrid [class*='gridBanner']>div>a {
    display: block;
}

/* Banner Collection background unpick */
.bannerDesc,
.bannerTitle,
.bannerView {
    background: none;
    color: inherit;
    text-transform: initial !important;
    letter-spacing: 0;
    line-height: 130%;
    border: none;
}

[class*="hmBanner"]>div>a:hover .bannerView {
    background: none;
}

.bannerTitle {
    color: inherit;
    margin: 8px 0;
    letter-spacing: -1px;
    text-shadow: 1px 1px #00000036;
    background: none !important;
}

.bannerDesc {
    color: inherit;
    font-size: initial;
}

/* Brand Icons  --------------------------------------------------------------- */
.BrandIcon>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 0 2em;
}

.BrandIcon a {
    max-width: 150px;
    display: inline-block;
    height: 100px;
    width: 100%;
}

.BrandIcon .bannerTxtCtr {
    display: none;
}

.BrandIcon [class*="css-image"] {
    background-size: contain !important;
    opacity: inherit;
}

.BrandIcon a:hover [class*="css-image"] {
    opacity: 1;
}

.BrandIcon:hover a {
    filter: grayscale(100%);
    opacity: 0.3;
}

.BrandIcon a:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.BrandIcon .Banner:hover>.photo>div {
    transform: none;
}

.largerBrand a {
    max-width: 250px;
}

.invertcolor {
    background: var(--but-bg-color)
}

.invertcolor .photo {
    background: none;
    filter: brightness(0) invert(1);
}


/* Call to actions  */


.product-call-to-actions {
    display: inline !important;
}

.product-call-to-actions a {
    min-height: 48px;
    background: #ffffff;
    outline: 1px solid #efefef;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-family: 'citrfontbold';
    text-align: left;
}

.product-call-to-actions a [class*="icon"] {
    float: left;
    min-height: 48px;
    min-width: 48px;
    text-align: center;
    background: #000000;
    color: #e65204;
    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;
}

.product-call-to-actions a [class*="icon"],
.product-call-to-actions a:hover {
    background: #000000;
    color: #e65204;
}

.product-cta {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: white;
    padding: 0;
}

.product-cta [class*="icon"] {
    width: 100%;
    min-height: 300px;
    text-align: center;
    background: #000000;
    display: flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    color: #e65204;
    font-size: 100px;
}

.product-cta .zflex-v {
    width: 60%;
    padding: 32px;
}

.product-cta a {
    color: royalblue;
    border-bottom: 1px solid #c8d2ee;
}

.ctaMain>div {
    padding: 32px
}

;

@media screen and (max-width: 767px) {
    .product-cta {
        max-width: 75%;
    }

    .product-cta .zflex-s {
        display: inline;
    }

    .product-cta [class*="icon"] {
        width: 100%;
        min-height: 75px;
        font-size: 24px;
    }

    .product-cta .zflex-v {
        width: 100%;
        padding: 8px;
    }

    .ctaMain>div {
        padding: 16px
    }

    ;
}

.delivery-btn {
    background: #adca37;
    padding: 30px;
    margin-bottom: 50px;
    height: 300px;
    line-height: 59px;
    color: #283948;
}

.delivery-btn:hover {
    background: #283948;
    color: #fff;
}



/* Awards Section (Home)  --------------------------------------------------------------- */

.banner-awards .bannerTxtCtr {
    display: none;
}

.banner-awards .Banner>.photo {
    overflow: hidden;
    background: none;
}

.banner-awards .Banner>.photo>div {
    transform: none;
    transition: none;
    margin: auto;
    width: 200px;
    height: 200px;
}

.banner-awards .Banner:hover>.photo>div {
    transform: none;
}

@media screen and (max-width: 768.9px) {
    .banner-awards>div>a:nth-child(n+2) {
        display: none;
    }
}

#mc_embed_signup {
    background: #fafafa !important;
}


/* Checkout & Login Overides  --------------------------------------------------------------- */

.resetPassHdr {
    background: #000000 !important;
    border-bottom: 1px solid #E6E6E6;
}


.calltoActionsContainer {
    color: #ffffff;
    padding: 8px 0;
    display: inline-flex;
    grid-gap: 0;
    align-items: center;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}

.calltoActionsContainerText {
    display: inline-flex;
    grid-gap: 0;
    align-items: center;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 10px;
    display: inline-flex;
    text-align: center;
    overflow: auto;
    justify-content: left;
    width: auto;
    float: none;
    max-width: 100%;
    overflow-y: hidden;
}

.calltoActionsContainerText.Full {
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end !important;
    text-align: right;
}

.modernizr-no-cssgrid .calltoActionsContainerText {
    display: block
}

.calltoActionsContainerText>a {
    text-align: center;
    padding: 0 16px 0 0;
    margin: 0 16px 0 0;
    border-right: 1px solid #4d4e57;
    color: inherit;
    white-space: nowrap;
    vertical-align: bottom;
}

.calltoActionsContainerText>a:last-child {
    border-right: none
}

.calltoActionsContainerText p {
    font-size: 14px;
    padding: 5px;
    margin: 0;
    display: inline-block;
    transition: 0.5s;
}

.calltoActionsContainerText a:before {
    font-family: feather;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    color: #777777;
    font-size: 13px;
    margin: 0 8px 0 0;
    position: relative;
    bottom: 2px;
}

.calltoActionsContainerText p:hover {
    background: #af2e29
}

.calltoActionsContainerText>a:nth-child(1):before {
    content: "\e046";
}

.calltoActionsContainerText>a:nth-child(2):before {
    content: "\e080";
}

.calltoActionsContainerText>a:nth-child(3):before {
    content: "\e085";
}

.calltoActionsContainerText>a:nth-child(4):before {
    content: "\e116";
}

.calltoActionsContainerText>a:nth-child(5):before {
    content: "\e121";
}

/* Detail icon  --------------------------------------------------------------- */
.icon-pound:before {
    content: "&pound;";
}


/* Detail icon  --------------------------------------------------------------- */

.hmCalltoActionsGIANTContainer {background: var(--color3);color: #fff;    padding-top: 9px;
    padding-bottom: 2px;}
.hmCalltoActionsGIANT {display: grid;grid-gap: 0;align-items: center;grid-template-columns: repeat(3,1fr);max-width: 1200px;margin: auto;}
.modernizr-no-cssgrid .hmCalltoActionsGIANT { display: block}
.hmCalltoActionsGIANT > a {text-align: center;padding: 0 16px;/* border-right: 1px solid #ffffff; */color: inherit;display: flex;align-content: center;justify-content: center;align-items: center;}
.hmCalltoActionsGIANT > a:hover p {color: #fff; opacity:1}
.hmCalltoActionsGIANT > a:last-child{border-right: none}
.hmCalltoActionsGIANT p {padding:0;margin: 0;font-size: 11px;opacity: 0.7;}
.hmCalltoActionsGIANT h3 {margin: 0;font-size: 13px;color: var(--color1);display: flex;align-content: center;align-items: center;}
.hmCalltoActionsGIANT h3:before {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;display: block;color: var(--color5);display: inline-block;margin: 0 8px 0 0;}
.hmCalltoActionsGIANT > a:nth-child(1) h3:before, 
.hmCalltoActionsGIANT > a:nth-child(2) h3:before,
.hmCalltoActionsGIANT > a:nth-child(3) h3:before,
.hmCalltoActionsGIANT > a:nth-child(4) h3:before {/* content: "\e046"; */}

@media screen and (max-width: 1024px) {
    .hmCalltoActionsGIANT{
        overflow-x: scroll;
        scroll-padding: 0;
        scroll-snap-type: x mandatory;
        width: 100%;
        grid-template-columns: repeat(3, calc(60% - 8px));
    }

    .hmCalltoActionsGIANT > a{
        padding-bottom: 0px;
     }
}

.hmCalltoActionsGIANT::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: var(--color3);
    height: 5px;
}

.hmCalltoActionsGIANT::-webkit-scrollbar
{
	width: 5px;
    height: 5px;
	background-color: transparent;
}

.hmCalltoActionsGIANT::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--color2);
    height: 5px;
}

.hmCalltoActionsGIANT>a:nth-child(1) h3:before{
    background: url(/layout/icons/phone-solid.svg) 100% / 100% no-repeat;
}
.hmCalltoActionsGIANT>a:nth-child(2) h3:before{
    background: url(/layout/icons/money-check-solid.svg) 100% / 100% no-repeat;
}
.hmCalltoActionsGIANT>a:nth-child(3) h3:before{
    background: url(/layout/icons/star.svg) 100% / 100% no-repeat;
}

.hmCalltoActionsGIANT>a h3:before {
    content: "";
    width: 16px;
    height: 25px;
    margin-right: 0.5em;
    filter: brightness(0) saturate(100%) invert(14%) sepia(8%) saturate(6314%) hue-rotate(187deg) brightness(95%) contrast(90%);
}
/* emptyclass */

@media screen and (max-width: 1024px) {
	.ctaGrid {
		grid-template-columns: repeat(1, 1fr);
	}
}







                                                                                                                                  
/* Variables */

:root {
    --cg-color-1: var(--color1);
    --cg-color-2: var(--color2);;
    --cg-color-3: var(--color3);;
    --cg-color-4: var(--color4);;
    --cg-color-5: var(--color5);;
    --cg-color-6: var(--color6);;
    --cg-color-black: #000;
    --gradient-default: linear-gradient(70deg,#5C0F99,#3449B8 60%,#1799E1);
    --header-height: 65px;
    --announcement-bar-height: 40px;
    --header-top-position: 0px;
    --radius-small: 6px;
    --radius-large: 12px;
    /* --font-heading-family: "Montserrat", sans-serif;
    --font-heading-style: normal;
    --font-heading-weight: 700;
    --font-heading-scale: 1.0;
    --font-heading-letter-spacing: -0.02em;
    --font-heading-text-transform: inherit;
    --font-body-family: "Montserrat", sans-serif;
    --font-body-style: normal;
    --font-body-weight: 400;
    --font-body-letter-spacing: -0.04em;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --grid-spacing: 1rem; */
    --color-success: #38a342;
    --color-alert: #F0B743;
    --color-error: #d23c3c;
    --color-white: #FFFFFF;
    --color-black: #111111;
    --color-light: #f4f4f4;
    --overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    --page-width: 1680px;
    --page-gutter: 1.6rem;
    --duration-short: 200ms;
    --duration-default: 300ms;
    --duration-long: 400ms;
    --duration-extra-long: 600ms;
    --font-size-xxs: 0.6rem;
    --font-size-xs: 0.8rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.2rem;
    --font-size-lg: 1.4rem;
    --font-size-xl: 1.6rem;
    --font-size-xxl: 2.4rem;
    --line-height-xs: 1.00;
    --line-height-sm: 1.25;
    --line-height-md: 1.50;
    --line-height-lg: 2.25;
    --line-height-xl: 2.50;
     --section-spacing-unit-size: 1.6rem;
    --spacing-unit-size: 1.6rem;
    --grid-spacing: 0.5rem;
    --page-gutter: 1.6rem;
    --cg-color-white:var(--color-white);
    --cg-color-black:var(--color-black);
}


@media screen and (min-width: 1024px) {
    :root {
        /* --section-spacing-unit-size: 0rem; */
    }
}




/* Z-Indexes */
.citr-zindex-0 { z-index: 0; }
.citr-zindex-1 { z-index: 1; }
.citr-zindex-2 { z-index: 2; }
.citr-zindex-3 { z-index: 3; }
.citr-zindex-4 { z-index: 4; }
.citr-zindex-5 { z-index: 5; }
.citr-zindex-6 { z-index: 6; }
.citr-zindex-7 { z-index: 7; }
.citr-zindex-8 { z-index: 8; }
.citr-zindex-9 { z-index: 9; }
.citr-zindex-9999 { z-index: 9999; }

/* Background Transparency */
.citr-bg-color-transparent { background-color: transparent; }
.citr-bg-color-color-light {background: var(--color-light)}
.cg-bg-color-blk { background: var(--color-black)}


/* Backdrop Blur */
.citr-blur-light { backdrop-filter: blur(1px); }
.citr-blur-mid { backdrop-filter: blur(5px); }
.citr-blur-strong { backdrop-filter: blur(10px); }
.citr-blur-extreme { backdrop-filter: blur(30px); }

/* Positioning */
.citr-position-absolute { position: absolute; }
.citr-position-relative { position: relative; }

.citr-right-16 { right: 16px; }
.citr-right-32 { right: 32px; }
.citr-right-5p { right: 5%; }
.citr-right-10p { right: 10%; }
.citr-right-20p { right: 20%; }
.citr-right-30p { right: 30%; }
.citr-right-40p { right: 40%; }
.citr-right-50p { right: 50%; }
.citr-right-60p { right: 60%; }
.citr-right-80p { right: 80%; }
.citr-right-90p { right: 90%; }

.citr-left-16 { left: 16px; }
.citr-left-32 { left: 32px; }
.citr-left-5p { left: 5%; }
.citr-left-10p { left: 10%; }
.citr-left-20p { left: 20%; }
.citr-left-30p { left: 30%; }
.citr-left-40p { left: 40%; }
.citr-left-50p { left: 50%; }
.citr-left-60p { left: 60%; }
.citr-left-80p { left: 80%; }
.citr-left-90p { left: 90%; }

.gradient-blend { position:relative}
.gradient-blend:before {
   content: "";
    background: linear-gradient(90deg, rgb(242 244 248) 0%, rgb(242 244 248 / 0%) 25%, rgb(242 244 248 / 0%) 75%, rgba(242, 242, 242, 1) 100%);
    width: 100%;
    position: absolute;
    left: 0%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.citr-maxwidth-50{
    max-width: 50%;
}

.citr-height-auto {
    height: auto;
}

@media screen and (max-width: 767.9px){
    .cg-flex-col-mobile {
        flex-direction: column !important;
    }
    .cg-flex-col-mobile-center {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .citr-maxwidth-50{
        max-width: 100%;
    }
}

/* aspect ratios */
.aspect-16-9 { aspect-ratio: 16/9}
.aspect-4-2 { aspect-ratio: 4/2}
.aspect-4-3 { aspect-ratio: 4/3}
.aspect-1 { aspect-ratio: 1;}
.aspect-3-4 { aspect-ratio: 3/4;}
.aspect-9-16 { aspect-ratio: 9/16}

.img-16-9 img { aspect-ratio: 16/9 !important}
.img-4-2 img { aspect-ratio: 4/2 !important}
.img-4-3 img { aspect-ratio: 4/3 !important}
.img-1 img { aspect-ratio: 1 !important}
.img-3-4 img { aspect-ratio: 3/4 !important}
.img-9-16 img { aspect-ratio: 9/16!important}
                                                                                                                                                                                                                                                                             .empty{}

@font-face{
	font-family: "icons";
	src:url('/font/feather.eot') format('embedded-opentype'),
		url('/font/feather.woff') format('woff'),
		url('/font/feather.ttf') format('truetype');
}

[class*="icon2-"],
.ft {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon2-alert-octagon::before { content: "\e81b"; } .icon2-alert-circle::before { content: "\e81c"; } .icon2-activity::before { content: "\e81d"; } .icon2-alert-triangle::before { content: "\e81e"; } .icon2-align-center::before { content: "\e81f"; } .icon2-airplay::before { content: "\e820"; } .icon2-align-justify::before { content: "\e821"; } .icon2-align-left::before { content: "\e822"; } .icon2-align-right::before { content: "\e823"; } .icon2-arrow-down-left::before { content: "\e824"; } .icon2-arrow-down-right::before { content: "\e825"; } .icon2-anchor::before { content: "\e826"; } .icon2-aperture::before { content: "\e827"; } .icon2-arrow-left::before { content: "\e828"; } .icon2-arrow-right::before { content: "\e829"; } .icon2-arrow-down::before { content: "\e82a"; } .icon2-arrow-up-left::before { content: "\e82b"; } .icon2-arrow-up-right::before { content: "\e82c"; } .icon2-arrow-up::before { content: "\e82d"; } .icon2-award::before { content: "\e82e"; } .icon2-bar-chart::before { content: "\e82f"; } .icon2-at-sign::before { content: "\e830"; } .icon2-bar-chart-2::before { content: "\e831"; } .icon2-battery-charging::before { content: "\e832"; } .icon2-bell-off::before { content: "\e833"; } .icon2-battery::before { content: "\e834"; } .icon2-bluetooth::before { content: "\e835"; } .icon2-bell::before { content: "\e836"; } .icon2-book::before { content: "\e837"; } .icon2-briefcase::before { content: "\e838"; } .icon2-camera-off::before { content: "\e839"; } .icon2-calendar::before { content: "\e83a"; } .icon2-bookmark::before { content: "\e83b"; } .icon2-box::before { content: "\e83c"; } .icon2-camera::before { content: "\e83d"; } .icon2-check-circle::before { content: "\e83e"; } .icon2-check::before { content: "\e83f"; } .icon2-check-square::before { content: "\e840"; } .icon2-cast::before { content: "\e841"; } .icon2-chevron-down::before { content: "\e842"; } .icon2-chevron-left::before { content: "\e843"; } .icon2-chevron-right::before { content: "\e844"; } .icon2-chevron-up::before { content: "\e845"; } .icon2-chevrons-down::before { content: "\e846"; } .icon2-chevrons-right::before { content: "\e847"; } .icon2-chevrons-up::before { content: "\e848"; } .icon2-chevrons-left::before { content: "\e849"; } .icon2-circle::before { content: "\e84a"; } .icon2-clipboard::before { content: "\e84b"; } .icon2-chrome::before { content: "\e84c"; } .icon2-clock::before { content: "\e84d"; } .icon2-cloud-lightning::before { content: "\e84e"; } .icon2-cloud-drizzle::before { content: "\e84f"; } .icon2-cloud-rain::before { content: "\e850"; } .icon2-cloud-off::before { content: "\e851"; } .icon2-codepen::before { content: "\e852"; } .icon2-cloud-snow::before { content: "\e853"; } .icon2-compass::before { content: "\e854"; } .icon2-copy::before { content: "\e855"; } .icon2-corner-down-right::before { content: "\e856"; } .icon2-corner-down-left::before { content: "\e857"; } .icon2-corner-left-down::before { content: "\e858"; } .icon2-corner-left-up::before { content: "\e859"; } .icon2-corner-up-left::before { content: "\e85a"; } .icon2-corner-up-right::before { content: "\e85b"; } .icon2-corner-right-down::before { content: "\e85c"; } .icon2-corner-right-up::before { content: "\e85d"; } .icon2-cpu::before { content: "\e85e"; } .icon2-credit-card::before { content: "\e85f"; } .icon2-crosshair::before { content: "\e860"; } .icon2-disc::before { content: "\e861"; } .icon2-delete::before { content: "\e862"; } .icon2-download-cloud::before { content: "\e863"; } .icon2-download::before { content: "\e864"; } .icon2-droplet::before { content: "\e865"; } .icon2-edit-2::before { content: "\e866"; } .icon2-edit::before { content: "\e867"; } .icon2-edit-1::before { content: "\e868"; } .icon2-external-link::before { content: "\e869"; } .icon2-eye::before { content: "\e86a"; } .icon2-feather::before { content: "\e86b"; } .icon2-facebook::before { content: "\e86c"; } .icon2-file-minus::before { content: "\e86d"; } .icon2-eye-off::before { content: "\e86e"; } .icon2-fast-forward::before { content: "\e86f"; } .icon2-file-text::before { content: "\e870"; } .icon2-film::before { content: "\e871"; } .icon2-file::before { content: "\e872"; } .icon2-file-plus::before { content: "\e873"; } .icon2-folder::before { content: "\e874"; } .icon2-filter::before { content: "\e875"; } .icon2-flag::before { content: "\e876"; } .icon2-globe::before { content: "\e877"; } .icon2-grid::before { content: "\e878"; } .icon2-heart::before { content: "\e879"; } .icon2-home::before { content: "\e87a"; } .icon2-github::before { content: "\e87b"; } .icon2-image::before { content: "\e87c"; } .icon2-inbox::before { content: "\e87d"; } .icon2-layers::before { content: "\e87e"; } .icon2-info::before { content: "\e87f"; } .icon2-instagram::before { content: "\e880"; } .icon2-layout::before { content: "\e881"; } .icon2-link-2::before { content: "\e882"; } .icon2-life-buoy::before { content: "\e883"; } .icon2-link::before { content: "\e884"; } .icon2-log-in::before { content: "\e885"; } .icon2-list::before { content: "\e886"; } .icon2-lock::before { content: "\e887"; } .icon2-log-out::before { content: "\e888"; } .icon2-loader::before { content: "\e889"; } .icon2-mail::before { content: "\e88a"; } .icon2-maximize-2::before { content: "\e88b"; } .icon2-map::before { content: "\e88c"; } .icon2-map-pin::before { content: "\e88e"; } .icon2-menu::before { content: "\e88f"; } .icon2-message-circle::before { content: "\e890"; } .icon2-message-square::before { content: "\e891"; } .icon2-minimize-2::before { content: "\e892"; } .icon2-mic-off::before { content: "\e893"; } .icon2-minus-circle::before { content: "\e894"; } .icon2-mic::before { content: "\e895"; } .icon2-minus-square::before { content: "\e896"; } .icon2-minus::before { content: "\e897"; } .icon2-moon::before { content: "\e898"; } .icon2-monitor::before { content: "\e899"; } .icon2-more-vertical::before { content: "\e89a"; } .icon2-more-horizontal::before { content: "\e89b"; } .icon2-move::before { content: "\e89c"; } .icon2-music::before { content: "\e89d"; } .icon2-navigation-2::before { content: "\e89e"; } .icon2-navigation::before { content: "\e89f"; } .icon2-octagon::before { content: "\e8a0"; } .icon2-package::before { content: "\e8a1"; } .icon2-pause-circle::before { content: "\e8a2"; } .icon2-pause::before { content: "\e8a3"; } .icon2-percent::before { content: "\e8a4"; } .icon2-phone-call::before { content: "\e8a5"; } .icon2-phone-forwarded::before { content: "\e8a6"; } .icon2-phone-missed::before { content: "\e8a7"; } .icon2-phone-off::before { content: "\e8a8"; } .icon2-phone-incoming::before { content: "\e8a9"; } .icon2-phone::before { content: "\e8aa"; } .icon2-phone-outgoing::before { content: "\e8ab"; } .icon2-pie-chart::before { content: "\e8ac"; } .icon2-play-circle::before { content: "\e8ad"; } .icon2-play::before { content: "\e8ae"; } .icon2-plus-square::before { content: "\e8af"; } .icon2-plus-circle::before { content: "\e8b0"; } .icon2-plus::before { content: "\e8b1"; } .icon2-pocket::before { content: "\e8b2"; } .icon2-printer::before { content: "\e8b3"; } .icon2-power::before { content: "\e8b4"; } .icon2-radio::before { content: "\e8b5"; } .icon2-repeat::before { content: "\e8b6"; } .icon2-refresh-ccw::before { content: "\e8b7"; } .icon2-rewind::before { content: "\e8b8"; } .icon2-rotate-ccw::before { content: "\e8b9"; } .icon2-refresh-cw::before { content: "\e8ba"; } .icon2-rotate-cw::before { content: "\e8bb"; } .icon2-save::before { content: "\e8bc"; } .icon2-search::before { content: "\e8bd"; } .icon2-server::before { content: "\e8be"; } .icon2-scissors::before { content: "\e8bf"; } .icon2-share-2::before { content: "\e8c0"; } .icon2-share::before { content: "\e8c1"; } .icon2-shield::before { content: "\e8c2"; } .icon2-settings::before { content: "\e8c3"; } .icon2-skip-back::before { content: "\e8c4"; } .icon2-shuffle::before { content: "\e8c5"; } .icon2-sidebar::before { content: "\e8c6"; } .icon2-skip-forward::before { content: "\e8c7"; } .icon2-slack::before { content: "\e8c8"; } .icon2-slash::before { content: "\e8c9"; } .icon2-smartphone::before { content: "\e8ca"; } .icon2-square::before { content: "\e8cb"; } .icon2-speaker::before { content: "\e8cc"; } .icon2-star::before { content: "\e8cd"; } .icon2-stop-circle::before { content: "\e8ce"; } .icon2-sun::before { content: "\e8cf"; } .icon2-sunrise::before { content: "\e8d0"; } .icon2-tablet::before { content: "\e8d1"; } .icon2-tag::before { content: "\e8d2"; } .icon2-sunset::before { content: "\e8d3"; } .icon2-target::before { content: "\e8d4"; } .icon2-thermometer::before { content: "\e8d5"; } .icon2-thumbs-up::before { content: "\e8d6"; } .icon2-thumbs-down::before { content: "\e8d7"; } .icon2-toggle-left::before { content: "\e8d8"; } .icon2-toggle-right::before { content: "\e8d9"; } .icon2-trash-2::before { content: "\e8da"; } .icon2-trash::before { content: "\e8db"; } .icon2-trending-up::before { content: "\e8dc"; } .icon2-trending-down::before { content: "\e8dd"; } .icon2-triangle::before { content: "\e8de"; } .icon2-type::before { content: "\e8df"; } .icon2-twitter::before { content: "\e8e0"; } .icon2-upload::before { content: "\e8e1"; } .icon2-umbrella::before { content: "\e8e2"; } .icon2-upload-cloud::before { content: "\e8e3"; } .icon2-unlock::before { content: "\e8e4"; } .icon2-user-check::before { content: "\e8e5"; } .icon2-user-minus::before { content: "\e8e6"; } .icon2-user-plus::before { content: "\e8e7"; } .icon2-user-x::before { content: "\e8e8"; } .icon2-user::before { content: "\e8e9"; } .icon2-users::before { content: "\e8ea"; } .icon2-video-off::before { content: "\e8eb"; } .icon2-video::before { content: "\e8ec"; } .icon2-voicemail::before { content: "\e8ed"; } .icon2-volume-x::before { content: "\e8ee"; } .icon2-volume-2::before { content: "\e8ef"; } .icon2-volume-1::before { content: "\e8f0"; } .icon2-volume::before { content: "\e8f1"; } .icon2-watch::before { content: "\e8f2"; } .icon2-wifi::before { content: "\e8f3"; } .icon2-x-square::before { content: "\e8f4"; } .icon2-wind::before { content: "\e8f5"; } .icon2-x::before { content: "\e8f6"; } .icon2-x-circle::before { content: "\e8f7"; } .icon2-zap::before { content: "\e8f8"; } .icon2-zoom-in::before { content: "\e8f9"; } .icon2-zoom-out::before { content: "\e8fa"; } .icon2-command::before { content: "\e8fb"; } .icon2-cloud::before { content: "\e8fc"; } .icon2-hash::before { content: "\e8fd"; } .icon2-headphones::before { content: "\e8fe"; } .icon2-underline::before { content: "\e8ff"; } .icon2-italic::before { content: "\e900"; } .icon2-bold::before { content: "\e901"; } .icon2-crop::before { content: "\e902"; } .icon2-help-circle::before { content: "\e903"; } .icon2-paperclip::before { content: "\e904"; } .icon2-shopping-cart::before { content: "\e905"; } .icon2-tv::before { content: "\e906"; } .icon2-wifi-off::before { content: "\e907"; } .icon2-minimize::before { content: "\e88d"; } .icon2-maximize::before { content: "\e908"; } .icon2-gitlab::before { content: "\e909"; } .icon2-sliders::before { content: "\e90a"; } .icon2-star-on::before { content: "\e90b"; } .icon2-heart-on::before { content: "\e90c"; } .icon2-archive::before { content: "\e90d"; } .icon2-arrow-down-circle::before { content: "\e90e"; } .icon2-arrow-up-circle::before { content: "\e90f"; } .icon2-arrow-left-circle::before { content: "\e910"; } .icon2-arrow-right-circle::before { content: "\e911"; } .icon2-bar-chart-line-::before { content: "\e912"; } .icon2-bar-chart-line::before { content: "\e913"; } .icon2-book-open::before { content: "\e914"; } .icon2-code::before { content: "\e915"; } .icon2-database::before { content: "\e916"; } .icon2-dollar-sign::before { content: "\e917"; } .icon2-folder-plus::before { content: "\e918"; } .icon2-gift::before { content: "\e919"; } .icon2-folder-minus::before { content: "\e91a"; } .icon2-git-commit::before { content: "\e91b"; } .icon2-git-branch::before { content: "\e91c"; } .icon2-git-pull-request::before { content: "\e91d"; } .icon2-git-merge::before { content: "\e91e"; } .icon2-linkedin::before { content: "\e91f"; } .icon2-hard-drive::before { content: "\e920"; } .icon2-more-vertical-::before { content: "\e921"; } .icon2-more-horizontal-::before { content: "\e922"; } .icon2-rss::before { content: "\e923"; } .icon2-send::before { content: "\e924"; } .icon2-shield-off::before { content: "\e925"; } .icon2-shopping-bag::before { content: "\e926"; } .icon2-terminal::before { content: "\e927"; } .icon2-truck::before { content: "\e928"; } .icon2-zap-off::before { content: "\e929"; } .icon2-youtube::before { content: "\e92a"; }

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