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

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


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

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


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

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

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

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

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

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

.pos-rel {
    position:relative;
}

.pos-abs {
    position:absolute;
}

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

.pos-fix {
    position:fixed;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

.hdrRewardsTitle {
}

.slides.thinBanner {
    margin: 0;
}

.backgrounrdsignup.thinBanner {
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ctrNavigation {
    align-self: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .NodeLevel1 > .CSSFacetNavModules a {
    }

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

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

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

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

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

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

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

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

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

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

.loginCtr .lockIcon {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

div.basketCtr h3 {
    margin: 0;
}

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

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

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

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

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

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

    .CCartBut > div {
        padding: 4px;
    }

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

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

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

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

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

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

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

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

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

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

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

.minibasket-toggles {
}

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

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

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

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

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

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

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

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

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

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

.basketstarbuy-strap {
}

.basketstarbuy-desc {
}

.sbuy-offers {
    background: #a46ec2;
}

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

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

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

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

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

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

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

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

    .navIcons {
        height: 48px;
    }

    .logoContainer {
        width: 96px;
    }

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

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

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

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

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

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

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

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

        .ctrNavigation.tbcntOpen {
            display: block;
        }

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

    .CSSFacetNavModules {
    }

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

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

    a#TopBanner1_CSSFacetNav2_TopLevel_ctl02_hylNode {
    }

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

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

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

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

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

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

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

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

    .ctrNavigation > .CSSFacetNavModules {
        display: inline
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.lable, lable {
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancybox-active {
    height: auto
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancybox-spaceball {
    z-index: 1
}

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

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

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

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

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

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

.fancybox-iframe {
    vertical-align: top
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

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

.small {
    font-size: small;
}

.normal {
    font-size: medium;
}

.large {
    font-size: large;
}

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

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

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

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

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

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

.container {
    background: #fff;
}

.colorwhite {
    color: white
}

.colorblack {
    color: black
}

.backgroundwhite {
    background: white
}

.backgroundblack {
    background: black
}

.backgroundblacki {
    background: black !important;
}

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

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

.centralised {
    text-align: center
}

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

    .warning i {
        margin: 0 7px
    }

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

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

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

    .alert strong {
        font-size: large
    }

    .alert p {
        opacity: 0.8
    }

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

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .breadcrumbs a {
        opacity: 0.5
    }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.borderi {
    border: 1px solid;
}

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

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

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

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

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

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

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

.borderradius {
    border-radius: 4px;
}

.borderradius3 {
    border-radius: 3px;
}

.borderradius8 {
    border-radius: 8px;
}

.borderradius100 {
    border-radius: 100%;
}

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

.coGreen {
    color: #46d82d;
}

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

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

.coCCC {
    color: #ccc;
}

.coRED {
    color: #fd4239;
}

.coStarbuys {
    color: #a46ec2;
}

.coWhite {
    color: white;
}

.bgWhite {
    background: white;
}

.bgf4 {
    background: #f4f4f4;
}

.bgeb {
    background: #eee;
}

.bgd7 {
    background: #ddd;
}

.bgStandard {
    background: #2f76ec;
}

.bgGreen {
    background: #46d82d;
}

.bgLGreen {
    background: #E8FFED;
}

.bgLBlue {
    background: #e8f4ff;
}

.bgLRed {
    background: #fee7e6;
}

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

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

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

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

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

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

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



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

textarea {
    min-height: 200px
}

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

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

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

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

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

/* -- forms buttons  -- */

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

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

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

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

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

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

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

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

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

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


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

.dark select {
    color: #fff
}

.dark option {
    color: #000
}

.selectWrapper {
    position: relative
}

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

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

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


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

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

.error {
    background: #A82123 !important
}

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

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

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

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

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

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

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

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

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

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

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

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

    table#radFinanceProductList input {
        display:none;
    }

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

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

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


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

.minVal {
    text-align: left;
}

.maxVal {
    text-align: right;
}

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    33% {
        background: #3F37C9;
    }

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

    66% {
        background: #7209B7;
    }

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

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

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

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

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

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

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

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

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

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

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

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

[onclick*="AddStockNotificationModular"] {
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-cloud-off:before {
    content: "\e92a";
}

.icon-cloud-rain:before {
    content: "\e92b";
}

.icon-cloud-snow:before {
    content: "\e92c";
}

.fa-cloud-upload:before,
.icon-cloud-upload:before,
.icon-upload-cloud:before {
    content: "\ea04";
}

.icon-code:before {
    content: "\e92d";
}

.icon-codepen:before {
    content: "\e92e";
}

.icon-codesandbox:before {
    content: "\e92f";
}

.icon-coffee:before {
    content: "\e930";
}

.icon-cog:before,
.icon-settings:before {
    content: "\e9db";
}

.icon-columns:before {
    content: "\e931";
}

.icon-command:before {
    content: "\e932";
}

.icon-compass:before {
    content: "\e933";
}

.icon-content-left:before {
    content: "\e101";
}

.icon-content-right:before {
    content: "\e100";
}

.icon-minimize:before,
.icon-contract:before {
    content: "\e9b2";
}

.icon-copy:before {
    content: "\e934";
}

.icon-corner-down-left:before {
    content: "\e935";
}

.icon-corner-down-right:before {
    content: "\e936";
}

.icon-corner-left-down:before {
    content: "\e937";
}

.icon-corner-left-up:before {
    content: "\e938";
}

.icon-corner-right-down:before {
    content: "\e970";
}

.icon-corner-right-up:before {
    content: "\e971";
}

.icon-corner-up-left:before {
    content: "\e972";
}

.icon-corner-up-right:before {
    content: "\e973";
}

.icon-cpu:before {
    content: "\e954";
}

.icon-credit-card:before {
    content: "\e955";
}

.icon-crop:before {
    content: "\e956";
}

.fa-close:before,
.icon-x:before,
.icon-cross:before {
    content: "\ea16";
}

.icon-crosshair:before {
    content: "\e957";
}

.icon-database:before {
    content: "\e958";
}

.icon-delete:before {
    content: "\e959";
}

.icon-disc:before {
    content: "\e95a";
}

.icon-divide:before {
    content: "\e95b";
}

.icon-divide-circle:before {
    content: "\e95c";
}

.icon-divide-square:before {
    content: "\e95d";
}

.icon-dollar-sign:before {
    content: "\e95e";
}

.icon-download:before {
    content: "\e95f";
}

.icon-dribbble:before {
    content: "\e961";
}

.icon-drop:before,
.icon-droplet:before {
    content: "\e962";
}

.icon-edit:before {
    content: "\e963";
}

.icon-edit-2:before {
    content: "\e964";
}

.icon-edit-3:before {
    content: "\e965";
}

.fa-ellipsis-h:before,
.icon-more-horizontal:before,
.icon-ellipsis:before {
    content: "\e9b9";
}

.icon-esc:before {
    content: "\e089";
}

.icon-expand:before,
.icon-maximize:before {
    content: "\e9aa";
}

.icon-external-link:before,
.icon-open:before,
.fa-external-link:before,
.fa-external-link-square:before {
    content: "\e966";
}

.icon-eye:before {
    content: "\e967";
}

.icon-eye-off:before {
    content: "\e968";
}

.icon-facebook:before {
    content: "\e969";
}

.icon-fast-forward:before {
    content: "\e96a";
}

.icon-feather:before {
    content: "\e96b";
}

.icon-figma:before {
    content: "\e96c";
}

.icon-file:before {
    content: "\e96d";
}

.icon-file-add:before {
    content: "\e125";
}

.icon-file-minus:before {
    content: "\e96e";
}

.icon-file-plus:before {
    content: "\e96f";
}

.icon-file-subtract:before {
    content: "\e126";
}

.icon-file-text:before {
    content: "\e94c";
}

.icon-film:before {
    content: "\e94d";
}

.icon-filter:before {
    content: "\e94e";
}

.icon-flag:before {
    content: "\e94f";
}

.icon-folder:before {
    content: "\e950";
}

.icon-folder-minus:before {
    content: "\e951";
}

.icon-folder-plus:before {
    content: "\e952";
}

.icon-framer:before {
    content: "\e953";
}

.icon-frown:before {
    content: "\e98c";
}

.icon-gift:before {
    content: "\e98d";
}

.icon-git-branch:before {
    content: "\e98e";
}

.icon-git-commit:before {
    content: "\e98f";
}

.icon-git-merge:before {
    content: "\e992";
}

.icon-git-pull-request:before {
    content: "\e993";
}

.icon-github:before {
    content: "\e990";
}

.icon-gitlab:before {
    content: "\e991";
}

.icon-globe:before {
    content: "\e994";
}

.icon-grid:before {
    content: "\e995";
}

.icon-grid-2:before {
    content: "\e103";
}

.icon-hard-drive:before {
    content: "\e996";
}

.icon-hash:before {
    content: "\e997";
}

.icon-user:before,
.icon-head:before {
    content: "\ea07";
}

.icon-headphones:before {
    content: "\e998";
}

.icon-heart:before {
    content: "\e974";
}

.icon-help:before,
.icon-help-circle:before {
    content: "\e975";
}

.icon-hexagon:before {
    content: "\e976";
}

.icon-home:before {
    content: "\e977";
}

.icon-image:before {
    content: "\e978";
}

.icon-inbox:before {
    content: "\e979";
}

.icon-info:before {
    content: "\e97a";
}

.icon-instagram:before {
    content: "\e97b";
}

.icon-italic:before {
    content: "\e97c";
}

.icon-key:before {
    content: "\e97d";
}

.icon-layers:before {
    content: "\e97e";
}

.icon-layout:before {
    content: "\e97f";
}

.icon-life-buoy:before {
    content: "\e980";
}

.icon-link:before {
    content: "\e981";
}

.icon-link-2:before {
    content: "\e982";
}

.icon-linkedin:before {
    content: "\e983";
}

.icon-list:before {
    content: "\e984";
}

.icon-loader:before {
    content: "\e985";
}

.icon-location:before {
    content: "\e070";
}

.icon-location-2:before {
    content: "\e071";
}

.icon-lock:before,
.fa-lock:before {
    content: "\e986";
}

.icon-log-in:before {
    content: "\e987";
}

.icon-log-out:before {
    content: "\e988";
}

.icon-mail:before,
.fa-envelope-open:before,
.fa-envelope-open-o:before,
.fa-envelope-square:before,
.fa-envelope:before,
.fa-envelope-o:before {
    content: "\e989";
}

.icon-map:before {
    content: "\e98a";
}

.icon-map-pin:before {
    content: "\e98b";
}

.icon-marquee:before {
    content: "\e082";
}

.icon-marquee-minus:before {
    content: "\e084";
}

.icon-marquee-plus:before {
    content: "\e083";
}

.icon-maximize:before,
.fa-arrows-alt:before,
.fa-arrows:before,
.fa-expand:before {
    content: "\e9aa";
}

.icon-maximize-2:before {
    content: "\e9ab";
}

.icon-meh:before {
    content: "\e9ac";
}

.fa-bars:before,
.icon-menu:before,
.fa-sliders:before {
    content: "\e9ad";
}

.icon-message-square:before {
    content: "\e9af";
}

.icon-mic-off:before {
    content: "\e9b1";
}

.icon-microphone:before,
.icon-mic:before {
    content: "\e9b0";
}

.icon-minimize:before,
.fa-compress:before {
    content: "\e9b2";
}

.icon-minimize-2:before {
    content: "\e9b3";
}

.icon-minus:before {
    content: "\e9b4";
}

.icon-monitor:before {
    content: "\e9b7";
}

.icon-moon:before {
    content: "\e9b8";
}

.icon-more-vertical:before {
    content: "\e9ba";
}

.icon-mouse-pointer:before {
    content: "\e9bb";
}

.icon-move:before {
    content: "\e9bc";
}

.icon-music:before {
    content: "\e9bd";
}

.icon-volume-x:before,
.icon-mute:before {
    content: "\ea11";
}

.icon-navigation:before {
    content: "\e9be";
}

.icon-navigation-2:before {
    content: "\e9bf";
}

.icon-octagon:before {
    content: "\e999";
}

.icon-outbox:before {
    content: "\e123";
}

.icon-package:before {
    content: "\e99a";
}

.icon-paper:before {
    content: "\e034";
}

.icon-paper-clip:before,
.icon-paperclip:before {
    content: "\e99b";
}

.icon-paper-stack:before {
    content: "\e035";
}

.icon-paragraph:before {
    content: "\e025";
}

.icon-pause:before {
    content: "\e99c";
}

.icon-pause-circle:before {
    content: "\e99d";
}

.icon-pen-tool:before {
    content: "\e99e";
}

.icon-percent:before {
    content: "\e99f";
}

.icon-phone:before {
    content: "\e9a0";
}

.icon-phone-call:before {
    content: "\e9a1";
}

.icon-phone-forwarded:before {
    content: "\e9a2";
}

.icon-phone-incoming:before {
    content: "\e9a3";
}

.icon-phone-missed:before {
    content: "\e9a4";
}

.icon-phone-off:before {
    content: "\e9a5";
}

.icon-phone-outgoing:before {
    content: "\e9a6";
}

.icon-pie-chart:before,
.icon-pie-graph:before {
    content: "\e9a7";
}

.icon-play:before {
    content: "\e9a8";
}

.icon-play-circle:before {
    content: "\e9a9";
}

.icon-plus:before {
    content: "\e9c8";
}

.icon-pocket:before {
    content: "\e9cb";
}

.icon-power:before {
    content: "\e9cc";
}

.icon-printer:before {
    content: "\e9cd";
}

.icon-radio:before {
    content: "\e9ce";
}

.icon-record:before {
    content: "\e049";
}

.icon-refresh-ccw:before {
    content: "\e9cf";
}

.icon-refresh-cw:before,
.icon-reload:before {
    content: "\e9d0";
}

.icon-repeat:before {
    content: "\e9d1";
}

.icon-rewind:before {
    content: "\e9d2";
}

.icon-ribbon:before {
    content: "\e009";
}

.icon-reply:before,
.icon-rotate-ccw:before {
    content: "\e9d3";
}

.icon-rotate-cw:before {
    content: "\e9d4";
}

.icon-rss:before {
    content: "\e9d5";
}

.icon-save:before {
    content: "\e9d6";
}

.icon-scissors:before {
    content: "\e9d7";
}

.icon-search:before {
    content: "\e9d8";
}

.icon-send:before {
    content: "\e9d9";
}

.icon-server:before {
    content: "\e9da";
}

.icon-share:before {
    content: "\e9dc";
}

.icon-share-2:before {
    content: "\e9dd";
}

.icon-shield:before {
    content: "\e9de";
}

.icon-shield-off:before {
    content: "\e9df";
}

.icon-shopping-cart:before {
    content: "\e9e1";
}

.fa-unsorted:before,
.icon-shuffle:before {
    content: "\e9e2";
}

.icon-sidebar:before {
    content: "\e9e3";
}

.icon-signal:before {
    content: "\e011";
}

.icon-skip-back:before {
    content: "\e9c0";
}

.icon-skip-forward:before {
    content: "\e9c1";
}

.icon-slack:before {
    content: "\e9c2";
}

.icon-slash:before {
    content: "\e9c3";
}

.icon-sliders:before {
    content: "\e9c4";
}

.icon-smartphone:before {
    content: "\e9c5";
}

.icon-smile:before {
    content: "\e9c6";
}

.icon-speaker:before {
    content: "\e9c7";
}

.icon-speech-bubble:before,
.icon-message-circle:before {
    content: "\e9ae";
}

.icon-square:before {
    content: "\e9e4";
}

.icon-check-square:before,
.icon-square-check:before,
.fa-check-square-o:before,
.fa-check-square:before {
    content: "\e93f";
}

.icon-square-cross:before {
    content: "\e047";
}

.icon-minus-square:before,
.icon-square-minus:before {
    content: "\e9b6";
}

.icon-square-plus:before,
.icon-plus-square:before {
    content: "\e9ca";
}

.icon-stack:before {
    content: "\e032";
}

.icon-stack-2:before {
    content: "\e033";
}

.icon-star:before {
    content: "\e9e5";
}

.icon-stop:before {
    content: "\e054";
}

.icon-stop-circle:before {
    content: "\e9e6";
}

.icon-sun:before {
    content: "\e9e7";
}

.icon-sunrise:before {
    content: "\e9e8";
}

.icon-sunset:before {
    content: "\e9e9";
}

.icon-table:before {
    content: "\e9ea";
}

.icon-tablet:before {
    content: "\e9eb";
}

.icon-tag:before {
    content: "\e9ec";
}

.icon-target:before {
    content: "\e9ed";
}

.icon-terminal:before {
    content: "\e9ee";
}

.icon-thermometer:before {
    content: "\e9ef";
}

.icon-thumbs-down:before {
    content: "\e9f0";
}

.icon-thumbs-up:before {
    content: "\e9f1";
}

.icon-toggle:before {
    content: "\e003";
}

.icon-toggle-left:before {
    content: "\e9f2";
}

.icon-toggle-right:before {
    content: "\e9f3";
}

.icon-tool:before {
    content: "\e9f4";
}

.icon-trash:before {
    content: "\e9f5";
}

.icon-trash-2:before {
    content: "\e9f6";
}

.icon-trello:before {
    content: "\e9f7";
}

.icon-trending-down:before {
    content: "\e9f8";
}

.icon-trending-up:before {
    content: "\e9f9";
}

.icon-triangle:before {
    content: "\e9fa";
}

.icon-truck:before {
    content: "\e9fb";
}

.icon-tv:before {
    content: "\e9fc";
}

.icon-twitch:before {
    content: "\e9fd";
}

.icon-twitter:before {
    content: "\e9fe";
}

.icon-type:before {
    content: "\e9ff";
}

.icon-umbrella:before {
    content: "\ea00";
}

.icon-underline:before {
    content: "\ea01";
}

.icon-unlock:before {
    content: "\ea02";
}

.icon-upload:before {
    content: "\ea03";
}

.icon-user-check:before {
    content: "\ea05";
}

.icon-user-minus:before {
    content: "\ea06";
}

.icon-user-plus:before {
    content: "\ea08";
}

.icon-user-x:before {
    content: "\ea0a";
}

.icon-users:before {
    content: "\ea09";
}

.icon-video:before {
    content: "\ea0b";
}

.icon-video-off:before {
    content: "\ea0c";
}

.icon-voicemail:before {
    content: "\ea0d";
}

.icon-volume:before {
    content: "\ea0e";
}

.icon-volume-1:before {
    content: "\ea0f";
}

.icon-volume-2:before {
    content: "\ea10";
}

.icon-watch:before {
    content: "\ea12";
}

.icon-wifi:before {
    content: "\ea13";
}

.icon-wifi-off:before {
    content: "\ea14";
}

.icon-wind:before {
    content: "\ea15";
}

.icon-x-circle:before {
    content: "\ea17";
}

.icon-x-octagon:before {
    content: "\ea18";
}

.icon-x-square:before {
    content: "\ea19";
}

.icon-youtube:before {
    content: "\ea1a";
}

.icon-zap:before {
    content: "\ea1b";
}

.icon-zap-off:before {
    content: "\ea1c";
}

.icon-zoom-in:before {
    content: "\ea1d";
}

.icon-zoom-out:before {
    content: "\ea1e";
}
.modular-review-faq-container---header {
    border-bottom: 1px solid black;
}

    .modular-review-faq-container---header span {
        line-height: 200%;
        background: #666;
        color: white;
        cursor: pointer;
    }

        .modular-review-faq-container---header span.r-section-active {
            background: black;
        }

        .modular-review-faq-container---header span i {
            display: block;
            float: right;
            background: rgba(255,255,255,0.15);
            font-size: smaller;
        }

.modular-review-faq-container---body {
    display: none;
}

    .modular-review-faq-container---body.r-section-active {
        display: block;
    }

.modular-review-faq-slidein {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    z-index: 100000;
    opacity: 0;
    display: none;
}

    .modular-review-faq-slidein.slidein-show {
        display: block;
        opacity: 1;
    }

.modular-review-faq-slidein-inner {
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100%;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    overflow-y: auto;
}

.modular-review-faq-slidein.slidein-show .modular-review-faq-slidein-inner {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}


.modular-review-faq-slidein-close {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
/**** STARBUY BRANDING ***************************************************************************/

:root {
    --starbuyColourOne: #f4eef8;
    --starbuyColourTwo: #e0d0ed;
    --starbuyColourThree: #9158bf;
    --starbuyColourOneApplied: #f4f8ee;
    --starbuyColourTwoApplied: #e3edd0;
    --starbuyColourThreeApplied: #789b43;
}

/**** DRAWER GENERICS ***************************************************************************/

.starbuy-drawer *:not(.fa),
.starbuy-drawer-promotion *:not(.fa),
.starbuy-faf-preview *:not(.fa) {
    font-family: 'MuliRegularFont' !important;
}

.starbuy-list-element *:not(.fa),
.starbuy-drawer-promo-header-description-top,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
.starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer,
.starbuy-product-preview .starbuy-product-preview-header,
.starbuy-faf-preview .starbuy-faf-preview-message-lead,
.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-family: 'MuliBoldFont' !important;
}

.starbuy-drawer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] {
        opacity: 1;
    }

    .starbuy-drawer[data-drawer-number="1"] {
        z-index: 500;
    }

    .starbuy-drawer[data-drawer-number="2"] {
        z-index: 501;
    }

.starbuy-drawer-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    min-height: 100%;
    width: 500px;
    max-width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] .starbuy-drawer-inner {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
    }

    .starbuy-drawer[data-drawer-number="1"] .starbuy-drawer-inner {
        width: 500px;
    }

.starbuy-drawer-promotion {
    width: 100%;
    min-height: 100%;
    padding: 32px;
    background: white;
    flex-grow: 1;
    -webkit-box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    overflow-x: none;
    overflow-y: auto;
    user-select: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.starbuy-drawer-close {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    flex-grow: 0;
    min-width: 32px;
    cursor: pointer;
    position: relative;
    background: black;
}

    .starbuy-drawer-close:before, .starbuy-drawer-close:after {
        position: absolute;
        top: 8px;
        left: 15px;
        content: ' ';
        height: 16px;
        width: 2px;
        background-color: white;
    }

    .starbuy-drawer-close:before {
        transform: rotate(45deg);
    }

    .starbuy-drawer-close:after {
        transform: rotate(-45deg);
    }

.starbuy-drawer-close-inner {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0.0625rem solid;
    color: var(--starbuyColourThree);
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    gap: 0.25rem;
}

.starbuy-drawer-promo-header {
    margin-bottom: 16px;
}

.starbuy-drawer-promo-header-title {
    background-color: var(--starbuyColourThree);
    color: var(--starbuyColourOne);
    padding: 8px 0;
    margin-bottom: 8px;
    text-align: center;
}

    .starbuy-drawer-promo-header-title span:before {
        content: '\e9e5';
        font-family: feather;
    }

.starbuy-drawer-promo-header-description {
    padding: 16px;
    background-color: var(--starbuyColourOne);
}

.starbuy-drawer-promo-header-description-top {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.25em;
}

.starbuy-drawer-promo-header-description-bottom {
    color: #222;
    font-size: 0.9em;
}

.starbuy-drawer-divider {
    width:100%;
    float:left;
    height:1px;
    background: var(--starbuyColourTwo);
    margin: 16px 0;
}


/**** DRAWER 1 - PRODUCT ***************************************************************************/
.starbuy-list-element {
    padding: 16px 48px 16px 16px;
    font-size: 1.25em;
    margin-bottom: 16px;
    position: relative;
    color: var(--starbuyColourThree);
    background-color: var(--starbuyColourOne);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    -moz-align-items: stretch;
}

    .starbuy-list-element:hover {
        background-color: var(--starbuyColourTwo);
    }

    .starbuy-list-element[data-applied="true"] {
        color: var(--starbuyColourThreeApplied);
        background-color: var(--starbuyColourTwoApplied);
        cursor: auto;
    }

        .starbuy-list-element[data-applied="true"]:hover {
            background-color: var(--starbuyColourTwoApplied);
        }

    .starbuy-list-element [class*="starbuy-list-element-"] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 32px;
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        align-content: center;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        font-size: 0.8em;
    }

    .starbuy-list-element .starbuy-list-element-arrow {
        background-color: var(--starbuyColourTwo);
        color: var(--starbuyColourThree);
    }

        .starbuy-list-element .starbuy-list-element-arrow:after {
            content: '\e910';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-check {
        background-color: var(--starbuyColourTwoApplied);
        color: var(--starbuyColourThreeApplied);
    }

        .starbuy-list-element .starbuy-list-element-check:after {
            content: '\e93d';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-prefix {
        background-color: var(--starbuyColourThree);
        color: white;
        position: relative;
        padding: 0 8px;
        margin: 0 16px 0 0;
        width: auto;
        top: auto;
        bottom: auto;
        left: auto;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-size: 10px;
    }

        .starbuy-list-element .starbuy-list-element-prefix:before {
            content: '\e9e5';
            font-family: feather;
            margin-right: 4px;
        }

.basket-itemrow-offers .starbuy-product-preview {
    float: left;
    margin: 0 8px 16px 0;
}

/**** DRAWER 2 - OFFER ***************************************************************************/

.starbuy-drawer-single-product {
}

    .starbuy-drawer-multi-products,
    .starbuy-drawer-single-product,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-single-product .starbuy-drawer-addtobasket,
    .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
    .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
    .starbuy-drawer-viewalloffers-backbutton,
    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > a,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > div {
        width: 100%;
        float: left;
    }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
        .starbuy-drawer-viewalloffers-backbutton {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .starbuy-drawer-viewalloffers-backbutton {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
        .starbuy-drawer-viewalloffers-backbutton {
            color: white;
            background-color: var(--starbuyColourThree);
            text-align: center;
            border-radius: 3px;
            padding: 8px 0;
            font-size: 0.8em;
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
            .starbuy-drawer-viewalloffers-backbutton {
                background-color: white;
                border: 1px solid;
                border-color: var(--starbuyColourThree);
                color: var(--starbuyColourThree);
            }

                .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget:hover,
                .starbuy-drawer-viewalloffers-backbutton:hover {
                    background-color: var(--starbuyColourThree);
                    color: white;
                }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook {
            color: var(--starbuyColourThree);
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook:after {
                content: '\e966';
                font-family: feather;
                margin-left: 4px;
                display: inline-block;
            }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
        margin: 0 0 16px 0;
        display: block;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        margin: 0 0 8px 0;
    }

    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        min-height: calc(1.55em * 3);
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price > div,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price > div {
            float: left;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy {
            color: var(--starbuyColourThree);
            margin: 0 16px 0 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy {
            color: #999;
            text-decoration: line-through;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer {
            width: 100%;
            font-size: 0.7em;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-dropdown-qty {
            display: none !important;
        }

    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 16px 0 0 0;
    }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct {
            font-size: 0.8em;
            padding: 4px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
            font-size:0.9em;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
            font-size: 0.8em;
        }

    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 32px;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion {
        padding: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-single-product {
        padding: var(--padding, 32px);
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-promo-header {
        padding: var(--padding, 32px);;
        margin-bottom: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-viewalloffers-backbutton {
        margin-inline: var(--padding, 32px);
        width: calc( 100% - calc( var(--padding, 32px) * 2 ));
    }

    .starbuy-drawer[data-drawer-number="2"] :is(.starbuy-drawer-top-buttons, .starbuy-drawer-multi-products-items) {
        padding: 0 var(--padding, 32px) var(--padding, 32px) var(--padding, 32px);
        overflow: hidden;
    }

    .starbuy-drawer-bottom-buttons {
        width: 100%;
        float: left;
        display: block;
        padding: var(--padding, 32px);
        background: var(--starbuyColourTwo);
    }

    .starbuy-drawer-top-buttons {
        background: transparent;
    }

    .starbuy-drawer-bottom-buttons :is(.starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget, .starbuy-drawer-viewalloffers-backbutton) {
        background: var(--starbuyColourThree);
        color: #fff;
        text-transform: uppercase;
    }

@media screen and (max-width: 768px) {
    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 16px;
    }
}

/**** PREVIEWS ***************************************************************************/

#detailfast-starbuys {
    width: 100%;
}

.starbuy-product-preview,
.starbuy-faf-preview {
    border: 1px solid;
    border-color: var(--starbuyColourThree);
    background: white;
    border-radius: 3px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    line-height: 150%;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    .starbuy-product-preview:hover {
        background: var(--starbuyColourOne);
    }

    .starbuy-product-preview > div,
    .starbuy-faf-preview > div {
        padding: 16px;
    }

    .starbuy-faf-preview {
        max-width: 100%;
        line-height: 135%;
        margin: 0 0 16px 0;
        background-color: var(--starbuyColourOne);
    }

    .starbuy-product-preview .starbuy-product-preview-header,
    .starbuy-faf-preview .starbuy-faf-preview-header {
        background: var(--starbuyColourThree);
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

        .starbuy-faf-preview .starbuy-faf-preview-header {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            justify-content: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            align-content: center;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
        }

            .starbuy-product-preview .starbuy-product-preview-header .starbuy-product-preview-header-star:after,
            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                content: '\e9e5';
                font-family: feather;
            }

            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                margin-right: 3px;
            }

    .starbuy-product-preview .starbuy-product-preview-message {
        flex-grow: 1;
    }

        .starbuy-product-preview .starbuy-product-preview-message strong {
            text-transform: uppercase;
            color: var(--starbuyColourThree);
            font-weight: normal;
        }

    .starbuy-product-preview .starbuy-product-preview-link {
        color: var(--starbuyColourThree);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

.starbuy-faf-preview .starbuy-faf-preview-message-lead {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.5em;
    line-height: 1.5em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-size:1.2em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-explainer {
    font-size: 0.9em;
    margin: 8px 0 0 0;
}

@media screen and (max-width: 767.99px) {
    .starbuy-drawer-promo-header-title {
        padding: 4px 0;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promo-header-description {
        padding: 8px;
    }

    .starbuy-drawer-promo-header-description-top {
        font-size: 1em;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promotion {
        padding: 16px;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image .imgCtr:after {
            padding-bottom: 75%;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-msg {
        font-size: 0.8em;
    }

    .starbuy-product-preview,
    .starbuy-faf-preview {
        flex-wrap: wrap;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
    }

        .starbuy-product-preview > div {
            width: 100%;
            padding: 0 8px;
            text-align: center;
            line-height: 32px;
        }

        .starbuy-faf-preview > div {
            width: 100%;
            padding: 8px;
        }

        .starbuy-product-preview .starbuy-product-preview-link {
            border-top: 1px dotted;
            border-color: var(--starbuyColourTwo);
            color: var(--starbuyColourThree);
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-lead {
            font-size: 1.25em;
            line-height: 1.25em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
            font-size: 1em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-explainer {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .starbuy-faf-preview[data-view-all-explainer="1"] .starbuy-faf-preview-message-explainer {
            text-overflow: unset;
            white-space: unset;
            overflow: unset;
        }

}
.quicklookitem-wrapper,
.quicklookitem-inner {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.quicklookitem-wrapper {
    z-index: 3000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
}

    .quicklookitem-wrapper[data-state="open"] {
        opacity: 1;
        overflow: auto;
    }

    .quicklookitem-wrapper .quicklookitem-inner {
        width: 1250px;
        height: auto;
        max-height: none;
        max-width: calc(100vw - 32px);
        margin: 16px;
        background: white;
        -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        top: 10px;
        position: relative;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
        top: 0px;
    }

.quicklookitem-inner .quicklookitem-inner-left,
.quicklookitem-inner .quicklookitem-inner-right {
    width: 50%;
    float: left;
}

.quicklookitem-inner-right {
    padding: 32px;
    position: relative;
}

    .quicklookitem-inner-right[data-isstarbuy="true"] {
        padding: 80px 32px 32px 32px;
        background-color: var(--starbuyColourOne);
    }

        .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: white;
            background-color: var(--starbuyColourThree);
        }

    .quicklookitem-inner-right > div {
        width: 100%;
        float: left;
        margin-bottom: 16px;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---name {
        font-size: 1.25em;
        font-family: 'citrfontbold';
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---prices {
        font-size: 0.9em;
    }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices > div {
            float: left;
            margin-right: 8px;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy {
            color: var(--starbuyColourThree);
        }

            .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy + .quicklookitem-inner-right---prices-price {
                color: #999;
                text-decoration: line-through;
            }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy-explainer {
            color: var(--starbuyColourThree);
            font-size: 0.7em;
            width:100%;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-price {
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
            color: #999;
            text-decoration: line-through;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
        border: 1px solid #2f76ec;
        background: #e8f4ff;
        color: #2f76ec;
        padding: 8px;
        text-align: center;
        font-size: 0.9em;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        background: #2f76ec;
        color: white;
        border-radius: 4px;
        padding: 16px;
        text-align: center;
        display: block;
        float: left;
        width: 100%;
    }


.quicklookitem-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    background: black;
    cursor: pointer;
    z-index: 3001;
}

@media screen and (max-width : 1023px) {
    .quicklookitem-wrapper {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }

    .quicklookitem-inner .quicklookitem-inner-left,
    .quicklookitem-inner .quicklookitem-inner-right {
        width: 100%;
    }

    .quicklookitem-inner-right {
        padding: 16px;
    }

        .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button {
            width: auto;
            margin-top: 0;

        }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty-label,
            .quicklookitem-inner-right .add-to-cart-area-1 .add-to-cart-area-dropdown select {
                line-height: 36px;
                height: 36px;
            }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input {
                padding: 0 8px;
                width: 40px;
            }

        .quicklookitem-inner-right .add-to-cart-area-msg,
        .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
            font-size: 11px;
        }

        .quicklookitem-inner-right[data-isstarbuy="true"] {
            padding: 40px 16px 16px 16px;
        }

            .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
                height: 32px;
                line-height: 32px;
                font-size: 0.9em;
            }

        .quicklookitem-inner-right > div {
            margin-bottom: 8px;
        }

    .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div {
        background-size: cover !important;
    }

        .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div:after {
            padding-bottom: 80%;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        padding: 8px;
    }
}
 .imm-widget-anchor{
     display:flex !important;
     margin-bottom:0px !important;
     background: rgb(255, 255, 255);
 }
 .finance-output{
     width:100%;
 }
 .finance-output iframe{
     margin:0px auto;
     width:90% !important;
 }
.finance-hidden-price{
    display:none;
}
.view-all-link-container {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 0 1.25rem;
    width: 100%;
}
.view-all-link {
    font-size: 1rem;
    color: #0077cc;
}
.view-all-link:hover,
.view-all-link:focus {
    color: #004b99;
    text-decoration: underline;
}
/* Not found Page */
.not-found-page {
    display: flex;
    justify-content: center;
    width: 100%;
}

.not-found-container {
    align-items: center;
    background: #fff;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem;
    position: relative;
    width: 100%;
    z-index: 0;
    text-align: center;
}

    .not-found-container::before {
        align-items: center;
        bottom: 0;
        color: #f7f7f7;
        content: '404';
        display: flex;
        font-size: 20rem;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

.not-found-container-has-background::before {
    content: '';
}

.not-found-title {
    font-size: 4rem;
}

.not-found-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Classes only found in the default contents for the page. These may not be present, if the contents has been overridden. */
.not-found-paragraph-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.not-found-first-paragraph,
.not-found-second-paragraph {
    font-size: 2rem;
}

.not-found-link-container {
    display: flex;
    flex-direction: column;
}

.not-found-homepage-link {
    background-color: cornflowerblue;
    border-radius: 0.5rem;
    color: #fff;
    padding: 1rem;
}
/*
 *********************************
 * Collections Landing Page Styles
 *********************************
 */

 :root {
    --collections--content-search-gap: 2rem;
    --collections--clear-btn-color: #D54939;
    --collections--search-wrapper-count-color: #2f76ec;
    --collections--content-grid-columns: 1fr;
 }

 .filters-open {
    overflow-y: hidden
}

 .content-collection-landing-page {
    display: flex;
    justify-content: center;
}

.content-collection-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 90%;
}

#content-collection-search {
    grid-template-columns: var(--collections--content-grid-columns);
    gap: 3rem;
    display: grid;
    background: #fff;
}

#content-collection-search .search-column {
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: var(--collections--content-search-gap);
}

#content-collection-search .search-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

#content-collection-search .search-wrapper:nth-child(n+2) {
    padding-top: var(--collections--content-search-gap);
    border-top: 1px solid #ccc;
}

#content-collection-search .search-wrapper:last-child {
    margin-top: auto;
}

#content-collection-search  .search-wrapper h4 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 150%;
}

#content-collection-search  .search-wrapper > div {
    grid-row: 2;
    grid-column: 1 / -1;
}

#content-collection-search .tags {
    max-height: 33vh;
    overflow-y: auto;
}

.content-collection-title {
    margin: 0;
}

.content-collection-no-results-message {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}

.content-collection-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.content-collection-card {
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px -1px #eee;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 150ms ease-in-out;
    padding: 0px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    background-color: #f9f9f9;
}

.content-collection-info-container {
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-collection-card:hover {
    background: #fcfcfc;
    transform: scale(1.01);
}

.content-collection-card-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
}

.content-collection-image-container {
    width: 100%;
    padding-top: 75%;
    position: relative;
    background-color: #e5e5e5;
    overflow: hidden;
}

    .content-collection-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.content-collection-tag-container {
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.25rem;
}

.content-collection-landing-page-content {
    width: 100%;
}

    .content-collection-landing-page-content[data-isempty="True"] {
        display: none;
    }

.search-tag, .content-collection-tag {
    border-radius: 0.75rem;
    border: 1px solid #2f76ec;
    color: #2f76ec;
    font-size: 0.75rem;
    padding: 0.4rem;
    transition: all 150ms ease-in-out;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.search-tag:hover {
    background: #1563e0;
    color: white;
    cursor: pointer;
}

.content-collection-filter-tag {
    background: #2f76ec;
    color: #fff;
}

.search-container {
    position: relative;
}

.clear-btn, .clear-tags-button {
    font-size: 14px;
    cursor: pointer;
}

.clear-btn {
    background: var(--collections--clear-btn-color);
    border-radius: 100%;
    color: #fff;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    z-index: 10;
}

.clear-tags-button {
    color: var(--collections--clear-btn-color);
    text-decoration: underline;
}

.content-collection-description {
    font-size: 14px;
    color: #555;
}

.content-collection-date {
    font-size: 12px;
    color: #777;
    margin-top: auto;
}

.content-collection-hidden-element {
    display: none !important;
}

.search-wrapper-count {
    width: 3rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--collections--search-wrapper-count-color);
}


a.filter-button {
    text-align: center;
    padding: 0.75rem;
    color: #666;
    border: 1px solid;
    cursor: pointer;
}

a.filter-button:hover {
    border: 1px solid;
}

#TagSelectArea .tag-toggle-filters {
    display: flex;
    gap: 0.5rem;
    flex: 1 0 100%;
    padding: 0.5rem;
    background: #f4f4f4;
    margin-bottom: 1rem;
}

.content-collection-filter-type-button {
    flex:1;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #f4f4f4;
    color: #000;
    border: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem;
    text-transform: uppercase;
    border-radius: 0.25rem;
    height: auto;
    line-height: 100%;
    cursor: pointer;
}

.content-collection-filter-type-button:hover {
    background: #1563e0;
    color: #fff;
 }

.content-collection-filter-type-button.content-collection-filter-type-button-active {
    background: #2f76ec;
    color:white;
    cursor: default;
}

.collection-filter-actions {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    gap: 0.5rem;
    margin-top: auto;
}

.collection-filter-actions > span {
    cursor: pointer;
    height: 48px;
    text-align: center;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: #2f76ec;
    color: #fff;
}

.ffclose:before {
    font: normal normal normal 14px / 1 feather;
    content: "\e117";
    color: #ffffff;
    line-height: 48px;
}

 #content-collection-search > .search-column {
    display: none;
 }

.filters-open #content-collection-search > .search-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100;
    padding: 2rem;
    display: flex;
}

.content-collection-nopointer {
    pointer-events: none;
}

.content-collection-nopointer.collection-filter-actions ~.search-wrapper-count {
    border-color: #ccc;
}

.content-collection-nopointer.collection-filter-actions > span {
    background: #ccc;
}

@media screen and (min-width: 768px) {
    .content-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --collections--content-grid-columns: 300px 1fr;
    }

    #content-collection-search > .search-column {
        display: flex;
     }

    #content-collection-search #collections-related-wrapper.search-wrapper,
    #filter-button {
        display: none;
    }
}

@media screen and (min-width: 1440px) {
    .content-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1660px) {
    .content-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/*
 *******************************
 * Collection Article Styles
 *******************************
 */

 :root {
    --collection-content-width: 80%;

    --collection-image-aspect-ratio: 2.35 / 1;
    --collection-image-border-radius: 0.5rem;

    --collection-content-image-border-radius: 0.5rem;
    --collection-content-link-color: #2163d6;
 }

 div[data-type="collection"] #FAFImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

div[data-type="collection"] #FAFImg .collection-image {
    height: auto;
    width: 100%;
    aspect-ratio: var(--collection-image-aspect-ratio, 2.35 / 1);
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
    display: flex;
    margin: 0;
    border-radius: var(--collection-image-border-radius, 0.5rem);
}

div[data-type="collection"] #FAFDesc {
    display: block;
    max-width: var(--collection-content-width, 80%);
    margin: auto;
    background: transparent;
    margin-block: 2rem;
}

    div[data-type="collection"] #FAFDesc img {
        width: 100%;
        height: auto;
        border-radius: var(--collection-content-image-border-radius, --collection-image-border-radius, 0.5rem);
    }

    div[data-type="collection"] #FAFDesc a {
        color: var(--collection-content-link-color, #2163d6);
        text-decoration: underline;
    }

@media screen and (max-width: 500px) {
    :root {
        --collection-content-width: 100%;
        --collection-image-aspect-ratio: 1;
    }
}
#aiRecCmdPaletteBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPaletteBackdrop.cmd-palette-visible {
        opacity: 1;
    }

@property --cmd-gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#aiRecCmdPalettePanel {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    max-height: 70vh;
    border: 4px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--cmd-gradient-angle), #DAE343, #00AEEC, #DAE343) border-box;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.35);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: cmdGradientRotate 3s linear infinite;
    width: min(90vw, 1024px);
}

@keyframes cmdGradientRotate {
    to {
        --cmd-gradient-angle: 360deg;
    }
}

#aiRecCmdPalettePanel.cmd-palette-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#aiRecCmdPalettePanel .cmd-palette-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
}

#aiRecCmdPalettePanel .cmd-palette-search-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-input,
#aiRecCmdPalettePanel .cmd-palette-textarea {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    color: #111827;
    background: transparent;
    line-height: 1.5;
}

#aiRecCmdPalettePanel .cmd-palette-textarea {
    padding: 1rem;
    resize: none;
}

    #aiRecCmdPalettePanel .cmd-palette-input::placeholder,
    #aiRecCmdPalettePanel .cmd-palette-textarea::placeholder {
        color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-search-btn {
    display: none;
}

#aiRecCmdPalettePanel .cmd-palette-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: cmdPaletteSpin 0.6s linear infinite;
}

@keyframes cmdPaletteSpin {
    to {
        transform: rotate(360deg);
    }
}

#aiRecCmdPalettePanel .cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#aiRecCmdPalettePanel .cmd-palette-result {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

    #aiRecCmdPalettePanel .cmd-palette-result:hover,
    #aiRecCmdPalettePanel .cmd-palette-result.cmd-palette-result-active {
        background-color: #f9fafb;
    }

    #aiRecCmdPalettePanel .cmd-palette-result:last-child {
        border-bottom: none;
    }

#aiRecCmdPalettePanel .cmd-palette-result-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #f9fafb;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-info {
    flex: 1;
    min-width: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#aiRecCmdPalettePanel .cmd-palette-result-brand {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-meta {
    text-align: right;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-price {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-original {
    font-weight: 400;
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0.375rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-sale {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-in {
    color: #16a34a;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-out {
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-empty,
#aiRecCmdPalettePanel .cmd-palette-error {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-error {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.75rem;
    color: #9ca3af;
    border-radius: 0 0 10px 10px;
}

#aiRecCmdPalettePanel .cmd-palette-footer-logo {
    height: 20px;
    width: auto;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPalettePanel .cmd-palette-footer-logo:hover {
        opacity: 1;
    }

#aiRecCmdPalettePanel .cmd-palette-footer-hints {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

#aiRecCmdPalettePanel .cmd-palette-footer kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1.4;
    box-shadow: 0 1px 0 #d1d5db;
}

#aiRecCmdPalettePanel .cmd-palette-model-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter,
#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select,
#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    box-sizing: border-box;
    height: 32px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 4px;
    outline: none;
    margin: 0;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    border: none;
    color: #374151;
    background: #fff;
}

    #aiRecCmdPalettePanel .cmd-palette-model-filter:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select {
    flex: 1;
    min-width: 0;
    padding: 0 22px 0 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
    border: 1px solid #d1d5db;
    color: #374151;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-provider-select:focus,
    #aiRecCmdPalettePanel .cmd-palette-model-select:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    flex-shrink: 0;
    padding: 0 10px;
    background: #323e48;
    border: 1px solid #323e48;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    min-height: auto;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-edit-sp-btn:hover {
        background: #435361;
        border-color: #435361;
    }

.cmd-palette-sp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 55vw;
    min-width: 500px;
    height: 100vh;
    z-index: 100000;
    background: #1e1e1e;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #2d2d2d;
    flex-shrink: 0;
    background: #323e48;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-title {
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions button {
        width: auto;
        height: auto;
        margin: 0;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    background: #252526;
    color: #ccc;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn:hover {
        background: #2a2d2e;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save {
    background: #0e639c;
    border-color: #0e639c;
    color: #fff;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save:hover {
        background: #1177bb;
        border-color: #1177bb;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.6;
    border: none;
    padding: 2rem;
    resize: none;
    outline: none;
    overflow-y: auto;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea,
    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea:hover {
        background: #303234;
        color: #fff;
        border-radius: 0;
    }

@media (max-width: 680px) {
    #aiRecCmdPalettePanel {
        top: 1rem;
        width: auto;
        left: 1rem;
        right: 1rem;
        transform: translateY(-12px);
        max-width: none;
    }

        #aiRecCmdPalettePanel.cmd-palette-visible {
            transform: translateY(0);
        }
}
.recommendations-container {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    position: relative;
    width: 100%;
    --recommendations-gap: 1rem;
    --recommendations-padding: 1rem;
}

.recommendations-repeater-prev,
.recommendations-repeater-next {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    cursor: pointer;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    top: 50%;
    transition: color 0.25s ease-in-out;
    width: 1.5rem;
    z-index: 10;
}

    .recommendations-repeater-prev:hover,
    .recommendations-repeater-next:hover {
        color: dodgerblue;
    }

    .recommendations-repeater-prev[aria-disabled="true"],
    .recommendations-repeater-next[aria-disabled="true"] {
        display: none;
    }

.recommendations-repeater-prev {
    left: 0.5rem;
}

    .recommendations-repeater-prev:before {
        content: '\e941';
        font-family: 'feather';
    }

.recommendations-repeater-next {
    right: 0.5rem;
}

    .recommendations-repeater-next:before {
        content: '\e942';
        font-family: 'feather';
    }

.recommendations-repeater {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    gap: var(--recommendations-gap);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--recommendations-padding);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    --recommendations-page-size: 6;
}

    .recommendations-repeater::-webkit-scrollbar {
        display: none;
    }

body.new-basket .basket-wrapper a.recommendations-item,
a.recommendations-item,
.recommendations-item {
    border: 1px solid #ededed;
    border-radius: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-sizing: border-box;
    color: #000;
    display: flex;
    flex: 0 0 calc((100cqi - 2 * var(--recommendations-padding) - (var(--recommendations-page-size) - 1) * var(--recommendations-gap)) / var(--recommendations-page-size));
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    transition: transform 0.25s ease-in-out;
}

    .recommendations-item:hover {
        transform: scale(1.02);
    }

    .recommendations-item .imgCtr {
        border: 1px solid #ededed;
        border-radius: 2rem;
    }

.recommendations-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .recommendations-item-details .pricingRepeater.fafSalePR {
        flex-wrap: wrap;
        line-height: normal;
    }

.recommendations-page-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.recommendations-page-dot {
    background: #ccc;
    border-radius: 100%;
    cursor: pointer;
    height: 0.5rem;
    transition: background 0.25s ease-in-out;
    width: 0.5rem;
}

    .recommendations-page-dot:hover {
        background: #999;
    }

    .recommendations-page-dot[aria-current="true"] {
        background: #000;
    }

.recommendations-repeater-footer {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: end;
}

@keyframes recommendations-border-rotate {
    from {
        --recommendations-border-angle: 0deg;
    }

    to {
        --recommendations-border-angle: 360deg;
    }
}

@property --recommendations-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.recommendations-repeater-footer-badge {
    animation: recommendations-border-rotate 2s linear infinite;
    border-radius: 0.5rem;
    letter-spacing: 0.1rem;
    padding: 0.15rem 0.4rem;
    position: relative;
}

    .recommendations-repeater-footer-badge::before {
        animation: recommendations-border-rotate 3s linear infinite;
        background: conic-gradient(from var(--recommendations-border-angle), #dae343, #00aeec, #dae343);
        border-radius: inherit;
        content: '';
        inset: 0;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 1.5px;
        position: absolute;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
    }

@media only screen and (max-width: 1279px) {
    .recommendations-repeater {
        --recommendations-page-size: 4;
    }
}

@media only screen and (max-width: 899px) {
    .recommendations-repeater {
        --recommendations-page-size: 3;
    }
}

@media only screen and (max-width: 768px) {
    .recommendations-repeater {
        --recommendations-page-size: 2;
    }
}
/* CSS Document *//* ===========================================================================
   01-CC-Brand.css - Hope Valley Saddlery
   The reskin surface. Raw values only; 02 derives the ramps from these.
   Source: Figma "HOVA -- Citruslime", node 98:724.
   =========================================================================== */


/* 1. TYPE ROLES ----------------------------------------------------------- */
:root:root {
    --font-body:    'citrfontreg';      /* Jost Regular  */
    --font-heading: var(--font-display);
    --font-bold:    'citrfontbold';     /* Jost Medium   */
    --font-display: 'citrfontboldalt';  /* EB Garamond   */
    --font-accent:  var(--font-body);
}


/* 2. BRAND ---------------------------------------------------------------- */
:root:root {
    --brand: #252525;
    --brand-dark: #252525;
    --brand-accent: #252525;
    --brand-link: #252525;
    --brand-focus: #252525;
    --sale: #c8102e;

    /* Header and footer only. The rest of the site stays white and #252525. */
    --header-bg: #37854B;
    --header-button: #1F5A31;
    --header-buttonHover: #163F22;
    --header-sale: #D0021B;
    --header-saleHover: #A80016;
    --header-rule: #E3E8E2;

    --text-on-brand: #FFFFFF;
    --text-on-accent: #FFFFFF;

    --background: #FFFFFF;
    --background-raised: #F5F4F2;
    --text: #252525;
    --text-inverse: #FFFFFF;

    --global-radius: 0;
    --global-innerRadius: 0;
    --global-border: 1px solid var(--border-light);

    --global-buttonSize: 0.8125rem;
    --global-buttonFontFamily: var(--font-body);
    --global-buttonLetterSpacing: 0.135em;
    --global-buttonLineHeight: 1;
    --global-buttonTextTransform: uppercase;
    --global-buttonColor: var(--text-on-brand);
    --global-buttonBorder: 1px solid var(--brand-dark);
    --global-buttonRadius: 2px;
    --global-buttonBackground: var(--brand-dark);
    --global-buttonPadding: 1rem 1.25rem;
    --global-buttonBackgroundHover: var(--background);
    --global-buttonColorHover: var(--text);
    --global-buttonBorderHover: 1px solid var(--brand-dark);
    --global-buttonPaddingHover: 0.65rem 2.2rem;
    --global-buttonRadiusHover: 0;
    --global-buttonTransition: var(--global-transition);

    --global-addToCart-background: #37854b;
    --global-addToCart-border: none;
    --global-addToCart-color: var(--text-on-accent);
    --global-addToCart-backgroundHover: oklch(from var(--brand-accent) calc(l + 0.2) c h);
    --global-addToCart-borderHover: none;
    --global-addToCart-colorHover: var(--text-on-accent);

    /* Inert: these four only apply under class="cl-nav-over-hero", which this
       site does not use. The design draws a solid bar above the hero. */
    --navSolid-background: var(--text-inverse);
    --navSolid-links: oklch(from var(--brand-focus) l c h / 0.85);
    --navSolid-linksHover: var(--brand-focus);
    --navSolid-icons: var(--brand-focus);
}


/* 3. COPY ----------------------------------------------------------------- */
:root:root {
    --copy-newsletterTitle: "Join Our Newsletter";
    --copy-newsletterBody: "Sign up for news and offers.";

    --copy-statementEyebrow: "";
    --copy-signature: none;

    --copy-otherColours: "Other Colours Available";
    --copy-rrp: "RRP ";

    --copy-addToCart: "Add To Cart";
    --copy-stockNotification: "Stock Notification";
    --copy-specialOrder: "Special Order";
    --copy-comingSoon: "Coming Soon";
    --copy-search: "Search";
}


/* 4. SWITCHES ------------------------------------------------------------- */
:root:root {

    /* Green bar, white ink. Layout for the header redesign is in 99. */--navBackground: var(--header-bg);--navLinks: var(--text-inverse);--navLinks-hover: var(--text-inverse);--navIcons: var(--text-inverse);--navBorderBottom: 0;--nav-fontSize: 1.1rem;

    --sale-color: var(--text-inverse);--sale-background: var(--header-sale);--sale-border: 0;--sale-padding: 2px 14px 0 15px;--sale-radius: 4px;
    --sale-colorHover: var(--text-inverse);--sale-backgroundHover: var(--header-saleHover);--sale-borderHover: 0;--sale-paddingHover: var(--sale-padding);

    --dropdownAreaTitle: var(--header-bg);--dropdownAreaTitleUnderline: 1px solid var(--header-rule);--dropdownAreaLinks: var(--text);
    --saleDropdownBackground: transparent;--saleDropdownText: var(--header-sale);

    --mobileNavBackground: var(--background);--mobileNavLinkColor: var(--text);

    --basketPipBackground: var(--header-sale);--basketPipColor: var(--text-inverse);--pipSize: 20px;

    /* Colour wordmark, painted as an image rather than a mask: the artwork is
       tan, black and white, and a mask reads only alpha so all three would come
       out as one flat colour. All three tokens are required together.

       logo.png is GENERATED, not supplied. The original at this path had a
       WHITE wordmark, drawn for a dark bar, and is kept as logo1.png and
       logo-light.png. This one is that file with every pixel right of x=200
       recoloured to the ink, alpha preserved: the donkey is untouched and the
       antialiasing survives. Replace it with a proper export when one exists.

       Image mode does not follow the bar's ink, so a dark bar needs the light
       file as a second asset rather than a token change. 06 paints the footer
       mark from this same token; the footer is green, so the footer block
       below repoints it at the white original. The green header bar uses that
       white original too, via --logoHeader in 99. */--logo: url('/layout/generalLyout/logo.png');--logoMask: none;--logoImage: var(--logo);--logoInk: transparent;--logoHeader: url('/layout/generalLyout/logo-light.png');

    /* The platform sizes the wordmark box wider than the design's 158px slot,
       and image mode fits the artwork to that box, so without this the lockup
       sits small in a wide gap. Clamped rather than fixed so it gives way on
       narrow desktops before the 1024px rule takes over. */--logoWidth: clamp(150px, 19vw, 240px);

    /* Exposed search, pinned right of the nav. Mode is class="cl-search-exposed"
       on <body>. All three position tokens are required together: left:auto
       shrink-to-fits, so the width must be explicit. */--searchLeft: auto;--searchRight: 6vw;--searchWidth: 20rem;--searchHeight: 33px;

    /* A white pill on the green bar. The magnifier sits on a green button, so
       it is white; the typed text is dark. */--searchRadius: 999px;--searchBorder: 0;--searchBackground: var(--background);

    --searchText: var(--text);--searchIconColor: var(--text-inverse);--searchPlaceholderColor: #000000;

    /* Account and bag, at the size the design draws them. 03 defaults to 22. */--navIconSize: 18px;

    /* Carousel arrows: 39px white disc, black chevron, no hover bounce. The
       glyph is masked so it takes --splideArrowColor, and keeps the full 39
       viewBox, which is why the size is 100% rather than the 45% default. It
       is written inline because a referenced .svg does not display on iPhone.
       One glyph serves both directions; --prev mirrors it.

       The disc is the one place this site rounds a corner - --global-radius is
       0 everywhere else - so the radius is set here rather than inherited. */--splideArrowSize: 39px;--splideArrowRadius: 50%;--splideArrowBg: var(--background);--splideArrowColor: var(--text);--splideArrowHoverBg: var(--background);--splideArrowHoverColor: var(--text);--splideArrowHoverScale: 1;--splideArrowHoverOpacity: 0.75;--splideArrowGlyphContent: "";--splideArrowGlyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='39' viewBox='0 0 39 39' fill='none'%3E%3Cpath d='M14 19H25M19.8235 24L25 19L19.8235 14' stroke='%23000'/%3E%3C/svg%3E");--splideArrowGlyphSize: 100%;--splideArrowSvgOpacity: 0;

    /* Footer: green panel, white ink, the same green as the header bar. Links
       are solid white rather than 06's 78% tint, because white on #37854B only
       just clears AA (4.5:1) and any tint drops below it. The newsletter input
       stays a white field with dark text; the button is a white outline that
       fills white on hover. Social icons are flattened to black by 06, so they
       are inverted back to white here. */--footer-background: var(--header-bg);--footer-innerBackground: var(--header-bg);--footer-text: var(--text-inverse);--footer-titles: var(--text-inverse);--footer-links: var(--text-inverse);--footer-linksHover: var(--text-inverse);--footer-underlineColor: oklch(from var(--text-inverse) l c h / 0.3);--company-text: var(--text-inverse);
    --social-iconColor: brightness(0) invert(1) opacity(0.8);--social-iconHoverColor: brightness(0) invert(1);
    --footer-buttonColor: var(--text-inverse);--footer-buttonBorder: 1px solid var(--text-inverse);--footer-buttonBackgroundHover: var(--text-inverse);--footer-buttonColorHover: var(--header-bg);--footer-buttonBorderHover: 1px solid var(--text-inverse);}

/* Scoped rather than global so the header and the rest of the site keep the
   dark wordmark; only the footer's ::after mark picks up the white one. */
#modular-footer-wrapper { --logo: var(--logoHeader); }
/* 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: 1rem;

    --text-wrap: 0.625rem;
    --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;
    font-size: large
}


/* 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;
}

.coBlue, .coStandard, .requiredfield, .metapackselectspoof > span > i {
    color: #2f76ec;
}


.mini-basket-img .col-.x-small {
    font-size: medium;
}/* ==================== Navigation Variables ==================== */
:root {
    /* Navigation Typography */
    --nav-fontSize: var(--fontSize-md);
    --dropdown-titleSize: var(--fontSize-base);
    --dropdown-linkSize: var(--fontSize-base);
    --login-titleSize: var(--fontSize-md);
    --login-linkSize: var(--fontSize-sm);
    --search-inputSize: var(--fontSize-md);
    --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;
    --navHeight: 78px;
    --navInnerHeight: 65px;
    --noticeBarHeight: 30px;

    /* 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: 660px;
    --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;

    /* 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.7rem);

    /* Masked brand assets -- see the Brand Assets section at the foot of this
       file. These are PATHS, deliberately defaulted rather than left unset: a
       reskin replaces the FILES at these paths, exactly as it does with the
       fonts. Override a URL here only if a client's asset layout differs.

       They must not be left to fall back, because the failure mode is silent
       and bad: an unset var() in mask-image computes to `none`, while the
       companion `content: ""` has already blanked the platform icon-font
       glyph -- so the icons would disappear rather than degrade.

       (`generalLyout` is misspelled. It is the established folder name on
       every existing site and is baked into asset URLs; left as found.) */
    --navIconSize: 22px;
    --logo: url('/layout/generalLyout/logo.svg');
    --icon-bag: url('/layout/generalLyout/icons/bag.svg');
    --icon-account: url('/layout/generalLyout/icons/account.svg');
    /* Inline, not a file path: a referenced .svg does not display on iPhone. */
    --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: #000000

    /* Mobile Navigation */
    --mobileNavLinkColor: var(--text-inverse);
    --mobileNavBackground: var(--brand-dark);
    --mobileHamburgerBackground: transparent;
    /* Rest-state value only. It must name a RAW colour, not var(--navIcons):
       a custom property resolves its var()s on the element that DECLARES it,
       so a :root indirection would bake in :root's white and never see the
       Solid State's body-level re-point. The solid value is set alongside the
       other four in that block instead. */
    --mobileHamburgerColor: var(--navIcons);
    --mobileNavOverlay: var(--black-50);
    --mobileNavBlur: blur(3px);

    /* CTA Bar */
    --ctaBackground: var(--brand-dark);
    --ctaColor: var(--text-inverse);
    --ctaFontSize: var(--fontSize-xs);
    --ctaDivider: 1px solid var(--white-30);

    /* Outlet Nav Button */
    --outletBorder: var(--text-inverse);
    --outletHoverBackground: var(--text-inverse);
    --outletHoverText: var(--text);

    /* Filter */
    --filterBackground: var(--background);
}


/* ==================== Navigation Variables ==================== */
:root {
    /* Navigation Typography */
    --nav-fontSize: var(--fontSize-base);
    --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);
 
    /* Mobile Typography */
    --mobile-navLinkSize: var(--fontSize-base);
 
    /* Navigation Width */
    --navWidth: var(--global-NavFooterWidth);
 
    /* General Navigation Colors */
    --navBackground: var(--brand);
    --navIcons: var(--text-inverse);
    --navLinks: var(--text-inverse);
    --navLinks-hover: var(--brand-accent);
 
    /* Sale Link Styles */
    --sale-color: var(--sale);
    --sale-background: var(--background);
    --sale-border: 2px 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: 2px 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(--brand);
    --dropdownAreaBackground: var(--text-inverse);
    --dropdownAreaTitle: var(--brand);
    --dropdownAreaTitleUnderline: 1px solid var(--brand-accent);
    --dropdownAreaLinks: var(--text);
 
    /* Login Dropdown */
    --loginDropdownBackground: var(--brand-dark);
    --loginTitleColor: var(--text-inverse);
    --loginLinkColor: var(--text-inverse);
 
    /* Search */
    --searchBackground: var(--background-raised);
    --searchText: var(--text);
    --searchIconColor: var(--text-inverse);
    --searchPlaceholderColor: var(--text-muted);
 
    /* Mobile Navigation */
    --mobileNavLinkColor: var(--text-inverse);
    --mobileNavBackground: var(--brand);
    --mobileHamburgerBackground: var(--brand);
    --mobileHamburgerColor: var(--text-inverse);
    --mobileNavOverlay: var(--black-50);
    --mobileNavBlur: blur(3px);
 
    /* CTA Bar */
    --ctaBackground: var(--brand);
    --ctaColor: var(--text-inverse);
    --ctaFontSize: var(--fontSize-xs);
    --ctaDivider: 1px solid var(--white-30);
 
    /* Outlet Nav Button */
    --outletBorder: var(--brand);
    --outletHoverBackground: var(--brand);
    --outletHoverText: var(--text-inverse);
 
    /* Filter */
    --filterBackground: var(--background);
}
 
/* ==================== Navigation Fix ==================== */
#body-wrapper-overlay.open-slide-menu {
    display: none;
}
 
/* ==================== Navigation Styles ==================== */
 
.wrapper.masthead .fixed {
    background: transparent;
}
 
/* Background & Borders */
.wrapper.masthead {
    background: var(--navBackground) !important;
    /* border-bottom: 2px solid var(--brand-link-light); */
}
 
.wrapper.masthead .container {
    background: transparent;
}
 
.wrapper.masthead .navIcons {
    border-bottom: transparent;
    display: flex;
    justify-content: space-between;
}
 
/* Navigation Links */
.wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
    gap: 1.5rem;
}
 
.wrapper.masthead .NodeLevel0 > a {
    color: var(--navLinks);
    padding: 0;
    font-size: var(--nav-fontSize);
    text-transform: uppercase;
}
 
.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);
}
 
/* ==================== 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: black !important;
    /* border-color: var(--saleDropdownText) !important; */
}
 
.wrapper.masthead [data-nodename="Sale"] .NodeLevel1 > .CSSFacetNavModules a {
    color: black;
}
 
/* ==================== Navigation Dropdown ==================== */
 
.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
    background: var(--background);
    gap: .5rem;
    padding: 1rem;
    justify-content: center;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
    border: 2px solid var(--brand-link-light);
    border-top: 0;
    max-height: 80vh;
}
 
/* Dropdown Areas */
.wrapper.masthead .NodeLevel1 {
    width: auto;
    background: #1e1e1e08;
    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: 'citrfontbold';
    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);
    font-family: 'citrfontreg';
}
 
.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(--background-inverse);
        border-radius: var(--global-radius);
        margin-right: 2px;
        margin-top: 1px;
    }
 
    .icon-search {
        order: 6;
    }
 
    .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;
    }
 
    .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: block;
        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) ==================== */
 
.menu-icons-header > .icon-search {
    display: none;
}
 
#search.srchCtr {
    display: flex;
    justify-content: center;
    padding: .5rem;
    max-width: 600px;
    z-index: 999999;
}
 
#TopBanner1_clSearch1_containerSearch {
    display: flex;
    justify-content: center;
    max-width: 600px;
    width: 100%;
    position: relative;
}
 
.srchCtr.tbcnt .icon-search {
    width: 40px;
    height: 40px;
    line-height: 40px;
    min-width: 40px;
    pointer-events: none;
    top: -1px;
}
 
.srchCtr.tbcnt .searchBoxForm,
.srchCtr.tbcnt .searchBoxForm:focus {
    padding: 0 0 0 40px;
    height: 40px;
    line-height: 40px;
    border-radius: var(--global-radius);
    border: var(--global-border);
    width: 100%;
}
 
/* ==================== Layout & Responsive ==================== */
 
body {
    padding-top: 115px !important;
}
 
/* Mobile */
@media screen and (max-width: 1024px) {
    .menu-icons-header {
        display: flex;
        justify-content: space-between;
    }
 
    .logoContainer {
        width: 170px !important;
    }
 
    .logo {
        max-width: 150px !important;
    }
 
    body {
        padding-top: 103px !important;
    }
 
    #search.srchCtr {
        max-width: 100%;
    }
 
    .ctrNavigation {
        top: 50px !important;
    }
}
 
/* Desktop */
@media screen and (min-width: 1024px) {
    #search {
        position: absolute;
        top: calc(-90px + 1.5rem);
        z-index: 1;
        left: calc(50% - 300px);
    }
 
    .wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
        top: 40px;
        position: absolute;
    }
 
    .wrapper.masthead {
        height: 115px;
    }
 
    .menu-icons-header {
        width: 250px;
        display: flex;
        justify-content: flex-end;
    }
 
    #navi {
        display: flex;
        top: 73px;
        position: fixed;
        justify-content: center;
        padding-inline: 2rem;
        max-width: var(--navWidth);
        flex-grow: 0;
        width: 100%;
    }
 
    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        display: flex;
        float: none;
        justify-content: center;
    }
 
    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: 42px;
    }
}
 
/* ==================== 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: 250px;
}
 
/* ==================== CTA Bar ==================== */
 
/* Ctas */
 
.ctaContainer {display: flex;justify-content: flex-start;top: 0; background: transparent;}
 
.wrapper:has(.ctaContainer) {
    background: var(--ctaBackground);
}
 
div[id*="CTA_bannerCollectionPanel"] {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
    justify-content: flex-start;
}
 
div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr {
    position: static;
    padding: 0 !important;
    grid-gap: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    background: none !important;
    flex-flow: column;
}
 
div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span {
    font-size: var(--ctaFontSize) !important;
    width: auto;
    order: 0;
    text-align: center !important;
    color: var(--ctaColor) !important;
    background: none !important;
    padding: 0 !important;
    text-transform: none !important;
}
 
div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerTitle {
 
}
 
div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerView {
    display: none;
}
 
div[id*="CTA_bannerCollectionPanel"] .photo {
    display: none;
}
 
div[id*="CTA_bannerCollectionPanel"] .photo:after{
    width: 0 !important;
}
 
div[id*="CTA_bannerCollectionPanel"] .bannerDesc:before {
    display: none;
}
 
div[id*="CTA_bannerCollectionPanel"] a:hover .bannerTxtCtr {
    background: none;
}
 
div[id*="CTA_bannerCollectionPanel"] a {
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: .5rem;
    border-left: var(--ctaDivider);
    border-radius: 0;
    gap: 1rem;
}
 
 
div[id*="CTA_bannerCollectionPanel"] a:nth-child(1) {
    border-left: none;
}
 
div[id*="CTA_bannerCollectionPanel"] a:last-child {
    border-right: none;
}
 
div[id*="CTA_bannerCollectionPanel"] .bannerDesc{
    display: none;
}
 
div[id*="CTA_bannerCollectionPanel"] a .bannerTxtCtr,
div[id*="CTA_bannerCollectionPanel"] a{
    max-width: fit-content !important;
    min-width: fit-content;
    padding-inline: 1rem;
    height: fit-content !important;
}
 
/* ==================== Outlet Nav Button ==================== */
 
.wrapper.masthead .NodeLevel0[data-nodename*='Outlet'] {
    margin-left: auto;
    border: 1px solid var(--outletBorder);
    padding: .2rem .5rem;
    transition: var(--global-transition);
}
 
.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover {
    background: var(--outletHoverBackground);
}
 
.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover > a {
    color: var(--outletHoverText) !important;
}
 
/* ==================== Brands Dropdown ==================== */
 
[data-nodename="Brands"] .NodeLevel1 .CSSFacetNavModules > div {
    min-width: 200px;
    max-width: 200px;
    display: flex;
}
 
[data-nodename="Brands"] .NodeLevel1 > .CSSFacetNavModules {
    flex-flow: row wrap !important;
    display: flex;
    justify-content: flex-start;
    gap: 1rem !important;
}
 
@media screen and (min-width: 1024px) {
    [data-nodename="Brands"] .NodeLevel1:nth-child(1) > .CSSFacetNavModules > div a {
        /* font-size: var(--fontSize-lg) !important; */
        font-weight: bold;
    }
}
 
 .topCTA {
    border-bottom: 1px solid #ababab4a;
    text-align: center;
    margin: auto;
    overflow: auto;
    justify-content: space-between;
    -webkit-overflow-scrolling: touch;
    background: #37854b;
    color: white;
}

.topCTA a {
    padding: 8px 16px;
    font-size: smaller;
    color: inherit;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.topCTA a:nth-child(4):before {
    content: "\e901";
    color: inherit;
}


.topCTA a:before {
    color: inherit;
}
/* 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;
    height: 100%;
}

.cc-banner__img {
    display: block;
    width: 100%;
}

.cc-banner__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-radius: var(--bannerRadius);
}

.cc-banner__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--text-block-wrap);
    padding: clamp(1rem, 2vw, 2rem);
    /* background: var(--gradient-overlay-diagonal); */
    z-index: 2;
}

/* .text-wrap - the title + description wrapper. The two spans used to be
   direct flex children of .cc-banner__body; the wrapper has to reproduce that
   context or they collapse back to inline and run together on one line.
   gap/align-items are pulled from the parent so every band keeps the spacing
   and alignment it already declares. */
.text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--text-wrap);
    align-items: inherit;
    min-width: 0;
}

.cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-2xl);
    color: var(--bannerText);
    order: -1;
}

.cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--bannerText);
    opacity: 0.9;
}




.cc-banner__desc:empty,
.cc-banner__title:empty,
.cc-banner__cta:empty {
    display: none !important;
}


/* cc-banner in Splide context
   Keep cc-banner__img in-flow so the flex slide has real content width.
   Height chain: .splide (explicit) -> track/list/slide (100%) -> cc-banner (100%)
   -> cc-banner__img (100%) -> img (100%, object-fit: cover). */

.splide__slide .cc-banner {
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.splide__slide .cc-banner__img {
    display: block;
    height: 100%;
    overflow: hidden;
}

.splide__slide .cc-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}


/* cc-brand -- Brand Logo */

.cc-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
}

.cc-brand__img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: var(--brandLogoMaxHeight);
    object-fit: contain;
    filter: var(--brandLogoFilter);
    transition: filter var(--global-transition);
}

.cc-brand:hover .cc-brand__img {
    filter: var(--brandLogoFilterHover);
}


/* CC-HomepageTitles */

.CC-HomepageTitles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--bannerGap) * 0.5);
    /* padding-bottom: clamp(0.75rem, 1.5vw, 2.25rem); */
    max-width: var(--navWidth);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.CC-HomepageTitles h2 {
    font-family: var(--font-display);
    font-size: var(--fontSize-2xl);
    margin: 0;
    line-height: 1.2;
}

.CC-HomepageTitles p {
    font-size: var(--fontSize-base);
    margin: 0;
    opacity: 0.8;
}

.CC-HomepageTitles.wht,
.CC-HomepageTitles.wht h2,
.CC-HomepageTitles.wht p { color: var(--bannerText); }

.CC-HomepageTitles.blk,
.CC-HomepageTitles.blk h2,
.CC-HomepageTitles.blk p { color: var(--bannerCardText); }


/* CC-HomepageTitles - CMS-driven title block: a 1-item banner styled as heading + desc + CTA.
   The extra .cc-collection specificity (0,3,0) keeps a title banner above section tile rules. */
.CC-HomepageTitles .cc-collection { width: 100%; }
.CC-HomepageTitles .cc-collection .cc-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
    /* opt out of tile styling that would otherwise leak in */
    opacity: 1; height: auto; aspect-ratio: auto; background: none;
    border-radius: 0; overflow: visible; box-shadow: none; transform: none !important;
}
.CC-HomepageTitles .cc-collection .cc-banner::after { display: none; }   /* no tile corner stamp */
.CC-HomepageTitles .cc-collection .cc-banner__img { display: none; }     /* image slot unused on titles */
.CC-HomepageTitles .cc-collection .cc-banner__body {
    position: static; inset: auto; background: none; padding: 0;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
}
.CC-HomepageTitles .cc-collection .cc-banner__title {
    order: 0; font-family: var(--font-display); font-size: var(--fontSize-2xl);
    line-height: 1.2; margin: 0; max-width: none;
}
.CC-HomepageTitles .cc-collection .cc-banner__desc {
    order: 1; font-family: var(--bannerDescFontFamily); font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight); letter-spacing: var(--bannerDescLetterSpacing);
    opacity: 0.8; margin: 0; text-transform: none;
}
/* CTA underneath - canonical banner-view button tokens (matches every other CTA) */
.CC-HomepageTitles .cc-collection .cc-banner__cta {
    order: 2;
    align-self: center;
    margin-top: 0.5rem;
    background: var(--bannerViewBackground);
    color: var(--bannerViewColor);
    border: var(--bannerViewBorder);
    padding: var(--bannerViewPadding);
    border-radius: var(--bannerViewRadius);
    font-family: var(--font-bold);
    font-size: var(--bannerViewSize);
    letter-spacing: 0.12em;
    transition: var(--global-transition);
}
.CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    background: var(--bannerViewBackgroundHover); color: var(--bannerViewColorHover);
    border: var(--bannerViewBorderHover);
}
/* colour variants - mirror .wht/.blk which otherwise only target h2/p */
.CC-HomepageTitles.wht .cc-collection .cc-banner__title,
.CC-HomepageTitles.wht .cc-collection .cc-banner__desc { color: var(--bannerText); }
.CC-HomepageTitles.blk .cc-collection .cc-banner__title,
.CC-HomepageTitles.blk .cc-collection .cc-banner__desc { color: var(--bannerCardText); }


/* Scroll-in Animation */

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].inView {
    opacity: 1;
    transform: translateY(0);
}
/* CC-SplideBanners.css */

/* Splide Tokens */
:root {
    --splideArrowSize: 2.75rem;
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
    --splideArrowHoverBg: transparent;

    /* Arrow hover personality. Set --splideArrowHoverScale to 1 for a house
       style with no bounce; the arrow then only changes colour/opacity. */
    --splideArrowHoverColor: var(--text-inverse);
    --splideArrowHoverOpacity: 1;
    --splideArrowHoverScale: 1.1;

    /* Arrow shape and GLYPH. --splideArrowRadius defaults to the global radius so
       arrows follow the site's corner decision; 50% makes them circular
       independently of it.

       The glyph is OPT-IN and off by default: --splideArrowGlyphContent stays
       `none`, so no pseudo-element is generated and Splide's own SVG shows,
       exactly as before this existed. To supply a custom arrow set all four -
       the content token generates the box, the glyph masks it, the size scales
       it, and the svg opacity retires Splide's own.

       Masked rather than painted, so the glyph takes --splideArrowColor and
       follows every hover state for free. ONE asset serves both directions:
       --prev mirrors the same file. */
    --splideArrowRadius: var(--global-radius);
    --splideArrowGlyphContent: none;
    --splideArrowGlyph: none;
    --splideArrowGlyphSize: 45%;
    --splideArrowSvgOpacity: 1;

    /* Pagination marker SHAPE. The defaults are dots: a square-ish 8px marker
       that widens when active. Set width/height/radius to get dashes
       (e.g. 1.5rem x 2px, radius 0) or bars, without touching a rule. */
    --splidePaginationSize: 8px;
    --splidePaginationWidth: var(--splidePaginationSize);
    --splidePaginationHeight: var(--splidePaginationSize);
    --splidePaginationRadius: 1px;
    --splidePaginationWidthActive: 1.5rem;
    --splidePaginationBg: oklch(from var(--brand-dark) l c h / 0.3);
    --splidePaginationActiveBg: var(--brand-dark);
}


/* Base Splide Structure
   [data-splide-opts] scoping gives (0,2,0) specificity minimum,
   beating Splide's native (0,1,0) selectors without !important. */

[data-splide-opts] .splide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

[data-splide-opts] .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

[data-splide-opts] .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-splide-opts] .splide__slide {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}


/* Arrows */

[data-splide-opts] .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--splideArrowSize);
    height: var(--splideArrowSize);
    background: var(--splideArrowBg);
    color: var(--splideArrowColor);
    border: 0;
    border-radius: var(--splideArrowRadius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    opacity: 1;
}

[data-splide-opts] .splide__arrow:hover {
    background: var(--splideArrowHoverBg);
    color: var(--splideArrowHoverColor);
    opacity: var(--splideArrowHoverOpacity);
    transform: translateY(-50%) scale(var(--splideArrowHoverScale));
}

[data-splide-opts] .splide__arrow svg {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
    opacity: var(--splideArrowSvgOpacity);
}

/* Custom glyph. Inert while --splideArrowGlyphContent is `none`: content:none
   generates no pseudo-element at all, so Splide's SVG is untouched. */
[data-splide-opts] .splide__arrow::before {
    content: var(--splideArrowGlyphContent);
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--splideArrowGlyph) center / var(--splideArrowGlyphSize) no-repeat;
            mask: var(--splideArrowGlyph) center / var(--splideArrowGlyphSize) no-repeat;
}

[data-splide-opts] .splide__arrow--prev::before {
    transform: scaleX(-1);
}

[data-splide-opts] .splide__arrow--prev { left: var(--bannerPadding); }
[data-splide-opts] .splide__arrow--next { right: var(--bannerPadding); }

@media (max-width: 767px) {
    [data-splide-opts] .splide__arrow--prev { left: 0.4rem; }
    [data-splide-opts] .splide__arrow--next { right: 0.4rem; }
}

/* Arrows-top utility -- move arrows above the carousel */
.CC-SplideArrowsTop .splide__arrow {
    position: static;
    transform: none;
}
.CC-SplideArrowsTop .splide__arrow:hover {
    transform: scale(var(--splideArrowHoverScale));
}

.CC-SplideArrowsTop .splide__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 var(--bannerPadding) 0.5rem;
}


/* Pagination */

[data-splide-opts] .splide__pagination {
    position: absolute;
    bottom: var(--bannerPadding);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-splide-opts] .splide__pagination__page {
    width: var(--splidePaginationWidth);
    height: var(--splidePaginationHeight);
    border-radius: var(--splidePaginationRadius);
    background: var(--splidePaginationBg);
    transition: background 0.2s ease, width 0.2s ease;
    cursor: pointer;
    border: 0;
    display: flex;
}

[data-splide-opts] .splide__pagination__page:hover {
    background: var(--splidePaginationActiveBg);
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: var(--splidePaginationWidthActive);
    background: var(--splidePaginationActiveBg);
}


/* cc-banner in Splide context
   Height model for Splide carousels:
   Set height on .splide itself in per-component CSS, then chain 100% down.
   Splide's flex layout flows top-down -- the track/list/slide must all
   inherit from the .splide container, not from each other or the slide content.

   Per-component pattern:
     .hp-foo .splide                      { height: clamp(320px, 60vh, 780px); }
     .hp-foo .splide__track,
     .hp-foo .splide__list,
     .hp-foo .splide__slide               { height: 100%; }

   cc-banner and __img then fill the slide via the rules in 04-CC-BannerCollections.css. */
/* CC-Footer.css */

/* Footer Variables */
:root {
    --footer-titleSize: var(--fontSize-sm);
    --footer-textSize: var(--fontSize-sm);
    --footer-newsletterInputSize: var(--fontSize-sm);
    --footer-newsletterButtonSize: var(--fontSize-sm);
    --footer-width: var(--global-NavFooterWidth);
    --footer-maxWidth: 100%;
    --footer-padding: var(--global-padding);
    --footer-gap: var(--global-gap);
    --footer-borderRadius: var(--global-radius);
    --footer-background: var(--background);
    --footer-innerBackground: var(--background);
    --footer-text: var(--text);
    --footer-titles: var(--text);
    --footer-links: oklch(from var(--text) l c h / 0.78);
    --footer-linksHover: var(--text);
    --footer-underlineColor: oklch(from var(--text) l c h / 0.2);
    --newsletter-inputBackground: var(--background);
    --newsletter-inputText: var(--text);
    --newsletter-inputPlaceholder: var(--text-muted);
    --social-iconColor: brightness(0) opacity(0.7);
    --social-iconSize: 44px;
    --social-iconHoverColor: brightness(0) opacity(1);
    --social-iconBackground: transparent;
    --company-text: var(--text);
    --payment-background: transparent;
    --tagline-background: var(--background);
    --tagline-text: var(--text);
    --footer-buttonSize: var(--global-buttonSize);
    --footer-buttonColor: var(--text);
    --footer-buttonBorder: 1px solid var(--text);
    --footer-buttonRadius: var(--global-buttonRadius);
    --footer-buttonBackground: transparent;
    --footer-buttonPadding: var(--global-buttonPadding);
    --footer-buttonBackgroundHover: var(--brand-dark);
    --footer-buttonColorHover: var(--text-inverse);
    --footer-buttonBorderHover: 1px solid var(--brand-dark);
    --footer-buttonPaddingHover: var(--global-buttonPaddingHover);
    --footer-buttonTransition: var(--global-buttonTransition);
}


/* Footer Width */

div#modular-footer-wrapper .fixed {
    max-width: var(--footer-width);
}

#modular-footer-wrapper {
    display: flex;
    flex-flow: row wrap;
    background: var(--footer-background) !important;
    margin: auto;
    float: none;
    max-width: var(--footer-maxWidth);
    padding-top: var(--footer-padding);
    padding-inline: var(--footer-padding);
    align-items: flex-start;
    gap: var(--footer-gap);
}

#modular-footer-wrapper:after {
    display: none;
}

#modular-footer-wrapper > div.fixed {
    width: 100%;
    justify-content: space-between;
    flex: 2;
    background: var(--footer-background);
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper :is(.modular-footer-socials, .modular-footer-retaillinks, .modular-footer-citruslime---tagline) {
    border-bottom: none;
}

#modular-footer-wrapper .modular-footer-socials,
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    border-top: 0;
    padding: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    grid-gap: 2em;
    background: var(--footer-innerBackground);
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    flex: 0 0 auto;
    width: auto;
    padding: 2rem;
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div br {
    display: none;
}


/* Inner footer column max width */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
    height: auto;
    /* was var(--maxWidth) - a token declared nowhere, so this max-width was
       invalid and silently computed to `none`. The token is --footer-maxWidth
       (declared at the top of this file, 100%). Practical effect of the fix is
       nil, because width: 100% below already constrains this to the same box. */
    max-width: var(--footer-maxWidth);
    padding: 0rem 0rem 2rem 0rem;
    width: 100%;
    margin: 0;
    border-radius: var(--footer-borderRadius);
}


/* Main column ordering */

#modular-footer-wrapper > div.modular-footer-socials {
    flex-flow: column nowrap;
    order: 1;
    justify-content: flex-start;
    max-width: 500px !important;
    grid-gap: 0.5rem;
    border-radius: var(--footer-borderRadius);
    display: flex;
    padding: 1rem;
    align-items: flex-start;
    flex: 1;
    height: 100%;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-retaillinks {
    order: 1;
}

#modular-footer-wrapper .modular-footer-retaillinks:nth-child(3) {
    order: 2;
}

#modular-footer-wrapper .modular-footer-citruslime---tagline {
    order: 4;
    background: var(--footer-innerBackground);
    color: var(--footer-titles);
    padding-block: 1em;
    border-radius: var(--footer-borderRadius);
}

@media screen and (max-width: 600px) {
    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
        padding: 0;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        width: 100%;
    }
}


/* Social and Newsletter */

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons {
    padding: 0;
    order: 1;
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    grid-gap: 0.5rem;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a {
    height: var(--social-iconSize);
    width: var(--social-iconSize);
    filter: var(--social-iconColor);
    margin: 0;
    background-color: var(--social-iconBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a:hover {
    filter: var(--social-iconHoverColor);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
    padding: 0;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    content: var(--copy-newsletterTitle, "Join Our Newsletter");
    font-family: var(--font-bold);
    display: block;
    margin-bottom: 0.5em;
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    max-width: 1400px;
    text-align: left;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container {
    padding: 0;
    max-width: 100%;
    height: auto;
    background: var(--footer-innerBackground);
    display: flex;
    flex-flow: column;
}

#newsletter-footer-text.newsletterFail {
    margin: auto;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
    position: relative;
    gap: 1rem;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: var(--footer-innerBackground);
}

/* Newsletter input */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
    border-radius: var(--footer-buttonRadius);
    margin: 0;
    height: 54px;
    line-height: 54px;
    font-size: var(--footer-newsletterInputSize);
    width: min(300px, 100%);
    background: var(--newsletter-inputBackground);
    max-width: 700px;
    color: var(--newsletter-inputText);
    justify-content: center;
    border: var(--footer-buttonBorder) !important;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input::placeholder {
    font-size: var(--footer-newsletterInputSize);
    color: var(--newsletter-inputPlaceholder);
}

/* Newsletter submit button */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
    border-radius: var(--footer-buttonRadius);
    font-size: var(--footer-buttonSize);
    height: 54px;
    line-height: 50px;
    color: var(--footer-buttonColor);
    background: var(--footer-buttonBackground);
    padding: var(--footer-buttonPadding);
    border: var(--footer-buttonBorder);
    transition: var(--footer-buttonTransition);
    display: flex;
    align-items: center;
    font-family: var(--font-bold);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit:hover {
    background: var(--footer-buttonBackgroundHover);
    color: var(--footer-buttonColorHover);
    border: var(--footer-buttonBorderHover);
    padding: var(--footer-buttonPaddingHover);
}

/* Newsletter: tablet */
@media screen and (max-width: 1024px) {
    #modular-footer-wrapper .modular-footer-socials {
        flex-flow: column nowrap;
        justify-content: center;
        padding: 24px;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
        order: 3;
        flex-basis: 90%;
        flex: 1;
        font-size: var(--footer-newsletterInputSize);
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
        order: 4;
    }
}


/* Footer Column Links */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    border-bottom: 1px solid var(--footer-underlineColor);
    padding-bottom: .5rem;
    margin-bottom: 1em;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4::after {
    content: "";
    display: none;
    width: 40px;
    height: 3px;
    background: var(--footer-background);
    margin: 10px 0px 10px 0px;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a {
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a:hover {
    color: var(--footer-linksHover);
}


/* Contact and Opening Hours */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact {
    order: 3;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont {
    font-size: initial;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont:after {
    display: none;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours {
    display: block;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 0.5rem;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dt {
    flex-basis: 50%;
    color: var(--footer-text);
    text-align: left;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dd {
    font-weight: bold;
    color: var(--footer-text);
    text-align: right;
}


/* Payment Icons */

#modular-footer-wrapper .modular-footer-payment-icons {
    text-align: center;
    background: var(--payment-background);
    order: 4;
}

#modular-footer-wrapper .modular-footer-payment-icons img {
    height: 1.5em;
}


/* Tagline */

#modular-footer-wrapper .modular-footer-citruslime---tagline a {
    color: var(--footer-titles);
}


/* Footer: Mobile */

@media screen and (max-width: 768px) {
    #modular-footer-wrapper {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding-inline: 1rem;
        gap: 1rem;
    }

    #modular-footer-wrapper > div.modular-footer-socials {
        order: -1;
        width: calc(100%);
        align-items: center;
        justify-content: center;
        border-radius: 0;
        margin-top: 0rem;
    }

    #modular-footer-wrapper .modular-footer-retaillinks {
        order: 2;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div,
    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
        width: 100%;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        text-align: left;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
        grid-gap: 0rem;
    }

    #modular-footer-wrapper > div.fixed {
        border-radius: var(--footer-borderRadius);
    }
}

/* Company details */
#modular-footer-wrapper .modular-footer-company-details {
    order: 3;
    background: var(--footer-background);
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-company-details > div {
    color: var(--company-text) !important;
}


/* Footer Column Inner Flex */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}


/* Footer Logo (via ::after pseudo-element) */

.modular-footer-socials {
    display: flex;
}

.modular-footer-socials:after {
    content: "";
    display: block;
    height: 40px;
    width: 150px;
    /* var(--logo), not a hardcoded path. A literal here means a site whose
       wordmark is not at that exact filename gets someone else's mark, or
       nothing, from a FRAMEWORK file it must not edit. Three builds have now
       had to work around it in their client layer. */
    background: var(--logo) center center / contain no-repeat;
    order: -1;
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    margin-bottom: 0;
}

/* Newsletter description text */
.modular-footer-newsletter---container:before {
    content: var(--copy-newsletterBody, "Sign up for news and offers.");
    display: block;
    margin-bottom: 1rem;
    opacity: .8;
}
/* CC-QuickLook.css */

/* Quick Look Variables */
:root {
    --quicklook-titleSize: var(--fontSize-lg);
    --quicklook-textSize: var(--fontSize-base);
    --quicklook-countSize: var(--fontSize-xs);
    --quicklook-background: var(--background);
    --quicklook-titleColor: var(--brand-dark);
    --quicklook-textColor: var(--text);
    --quicklook-countColor: var(--brand);
    --quicklook-hoverColor: var(--brand-link);
    --quicklook-padding: var(--global-padding);
    --quicklook-margin: var(--global-margin);
    --quicklook-gap: var(--global-gap);
    --quicklook-radius: var(--global-radius);
    --quicklook-buttonRadius: var(--global-buttonRadius);
    --quicklook-transition: var(--global-transition);
    --quicklook-border: var(--global-border);
    --quicklook-borderRadius: var(--global-radius);
    --quicklook-buttonSize: var(--global-buttonSize);
    --quicklook-buttonColor: var(--global-buttonColor);
    --quicklook-buttonBorder: var(--global-buttonBorder);
    --quicklook-buttonBackground: var(--global-buttonBackground);
    --quicklook-buttonPadding: var(--global-buttonPadding);
    --quicklook-buttonBackgroundHover: var(--global-buttonBackgroundHover);
    --quicklook-buttonColorHover: var(--global-buttonColorHover);
    --quicklook-buttonBorderHover: var(--global-buttonBorderHover);
    --quicklook-buttonPaddingHover: var(--global-buttonPaddingHover);
    --quicklook-buttonTransition: var(--global-buttonTransition);
    --quicklook-addToCart-background: var(--global-addToCart-background);
    --quicklook-addToCart-border: var(--global-addToCart-border);
    --quicklook-addToCart-color: var(--global-addToCart-color);
    --quicklook-addToCart-backgroundHover: var(--global-addToCart-backgroundHover);
    --quicklook-addToCart-borderHover: var(--global-addToCart-borderHover);
    --quicklook-addToCart-colorHover: var(--global-addToCart-colorHover);
    --quicklook-stockLabelWidth: 135px;
}


/* Quick Look Modal */

.quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
    margin-top: 55px;
}

/* Close button */
.quicklookitem-wrapper .quicklookitem-close {
    border-radius: var(--quicklook-borderRadius);
}

/* Right-side content layout */
.quicklookitem-wrapper .quicklookitem-inner-right {
    display: flex;
    flex-flow: column;
    background: var(--quicklook-background);
}

/* Product name */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---name {
    font-size: var(--quicklook-titleSize);
}

/* Price */
.quicklookitem-wrapper .quicklookitem-inner-right---prices-price {
    font-family: var(--font-bold);
    font-size: var(--quicklook-titleSize);
}

/* Was price */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
    color: var(--quicklook-hoverColor);
}

/* View full details link */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-buttonColor);
    background: var(--quicklook-buttonBackground);
    border: var(--quicklook-buttonBorder);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    transition: var(--quicklook-buttonTransition);
}

.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link:hover {
    background: var(--quicklook-buttonBackgroundHover);
    color: var(--quicklook-buttonColorHover);
    border: var(--quicklook-buttonBorderHover);
    padding: var(--quicklook-buttonPaddingHover);
}

/* Click and Collect notice */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
    margin-top: auto;
    background: transparent;
    border: none;
    color: var(--quicklook-textColor);
}

/* Product image spacing */
.quicklookitem-wrapper .quicklookitem-image > div {
    margin: var(--quicklook-margin);
}


/* Add to Cart Area */

.add-to-cart-area-1-row-2 > div {
    gap: .5rem;
}

/* Quantity label */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty-label {
    background: none;
    border: 0;
    color: var(--quicklook-textColor);
}

/* Quantity input */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty input {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
}

/* Add to cart button: in stock */
.quicklookitem-wrapper .add-to-cart-area-button.bgStandard {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-addToCart-color);
    background: var(--quicklook-addToCart-background);
    border: var(--quicklook-addToCart-border);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    width: 100%;
    display: flex;
    justify-content: center;
    transition: var(--quicklook-buttonTransition);
    line-height: normal;
    align-items: center;
}

.quicklookitem-wrapper .add-to-cart-area-button.bgStandard:hover {
    background: var(--quicklook-addToCart-backgroundHover);
    color: var(--quicklook-addToCart-colorHover);
    border: var(--quicklook-addToCart-borderHover);
}

/* Add to cart button: out of stock */
.quicklookitem-wrapper .add-to-cart-area-button[data-available="false"] {
    background: var(--quicklook-hoverColor);
}

/* Stock message */
.quicklookitem-wrapper .add-to-cart-area-msg-stock:after {
    text-align: left;
}

.quicklookitem-wrapper .add-to-cart-area-msg-stock:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Handling message */
.quicklookitem-wrapper .add-to-cart-area-msg-handling:after {
    text-align: left !important;
}

.quicklookitem-wrapper .add-to-cart-area-msg-handling:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Message container */
.quicklookitem-wrapper .add-to-cart-area-msg {
    border-top: none;
    margin-top: var(--quicklook-margin);
}
/* ==================== 08-CC-MiniBasket.css ====================
   Minibasket flyout. On mobile it becomes a full-height, 90%-width
   right-hand drawer; the "Continue Shopping" link (#ContinueLink, which
   calls clearAll() to close) is repurposed as a top-right close (x) on
   all viewports.
   Relocated here from 03-CC-NavigationSearch.css so all basket styling
   lives in one file. Loads last (08) so it wins the cascade.
   ============================================================ */

   :root {
    /* relocated basket tokens (unchanged values) */
    --basket-buttonSize: var(--fontSize-sm);
    --basket-pipSize: var(--fontSize-xs);
    --basketButtonBorder: var(--brand-dark);
    --basketButtonText: var(--text);
    --basketButtonHoverBackground: var(--brand-dark);
    --basketButtonHoverText: var(--text-inverse);
    --checkoutButtonBackground: var(--brand-accent);
    --basketPipBackground: var(--brand-accent);
    --basketPipColor: var(--text-on-accent);

    /* drawer knobs */
    --minibasket-width: 90%;          /* mobile */
    --minibasket-widthDesktop: 420px; /* desktop */
    --minibasket-z: 999999;


    --pipSize: 18px;
}

/* ---- relocated colour / border rules (unchanged behaviour) ---- */
.basketCtr.tbcnt.tbcntOpen {
    border-radius: var(--global-radius);
    border: 1px solid #c2c2c2
    min-height: 70dvh;
    max-height: 100%;
    top: 0px;
    right: 0;
    max-width: 500px;
}

.activeminilink {
    border-radius: var(--global-radius) var(--global-radius) 0 0;
}




/* Basket pip (count badge) */
.wrapper.masthead .basketPip {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    font-size: var(--basket-pipSize);
    width: var(--pipSize);
    height: var(--pipSize);
    line-height: var(--pipSize);
    bottom: 50%;
    right: 5%;
}


.wrapper.masthead .basketPip2 {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    border-radius: 100%;
}

/* Checkout button */
.wrapper.masthead .CCartBut > div:last-of-type > a {
    background: var(--checkoutButtonBackground);
    border-radius: var(--global-buttonRadius);
    font-size: medium;
}

/* ---- Continue Shopping -> close (x), all viewports ----
   #basket is a fixed full-height drawer (below), so it is the containing
   block for this absolutely-positioned close button on every viewport. */
#basket .CCartBut > div:first-of-type {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: auto;
    margin: 0;
    z-index: 1;
}
#ContinueLink {
    font-size: 0;              /* hide the "Continue Shopping" text */
    line-height: 0;
    width: auto;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border: none;
    background: none;
}
#ContinueLink::before {
    content: "\00D7";          /* x */
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text);
    transition: var(--global-transition);
}
#ContinueLink:hover::before { color: var(--brand); }

/* Checkout now fills the row (Continue is out of flow) */
#basket .CCartBut > div:last-of-type { width: 100%; }


/* ---- full-height right-hand drawer, slides in when opened (all viewports) ----
   Styled on .basketCtr (both states) and kept rendered off-canvas so the open
   transition can animate; display is forced on to beat the core display:none
   toggle, and the closed panel is hidden off-screen via transform + visibility. */
#basket.basketCtr {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: var(--minibasket-widthDesktop) !important;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    z-index: var(--minibasket-z);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: flex !important;
    flex-flow: column;
    transform: translateX(100%);   /* off-canvas to the right */
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
}
/* open state - slide into view */
#basket.basketCtr.tbcntOpen {
    transform: translateX(0);
    visibility: visible;
}

/* Push bottom section down */

#basket .col-1:has(#MiniBasketMerchandiseTotal) {
    margin-top: auto;
}


/* mobile / tablet: wider drawer + larger close */
@media (max-width: 1024px) {
    #basket.basketCtr { width: var(--minibasket-width) !important; }
    #basket .CCartBut > div:first-of-type { top: 0.75rem; right: 0.75rem; }
    #ContinueLink::before { font-size: 2.25rem; }
}

/* product list */

div[data-boxcontext*="minibasket"]{
    max-height: 100% !important;
}


.CCartBut {
    padding-top: 8px;
    font-size: small;
    width: 100%;
    margin-bottom: 30px;
}

/* ===========================================================================
   99-CC-Custom.css - Hope Valley Saddlery
   Loads last, wins everything. This client's taste, and nothing else.
   Rewrite from scratch for the next client; never edit this one forward.

   THIS CLIENT: a white canvas with near-black #252525 ink, under a green header
   bar with a black info strip above it. EB Garamond carries every heading; Jost carries body, nav and CTA labels.
   Nothing rounds - radius is 0 throughout, buttons included. CTA labels are
   uppercase Jost at 13px on wide tracking. Pages are built from full-bleed
   photography with copy laid over it, so contrast comes from image and type
   scale rather than from brand colour.

   Two exceptions to "tokens in 01 only": the topCTA marquee, which is motion
   rather than a token, and the header redesign at the foot of this file, whose
   layout the kit's 03 has no tokens for.
   =========================================================================== */

/* ===========================================================================
   .topCTA - infinite marquee
   ---------------------------------------------------------------------------
   The header CTA strip scrolls right-to-left forever instead of sitting
   static. Its markup is in CommonControls/TopSubBanner.ascx (CLIENT).

   Base colour, padding and the Click & Collect icon still come from
   03-CC-NavigationSearch.css, which is FRAMEWORK - deliberately NOT edited
   there, because a kit update would revert the marquee. Everything below
   overrides 03 from this file instead.

   HOW THE LOOP WORKS: two identical tracks, each min-width:100%, both sliding
   translateX(-100%) in lockstep. Track 2 lands exactly where track 1 started,
   so there is no seam and no dead space at any viewport width. Changing the
   number of tracks, or removing min-width:100%, breaks it.
   =========================================================================== */

:root {
    --topCTA-bg: #000000;
    --topCTA-ink: #ffffff;
    /* One full pass of a single track. A track is min-width:100%, so pixel
       speed scales with viewport width - the two values aim for ~40px/s. */
    --topCTA-duration: 20s;      /* <=1024px: track is ~content width */
    --topCTA-separator: "\00b7";
    --topCTA-fade: 40px;
}

@media (min-width: 1025px) {
    :root { --topCTA-duration: 50s; }   /* track is ~viewport width */
}

.topCTA {
    position: relative;           /* anchors the edge fades */
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;  /* 03's space-between means nothing once a
                                     track is wider than the bar */
    overflow: hidden;             /* replaces 03's overflow: auto */
    background: var(--topCTA-bg);
    color: var(--topCTA-ink);
}

/* Edge fades - overlays rather than mask-image, which would fade the black
   background too. ::before/::after on the strip itself; the icons live on the
   anchors' :before. */
.topCTA::before,
.topCTA::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--topCTA-fade);
    pointer-events: none;
}

.topCTA::before {
    left: 0;
    background: linear-gradient(to right, var(--topCTA-bg), transparent);
}

.topCTA::after {
    right: 0;
    background: linear-gradient(to left, var(--topCTA-bg), transparent);
}

.topCTA__track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 100%;              /* load-bearing: stops a short link list
                                     leaving a gap on a wide screen */
    animation: topCTAMarquee var(--topCTA-duration) linear infinite;
    will-change: transform;
}

@keyframes topCTAMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* The links stay clickable, so the strip has to stop when it is reached.
   focus-within covers the keyboard case - without it the focus ring slides
   off screen while the user is still on the link. */
.topCTA:hover .topCTA__track,
.topCTA:focus-within .topCTA__track {
    animation-play-state: paused;
}

/* Anchors share the free space equally when a track is stretched to 100%, so
   the boundary between two anchors is always the midpoint between their text
   - which is where the separator below is pinned. */
.topCTA__track > a {
    position: relative;
    flex: 1 0 auto;
    text-align: center;
    white-space: nowrap;
}

/* Separator sits ON the boundary, so the join where the loop repeats looks
   identical to every other join. ::after, not ::before - 03 already uses
   :before on a:nth-child(4) for the Click & Collect icon. */
.topCTA__track > a::after {
    content: var(--topCTA-separator);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    opacity: 0.55;
    pointer-events: none;
}

/* Reduce-motion: back to exactly what was there before - one static, manually
   swipeable strip. The clone must be hidden or the links are read twice. */
@media (prefers-reduced-motion: reduce) {
    .topCTA {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: space-between;
    }

    .topCTA__track {
        animation: none;
        will-change: auto;
    }

    .topCTA__track[aria-hidden="true"] {
        display: none;
    }

    /* Static strip - fades would only cover the first and last links. */
    .topCTA::before,
    .topCTA::after {
        display: none;
    }
}

/* ===========================================================================
   Header redesign - green bar (brief from Alfie, 24 Sep 2026)
   ---------------------------------------------------------------------------
   Colours are tokens in 01. This is the layout 03 has no tokens for.
   Desktop starts at 1025px to match 03's mobile breakpoint of 1024px.
   Not in this round: shrink on scroll, dropdown promo photos, search
   placeholder copy.
   =========================================================================== */

:root {
    --header-height: 105px;
    --header-searchWidth: 600px;
    --header-searchHeight: 40px;
    /* Inline like --icon-search in 03: a referenced .svg does not display on iPhone. */
    --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
}

.wrapper.masthead a.logo.navOption {
    background-image: var(--logoHeader) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

.wrapper.masthead .menu-icons-header [class*="icon-"]::before {
    color: var(--navIcons) !important;
}

.wrapper.masthead .basketPip {
    font-weight: 700;
    font-size: 11px;
    border: 2px solid var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search: white pill, magnifier moved onto a green button on the right */
#TopBanner1_clSearch1_containerSearch {
    display: flex !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: var(--searchBackground) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
}

#TopBanner1_clSearch1_containerSearch .icon-search {
    display: none !important;
}

#TopBanner1_clSearch1_containerSearch .searchBoxForm,
#TopBanner1_clSearch1_containerSearch .searchBoxForm:focus {
    flex: 1 1 auto !important;
    width: auto !important;
    height: var(--header-searchHeight) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--searchBackground) !important;
    padding: 0 0 0 20px !important;
}

#TopBanner1_clSearch1_containerSearch a.searchButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: var(--header-searchHeight) !important;
    padding: 0 !important;
    position: static !important;
    background: var(--header-button) !important;
    text-decoration: none !important;
}

#TopBanner1_clSearch1_containerSearch a.searchButton:hover {
    background: var(--header-buttonHover) !important;
}

#TopBanner1_clSearch1_containerSearch a.searchButton::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: var(--searchIconColor);
    -webkit-mask: var(--icon-search) center / contain no-repeat;
    mask: var(--icon-search) center / contain no-repeat;
}

/* ---- Desktop -------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    .wrapper.masthead,
    .wrapper.masthead .grid.fixed,
    .wrapper.masthead .grid.fixed > .container,
    .wrapper.masthead .grid.fixed > .container > .col-1,
    .wrapper.masthead .navIcons,
    .wrapper.masthead .logoContainer {
        height: var(--header-height) !important;
    }

    body {
        padding-top: var(--header-height) !important;
    }

    .wrapper.masthead .grid.fixed,
    .wrapper.masthead .container,
    .wrapper.masthead .navIcons {
        background-color: var(--navBackground) !important;
    }

    .wrapper.masthead .ctrNavigation,
    .wrapper.masthead .CSSFacetNavModules {
        background-color: transparent !important;
    }

    /* Logo stays in the top row, same 62px as the icons, so it clears the
       category row at 68px instead of sitting over WOMEN and MEN. */
    .wrapper.masthead .logoContainer {
        width: 300px !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .wrapper.masthead a.logo.navOption {
        width: 250px !important;
        max-width: 250px !important;
        height: 62px !important;
    }

    .wrapper.masthead .menuOptions {
        top: 0 !important;
    }

    #search.srchCtr {
        position: fixed !important;
        top: 6px !important;
        left: calc(50% - (var(--header-searchWidth) / 2)) !important;
        width: var(--header-searchWidth) !important;
    }

    /* Categories: second row, centred */
    .wrapper.masthead .ctrNavigation {
        top: 68px !important;
        pointer-events: none;
    }

    .wrapper.masthead .ctrNavigation .NodeLevel0,
    .wrapper.masthead .ctrNavigation a {
        pointer-events: auto;
    }

    /* Underline grows from the centre. Replaces 03's ::before device. */
    .wrapper.masthead .NodeLevel0 > a::before {
        display: none !important;
    }

    .wrapper.masthead .NodeLevel0 > a {
        font-weight: 400 !important;
        padding-bottom: 4px !important;
        background-image: linear-gradient(currentColor, currentColor) !important;
        background-repeat: no-repeat !important;
        background-position: 50% 100% !important;
        background-size: 0% 2px !important;
        transition: background-size .25s ease !important;
        text-decoration: none !important;
    }

    .wrapper.masthead .NodeLevel0 > a:hover {
        background-size: 100% 2px !important;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 28px !important;
        padding: var(--sale-padding) !important;
        line-height: 1 !important;
        background-image: none !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .2) !important;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a:hover {
        filter: none;
    }

    /* Dropdowns: full-width white panel on hover */
    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules {
        display: none !important;
        position: fixed !important;
        top: calc(var(--header-height) - 9px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: var(--background) !important;
        background-clip: padding-box !important;
        border: 0 !important;
        border-top: 9px solid transparent !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .15) !important;
        z-index: 50 !important;
        padding: 28px max(60px, calc((100% - 1300px) / 2)) 32px !important;
        max-height: 70vh;
        overflow: auto;
    }

    .wrapper.masthead .NodeLevel0:hover > .CSSFacetNavModules,
    .wrapper.masthead .NodeLevel0:focus-within > .CSSFacetNavModules {
        display: flex !important;
        align-items: flex-start !important;
        column-gap: 32px !important;
    }

    .wrapper.masthead .NodeLevel1 {
        flex: 1 1 0 !important;
        min-width: 140px !important;
        max-width: 240px !important;
        float: none !important;
        width: auto !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        text-align: left !important;
    }

    .wrapper.masthead .NodeLevel1 > a {
        display: block !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: .06em !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    .wrapper.masthead .NodeLevel1 > .CSSFacetNavModules {
        display: flex !important;
        position: static !important;
        float: none !important;
        width: auto !important;
    }

    .wrapper.masthead .NodeLevel2 a,
    .wrapper.masthead [data-nodename="Sale"] .NodeLevel1 > .CSSFacetNavModules a {
        color: var(--dropdownAreaLinks);
        font-size: 14px !important;
        padding: 3px 0 !important;
        opacity: 1;
    }

    .wrapper.masthead .NodeLevel2 a:hover,
    .wrapper.masthead [data-nodename="Sale"] .NodeLevel1 > .CSSFacetNavModules a:hover {
        color: var(--header-bg);
    }

    /* Brands is one long list, so it gets the width and runs in columns */
    .wrapper.masthead [data-nodename="Brands"] .NodeLevel1 {
        flex: 3 1 0 !important;
        max-width: none !important;
    }

    .wrapper.masthead [data-nodename="Brands"] .NodeLevel1 > .CSSFacetNavModules {
        display: block !important;
        column-count: 4;
        column-gap: 24px;
    }

    .wrapper.masthead .menu-icons-header {
        height: 62px !important;
        align-self: flex-start !important;
        justify-content: flex-end !important;
    }

    .wrapper.masthead .menu-icons-header .icon-head,
    .wrapper.masthead .menu-icons-header .icon-bag {
        height: 62px !important;
        width: 48px !important;
        min-width: 48px !important;
    }

    .wrapper.masthead .menu-icons-header .icon-bag {
        margin-right: 12px !important;
    }

    .wrapper.masthead .basketPip {
        top: 10px !important;
    }
}

/* ---- Mobile and tablet ---------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .wrapper.masthead,
    .wrapper.masthead .grid.fixed,
    .wrapper.masthead .container,
    .wrapper.masthead .navIcons,
    .wrapper.masthead .menuOptions {
        background-color: var(--navBackground) !important;
    }

    .wrapper.masthead .navIcons {
        height: 56px !important;
    }

    .wrapper.masthead .logoContainer {
        height: 56px !important;
        flex: 1 1 auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .wrapper.masthead a.logo.navOption {
        width: 200px !important;
        max-width: 200px !important;
        height: 56px !important;
    }

    .wrapper.masthead .menu-icons-header {
        height: 56px !important;
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        padding-right: 6px !important;
    }

    .wrapper.masthead .menu-icons-header .icon-head,
    .wrapper.masthead .menu-icons-header .icon-bag,
    .wrapper.masthead .menu-icons-header .icon-menu {
        width: 38px !important;
        min-width: 38px !important;
        height: 56px !important;
        color: var(--navIcons) !important;
    }

    /* The platform blanks the icon-font glyph and masks head/bag, but has no
       mask for the hamburger, so it rendered as an empty box. Mask it here. */
    .wrapper.masthead .menu-icons-header .icon-menu::before {
        content: "" !important;
        display: block !important;
        width: var(--navIconSize);
        height: var(--navIconSize);
        margin: calc((56px - var(--navIconSize)) / 2) auto 0;
        background-color: var(--navIcons);
        -webkit-mask: var(--icon-menu) center / contain no-repeat;
        mask: var(--icon-menu) center / contain no-repeat;
    }

    #search.srchCtr #TopBanner1_clSearch1_containerSearch {
        height: 36px !important;
        margin: 3px 10px 0 !important;
    }

    #search.srchCtr #TopBanner1_clSearch1_containerSearch .searchBoxForm,
    #search.srchCtr #TopBanner1_clSearch1_containerSearch a.searchButton {
        height: 36px !important;
    }

    /* Slide-out menu: white list, 54px rows, platform's own expand arrow */
    .wrapper.masthead .ctrNavigation {
        top: 56px !important;
    }

    .wrapper.masthead .ctrNavigation.tbcntOpen > .CSSFacetNavModules {
        background: var(--background) !important;
        height: calc(100vh - 56px) !important;
        overflow: auto !important;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules > .NodeLevel0 > a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 54px !important;
        padding: 0 20px !important;
        border-bottom: 1px solid var(--header-rule) !important;
        text-transform: uppercase !important;
        letter-spacing: .03em !important;
    }

    .wrapper.masthead .NodeLevel0 > a.active,
    .wrapper.masthead .NodeLevel0 > div.active + a {
        color: var(--header-bg) !important;
        font-weight: 600 !important;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a,
    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > div.active + a {
        background: var(--header-sale) !important;
        color: var(--text-inverse) !important;
        padding: 0 20px !important;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        background: #F4F7F3 !important;
        padding: 0 0 1rem !important;
    }

    .wrapper.masthead .NodeLevel1 {
        min-width: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    .wrapper.masthead .NodeLevel1 > a {
        padding: 14px 20px 6px 34px !important;
        text-transform: uppercase;
    }

    .wrapper.masthead .NodeLevel2 a {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding-left: 34px !important;
    }
}
ul.tabssc li.currentsc {
    box-shadow: inset 0 2px 0 #292526 !important;
    color: #ffffff !important;
    border-bottom: 3px solid #37854b !important;
    background: #292526 !important;
}
.tab-contentsc{background:#ebebeb !important;
background: #fafafa !important;
    border: 1px solid #e3e3e3 !important;}

    .sc table tr td:first-of-type, #SizingGuide table tr td:first-of-type {
    font-weight: 400 !important;
}


                                                                                                                                                                                                                                                                                                               @font-face{
	font-family: "icons";
	src:url('/font/feather.eot#iefix') format('embedded-opentype'),
		url('/font/feather.woff') format('woff'),
		url('/font/feather.ttf') format('truetype');
}

.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;
}

.icon-alert-octagon::before { content: "\e81b"; } .icon-alert-circle::before { content: "\e81c"; } .icon-activity::before { content: "\e81d"; } .icon-alert-triangle::before { content: "\e81e"; } .icon-align-center::before { content: "\e81f"; } .icon-airplay::before { content: "\e820"; } .icon-align-justify::before { content: "\e821"; } .icon-align-left::before { content: "\e822"; } .icon-align-right::before { content: "\e823"; } .icon-arrow-down-left::before { content: "\e824"; } .icon-arrow-down-right::before { content: "\e825"; } .icon-anchor::before { content: "\e826"; } .icon-aperture::before { content: "\e827"; } .icon-arrow-left::before { content: "\e828"; } .icon-arrow-right::before { content: "\e829"; } .icon-arrow-down::before { content: "\e82a"; } .icon-arrow-up-left::before { content: "\e82b"; } .icon-arrow-up-right::before { content: "\e82c"; } .icon-arrow-up::before { content: "\e82d"; } .icon-award::before { content: "\e82e"; } .icon-bar-chart::before { content: "\e82f"; } .icon-at-sign::before { content: "\e830"; } .icon-bar-chart-2::before { content: "\e831"; } .icon-battery-charging::before { content: "\e832"; } .icon-bell-off::before { content: "\e833"; } .icon-battery::before { content: "\e834"; } .icon-bluetooth::before { content: "\e835"; } .icon-bell::before { content: "\e836"; } .icon-book::before { content: "\e837"; } .icon-briefcase::before { content: "\e838"; } .icon-camera-off::before { content: "\e839"; } .icon-calendar::before { content: "\e83a"; } .icon-bookmark::before { content: "\e83b"; } .icon-box::before { content: "\e83c"; } .icon-camera::before { content: "\e83d"; } .icon-check-circle::before { content: "\e83e"; } .icon-check::before { content: "\e83f"; } .icon-check-square::before { content: "\e840"; } .icon-cast::before { content: "\e841"; } .icon-chevron-down::before { content: "\e842"; } .icon-chevron-left::before { content: "\e843"; } .icon-chevron-right::before { content: "\e844"; } .icon-chevron-up::before { content: "\e845"; } .icon-chevrons-down::before { content: "\e846"; } .icon-chevrons-right::before { content: "\e847"; } .icon-chevrons-up::before { content: "\e848"; } .icon-chevrons-left::before { content: "\e849"; } .icon-circle::before { content: "\e84a"; } .icon-clipboard::before { content: "\e84b"; } .icon-chrome::before { content: "\e84c"; } .icon-clock::before { content: "\e84d"; } .icon-cloud-lightning::before { content: "\e84e"; } .icon-cloud-drizzle::before { content: "\e84f"; } .icon-cloud-rain::before { content: "\e850"; } .icon-cloud-off::before { content: "\e851"; } .icon-codepen::before { content: "\e852"; } .icon-cloud-snow::before { content: "\e853"; } .icon-compass::before { content: "\e854"; } .icon-copy::before { content: "\e855"; } .icon-corner-down-right::before { content: "\e856"; } .icon-corner-down-left::before { content: "\e857"; } .icon-corner-left-down::before { content: "\e858"; } .icon-corner-left-up::before { content: "\e859"; } .icon-corner-up-left::before { content: "\e85a"; } .icon-corner-up-right::before { content: "\e85b"; } .icon-corner-right-down::before { content: "\e85c"; } .icon-corner-right-up::before { content: "\e85d"; } .icon-cpu::before { content: "\e85e"; } .icon-credit-card::before { content: "\e85f"; } .icon-crosshair::before { content: "\e860"; } .icon-disc::before { content: "\e861"; } .icon-delete::before { content: "\e862"; } .icon-download-cloud::before { content: "\e863"; } .icon-download::before { content: "\e864"; } .icon-droplet::before { content: "\e865"; } .icon-edit-2::before { content: "\e866"; } .icon-edit::before { content: "\e867"; } .icon-edit-1::before { content: "\e868"; } .icon-external-link::before { content: "\e869"; } .icon-eye::before { content: "\e86a"; } .icon-feather::before { content: "\e86b"; } .icon-facebook::before { content: "\e86c"; } .icon-file-minus::before { content: "\e86d"; } .icon-eye-off::before { content: "\e86e"; } .icon-fast-forward::before { content: "\e86f"; } .icon-file-text::before { content: "\e870"; } .icon-film::before { content: "\e871"; } .icon-file::before { content: "\e872"; } .icon-file-plus::before { content: "\e873"; } .icon-folder::before { content: "\e874"; } .icon-filter::before { content: "\e875"; } .icon-flag::before { content: "\e876"; } .icon-globe::before { content: "\e877"; } .icon-grid::before { content: "\e878"; } .icon-heart::before { content: "\e879"; } .icon-home::before { content: "\e87a"; } .icon-github::before { content: "\e87b"; } .icon-image::before { content: "\e87c"; } .icon-inbox::before { content: "\e87d"; } .icon-layers::before { content: "\e87e"; } .icon-info::before { content: "\e87f"; } .icon-instagram::before { content: "\e880"; } .icon-layout::before { content: "\e881"; } .icon-link-2::before { content: "\e882"; } .icon-life-buoy::before { content: "\e883"; } .icon-link::before { content: "\e884"; } .icon-log-in::before { content: "\e885"; } .icon-list::before { content: "\e886"; } .icon-lock::before { content: "\e887"; } .icon-log-out::before { content: "\e888"; } .icon-loader::before { content: "\e889"; } .icon-mail::before { content: "\e88a"; } .icon-maximize-2::before { content: "\e88b"; } .icon-map::before { content: "\e88c"; } .icon-map-pin::before { content: "\e88e"; } .icon-menu::before { content: "\e88f"; } .icon-message-circle::before { content: "\e890"; } .icon-message-square::before { content: "\e891"; } .icon-minimize-2::before { content: "\e892"; } .icon-mic-off::before { content: "\e893"; } .icon-minus-circle::before { content: "\e894"; } .icon-mic::before { content: "\e895"; } .icon-minus-square::before { content: "\e896"; } .icon-minus::before { content: "\e897"; } .icon-moon::before { content: "\e898"; } .icon-monitor::before { content: "\e899"; } .icon-more-vertical::before { content: "\e89a"; } .icon-more-horizontal::before { content: "\e89b"; } .icon-move::before { content: "\e89c"; } .icon-music::before { content: "\e89d"; } .icon-navigation-2::before { content: "\e89e"; } .icon-navigation::before { content: "\e89f"; } .icon-octagon::before { content: "\e8a0"; } .icon-package::before { content: "\e8a1"; } .icon-pause-circle::before { content: "\e8a2"; } .icon-pause::before { content: "\e8a3"; } .icon-percent::before { content: "\e8a4"; } .icon-phone-call::before { content: "\e8a5"; } .icon-phone-forwarded::before { content: "\e8a6"; } .icon-phone-missed::before { content: "\e8a7"; } .icon-phone-off::before { content: "\e8a8"; } .icon-phone-incoming::before { content: "\e8a9"; } .icon-phone::before { content: "\e8aa"; } .icon-phone-outgoing::before { content: "\e8ab"; } .icon-pie-chart::before { content: "\e8ac"; } .icon-play-circle::before { content: "\e8ad"; } .icon-play::before { content: "\e8ae"; } .icon-plus-square::before { content: "\e8af"; } .icon-plus-circle::before { content: "\e8b0"; } .icon-plus::before { content: "\e8b1"; } .icon-pocket::before { content: "\e8b2"; } .icon-printer::before { content: "\e8b3"; } .icon-power::before { content: "\e8b4"; } .icon-radio::before { content: "\e8b5"; } .icon-repeat::before { content: "\e8b6"; } .icon-refresh-ccw::before { content: "\e8b7"; } .icon-rewind::before { content: "\e8b8"; } .icon-rotate-ccw::before { content: "\e8b9"; } .icon-refresh-cw::before { content: "\e8ba"; } .icon-rotate-cw::before { content: "\e8bb"; } .icon-save::before { content: "\e8bc"; } .icon-search::before { content: "\e8bd"; } .icon-server::before { content: "\e8be"; } .icon-scissors::before { content: "\e8bf"; } .icon-share-2::before { content: "\e8c0"; } .icon-share::before { content: "\e8c1"; } .icon-shield::before { content: "\e8c2"; } .icon-settings::before { content: "\e8c3"; } .icon-skip-back::before { content: "\e8c4"; } .icon-shuffle::before { content: "\e8c5"; } .icon-sidebar::before { content: "\e8c6"; } .icon-skip-forward::before { content: "\e8c7"; } .icon-slack::before { content: "\e8c8"; } .icon-slash::before { content: "\e8c9"; } .icon-smartphone::before { content: "\e8ca"; } .icon-square::before { content: "\e8cb"; } .icon-speaker::before { content: "\e8cc"; } .icon-star::before { content: "\e8cd"; } .icon-stop-circle::before { content: "\e8ce"; } .icon-sun::before { content: "\e8cf"; } .icon-sunrise::before { content: "\e8d0"; } .icon-tablet::before { content: "\e8d1"; } .icon-tag::before { content: "\e8d2"; } .icon-sunset::before { content: "\e8d3"; } .icon-target::before { content: "\e8d4"; } .icon-thermometer::before { content: "\e8d5"; } .icon-thumbs-up::before { content: "\e8d6"; } .icon-thumbs-down::before { content: "\e8d7"; } .icon-toggle-left::before { content: "\e8d8"; } .icon-toggle-right::before { content: "\e8d9"; } .icon-trash-2::before { content: "\e8da"; } .icon-trash::before { content: "\e8db"; } .icon-trending-up::before { content: "\e8dc"; } .icon-trending-down::before { content: "\e8dd"; } .icon-triangle::before { content: "\e8de"; } .icon-type::before { content: "\e8df"; } .icon-twitter::before { content: "\e8e0"; } .icon-upload::before { content: "\e8e1"; } .icon-umbrella::before { content: "\e8e2"; } .icon-upload-cloud::before { content: "\e8e3"; } .icon-unlock::before { content: "\e8e4"; } .icon-user-check::before { content: "\e8e5"; } .icon-user-minus::before { content: "\e8e6"; } .icon-user-plus::before { content: "\e8e7"; } .icon-user-x::before { content: "\e8e8"; } .icon-user::before { content: "\e8e9"; } .icon-users::before { content: "\e8ea"; } .icon-video-off::before { content: "\e8eb"; } .icon-video::before { content: "\e8ec"; } .icon-voicemail::before { content: "\e8ed"; } .icon-volume-x::before { content: "\e8ee"; } .icon-volume-2::before { content: "\e8ef"; } .icon-volume-1::before { content: "\e8f0"; } .icon-volume::before { content: "\e8f1"; } .icon-watch::before { content: "\e8f2"; } .icon-wifi::before { content: "\e8f3"; } .icon-x-square::before { content: "\e8f4"; } .icon-wind::before { content: "\e8f5"; } .icon-x::before { content: "\e8f6"; } .icon-x-circle::before { content: "\e8f7"; } .icon-zap::before { content: "\e8f8"; } .icon-zoom-in::before { content: "\e8f9"; } .icon-zoom-out::before { content: "\e8fa"; } .icon-command::before { content: "\e8fb"; } .icon-cloud::before { content: "\e8fc"; } .icon-hash::before { content: "\e8fd"; } .icon-headphones::before { content: "\e8fe"; } .icon-underline::before { content: "\e8ff"; } .icon-italic::before { content: "\e900"; } .icon-bold::before { content: "\e901"; } .icon-crop::before { content: "\e902"; } .icon-help-circle::before { content: "\e903"; } .icon-paperclip::before { content: "\e904"; } .icon-shopping-cart::before { content: "\e905"; } .icon-tv::before { content: "\e906"; } .icon-wifi-off::before { content: "\e907"; } .icon-minimize::before { content: "\e88d"; } .icon-maximize::before { content: "\e908"; } .icon-gitlab::before { content: "\e909"; } .icon-sliders::before { content: "\e90a"; } .icon-star-on::before { content: "\e90b"; } .icon-heart-on::before { content: "\e90c"; } .icon-archive::before { content: "\e90d"; } .icon-arrow-down-circle::before { content: "\e90e"; } .icon-arrow-up-circle::before { content: "\e90f"; } .icon-arrow-left-circle::before { content: "\e910"; } .icon-arrow-right-circle::before { content: "\e911"; } .icon-bar-chart-line-::before { content: "\e912"; } .icon-bar-chart-line::before { content: "\e913"; } .icon-book-open::before { content: "\e914"; } .icon-code::before { content: "\e915"; } .icon-database::before { content: "\e916"; } .icon-dollar-sign::before { content: "\e917"; } .icon-folder-plus::before { content: "\e918"; } .icon-gift::before { content: "\e919"; } .icon-folder-minus::before { content: "\e91a"; } .icon-git-commit::before { content: "\e91b"; } .icon-git-branch::before { content: "\e91c"; } .icon-git-pull-request::before { content: "\e91d"; } .icon-git-merge::before { content: "\e91e"; } .icon-linkedin::before { content: "\e91f"; } .icon-hard-drive::before { content: "\e920"; } .icon-more-vertical-::before { content: "\e921"; } .icon-more-horizontal-::before { content: "\e922"; } .icon-rss::before { content: "\e923"; } .icon-send::before { content: "\e924"; } .icon-shield-off::before { content: "\e925"; } .icon-shopping-bag::before { content: "\e926"; } .icon-terminal::before { content: "\e927"; } .icon-truck::before { content: "\e928"; } .icon-zap-off::before { content: "\e929"; } .icon-youtube::before { content: "\e92a"; }                                                                                                                                                                                                                                                                                                                                                 /* 01-bannercollections purposefully empty */
/* 02-flexslider purposefully empty */
.generic-failover-homepage .generic-failover-homepage-container {
    max-width: 1366px;
    margin: auto;
    float: none;
    height: 1%;
    overflow: hidden;
    padding: 32px;
}
.generic-failover-homepage .generic-failover-homepage-container h1 {
    font-size: 42px;
}

.generic-failover-homepage .generic-failover-homepage-container p {
    font-size: 24px;
}

@media screen and (max-width: 500px) {

    .generic-failover-homepage .generic-failover-homepage-container {
        padding: 16px;
    }

        .generic-failover-homepage .generic-failover-homepage-container h1 {
            font-size: 30px;
        }

        .generic-failover-homepage .generic-failover-homepage-container p {
            font-size: 18px;
        }
}
@charset "UTF-8";
[class*="hmBanner"] > div {
    display: grid;
    padding: 0 0 1em 0;
    grid-gap: 1em;
}

[class*="hmBanner"] > div > a {
    position: relative;
    width: 100%;
    height: 100%
}

    [class*="hmBanner"] > div > a:hover .bannerView {
        background: #2b3266;
    }

.modernizr-no-cssgrid [class*="hmBanner"] > div {
    display: block
}

.hmBanner1 > div {
    grid-template-columns: repeat(3,1fr);
    -ms-grid-columns: 1fr 1fr 1fr
}

.hmBanner2 > div {
    grid-template-columns: repeat(3,1fr);
    -ms-grid-template-columns: 1fr 1fr 1fr
}

.hmBanner3 > div {
    grid-template-columns: repeat(4,1fr);
    -ms-grid-template-columns: 1fr 1fr 1fr 1fr
}

.photo {
    background: #efefef;
    background-size: cover;
    background-position: center;
    height: 100%
}

.photo div:after {
    padding-bottom: 75%;
    content: "";
    display: block;
    width: 100%;
}

.hmBanner1 > div > a:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/3;
}

.hmBanner1 > div > a:nth-child(4) {
    grid-column: 2/4;
    grid-row: 3/5;
}

/* text overlay  --------------------------------------------------------------- */
.bannerTxtCtr {
    position: absolute;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 32px;
    z-index: 2;
    width: 100%;
    height: 100%;
    flex-direction: column;
    -ms-flex-direction: column;
    color: white
}

.bannerDesc, .bannerTitle, .bannerView {
    background: #000000a6;
    text-transform: uppercase;
}

    .bannerDesc:empty, .bannerTitle:empty, .bannerView:empty {
        display: none;
    }

.bannerTxtCtr > span {
    padding: 8px 16px
}

.bannerDesc {
    letter-spacing: 2px;
    font-size: smaller;
}

.bannerTitle {
    font-size: x-large;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bannerView {
    margin-top: 8px;
    font-size: small;
    border: 1px solid #ffffff4a;
}

.hmBanner3 .bannerTitle {
    font-size: small;
    max-height: 53px;
}

.modernizr-no-cssgrid [class*="hmBanner"] > div > a {
    display: inline-block;
}

.modernizr-no-cssgrid [class*="hmBanner"] .bannerTxtCtr {
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
}



/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px) {
    [class*="hmBanner"] > div {
        padding: 0 0 0.5em 0;
        grid-gap: 0.5em;
    }

    .bannerTxtCtr {
        padding: 8px
    }

    .hmBanner1 > div {
        grid-template-columns: 1fr;
        -ms-grid-columns: 1fr
    }

        .hmBanner1 > div > a:nth-child(1) {
            grid-column: auto;
            grid-row: auto;
        }

        .hmBanner1 > div > a:nth-child(4) {
            grid-column: auto;
            grid-row: auto;
        }

    .hmBanner2 > div {
        grid-template-columns: repeat(1,1FR);
    }

    .hmBanner3 > div {
        grid-template-columns: repeat(2,1FR);
        font-size: small;
    }

        .hmBanner3 > div > span {
            grid-template-columns: repeat(2,1FR);
            font-size: small;
        }

    .bannerTitle {
        font-size: large;
        text-transform: uppercase;
    }

    .bannerTxtCtr > span {
        padding: 4px 8px
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    .bannerTitle {
        font-size: large;
    }

    .bannerTxtCtr {
        padding: 16px;
    }

        .bannerTxtCtr > span {
            padding: 4px 8px;
        }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px) {
    /* --- CSS images hide*/
    .bannerTxtCtr {
        padding: 16px
    }
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913.9px) {
    /* --- Banner 1 override */
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
    /* --- Banner 1 override */
}
@charset "UTF-8";
.hmTitle {
    max-width: 1000px;
    margin: auto;
    padding: 32px 0
}

.ctaGrid {
    display: grid;
    grid-gap: 0;
    align-items: center;
    grid-template-columns: repeat(4,1fr);
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
}

.modernizr-no-cssgrid .ctaGrid {
    display: block
}

    .modernizr-no-cssgrid .ctaGrid > a {
        width: 25%;
        display: block;
        float: left;
    }

.ctaGrid > a {
    text-align: center;
    padding: 32px;
    border-right: 1px solid #eeeeee;
    color: inherit
}

    .ctaGrid > a:last-child {
        border-right: none
    }

.ctaGrid 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;
    margin-bottom: 21px;
    color: #bbbbbb;
}

.ctaGrid > a:nth-child(1) h3:before {
    content: "\e046";
}

.ctaGrid > a:nth-child(2) h3:before {
    content: "\e080";
}

.ctaGrid > a:nth-child(3) h3:before {
    content: "\e9ec";
}

.ctaGrid > a:nth-child(4) h3:before {
    content: "\e901";
}

/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px) {
    .ctaGrid {
        grid-gap: 1em 0;
        grid-template-columns: repeat(2,1fr);
        -ms-grid-columns: 1fr 1fr;
    }

        .ctaGrid > a:nth-child(even) {
            border-right: none
        }

        .ctaGrid > a:nth-child(1) {
            border-right: 1px solid #eeeeee;
        }

    .modernizr-no-cssgrid .ctaGrid > a {
        width: 100%;
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    .ctaGrid {
        grid-gap: 1em 0;
        grid-template-columns: repeat(2,1fr);
        -ms-grid-columns: 1fr 1fr;
    }

        .ctaGrid > a:nth-child(even) {
            border-right: none
        }

        .ctaGrid > a:nth-child(1) {
            border-right: 1px solid #eeeeee;
        }

    .modernizr-no-cssgrid .ctaGrid > a {
        width: 50%;
    }
}
.hmTitle { max-width:1000px; margin: auto; padding: 32px 0}
.ctaGrid {display: grid;grid-gap: 0;align-items: center;grid-template-columns: repeat(4,1fr);-ms-grid-columns: 1fr 1fr 1fr 1fr;}
.modernizr-no-cssgrid .ctaGrid { display: block}
.ctaGrid > a {text-align: center;padding: 32px;border-right: 1px solid #eeeeee; color: inherit}
.ctaGrid > a:last-child{border-right: none}
.ctaGrid 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;margin-bottom: 21px;color: #bbbbbb;}
.ctaGrid > a:nth-child(1) h3:before {content: "\e046";}
.ctaGrid > a:nth-child(2) h3:before {content: "\e080";}
.ctaGrid > a:nth-child(3) h3:before {content: "\e9ec";}
.ctaGrid > a:nth-child(4) h3:before {content: "\e901";}

/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px)
{
	.ctaGrid {grid-gap: 1em 0;grid-template-columns: repeat(2,1fr);-ms-grid-columns: 1fr 1fr;}
	.ctaGrid > a:nth-child(even){border-right: none}
	.ctaGrid > a:nth-child(1) {border-right: 1px solid #eeeeee;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px)
{
	.ctaGrid {grid-gap: 1em 0;grid-template-columns: repeat(2,1fr);-ms-grid-columns: 1fr 1fr;}
	.ctaGrid > a:nth-child(even){border-right: none}
	.ctaGrid > a:nth-child(1) {border-right: 1px solid #eeeeee;}
}/* ===========================================================================
   CC-Home.css - Hope Valley Saddlery homepage
   Seven sections, four shapes. Assembled from stripes/ plus one import.

   Ordered by PAGE POSITION, not by shape. Shapes 1/5 and 2/6 each appear
   twice, so the first occurrence carries the base rules and the second holds
   only its delta. Section headers name the BASE class, which is what lint's
   stripe-order check reads.

   Section 7 is hp-split-hero, imported from BREM, where it has never rendered
   in a browser. HOVA is its first proof.
   =========================================================================== */


/* ==== 0. SHARED CAROUSEL CHROME - one dash-pagination geometry, quiet arrows ====
   Scoped to [data-splide-opts] so it self-maintains across grid/carousel swaps.
   Dash dots are the mockup's hero pagination - the SAME geometry runs on every
   carousel (hero, New-in, Brands); only the inactive colour flips per background. */

[data-splide-opts] .splide__pagination__page {
    width: 1.75rem;
    height: 2px;
    border-radius: var(--global-radius);
    background: var(--splidePaginationBg);
    border: none;
    opacity: 1;
    transform: none;
    transition: var(--global-transition);
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: 2.5rem;
    background: var(--splidePaginationActiveBg);
    transform: none;
}

/* Arrow chrome is 05's, driven by the --splideArrow* tokens in 01. The block
   that stood here hardcoded size, background and opacity at the same
   specificity as 05 but in a different bundle, so which won came down to load
   order between folders - which the platform does not guarantee. */


/* ==== 1. hp-hero-fade - full-bleed editorial fade hero; text bottom-left,
        dash pagination bottom-right, minimal white arrows (band 01) ==== */

.hp-hero-fade > .cc-collection {
    padding: 0; /* deliberate full-bleed - band 01 runs edge to edge */
    height: 100%;
}

/* Stage height, BOTH variants. Set --heroHeight in 01 to change it; the
   fallback is the original literal, so a site that never sets it is unchanged.

   The mockup hero is ~800px on a 1440 canvas: the vw track runs a touch taller
   at 65vw and the ceiling is viewport-relative so the stage never outgrows the
   fold on short, wide screens. */
.hp-hero-fade {
    --hero-h: var(--heroHeight, clamp(19rem, 83vw, 80vh));
    height: var(--hero-h);
}

/* carousel height chain - mockup hero is ~800px on a 1440 canvas; the vw track
   runs a touch taller (65vw) and the ceiling is viewport-relative (80vh) so the
   stage never outgrows the fold on short, wide screens */
.hp-hero-fade .splide {
    height: var(--hero-h);
}

/* The STATIC variant has no .splide, so the chain above never matches and the
   band was sized by whatever aspect the uploaded image happened to have. Height
   goes on the image instead, which is the other half of 04's documented height
   model. Gated on :not(:has(.splide)) so the carousel path is untouched. */
.hp-hero-fade:not(:has(.splide)) .cc-banner__img,
.hp-hero-fade:not(:has(.splide)) .cc-banner__img img {
    height: 100%;
    object-fit: cover;
}

.hp-hero-fade .splide__track,
.hp-hero-fade .splide__list,
.hp-hero-fade .splide__slide {
    height: 100%;
}

/* Band 01: a soft even veil over the whole frame, gathering weight only in the
   lower third where the text block sits - NOT a heavy flat wash. */
.hp-hero-fade .cc-banner__body {
    justify-content: flex-end;
    align-items: flex-start;
    padding: clamp(1.5rem, 2.8vw, 3rem);
    background: linear-gradient(
        to top,
        var(--black-50) 0%,
        var(--black-10) 45%,
        var(--black-10) 100%
    );
}

.hp-hero-fade .cc-banner__title {
    font-family: var(--font-display);
    font-size: var(--fontSize-3xl);
    line-height: 1;
    letter-spacing: 0;
    color: var(--bannerText);
    max-width: 22ch;
    text-wrap: balance;
}

/* Band 01: the desc is BODY COPY beneath the title on a ~474px measure -
   two quiet sans lines, not an eyebrow. */
.hp-hero-fade .cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--bannerText);
    opacity: 0.92;
    max-width: 48ch;
}

/* PRIMARY CTA - the ghost. White variant for photo bands (band 01 anatomy:
   1px outline, letterspaced 13px label, quiet). */
.hp-hero-fade .cc-banner__cta {
    /* background: var(--background); */
    /* border: 1px solid var(--text-inverse); */
    border-radius: var(--global-buttonRadius);
    color: var(--background);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    line-height: var(--global-buttonLineHeight);
    text-transform: var(--global-buttonTextTransform);
    /* padding: var(--global-buttonPadding); */
    box-shadow: none;
    transition: var(--global-transition);
}

/* hover-reset law - one combined rule, all four properties */
.hp-hero-fade .cc-banner:hover .cc-banner__cta {
    background: white;
    border-color: var(--background);
    box-shadow: none;
    color: var(--background);
    color: black;
	padding: 10px 8px;
}

/* chrome reconciliation: dashes move to bottom-RIGHT (band 01) - the body is
   bottom-LEFT so the two never collide; arrows go minimal white on the photo */
.hp-hero-fade .splide__pagination {
    left: auto;
    right: var(--bannerPadding);
    bottom: var(--bannerPadding);
    transform: none;
    width: auto;
}

/* Hero dashes sit on photography, so both states read off --text-inverse
   (30% -> solid) instead of the global brand-dark ramp.
   SPECIFICITY: these MUST use the [data-splide-opts].hp-hero-fade compound, not
   .hp-hero-fade alone. 05-CC-SplideBanners.css sets the same backgrounds via
   [data-splide-opts] .splide__pagination__page[.is-active] = (0,3,0); a bare
   .hp-hero-fade ... .is-active only ties at (0,3,0) and loses to whichever bundle
   loads last. .hp-hero-fade is the SAME element that carries data-splide-opts
   (default.aspx band 01), so the compound is valid and reaches (0,4,0). */
[data-splide-opts].hp-hero-fade .splide__pagination__page {
    background: var(--white-30);
}

[data-splide-opts].hp-hero-fade .splide__pagination__page.is-active {
    background: var(--text-inverse);
}

/* hover must not fall back to the dark global rule mid-photo */
[data-splide-opts].hp-hero-fade .splide__pagination__page:hover {
    background: var(--text-inverse);
}

.hp-hero-fade .splide__arrow {
    background: white;
    border-color: transparent;
}

.hp-hero-fade .splide__arrow svg {
    fill: var(--text-inverse);
}

.hp-hero-fade .splide__arrow:hover {
    background: white;
    border-color: var(--white-30);
    opacity: 1;
}

@media (max-width: 640px) {
    /* distinct mobile hero: taller portrait stage, tighter type, the veil
       deepens so the shorter measure stays legible over any crop */
    .hp-hero-fade .splide {
        height: 100%;
    }

    .hp-hero-fade .cc-banner__body {
        padding: 1.25rem 1.25rem 2.75rem; /* clears the dashes on narrow screens */
        gap: 2rem;
        background: linear-gradient(
            to top,
            var(--black-80) 0%,
            var(--black-10) 60%
        );
    }

    .hp-hero-fade .cc-banner__title {
        font-size: var(--fontSize-2xl);
        max-width: 16ch;
    }

    .hp-hero-fade .cc-banner__desc {
        max-width: 100%;
    }

    .hp-hero-fade .splide__pagination {
        right: 1.25rem;
        bottom: 1rem;
    }
}

/* --- 1a. hp-hero-fade--centred - copy centred rather than bottom-left --- */
.hp-hero-fade--centred .cc-banner__body {
    justify-content: end;
    align-items: center;
    text-align: center;
}

.hp-hero-fade--centred .cc-banner__title,
.hp-hero-fade--centred .cc-banner__desc {
    max-width: 28ch;
    margin-inline: auto;
}

/* Dashes sit beneath the CTA, centred with it. hero-fade puts them bottom-RIGHT,
   which only made sense while the copy was bottom-left. That rule is (0,2,0) and
   so are 05's and the shared block's, so the winner came down to bundle order,
   which the platform does not guarantee. The [data-splide-opts] compound takes
   this to (0,3,0) and settles it. */
[data-splide-opts].hp-hero-fade--centred .splide__pagination {
    left: 50%;
    right: auto;
    bottom: var(--bannerPadding);
    transform: translateX(-50%);
    width: auto;
}

/* clears the dash row so the CTA never lands on it */
.hp-hero-fade--centred .cc-banner__body {
    padding-bottom: calc(var(--bannerPadding) + 2.5rem);
}


/* ==== 2. hp-panels-3 - full-bleed triptych, 10px gaps, bottom-up gradient,
        serif white title + ghost CTA bottom-left per panel (band 03) ==== */

.hp-panels-3 {
    padding-block: var(--section-padding-sm);
}

.hp-panels-3 > .cc-collection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;      /* the mockup's exact seam */
    padding: 0;     /* deliberate full-bleed */
    row-gap: 40px;
    padding-bottom: 40px;
}

.hp-panels-3 > .cc-collection .cc-banner__img,
.hp-panels-3 > .cc-collection .cc-banner__img img {
    aspect-ratio: 4 / 5; /* ~477x600 panels in the render */
}

/* bottom-up gradient only where the text lives - the upper frame stays clean */
.hp-panels-3 > .cc-collection .cc-banner__body {
    justify-content: flex-end;
    align-items: center;
    padding: clamp(1.5rem, 2.8vw, 2.5rem);
    background: linear-gradient(
        to top,
        var(--black-50) 0%,
        transparent 45%
    );
    transition: background 0.6s ease;
    text-align: center;
    
}
.hp-panels-3 > .cc-collection .cc-banner__title {
    font-family: var(--font-display);
    font-size: var(--fontSize-xl);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--bannerText);
    max-width: 16ch;
}

/* desc kept quiet, body-copy role - the mockup panels carry title + CTA only,
   but a CMS-filled desc must stay legible on the photo */
.hp-panels-3 > .cc-collection .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;
    max-width: 34ch;
}

/* PRIMARY CTA - ghost, white variant (photo band) */
.hp-panels-3 > .cc-collection .cc-banner__cta {
    background: transparent;
    border-radius: var(--global-buttonRadius);
    color: var(--text-inverse);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    line-height: var(--global-buttonLineHeight);
    text-transform: var(--global-buttonTextTransform);
    box-shadow: none;
    transition: var(--global-transition);
}

.hp-panels-3 > .cc-collection .cc-banner:hover .cc-banner__cta {
    background: var(--background);
    border-color: var(--background);
    box-shadow: none;
    color: var(--text);
    padding: 10px 8px;
}

/* hover: overlay tint deepens + the platform's gentle image scale -
   never the zoom alone */
.hp-panels-3 > .cc-collection .cc-banner:hover .cc-banner__body {
    background: linear-gradient(
        to top,
        var(--black-80) 0%,
        transparent 55%
    );
}

/* reveal: quiet staggered rise, left to right */
.hp-panels-3 > .cc-collection .cc-banner {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hp-panels-3.inView > .cc-collection .cc-banner {
    opacity: 1;
    transform: none;
}

.hp-panels-3.inView > .cc-collection .cc-banner:nth-child(2) {
    transition-delay: 0.12s;
}

.hp-panels-3.inView > .cc-collection .cc-banner:nth-child(3) {
    transition-delay: 0.24s;
}

@media (max-width: 900px) {
    /* mobile: the triptych becomes a horizontal scroll-snap rail */
    .hp-panels-3 > .cc-collection {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .hp-panels-3 > .cc-collection .cc-banner {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* --- 2a. hp-panels-3--carousel - the triptych, paged ---
   The Splide control wraps each .cc-banner in a slide, so the grid has to come
   off: Splide owns the track layout and a grid on the collection would fight
   it. Every .cc-banner__* rule above is a descendant selector, so the panel
   anatomy carries over untouched. */
.hp-panels-3--carousel > .cc-collection {
    display: block;
    gap: 0;
}


/* ==== 3. hp-logo-strip - header anatomy per band 04: band-opening full-width
        hairline, eyebrow label beneath it top-left, serif H2 left +
        VIEW ALL right on the same row, greyscale logo drift below ==== */

.hp-logo-strip {
    padding-block: var(--section-padding-sm);
}

/* heading: left-aligned editorial override of the CC-HomepageTitles baseline.
   Top spacing owned by the section; zero bottom (gap owned by the strip).
   Selectors carry .cc-collection so they outrank the baseline's
   .CC-HomepageTitles .cc-collection rules on every property (the baseline's
   text-align:center was leaking through - the centred-desc bug). */
.hp-logo-strip .CC-HomepageTitles {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin: 0;
    padding: 0 var(--gutter);
}

.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner {
    align-items: stretch;
    text-align: left;
}

.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    justify-items: start;
    gap: 1.5rem 2rem;
    width: 100%;
    text-align: left;
}

/* band 04's header body is a GRID that places desc, title and CTA on named
   rows/columns individually. The .text-wrap wrapper would swallow desc+title
   into a single grid item and collapse that anatomy, so here it dissolves and
   lets its children participate in the grid directly. */
.hp-logo-strip .CC-HomepageTitles .cc-collection .text-wrap {
    display: contents;
}

/* the eyebrow - row 1, spanning the band, sitting beneath the band-opening
   FULL-WIDTH HAIRLINE it carries as border-top (bands/04: the rule runs
   above the "Brands" label; var(--border) so it actually renders) */
.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__desc {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    /* border-top: 1px solid var(--border); */
    padding-top: 1.5rem;
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--text);
    opacity: 1;
    text-align: left;
}

.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__title {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--font-display);
    font-size: var(--fontSize-2xl);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-wrap: balance;
    max-width: none;
}

/* QUIET CTA - the arrow-link (band 04's VIEW ALL, sans the banned underline) */
.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    color: var(--text);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    line-height: var(--global-buttonLineHeight);
    text-transform: var(--global-buttonTextTransform);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: var(--global-transition);
}

.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__cta::after {
    content: "\2192";
    display: inline-block;
    transition: transform 0.3s ease;
}

.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--brand-link);
}

.hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta::after {
    transform: translateX(0.35em);
}

/* the logo drift - greyscale at rest, brand colour breathes back on hover.
   Content-height strip (logo row): NO fixed splide height chain here. */
.hp-logo-strip > .cc-collection {
    padding: clamp(2.5rem, 4vw, 3.5rem) var(--gutter) 0;
}

.hp-logo-strip .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-logo-strip .cc-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.hp-logo-strip .cc-brand__img {
    max-height: 3.875rem;
    width: auto;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.55;
    transition: var(--global-transition);
}

.hp-logo-strip .cc-brand:hover .cc-brand__img {
    filter: brightness(0);
    opacity: 1;
}

/* chrome: logo-strip pagination flows below, dark dashes on white;
   arrows inherit the quiet ink baseline and stay at the strip's edges */
.hp-logo-strip .splide__pagination {
    position: static;
    transform: none;
    margin-top: 1.75rem;
    justify-content: center;
    width: auto;
}

.hp-logo-strip .splide__pagination__page {
    background: var(--black-10);
}

.hp-logo-strip .splide__pagination__page.is-active {
    background: var(--brand-dark);
}

@media (max-width: 640px) {
    .hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__body {
        grid-template-columns: 1fr;
    }

    .hp-logo-strip .CC-HomepageTitles .cc-collection .cc-banner__cta {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
}


/* ==== 4. hp-product-rail - the grid-break: asymmetric text rail (1fr) + product
        carousel (3.2fr); hairline rules the rail top; arrows live bottom-left
        of the rail, never over the cards (band 02) ==== */

.hp-product-rail {
    padding-block: var(--section-padding-sm);
}

/* the rail grid. This is FafCustomRepeaterSplide's own Panel - the band holds
   nothing else, so the control's two children ARE the two columns:
   .faf-header (the text rail) and .faf-splide-container (the cards).
   Kept as a direct-child selector: the control nests no second
   .faf-product-carousel now, and this must not start matching one if it ever
   does again. */
.hp-product-rail > .faf-product-carousel {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 3.2fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    padding-inline: var(--gutter); /* content gutter */
    padding-bottom: 3.25rem; /* reserves the arrow row at the rail's foot */
    position: relative;      /* arrows anchor to the whole band */
}

/* graceful empty state - the platform hides the Panel entirely when repeater 1
   binds nothing, but a bound-yet-cardless render would still reserve the arrow
   row, so stand it down (no dead space beneath the rail) */
.hp-product-rail > .faf-product-carousel:not(:has(.faf-product-card)) {
    padding-bottom: 0;
}

/* the rail - the control's own header, bound from repeater 1 (repeaterTitle /
   repeaterDesc / the Shop All link's detailLink). Hairline motif rules its top
   edge, exactly as band 02 draws it.
   NOTE the control does NOT wrap title+desc in a .text-wrap the way the banner
   controls do, so all three children sit in one flex column: the gap here is
   the tight title<->desc value and the CTA pushes itself off with margin-top,
   which reproduces band 02's two-tier spacing. */
.hp-product-rail .faf-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--text-wrap);
    margin: 0;

}

.hp-product-rail .faf-title {
    font-family: var(--font-display);
    font-size: var(--fontSize-3xl);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--text);
    margin: 0;
}

.hp-product-rail .faf-description {
    font-family: var(--font-body);
    font-size: var(--fontSize-md);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 26ch;
    margin: 0;
}

.hp-product-rail .faf-product-btn-container {
    margin: calc(var(--text-block-wrap) - var(--text-wrap)) 0 0;
}


/* PRIMARY CTA - Link text */
.hp-product-rail .faf-view-more {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--text);
    border-radius: 0;
    color: var(--text);
    padding: 0 0 2px;
    background: transparent;
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    line-height: var(--global-buttonLineHeight);
    text-transform: var(--global-buttonTextTransform);
    transition: var(--global-transition);
}


.hp-product-rail .faf-view-more:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: none;
    color: var(--text-inverse);
}

/* product cards - image on a light tile, name + price beneath (band 02).
   FAF carousels are content-height: the image aspect sizes the card. */
.hp-product-rail .faf-product-card {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
}

.hp-product-rail .faf-product-image-link {
    display: block;
    /* background: var(--background-sunken); */ /* the grey tile */
    overflow: hidden;
}

/* .faf-product-image is a background-image div; the inline style shorthand
   resets size/repeat, so these two need !important to land */
.hp-product-rail .faf-product-image {
    aspect-ratio: 1 / 1;
    background-size: contain !important;   /* products float on the tile, uncropped */
    background-repeat: no-repeat !important;
    transition: transform 0.6s ease;
}

.hp-product-rail .faf-product-card:hover .faf-product-image {
    transform: scale(1.03); /* gentle - the luxury register, no bounce */
}

.hp-product-rail .faf-product-info {
    padding: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.hp-product-rail .faf-product-link {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--fontSize-sm);
}

.hp-product-rail .faf-product-name {
    order: -1; /* band 02: name first, price beneath */
    font-family: var(--font-body);
    font-size: var(--fontSize-sm);
    line-height: 1.45;
    color: var(--text);
    transition: var(--global-transition);
}

.hp-product-rail .faf-product-link:hover .faf-product-name {
    color: var(--brand-link);
}

/* quiet quick-buy - present and usable, deferential to the editorial card */
.hp-product-rail .faf-quick-buy-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--global-radius);
    color: var(--text);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    line-height: var(--global-buttonLineHeight);
    text-transform: var(--global-buttonTextTransform);
    padding: var(--global-buttonPadding);
    cursor: pointer;
    box-shadow: none;
    transition: var(--global-transition);
    display: none;
}

.hp-product-rail .faf-quick-buy-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: none;
    color: var(--text-inverse);
}

/* chrome reconciliation - the mockup's arrows sit bottom-left IN the rail
   column: re-anchor them to the whole band (static splide, relative band) */
.hp-product-rail .faf-splide-container,
.hp-product-rail .faf-splide {
    position: static;
    /* the carousel is a grid ITEM: without this it cannot shrink below its
       cards' min-content width and overflows the track. The matching
       minmax(0, 3.2fr) above fixes the TRACK; this fixes the ITEM. Both are
       needed - either alone still overflows. */
    min-width: 0;
}

.hp-product-rail .splide__arrow {
    top: auto;
    bottom: 0;
    transform: none;
}

.hp-product-rail .splide__arrow--prev {
    left: var(--gutter);
    right: auto;
}

.hp-product-rail .splide__arrow--next {
    left: calc(var(--gutter) + 2.75rem);
    right: auto;
}

/* card carousel: pagination flows BELOW the track, dark dashes on white */
.hp-product-rail .splide__pagination {
    position: static;
    transform: none;
    margin-top: 1.5rem;
    justify-content: center;
    width: auto;
}

.hp-product-rail .splide__pagination__page {
    background: var(--black-10);
}

.hp-product-rail .splide__pagination__page.is-active {
    background: var(--brand-dark);
}

@media (max-width: 1024px) {
    .hp-product-rail > .faf-product-carousel {
        grid-template-columns: 1fr; /* rail stacks above the cards */
    }

    .hp-product-rail .faf-description {
        max-width: 44ch;
    }
}


/* ==== 5. hp-hero-fade - the static, single-entry variant ====
   Section 1 holds the base. The only difference is height: the design draws
   this band at 583px on a 1440 canvas against the hero's 789, so it sets its
   own --hero-h. 40.5vw is 583/1440; the floor and ceiling stop it collapsing on
   phones or filling the fold on wide screens.

   Scoped on :not(:has(.splide)) rather than a modifier class because that is
   already what distinguishes the two variants, and it means the page markup
   does not have to carry a class whose only job is to say "not a carousel". */
.hp-hero-fade:not(:has(.splide)) {
    --hero-h: clamp(20rem, 40.5vw, 38rem);
}




/* ==== 6. hp-panels-3 - the copy-below variant (.hp-panels-3--below) ====
   Section 2 holds the base. The difference is only where the copy sits: the
   body comes out of its absolute overlay and stacks under the image, which
   means the gradient and the white ink both have to go with it. */
.hp-panels-3--below > .cc-collection .cc-banner {
    display: flex;
    flex-direction: column;
}

.hp-panels-3--below > .cc-collection .cc-banner__body {
    position: static;
    inset: auto;
    background: none;
    padding: 1.25rem 0 0;
    gap: var(--text-block-wrap);
}

.hp-panels-3--below > .cc-collection .cc-banner:hover .cc-banner__body {
    background: none;
}

.hp-panels-3--below > .cc-collection .cc-banner__title {
    font-size: var(--fontSize-mdl);
    color: var(--text);
}

.hp-panels-3--below > .cc-collection .cc-banner__desc {
    color: var(--text);
    opacity: 0.75;
}

/* the ghost CTA was drawn for a photo; on the page ground it reads as a plain
   underlined link, which is what the design shows */
.hp-panels-3--below > .cc-collection .cc-banner__cta {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--text);
    border-radius: 0;
    color: var(--text);
    padding: 0 0 2px;
}

.hp-panels-3--below > .cc-collection .cc-banner:hover .cc-banner__cta {
    background: none;
    border-color: var(--text);
    color: var(--text);
    opacity: 0.6;
}


/* ==== 7. hp-split-hero - a carousel of 50/50 splits: copy panel one side,
        full-bleed photograph the other. Also serves section 4 as
        .hp-split-hero--mirror, static and flipped. ====

   NEW SHAPE, built from the kit's hero-fade. hero-fade is a full-bleed image
   carousel with the copy laid OVER the photograph; this constrains the
   photograph to half the width and moves the copy into a solid #F4F4F4 panel
   beside it. Same control, same cc-banner__* hooks, different anatomy.

   Everything below targets `.hp-split-hero .cc-banner` rather than
   `> .cc-collection .cc-banner`, because the two variants nest differently: the
   carousel wraps each banner in section.splide > __track > ul > li, the static
   one does not. Keeping the selector shallow is what lets one block serve both.

   NOT YET PROVEN IN A BROWSER. Per docs/ADDING-A-STRIPE.md this cannot enter
   stripes/ until it has rendered correctly at 375 / 1024 / 1440. */

.hp-split-hero > .cc-collection {
    /* the design insets this stripe by the same 40px as every other section,
       unlike a normal full-bleed opening hero */
    padding: 0 var(--gutter);
}

/* carousel height chain. The design's split is 665px tall on a 1440 canvas,
   which is 46vw; the floor keeps the copy panel usable on narrow desktops and
   the ceiling stops it growing past the drawn height on very wide screens. */
.hp-split-hero .splide {
    height: clamp(28rem, 46vw, 41.5625rem);
}

.hp-split-hero .splide__track,
.hp-split-hero .splide__list,
.hp-split-hero .splide__slide {
    height: 100%;
}

/* THE SPLIT. Two equal columns: the panel and the photograph.
   min-height carries the STATIC variant, which has no .splide above it to
   inherit a height from; height:100% carries the CAROUSEL variant, where the
   chain above has already set an explicit height. Both are needed - neither
   alone serves both variants. */
.hp-split-hero .cc-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: clamp(28rem, 46vw, 41.5625rem);
    height: 100%;
}

/* the copy panel - ink on #F4F4F4, no overlay, no border.

   position/inset ARE THE LOAD-BEARING PAIR, not tidying. 04 draws this element
   as hero-fade's overlay - `position: absolute; inset: 0` over a full-bleed
   photograph - and AN ABSOLUTELY POSITIONED CHILD IS NOT A GRID ITEM. Leave it
   and the split silently does not happen: the photograph becomes the only
   in-flow item so it takes column ONE (the left half), column two is empty, and
   this opaque panel stretches across the whole banner at z-index 2 and hides the
   photograph underneath. The stripe renders as a full-width grey block with no
   image at all - no error, and the grid-template-columns above still reads
   correctly in the file while doing nothing. `position: static; inset: auto` is
   04's OWN idiom for leaving the overlay model - see .CC-HomepageTitles at
   04:314. Serves the --mirror variant too, which inherits this block. */
.hp-split-hero .cc-banner__body {
    position: static;
    inset: auto;
    order: 0;
    /* background: var(--bannerCardBg); */
    justify-content: center;
    align-items: flex-start;
    gap: var(--text-block-wrap);
    /* the design's inner-section is 40px block, 120px inline. The inline value
       is a clamp so the copy measure does not collapse before the stripe
       stacks. */
    padding: 2.5rem clamp(1.5rem, 8.3vw, 7.5rem);
}

/* the photograph fills its half. The banner controls normally impose an
   aspect-ratio; here the panel height governs instead, so it is cleared. */
.hp-split-hero .cc-banner__img {
    order: 1;
}

.hp-split-hero .cc-banner__img,
.hp-split-hero .cc-banner__img img {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* H1: 48px Sentient Light at -0.04em, capitalised. --fontSize-3xl resolves to
   exactly 3rem at the design's 1440 canvas, so no skin token is needed here.
   --bannerCardText is the INK token (--text); --bannerText is the inverse and
   would render white on the grey panel. */
.hp-split-hero .cc-banner__title {
    font-family: var(--font-display);
    font-size: var(--fontSize-3xl);
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-transform: capitalize;
    color: var(--bannerCardText);
    max-width: 20ch;
    text-wrap: balance;
}

.hp-split-hero .cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--bannerCardText);
    max-width: 34ch;
}

/* PRIMARY CTA - the green pill. Ink label, never white: white on --brand is
   2.25:1. See 01's --text-on-brand comment. */
.hp-split-hero .cc-banner__cta {
    align-self: flex-start;
    background: var(--brand);
    border: none;
    border-radius: var(--global-buttonRadius);
    color: var(--text-on-brand);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    letter-spacing: var(--global-buttonLetterSpacing);
    line-height: var(--global-buttonLineHeight);
    text-transform: var(--global-buttonTextTransform);
    padding: var(--global-buttonPadding);
    box-shadow: none;
    transition: var(--global-transition);
}

/* hover-reset law - one combined rule, all four properties. The design shows no
   hover state, so this is the conservative reading: deepen the green, hold the
   box still, keep the ink legible (#1E1E1E on --brand-focus is 4.53:1). */
.hp-split-hero .cc-banner:hover .cc-banner__cta {
    background: var(--brand-focus);
    border-color: transparent;
    box-shadow: none;
    color: var(--text-on-brand);
}

/* chrome reconciliation: the dashes sit bottom-LEFT inside the copy panel,
   aligned with its text, so they never collide with the photograph. The left
   offset repeats the panel's inline padding clamp for that reason - change one,
   change both.

   THE COMPOUND IS REQUIRED HERE TOO, for the same reason as the __page rules
   below. 05 positions this container at bottom / left:50% with a
   translateX(-50%), at (0,2,0); a bare .hp-split-hero .splide__pagination only
   TIES with it. Lose that tie and the dashes centre themselves along the
   bottom of the stripe - straddling the seam between the copy panel and the
   photograph, which is the one place the design never puts them. Note that
   left/right/bottom alone would not undo 05's centring either: the
   transform:none below is what cancels the translateX. */
[data-splide-opts].hp-split-hero .splide__pagination {
    left: clamp(1.5rem, 8.3vw, 7.5rem);
    right: auto;
    bottom: 2.8125rem;
    transform: none;
    width: auto;
    justify-content: flex-start;
}

/* These dashes sit on the GREY PANEL, not on photography, so both states are
   ink at two opacities rather than the framework's brand-dark ramp.
   SPECIFICITY: these MUST use the [data-splide-opts].hp-split-hero compound,
   not .hp-split-hero alone. Section 0 above and 05-CC-SplideBanners.css both
   set these backgrounds via [data-splide-opts] .splide__pagination__page at
   (0,2,0); a bare .hp-split-hero ... .is-active only ties with the is-active
   rule and loses to whichever bundle loads last. .hp-split-hero is the SAME
   element that carries data-splide-opts, so the compound is valid and reaches
   (0,3,0) / (0,4,0). */
[data-splide-opts].hp-split-hero .splide__pagination__page {
    background: var(--text);
    opacity: 0.2;
}

[data-splide-opts].hp-split-hero .splide__pagination__page.is-active {
    background: var(--text);
    opacity: 1;
}

[data-splide-opts].hp-split-hero .splide__pagination__page:hover {
    opacity: 1;
}

/* The --mirror variant that serves SECTION 4 is in section 4 below, not here,
   so this file reads in page order. It is four rules long. */

/* ---- sections 1 AND 4 stacked ------------------------------------------
   This query deliberately covers BOTH variants - the stacked layout is
   identical for each, and duplicating it under section 4 would mean two places
   to keep in step. */
@media (max-width: 900px) {
    /* the split becomes one column, photograph always above the copy - in BOTH
       variants, so the mirror's order is reset rather than inherited. A
       photograph below its own caption reads as belonging to the next
       section. */
    .hp-split-hero .cc-banner {
        grid-template-columns: 1fr;
        min-height: 0;
        height: auto;
    }

    .hp-split-hero .cc-banner__img,
    .hp-split-hero--mirror .cc-banner__img {
        order: 0;
    }

    .hp-split-hero .cc-banner__body,
    .hp-split-hero--mirror .cc-banner__body {
        order: 1;
        padding: 2rem 1.25rem 3.5rem; /* the bottom value clears the dashes */
    }

    .hp-split-hero .cc-banner__img,
    .hp-split-hero .cc-banner__img img {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* release the height chain - the stacked stripe is content-height */
    .hp-split-hero .splide,
    .hp-split-hero .splide__track,
    .hp-split-hero .splide__list,
    .hp-split-hero .splide__slide {
        height: auto;
    }

    [data-splide-opts].hp-split-hero .splide__pagination {
        left: 1.25rem;
        bottom: 1.25rem;
    }

    .hp-split-hero .cc-banner__title {
        font-size: var(--fontSize-2xl);
        max-width: 18ch;
    }
}



/* --- 7a. hp-split-hero - the mirrored, static variant (.hp-split-hero--mirror)
        ====

   SECTION 1'S STRIPE, FLIPPED AND STILL. Photograph left, copy panel right, and
   the dark CTA rather than the light one. Four rules is the entire difference,
   which is why this is a modifier and not a second stripe - every measurement,
   the type, the panel ground and the stacked mobile layout all come from
   section 1 above. Read that block first.

   The section header names the BASE class rather than the modifier, so this
   file's section order matches default.aspx's stripe order - the page carries
   both classes on one element and the base is what identifies the shape.

   No carousel here: this reads ONE banner through the grid control, so there is
   no height chain, no pagination and no arrows to reconcile. */

.hp-split-hero--mirror .cc-banner__img {
    order: 0;
}

/* padding drops to a flat 40px - the design gives this panel a wider measure
   than the hero's 120px inset, because there is no pagination to clear */
.hp-split-hero--mirror .cc-banner__body {
    order: 1;
    padding: 5.5rem;
}

@media (max-width: 900px) {
    .hp-split-hero--mirror .cc-banner__body {
    padding: 3rem 1rem;
}
}

.hp-split-hero--mirror .cc-banner__desc {
    max-width: 44ch;
}

/* the DARK pill. Second of the page's three CTA grounds - green on the panel in
   section 1, dark here, white on photography in section 3. Hover goes to the
   brand green so the two split sections answer each other. */
.hp-split-hero--mirror .cc-banner__cta {
    background: var(--text);
    color: var(--text-inverse);
}

.hp-split-hero--mirror .cc-banner:hover .cc-banner__cta {
    background: var(--brand);
    color: var(--text-on-brand);
}

/* --- 7b. hp-split-hero--about - the about copy beside banner 6's photograph ---
   default.aspx hand-builds the outer .cc-banner and nests the banner control in
   its __img column. The control is not a direct child, so it misses the gutter
   rule at the top of section 7 - it is restated on the outer banner instead.
   The nested banner is a whole .cc-banner of its own and picks up the split
   grid too, so it is flattened back to a plain block and its copy hidden,
   leaving only the photograph. */
.hp-split-hero--about > .cc-banner {
    margin-inline: var(--gutter);
}

.hp-split-hero--about .cc-banner__img .cc-banner {
    display: block;
    min-height: 0;
    height: 100%;
}

.hp-split-hero--about .cc-banner__img .cc-collection {
    height: 100%;
}

.hp-split-hero--about .cc-banner__img .cc-banner__body {
    display: none;
}

div#Panels3Below_bannerCollectionPanel {
    padding-inline: var(--gutter);
}




@media screen and (max-width: 767px) {
    .hp-hero-fade .splide__arrow {
    display:none;
}
}/* text overlay  --------------------------------------------------------------- */
.bannerTitle {background: none;padding: 8px;line-height: 1em;}
.bannerTxtCtr > span.bannerView {border:1px solid #fff;padding: 7px 15px;background: none;}
[class*="grirow"] > div > a:hover .bannerView {background:var(--but-bg-color); border: 1px solid var(--but-bg-color);}
.bannerTitle {
    letter-spacing: -1px !important;
}
.bannerDesc {bottom: 0;width: 100%;left: 0;background: none !important;font-size: 14px;}
.bannerTxtCtr {width:100%;-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;}
.bannerTxtCtr {width:100%;-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;justify-content: flex-end;}
.Banner:hover .bannerTxtCtr {background: #00000000;}
@media screen and (max-width: 1024px)
{
	.ctaGrid {grid-template-columns: repeat(1,1fr);}
}


/* Banner 1 styles  --------------------------------------------------------------- */
.hmBanner1 .bannerTxtCtr {}
.hmBanner1 .bannerTitle {font-size: calc(32px + (90 - 32) * ((100vw - 300px) / (1920 - 300)));}
.hmBanner1 .bannerDesc {font-size: 1.5vw}
@media screen and (max-width: 1024px)
{
	.hmBanner1 .bannerDesc {font-size: 16px}
}



/* Brand Button  --------------------------------------------------------------- */
.brand-btn{border: 1px solid #fff;padding:10px 15px;color:#fff;display: inline-block;}
.brand-btn:hover{background:#fff; border: 1px solid #fff; color:#000;}

/* About us  --------------------------------------------------------------- */
.disc-btn{border: 1px solid #0000007d;padding: 13px 46px;display: inline-block;}
.disc-btn:hover{border: 1px solid var(--but-bg-color);background: var(--but-bg-color);color:#fff;}
.about hr{border-color: #00000038;}
.bg{background:var(--but-bg-color);}
.about-container{display:grid;grid-template-columns:repeat(2,1fr);justify-content: center;align-items: center;}
.banner-contain{/* display:flex; */justify-content: center;align-items:center;flex-direction: column;}
.about-banner .bannerTitle, .about-banner .bannerView, .about-banner .bannerDesc {display:none;}

@media screen and (min-width : 768px) and (max-width : 1023.9px)
{
	.about .col-2{width:100%;}
}

@media screen and (max-width : 1023.9px)
{
	.about-container{grid-template-columns:repeat(1,1fr);}
	.btn-contain{text-align: center;}
}





/* Banner 2  --------------------------------------------------------------- */
.Banner2 a {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; -o-flex-flow: row wrap; flex-flow: row wrap;}
.Banner2 a .bannerTxtCtr {position: static;order: 2;height: auto;justify-content: flex-start;align-content: flex-start;text-align: left;align-items: flex-start;padding: 16px 0 0 0;width: 100%;flex-flow: row wrap;color: #fff !important;background: transparent;padding: 23px;background: #efefef !important;}
.Banner2 a:hover .bannerTxtCtr::before {width: 50%;}
.Banner2 a .photo {order: 1;width: 100%;height: auto;}
.Banner2 a .bannerTxtCtr > span {padding: 0px 0px 19px 0px;background: transparent;color: #282828;margin: 0;text-align: left;}
.Banner2 a .bannerTxtCtr > span.bannerTitle {width: 100%;color: #000000;text-align: left;}
.Banner2 a .bannerTxtCtr > span.bannerDesc {order: 2;text-align: left;color: #000000;}
.Banner2 a .bannerTxtCtr > span.bannerView {align-self: left;width: 100%;text-align: left;order: 2;text-transform: uppercase;font-size: 11px;/* font-family: arboria, sans-serif; */font-weight: 400;font-style: normal;border: 0px;color: #000000;text-align: left;border: 1px solid #565656;padding: 7px 15px;background: none;display: inline-block;width: auto;align-content: center;}
.Banner2 a:hover .bannerTxtCtr > span.bannerView {border: 1px solid #37854b;background: #37854b;color: #fff;}
.Banner2 .bannerDesc{padding-bottom:20px !important;font-size: 13px;}