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

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


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

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


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

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

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

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

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

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

.pos-rel {
    position:relative;
}

.pos-abs {
    position:absolute;
}

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

.pos-fix {
    position:fixed;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

.hdrRewardsTitle {
}

.slides.thinBanner {
    margin: 0;
}

.backgrounrdsignup.thinBanner {
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ctrNavigation {
    align-self: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .NodeLevel1 > .CSSFacetNavModules a {
    }

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

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

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

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

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

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

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

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

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

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

.loginCtr .lockIcon {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

div.basketCtr h3 {
    margin: 0;
}

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

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

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

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

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

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

    .CCartBut > div {
        padding: 4px;
    }

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

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

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

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

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

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

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

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

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

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

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

.minibasket-toggles {
}

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

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

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

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

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

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

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

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

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

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

.basketstarbuy-strap {
}

.basketstarbuy-desc {
}

.sbuy-offers {
    background: #a46ec2;
}

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

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

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

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

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

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

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

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

    .navIcons {
        height: 48px;
    }

    .logoContainer {
        width: 96px;
    }

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

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

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

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

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

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

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

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

        .ctrNavigation.tbcntOpen {
            display: block;
        }

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

    .CSSFacetNavModules {
    }

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

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

    a#TopBanner1_CSSFacetNav2_TopLevel_ctl02_hylNode {
    }

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

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

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

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

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

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

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

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

    .ctrNavigation > .CSSFacetNavModules {
        display: inline
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.lable, lable {
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancybox-active {
    height: auto
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancybox-spaceball {
    z-index: 1
}

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

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

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

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

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

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

.fancybox-iframe {
    vertical-align: top
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

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

.small {
    font-size: small;
}

.normal {
    font-size: medium;
}

.large {
    font-size: large;
}

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

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

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

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

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

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

.container {
    background: #fff;
}

.colorwhite {
    color: white
}

.colorblack {
    color: black
}

.backgroundwhite {
    background: white
}

.backgroundblack {
    background: black
}

.backgroundblacki {
    background: black !important;
}

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

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

.centralised {
    text-align: center
}

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

    .warning i {
        margin: 0 7px
    }

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

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

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

    .alert strong {
        font-size: large
    }

    .alert p {
        opacity: 0.8
    }

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

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .breadcrumbs a {
        opacity: 0.5
    }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.borderi {
    border: 1px solid;
}

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

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

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

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

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

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

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

.borderradius {
    border-radius: 4px;
}

.borderradius3 {
    border-radius: 3px;
}

.borderradius8 {
    border-radius: 8px;
}

.borderradius100 {
    border-radius: 100%;
}

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

.coGreen {
    color: #46d82d;
}

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

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

.coCCC {
    color: #ccc;
}

.coRED {
    color: #fd4239;
}

.coStarbuys {
    color: #a46ec2;
}

.coWhite {
    color: white;
}

.bgWhite {
    background: white;
}

.bgf4 {
    background: #f4f4f4;
}

.bgeb {
    background: #eee;
}

.bgd7 {
    background: #ddd;
}

.bgStandard {
    background: #2f76ec;
}

.bgGreen {
    background: #46d82d;
}

.bgLGreen {
    background: #E8FFED;
}

.bgLBlue {
    background: #e8f4ff;
}

.bgLRed {
    background: #fee7e6;
}

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

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

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

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

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

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

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



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

textarea {
    min-height: 200px
}

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

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

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

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

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

/* -- forms buttons  -- */

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

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

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

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

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

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

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

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

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

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


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

.dark select {
    color: #fff
}

.dark option {
    color: #000
}

.selectWrapper {
    position: relative
}

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

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

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


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

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

.error {
    background: #A82123 !important
}

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

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

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

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

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

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

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

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

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

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

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

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

    table#radFinanceProductList input {
        display:none;
    }

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

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

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


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

.minVal {
    text-align: left;
}

.maxVal {
    text-align: right;
}

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    33% {
        background: #3F37C9;
    }

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

    66% {
        background: #7209B7;
    }

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

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

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

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

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

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

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

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

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

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

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

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

[onclick*="AddStockNotificationModular"] {
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-cloud-off:before {
    content: "\e92a";
}

.icon-cloud-rain:before {
    content: "\e92b";
}

.icon-cloud-snow:before {
    content: "\e92c";
}

.fa-cloud-upload:before,
.icon-cloud-upload:before,
.icon-upload-cloud:before {
    content: "\ea04";
}

.icon-code:before {
    content: "\e92d";
}

.icon-codepen:before {
    content: "\e92e";
}

.icon-codesandbox:before {
    content: "\e92f";
}

.icon-coffee:before {
    content: "\e930";
}

.icon-cog:before,
.icon-settings:before {
    content: "\e9db";
}

.icon-columns:before {
    content: "\e931";
}

.icon-command:before {
    content: "\e932";
}

.icon-compass:before {
    content: "\e933";
}

.icon-content-left:before {
    content: "\e101";
}

.icon-content-right:before {
    content: "\e100";
}

.icon-minimize:before,
.icon-contract:before {
    content: "\e9b2";
}

.icon-copy:before {
    content: "\e934";
}

.icon-corner-down-left:before {
    content: "\e935";
}

.icon-corner-down-right:before {
    content: "\e936";
}

.icon-corner-left-down:before {
    content: "\e937";
}

.icon-corner-left-up:before {
    content: "\e938";
}

.icon-corner-right-down:before {
    content: "\e970";
}

.icon-corner-right-up:before {
    content: "\e971";
}

.icon-corner-up-left:before {
    content: "\e972";
}

.icon-corner-up-right:before {
    content: "\e973";
}

.icon-cpu:before {
    content: "\e954";
}

.icon-credit-card:before {
    content: "\e955";
}

.icon-crop:before {
    content: "\e956";
}

.fa-close:before,
.icon-x:before,
.icon-cross:before {
    content: "\ea16";
}

.icon-crosshair:before {
    content: "\e957";
}

.icon-database:before {
    content: "\e958";
}

.icon-delete:before {
    content: "\e959";
}

.icon-disc:before {
    content: "\e95a";
}

.icon-divide:before {
    content: "\e95b";
}

.icon-divide-circle:before {
    content: "\e95c";
}

.icon-divide-square:before {
    content: "\e95d";
}

.icon-dollar-sign:before {
    content: "\e95e";
}

.icon-download:before {
    content: "\e95f";
}

.icon-dribbble:before {
    content: "\e961";
}

.icon-drop:before,
.icon-droplet:before {
    content: "\e962";
}

.icon-edit:before {
    content: "\e963";
}

.icon-edit-2:before {
    content: "\e964";
}

.icon-edit-3:before {
    content: "\e965";
}

.fa-ellipsis-h:before,
.icon-more-horizontal:before,
.icon-ellipsis:before {
    content: "\e9b9";
}

.icon-esc:before {
    content: "\e089";
}

.icon-expand:before,
.icon-maximize:before {
    content: "\e9aa";
}

.icon-external-link:before,
.icon-open:before,
.fa-external-link:before,
.fa-external-link-square:before {
    content: "\e966";
}

.icon-eye:before {
    content: "\e967";
}

.icon-eye-off:before {
    content: "\e968";
}

.icon-facebook:before {
    content: "\e969";
}

.icon-fast-forward:before {
    content: "\e96a";
}

.icon-feather:before {
    content: "\e96b";
}

.icon-figma:before {
    content: "\e96c";
}

.icon-file:before {
    content: "\e96d";
}

.icon-file-add:before {
    content: "\e125";
}

.icon-file-minus:before {
    content: "\e96e";
}

.icon-file-plus:before {
    content: "\e96f";
}

.icon-file-subtract:before {
    content: "\e126";
}

.icon-file-text:before {
    content: "\e94c";
}

.icon-film:before {
    content: "\e94d";
}

.icon-filter:before {
    content: "\e94e";
}

.icon-flag:before {
    content: "\e94f";
}

.icon-folder:before {
    content: "\e950";
}

.icon-folder-minus:before {
    content: "\e951";
}

.icon-folder-plus:before {
    content: "\e952";
}

.icon-framer:before {
    content: "\e953";
}

.icon-frown:before {
    content: "\e98c";
}

.icon-gift:before {
    content: "\e98d";
}

.icon-git-branch:before {
    content: "\e98e";
}

.icon-git-commit:before {
    content: "\e98f";
}

.icon-git-merge:before {
    content: "\e992";
}

.icon-git-pull-request:before {
    content: "\e993";
}

.icon-github:before {
    content: "\e990";
}

.icon-gitlab:before {
    content: "\e991";
}

.icon-globe:before {
    content: "\e994";
}

.icon-grid:before {
    content: "\e995";
}

.icon-grid-2:before {
    content: "\e103";
}

.icon-hard-drive:before {
    content: "\e996";
}

.icon-hash:before {
    content: "\e997";
}

.icon-user:before,
.icon-head:before {
    content: "\ea07";
}

.icon-headphones:before {
    content: "\e998";
}

.icon-heart:before {
    content: "\e974";
}

.icon-help:before,
.icon-help-circle:before {
    content: "\e975";
}

.icon-hexagon:before {
    content: "\e976";
}

.icon-home:before {
    content: "\e977";
}

.icon-image:before {
    content: "\e978";
}

.icon-inbox:before {
    content: "\e979";
}

.icon-info:before {
    content: "\e97a";
}

.icon-instagram:before {
    content: "\e97b";
}

.icon-italic:before {
    content: "\e97c";
}

.icon-key:before {
    content: "\e97d";
}

.icon-layers:before {
    content: "\e97e";
}

.icon-layout:before {
    content: "\e97f";
}

.icon-life-buoy:before {
    content: "\e980";
}

.icon-link:before {
    content: "\e981";
}

.icon-link-2:before {
    content: "\e982";
}

.icon-linkedin:before {
    content: "\e983";
}

.icon-list:before {
    content: "\e984";
}

.icon-loader:before {
    content: "\e985";
}

.icon-location:before {
    content: "\e070";
}

.icon-location-2:before {
    content: "\e071";
}

.icon-lock:before,
.fa-lock:before {
    content: "\e986";
}

.icon-log-in:before {
    content: "\e987";
}

.icon-log-out:before {
    content: "\e988";
}

.icon-mail:before,
.fa-envelope-open:before,
.fa-envelope-open-o:before,
.fa-envelope-square:before,
.fa-envelope:before,
.fa-envelope-o:before {
    content: "\e989";
}

.icon-map:before {
    content: "\e98a";
}

.icon-map-pin:before {
    content: "\e98b";
}

.icon-marquee:before {
    content: "\e082";
}

.icon-marquee-minus:before {
    content: "\e084";
}

.icon-marquee-plus:before {
    content: "\e083";
}

.icon-maximize:before,
.fa-arrows-alt:before,
.fa-arrows:before,
.fa-expand:before {
    content: "\e9aa";
}

.icon-maximize-2:before {
    content: "\e9ab";
}

.icon-meh:before {
    content: "\e9ac";
}

.fa-bars:before,
.icon-menu:before,
.fa-sliders:before {
    content: "\e9ad";
}

.icon-message-square:before {
    content: "\e9af";
}

.icon-mic-off:before {
    content: "\e9b1";
}

.icon-microphone:before,
.icon-mic:before {
    content: "\e9b0";
}

.icon-minimize:before,
.fa-compress:before {
    content: "\e9b2";
}

.icon-minimize-2:before {
    content: "\e9b3";
}

.icon-minus:before {
    content: "\e9b4";
}

.icon-monitor:before {
    content: "\e9b7";
}

.icon-moon:before {
    content: "\e9b8";
}

.icon-more-vertical:before {
    content: "\e9ba";
}

.icon-mouse-pointer:before {
    content: "\e9bb";
}

.icon-move:before {
    content: "\e9bc";
}

.icon-music:before {
    content: "\e9bd";
}

.icon-volume-x:before,
.icon-mute:before {
    content: "\ea11";
}

.icon-navigation:before {
    content: "\e9be";
}

.icon-navigation-2:before {
    content: "\e9bf";
}

.icon-octagon:before {
    content: "\e999";
}

.icon-outbox:before {
    content: "\e123";
}

.icon-package:before {
    content: "\e99a";
}

.icon-paper:before {
    content: "\e034";
}

.icon-paper-clip:before,
.icon-paperclip:before {
    content: "\e99b";
}

.icon-paper-stack:before {
    content: "\e035";
}

.icon-paragraph:before {
    content: "\e025";
}

.icon-pause:before {
    content: "\e99c";
}

.icon-pause-circle:before {
    content: "\e99d";
}

.icon-pen-tool:before {
    content: "\e99e";
}

.icon-percent:before {
    content: "\e99f";
}

.icon-phone:before {
    content: "\e9a0";
}

.icon-phone-call:before {
    content: "\e9a1";
}

.icon-phone-forwarded:before {
    content: "\e9a2";
}

.icon-phone-incoming:before {
    content: "\e9a3";
}

.icon-phone-missed:before {
    content: "\e9a4";
}

.icon-phone-off:before {
    content: "\e9a5";
}

.icon-phone-outgoing:before {
    content: "\e9a6";
}

.icon-pie-chart:before,
.icon-pie-graph:before {
    content: "\e9a7";
}

.icon-play:before {
    content: "\e9a8";
}

.icon-play-circle:before {
    content: "\e9a9";
}

.icon-plus:before {
    content: "\e9c8";
}

.icon-pocket:before {
    content: "\e9cb";
}

.icon-power:before {
    content: "\e9cc";
}

.icon-printer:before {
    content: "\e9cd";
}

.icon-radio:before {
    content: "\e9ce";
}

.icon-record:before {
    content: "\e049";
}

.icon-refresh-ccw:before {
    content: "\e9cf";
}

.icon-refresh-cw:before,
.icon-reload:before {
    content: "\e9d0";
}

.icon-repeat:before {
    content: "\e9d1";
}

.icon-rewind:before {
    content: "\e9d2";
}

.icon-ribbon:before {
    content: "\e009";
}

.icon-reply:before,
.icon-rotate-ccw:before {
    content: "\e9d3";
}

.icon-rotate-cw:before {
    content: "\e9d4";
}

.icon-rss:before {
    content: "\e9d5";
}

.icon-save:before {
    content: "\e9d6";
}

.icon-scissors:before {
    content: "\e9d7";
}

.icon-search:before {
    content: "\e9d8";
}

.icon-send:before {
    content: "\e9d9";
}

.icon-server:before {
    content: "\e9da";
}

.icon-share:before {
    content: "\e9dc";
}

.icon-share-2:before {
    content: "\e9dd";
}

.icon-shield:before {
    content: "\e9de";
}

.icon-shield-off:before {
    content: "\e9df";
}

.icon-shopping-cart:before {
    content: "\e9e1";
}

.fa-unsorted:before,
.icon-shuffle:before {
    content: "\e9e2";
}

.icon-sidebar:before {
    content: "\e9e3";
}

.icon-signal:before {
    content: "\e011";
}

.icon-skip-back:before {
    content: "\e9c0";
}

.icon-skip-forward:before {
    content: "\e9c1";
}

.icon-slack:before {
    content: "\e9c2";
}

.icon-slash:before {
    content: "\e9c3";
}

.icon-sliders:before {
    content: "\e9c4";
}

.icon-smartphone:before {
    content: "\e9c5";
}

.icon-smile:before {
    content: "\e9c6";
}

.icon-speaker:before {
    content: "\e9c7";
}

.icon-speech-bubble:before,
.icon-message-circle:before {
    content: "\e9ae";
}

.icon-square:before {
    content: "\e9e4";
}

.icon-check-square:before,
.icon-square-check:before,
.fa-check-square-o:before,
.fa-check-square:before {
    content: "\e93f";
}

.icon-square-cross:before {
    content: "\e047";
}

.icon-minus-square:before,
.icon-square-minus:before {
    content: "\e9b6";
}

.icon-square-plus:before,
.icon-plus-square:before {
    content: "\e9ca";
}

.icon-stack:before {
    content: "\e032";
}

.icon-stack-2:before {
    content: "\e033";
}

.icon-star:before {
    content: "\e9e5";
}

.icon-stop:before {
    content: "\e054";
}

.icon-stop-circle:before {
    content: "\e9e6";
}

.icon-sun:before {
    content: "\e9e7";
}

.icon-sunrise:before {
    content: "\e9e8";
}

.icon-sunset:before {
    content: "\e9e9";
}

.icon-table:before {
    content: "\e9ea";
}

.icon-tablet:before {
    content: "\e9eb";
}

.icon-tag:before {
    content: "\e9ec";
}

.icon-target:before {
    content: "\e9ed";
}

.icon-terminal:before {
    content: "\e9ee";
}

.icon-thermometer:before {
    content: "\e9ef";
}

.icon-thumbs-down:before {
    content: "\e9f0";
}

.icon-thumbs-up:before {
    content: "\e9f1";
}

.icon-toggle:before {
    content: "\e003";
}

.icon-toggle-left:before {
    content: "\e9f2";
}

.icon-toggle-right:before {
    content: "\e9f3";
}

.icon-tool:before {
    content: "\e9f4";
}

.icon-trash:before {
    content: "\e9f5";
}

.icon-trash-2:before {
    content: "\e9f6";
}

.icon-trello:before {
    content: "\e9f7";
}

.icon-trending-down:before {
    content: "\e9f8";
}

.icon-trending-up:before {
    content: "\e9f9";
}

.icon-triangle:before {
    content: "\e9fa";
}

.icon-truck:before {
    content: "\e9fb";
}

.icon-tv:before {
    content: "\e9fc";
}

.icon-twitch:before {
    content: "\e9fd";
}

.icon-twitter:before {
    content: "\e9fe";
}

.icon-type:before {
    content: "\e9ff";
}

.icon-umbrella:before {
    content: "\ea00";
}

.icon-underline:before {
    content: "\ea01";
}

.icon-unlock:before {
    content: "\ea02";
}

.icon-upload:before {
    content: "\ea03";
}

.icon-user-check:before {
    content: "\ea05";
}

.icon-user-minus:before {
    content: "\ea06";
}

.icon-user-plus:before {
    content: "\ea08";
}

.icon-user-x:before {
    content: "\ea0a";
}

.icon-users:before {
    content: "\ea09";
}

.icon-video:before {
    content: "\ea0b";
}

.icon-video-off:before {
    content: "\ea0c";
}

.icon-voicemail:before {
    content: "\ea0d";
}

.icon-volume:before {
    content: "\ea0e";
}

.icon-volume-1:before {
    content: "\ea0f";
}

.icon-volume-2:before {
    content: "\ea10";
}

.icon-watch:before {
    content: "\ea12";
}

.icon-wifi:before {
    content: "\ea13";
}

.icon-wifi-off:before {
    content: "\ea14";
}

.icon-wind:before {
    content: "\ea15";
}

.icon-x-circle:before {
    content: "\ea17";
}

.icon-x-octagon:before {
    content: "\ea18";
}

.icon-x-square:before {
    content: "\ea19";
}

.icon-youtube:before {
    content: "\ea1a";
}

.icon-zap:before {
    content: "\ea1b";
}

.icon-zap-off:before {
    content: "\ea1c";
}

.icon-zoom-in:before {
    content: "\ea1d";
}

.icon-zoom-out:before {
    content: "\ea1e";
}
.modular-review-faq-container---header {
    border-bottom: 1px solid black;
}

    .modular-review-faq-container---header span {
        line-height: 200%;
        background: #666;
        color: white;
        cursor: pointer;
    }

        .modular-review-faq-container---header span.r-section-active {
            background: black;
        }

        .modular-review-faq-container---header span i {
            display: block;
            float: right;
            background: rgba(255,255,255,0.15);
            font-size: smaller;
        }

.modular-review-faq-container---body {
    display: none;
}

    .modular-review-faq-container---body.r-section-active {
        display: block;
    }

.modular-review-faq-slidein {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    z-index: 100000;
    opacity: 0;
    display: none;
}

    .modular-review-faq-slidein.slidein-show {
        display: block;
        opacity: 1;
    }

.modular-review-faq-slidein-inner {
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100%;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    overflow-y: auto;
}

.modular-review-faq-slidein.slidein-show .modular-review-faq-slidein-inner {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}


.modular-review-faq-slidein-close {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
/**** STARBUY BRANDING ***************************************************************************/

:root {
    --starbuyColourOne: #f4eef8;
    --starbuyColourTwo: #e0d0ed;
    --starbuyColourThree: #9158bf;
    --starbuyColourOneApplied: #f4f8ee;
    --starbuyColourTwoApplied: #e3edd0;
    --starbuyColourThreeApplied: #789b43;
}

/**** DRAWER GENERICS ***************************************************************************/

.starbuy-drawer *:not(.fa),
.starbuy-drawer-promotion *:not(.fa),
.starbuy-faf-preview *:not(.fa) {
    font-family: 'MuliRegularFont' !important;
}

.starbuy-list-element *:not(.fa),
.starbuy-drawer-promo-header-description-top,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
.starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer,
.starbuy-product-preview .starbuy-product-preview-header,
.starbuy-faf-preview .starbuy-faf-preview-message-lead,
.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-family: 'MuliBoldFont' !important;
}

.starbuy-drawer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] {
        opacity: 1;
    }

    .starbuy-drawer[data-drawer-number="1"] {
        z-index: 500;
    }

    .starbuy-drawer[data-drawer-number="2"] {
        z-index: 501;
    }

.starbuy-drawer-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    min-height: 100%;
    width: 500px;
    max-width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] .starbuy-drawer-inner {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
    }

    .starbuy-drawer[data-drawer-number="1"] .starbuy-drawer-inner {
        width: 500px;
    }

.starbuy-drawer-promotion {
    width: 100%;
    min-height: 100%;
    padding: 32px;
    background: white;
    flex-grow: 1;
    -webkit-box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    overflow-x: none;
    overflow-y: auto;
    user-select: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.starbuy-drawer-close {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    flex-grow: 0;
    min-width: 32px;
    cursor: pointer;
    position: relative;
    background: black;
}

    .starbuy-drawer-close:before, .starbuy-drawer-close:after {
        position: absolute;
        top: 8px;
        left: 15px;
        content: ' ';
        height: 16px;
        width: 2px;
        background-color: white;
    }

    .starbuy-drawer-close:before {
        transform: rotate(45deg);
    }

    .starbuy-drawer-close:after {
        transform: rotate(-45deg);
    }

.starbuy-drawer-close-inner {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0.0625rem solid;
    color: var(--starbuyColourThree);
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    gap: 0.25rem;
}

.starbuy-drawer-promo-header {
    margin-bottom: 16px;
}

.starbuy-drawer-promo-header-title {
    background-color: var(--starbuyColourThree);
    color: var(--starbuyColourOne);
    padding: 8px 0;
    margin-bottom: 8px;
    text-align: center;
}

    .starbuy-drawer-promo-header-title span:before {
        content: '\e9e5';
        font-family: feather;
    }

.starbuy-drawer-promo-header-description {
    padding: 16px;
    background-color: var(--starbuyColourOne);
}

.starbuy-drawer-promo-header-description-top {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.25em;
}

.starbuy-drawer-promo-header-description-bottom {
    color: #222;
    font-size: 0.9em;
}

.starbuy-drawer-divider {
    width:100%;
    float:left;
    height:1px;
    background: var(--starbuyColourTwo);
    margin: 16px 0;
}


/**** DRAWER 1 - PRODUCT ***************************************************************************/
.starbuy-list-element {
    padding: 16px 48px 16px 16px;
    font-size: 1.25em;
    margin-bottom: 16px;
    position: relative;
    color: var(--starbuyColourThree);
    background-color: var(--starbuyColourOne);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    -moz-align-items: stretch;
}

    .starbuy-list-element:hover {
        background-color: var(--starbuyColourTwo);
    }

    .starbuy-list-element[data-applied="true"] {
        color: var(--starbuyColourThreeApplied);
        background-color: var(--starbuyColourTwoApplied);
        cursor: auto;
    }

        .starbuy-list-element[data-applied="true"]:hover {
            background-color: var(--starbuyColourTwoApplied);
        }

    .starbuy-list-element [class*="starbuy-list-element-"] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 32px;
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        align-content: center;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        font-size: 0.8em;
    }

    .starbuy-list-element .starbuy-list-element-arrow {
        background-color: var(--starbuyColourTwo);
        color: var(--starbuyColourThree);
    }

        .starbuy-list-element .starbuy-list-element-arrow:after {
            content: '\e910';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-check {
        background-color: var(--starbuyColourTwoApplied);
        color: var(--starbuyColourThreeApplied);
    }

        .starbuy-list-element .starbuy-list-element-check:after {
            content: '\e93d';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-prefix {
        background-color: var(--starbuyColourThree);
        color: white;
        position: relative;
        padding: 0 8px;
        margin: 0 16px 0 0;
        width: auto;
        top: auto;
        bottom: auto;
        left: auto;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-size: 10px;
    }

        .starbuy-list-element .starbuy-list-element-prefix:before {
            content: '\e9e5';
            font-family: feather;
            margin-right: 4px;
        }

.basket-itemrow-offers .starbuy-product-preview {
    float: left;
    margin: 0 8px 16px 0;
}

/**** DRAWER 2 - OFFER ***************************************************************************/

.starbuy-drawer-single-product {
}

    .starbuy-drawer-multi-products,
    .starbuy-drawer-single-product,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-single-product .starbuy-drawer-addtobasket,
    .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
    .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
    .starbuy-drawer-viewalloffers-backbutton,
    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > a,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > div {
        width: 100%;
        float: left;
    }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
        .starbuy-drawer-viewalloffers-backbutton {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .starbuy-drawer-viewalloffers-backbutton {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
        .starbuy-drawer-viewalloffers-backbutton {
            color: white;
            background-color: var(--starbuyColourThree);
            text-align: center;
            border-radius: 3px;
            padding: 8px 0;
            font-size: 0.8em;
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
            .starbuy-drawer-viewalloffers-backbutton {
                background-color: white;
                border: 1px solid;
                border-color: var(--starbuyColourThree);
                color: var(--starbuyColourThree);
            }

                .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget:hover,
                .starbuy-drawer-viewalloffers-backbutton:hover {
                    background-color: var(--starbuyColourThree);
                    color: white;
                }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook {
            color: var(--starbuyColourThree);
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook:after {
                content: '\e966';
                font-family: feather;
                margin-left: 4px;
                display: inline-block;
            }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
        margin: 0 0 16px 0;
        display: block;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        margin: 0 0 8px 0;
    }

    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        min-height: calc(1.55em * 3);
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price > div,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price > div {
            float: left;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy {
            color: var(--starbuyColourThree);
            margin: 0 16px 0 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy {
            color: #999;
            text-decoration: line-through;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer {
            width: 100%;
            font-size: 0.7em;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-dropdown-qty {
            display: none !important;
        }

    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 16px 0 0 0;
    }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct {
            font-size: 0.8em;
            padding: 4px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
            font-size:0.9em;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
            font-size: 0.8em;
        }

    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 32px;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion {
        padding: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-single-product {
        padding: var(--padding, 32px);
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-promo-header {
        padding: var(--padding, 32px);;
        margin-bottom: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-viewalloffers-backbutton {
        margin-inline: var(--padding, 32px);
        width: calc( 100% - calc( var(--padding, 32px) * 2 ));
    }

    .starbuy-drawer[data-drawer-number="2"] :is(.starbuy-drawer-top-buttons, .starbuy-drawer-multi-products-items) {
        padding: 0 var(--padding, 32px) var(--padding, 32px) var(--padding, 32px);
        overflow: hidden;
    }

    .starbuy-drawer-bottom-buttons {
        width: 100%;
        float: left;
        display: block;
        padding: var(--padding, 32px);
        background: var(--starbuyColourTwo);
    }

    .starbuy-drawer-top-buttons {
        background: transparent;
    }

    .starbuy-drawer-bottom-buttons :is(.starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget, .starbuy-drawer-viewalloffers-backbutton) {
        background: var(--starbuyColourThree);
        color: #fff;
        text-transform: uppercase;
    }

@media screen and (max-width: 768px) {
    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 16px;
    }
}

/**** PREVIEWS ***************************************************************************/

#detailfast-starbuys {
    width: 100%;
}

.starbuy-product-preview,
.starbuy-faf-preview {
    border: 1px solid;
    border-color: var(--starbuyColourThree);
    background: white;
    border-radius: 3px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    line-height: 150%;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    .starbuy-product-preview:hover {
        background: var(--starbuyColourOne);
    }

    .starbuy-product-preview > div,
    .starbuy-faf-preview > div {
        padding: 16px;
    }

    .starbuy-faf-preview {
        max-width: 100%;
        line-height: 135%;
        margin: 0 0 16px 0;
        background-color: var(--starbuyColourOne);
    }

    .starbuy-product-preview .starbuy-product-preview-header,
    .starbuy-faf-preview .starbuy-faf-preview-header {
        background: var(--starbuyColourThree);
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

        .starbuy-faf-preview .starbuy-faf-preview-header {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            justify-content: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            align-content: center;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
        }

            .starbuy-product-preview .starbuy-product-preview-header .starbuy-product-preview-header-star:after,
            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                content: '\e9e5';
                font-family: feather;
            }

            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                margin-right: 3px;
            }

    .starbuy-product-preview .starbuy-product-preview-message {
        flex-grow: 1;
    }

        .starbuy-product-preview .starbuy-product-preview-message strong {
            text-transform: uppercase;
            color: var(--starbuyColourThree);
            font-weight: normal;
        }

    .starbuy-product-preview .starbuy-product-preview-link {
        color: var(--starbuyColourThree);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

.starbuy-faf-preview .starbuy-faf-preview-message-lead {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.5em;
    line-height: 1.5em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-size:1.2em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-explainer {
    font-size: 0.9em;
    margin: 8px 0 0 0;
}

@media screen and (max-width: 767.99px) {
    .starbuy-drawer-promo-header-title {
        padding: 4px 0;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promo-header-description {
        padding: 8px;
    }

    .starbuy-drawer-promo-header-description-top {
        font-size: 1em;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promotion {
        padding: 16px;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image .imgCtr:after {
            padding-bottom: 75%;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-msg {
        font-size: 0.8em;
    }

    .starbuy-product-preview,
    .starbuy-faf-preview {
        flex-wrap: wrap;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
    }

        .starbuy-product-preview > div {
            width: 100%;
            padding: 0 8px;
            text-align: center;
            line-height: 32px;
        }

        .starbuy-faf-preview > div {
            width: 100%;
            padding: 8px;
        }

        .starbuy-product-preview .starbuy-product-preview-link {
            border-top: 1px dotted;
            border-color: var(--starbuyColourTwo);
            color: var(--starbuyColourThree);
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-lead {
            font-size: 1.25em;
            line-height: 1.25em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
            font-size: 1em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-explainer {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .starbuy-faf-preview[data-view-all-explainer="1"] .starbuy-faf-preview-message-explainer {
            text-overflow: unset;
            white-space: unset;
            overflow: unset;
        }

}
.quicklookitem-wrapper,
.quicklookitem-inner {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.quicklookitem-wrapper {
    z-index: 3000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
}

    .quicklookitem-wrapper[data-state="open"] {
        opacity: 1;
        overflow: auto;
    }

    .quicklookitem-wrapper .quicklookitem-inner {
        width: 1250px;
        height: auto;
        max-height: none;
        max-width: calc(100vw - 32px);
        margin: 16px;
        background: white;
        -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        top: 10px;
        position: relative;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
        top: 0px;
    }

.quicklookitem-inner .quicklookitem-inner-left,
.quicklookitem-inner .quicklookitem-inner-right {
    width: 50%;
    float: left;
}

.quicklookitem-inner-right {
    padding: 32px;
    position: relative;
}

    .quicklookitem-inner-right[data-isstarbuy="true"] {
        padding: 80px 32px 32px 32px;
        background-color: var(--starbuyColourOne);
    }

        .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: white;
            background-color: var(--starbuyColourThree);
        }

    .quicklookitem-inner-right > div {
        width: 100%;
        float: left;
        margin-bottom: 16px;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---name {
        font-size: 1.25em;
        font-family: 'citrfontbold';
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---prices {
        font-size: 0.9em;
    }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices > div {
            float: left;
            margin-right: 8px;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy {
            color: var(--starbuyColourThree);
        }

            .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy + .quicklookitem-inner-right---prices-price {
                color: #999;
                text-decoration: line-through;
            }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy-explainer {
            color: var(--starbuyColourThree);
            font-size: 0.7em;
            width:100%;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-price {
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
            color: #999;
            text-decoration: line-through;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
        border: 1px solid #2f76ec;
        background: #e8f4ff;
        color: #2f76ec;
        padding: 8px;
        text-align: center;
        font-size: 0.9em;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        background: #2f76ec;
        color: white;
        border-radius: 4px;
        padding: 16px;
        text-align: center;
        display: block;
        float: left;
        width: 100%;
    }


.quicklookitem-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    background: black;
    cursor: pointer;
    z-index: 3001;
}

@media screen and (max-width : 1023px) {
    .quicklookitem-wrapper {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }

    .quicklookitem-inner .quicklookitem-inner-left,
    .quicklookitem-inner .quicklookitem-inner-right {
        width: 100%;
    }

    .quicklookitem-inner-right {
        padding: 16px;
    }

        .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button {
            width: auto;
            margin-top: 0;

        }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty-label,
            .quicklookitem-inner-right .add-to-cart-area-1 .add-to-cart-area-dropdown select {
                line-height: 36px;
                height: 36px;
            }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input {
                padding: 0 8px;
                width: 40px;
            }

        .quicklookitem-inner-right .add-to-cart-area-msg,
        .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
            font-size: 11px;
        }

        .quicklookitem-inner-right[data-isstarbuy="true"] {
            padding: 40px 16px 16px 16px;
        }

            .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
                height: 32px;
                line-height: 32px;
                font-size: 0.9em;
            }

        .quicklookitem-inner-right > div {
            margin-bottom: 8px;
        }

    .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div {
        background-size: cover !important;
    }

        .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div:after {
            padding-bottom: 80%;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        padding: 8px;
    }
}
 .imm-widget-anchor{
     display:flex !important;
     margin-bottom:0px !important;
     background: rgb(255, 255, 255);
 }
 .finance-output{
     width:100%;
 }
 .finance-output iframe{
     margin:0px auto;
     width:90% !important;
 }
.finance-hidden-price{
    display:none;
}
.view-all-link-container {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 0 1.25rem;
    width: 100%;
}
.view-all-link {
    font-size: 1rem;
    color: #0077cc;
}
.view-all-link:hover,
.view-all-link:focus {
    color: #004b99;
    text-decoration: underline;
}
/* Not found Page */
.not-found-page {
    display: flex;
    justify-content: center;
    width: 100%;
}

.not-found-container {
    align-items: center;
    background: #fff;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem;
    position: relative;
    width: 100%;
    z-index: 0;
    text-align: center;
}

    .not-found-container::before {
        align-items: center;
        bottom: 0;
        color: #f7f7f7;
        content: '404';
        display: flex;
        font-size: 20rem;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

.not-found-container-has-background::before {
    content: '';
}

.not-found-title {
    font-size: 4rem;
}

.not-found-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Classes only found in the default contents for the page. These may not be present, if the contents has been overridden. */
.not-found-paragraph-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.not-found-first-paragraph,
.not-found-second-paragraph {
    font-size: 2rem;
}

.not-found-link-container {
    display: flex;
    flex-direction: column;
}

.not-found-homepage-link {
    background-color: cornflowerblue;
    border-radius: 0.5rem;
    color: #fff;
    padding: 1rem;
}
/*
 *********************************
 * Collections Landing Page Styles
 *********************************
 */

 :root {
    --collections--content-search-gap: 2rem;
    --collections--clear-btn-color: #D54939;
    --collections--search-wrapper-count-color: #2f76ec;
    --collections--content-grid-columns: 1fr;
 }

 .filters-open {
    overflow-y: hidden
}

 .content-collection-landing-page {
    display: flex;
    justify-content: center;
}

.content-collection-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 90%;
}

#content-collection-search {
    grid-template-columns: var(--collections--content-grid-columns);
    gap: 3rem;
    display: grid;
    background: #fff;
}

#content-collection-search .search-column {
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: var(--collections--content-search-gap);
}

#content-collection-search .search-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

#content-collection-search .search-wrapper:nth-child(n+2) {
    padding-top: var(--collections--content-search-gap);
    border-top: 1px solid #ccc;
}

#content-collection-search .search-wrapper:last-child {
    margin-top: auto;
}

#content-collection-search  .search-wrapper h4 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 150%;
}

#content-collection-search  .search-wrapper > div {
    grid-row: 2;
    grid-column: 1 / -1;
}

#content-collection-search .tags {
    max-height: 33vh;
    overflow-y: auto;
}

.content-collection-title {
    margin: 0;
}

.content-collection-no-results-message {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}

.content-collection-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.content-collection-card {
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px -1px #eee;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 150ms ease-in-out;
    padding: 0px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    background-color: #f9f9f9;
}

.content-collection-info-container {
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-collection-card:hover {
    background: #fcfcfc;
    transform: scale(1.01);
}

.content-collection-card-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
}

.content-collection-image-container {
    width: 100%;
    padding-top: 75%;
    position: relative;
    background-color: #e5e5e5;
    overflow: hidden;
}

    .content-collection-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.content-collection-tag-container {
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.25rem;
}

.content-collection-landing-page-content {
    width: 100%;
}

    .content-collection-landing-page-content[data-isempty="True"] {
        display: none;
    }

.search-tag, .content-collection-tag {
    border-radius: 0.75rem;
    border: 1px solid #2f76ec;
    color: #2f76ec;
    font-size: 0.75rem;
    padding: 0.4rem;
    transition: all 150ms ease-in-out;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.search-tag:hover {
    background: #1563e0;
    color: white;
    cursor: pointer;
}

.content-collection-filter-tag {
    background: #2f76ec;
    color: #fff;
}

.search-container {
    position: relative;
}

.clear-btn, .clear-tags-button {
    font-size: 14px;
    cursor: pointer;
}

.clear-btn {
    background: var(--collections--clear-btn-color);
    border-radius: 100%;
    color: #fff;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    z-index: 10;
}

.clear-tags-button {
    color: var(--collections--clear-btn-color);
    text-decoration: underline;
}

.content-collection-description {
    font-size: 14px;
    color: #555;
}

.content-collection-date-created {
    font-size: 12px;
    color: #777;
    margin-top: auto;
}

.content-collection-hidden-element {
    display: none !important;
}

.search-wrapper-count {
    width: 3rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--collections--search-wrapper-count-color);
}


a.filter-button {
    text-align: center;
    padding: 0.75rem;
    color: #666;
    border: 1px solid;
    cursor: pointer;
}

a.filter-button:hover {
    border: 1px solid;
}

#TagSelectArea .tag-toggle-filters {
    display: flex;
    gap: 0.5rem;
    flex: 1 0 100%;
    padding: 0.5rem;
    background: #f4f4f4;
    margin-bottom: 1rem;
}

.content-collection-filter-type-button {
    flex:1;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #f4f4f4;
    color: #000;
    border: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem;
    text-transform: uppercase;
    border-radius: 0.25rem;
    height: auto;
    line-height: 100%;
    cursor: pointer;
}

.content-collection-filter-type-button:hover {
    background: #1563e0;
    color: #fff;
 }

.content-collection-filter-type-button.content-collection-filter-type-button-active {
    background: #2f76ec;
    color:white;
    cursor: default;
}

.collection-filter-actions {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    gap: 0.5rem;
    margin-top: auto;
}

.collection-filter-actions > span {
    cursor: pointer;
    height: 48px;
    text-align: center;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: #2f76ec;
    color: #fff;
}

.ffclose:before {
    font: normal normal normal 14px / 1 feather;
    content: "\e117";
    color: #ffffff;
    line-height: 48px;
}

 #content-collection-search > .search-column {
    display: none;
 }

.filters-open #content-collection-search > .search-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100;
    padding: 2rem;
    display: flex;
}

.content-collection-nopointer {
    pointer-events: none;
}

.content-collection-nopointer.collection-filter-actions ~.search-wrapper-count {
    border-color: #ccc;
}

.content-collection-nopointer.collection-filter-actions > span {
    background: #ccc;
}

@media screen and (min-width: 768px) {
    .content-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --collections--content-grid-columns: 300px 1fr;
    }

    #content-collection-search > .search-column {
        display: flex;
     }

    #content-collection-search #collections-related-wrapper.search-wrapper,
    #filter-button {
        display: none;
    }
}

@media screen and (min-width: 1440px) {
    .content-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1660px) {
    .content-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/*
 *******************************
 * Collection Article Styles
 *******************************
 */

 :root {
    --collection-content-width: 80%;

    --collection-image-aspect-ratio: 2.35 / 1;
    --collection-image-border-radius: 0.5rem;

    --collection-content-image-border-radius: 0.5rem;
    --collection-content-link-color: #2163d6;
 }

 div[data-type="collection"] #FAFImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

div[data-type="collection"] #FAFImg .collection-image {
    height: auto;
    width: 100%;
    aspect-ratio: var(--collection-image-aspect-ratio, 2.35 / 1);
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
    display: flex;
    margin: 0;
    border-radius: var(--collection-image-border-radius, 0.5rem);
}

div[data-type="collection"] #FAFDesc {
    display: block;
    max-width: var(--collection-content-width, 80%);
    margin: auto;
    background: transparent;
    margin-block: 2rem;
}

    div[data-type="collection"] #FAFDesc img {
        width: 100%;
        height: auto;
        border-radius: var(--collection-content-image-border-radius, --collection-image-border-radius, 0.5rem);
    }

    div[data-type="collection"] #FAFDesc a {
        color: var(--collection-content-link-color, #2163d6);
        text-decoration: underline;
    }

@media screen and (max-width: 500px) {
    :root {
        --collection-content-width: 100%;
        --collection-image-aspect-ratio: 1;
    }
}
#aiRecCmdPaletteBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPaletteBackdrop.cmd-palette-visible {
        opacity: 1;
    }

@property --cmd-gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#aiRecCmdPalettePanel {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    max-height: 70vh;
    border: 4px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--cmd-gradient-angle), #DAE343, #00AEEC, #DAE343) border-box;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.35);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: cmdGradientRotate 3s linear infinite;
    width: min(90vw, 1024px);
}

@keyframes cmdGradientRotate {
    to {
        --cmd-gradient-angle: 360deg;
    }
}

#aiRecCmdPalettePanel.cmd-palette-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#aiRecCmdPalettePanel .cmd-palette-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
}

#aiRecCmdPalettePanel .cmd-palette-search-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-input,
#aiRecCmdPalettePanel .cmd-palette-textarea {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    color: #111827;
    background: transparent;
    line-height: 1.5;
}

#aiRecCmdPalettePanel .cmd-palette-textarea {
    padding: 1rem;
    resize: none;
}

    #aiRecCmdPalettePanel .cmd-palette-input::placeholder,
    #aiRecCmdPalettePanel .cmd-palette-textarea::placeholder {
        color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-search-btn {
    display: none;
}

#aiRecCmdPalettePanel .cmd-palette-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: cmdPaletteSpin 0.6s linear infinite;
}

@keyframes cmdPaletteSpin {
    to {
        transform: rotate(360deg);
    }
}

#aiRecCmdPalettePanel .cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#aiRecCmdPalettePanel .cmd-palette-result {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

    #aiRecCmdPalettePanel .cmd-palette-result:hover,
    #aiRecCmdPalettePanel .cmd-palette-result.cmd-palette-result-active {
        background-color: #f9fafb;
    }

    #aiRecCmdPalettePanel .cmd-palette-result:last-child {
        border-bottom: none;
    }

#aiRecCmdPalettePanel .cmd-palette-result-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #f9fafb;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-info {
    flex: 1;
    min-width: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#aiRecCmdPalettePanel .cmd-palette-result-brand {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-meta {
    text-align: right;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-price {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-original {
    font-weight: 400;
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0.375rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-sale {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-in {
    color: #16a34a;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-out {
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-empty,
#aiRecCmdPalettePanel .cmd-palette-error {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-error {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.75rem;
    color: #9ca3af;
    border-radius: 0 0 10px 10px;
}

#aiRecCmdPalettePanel .cmd-palette-footer-logo {
    height: 20px;
    width: auto;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPalettePanel .cmd-palette-footer-logo:hover {
        opacity: 1;
    }

#aiRecCmdPalettePanel .cmd-palette-footer-hints {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

#aiRecCmdPalettePanel .cmd-palette-footer kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1.4;
    box-shadow: 0 1px 0 #d1d5db;
}

#aiRecCmdPalettePanel .cmd-palette-model-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter,
#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select,
#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    box-sizing: border-box;
    height: 32px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 4px;
    outline: none;
    margin: 0;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    border: none;
    color: #374151;
    background: #fff;
}

    #aiRecCmdPalettePanel .cmd-palette-model-filter:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select {
    flex: 1;
    min-width: 0;
    padding: 0 22px 0 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
    border: 1px solid #d1d5db;
    color: #374151;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-provider-select:focus,
    #aiRecCmdPalettePanel .cmd-palette-model-select:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    flex-shrink: 0;
    padding: 0 10px;
    background: #323e48;
    border: 1px solid #323e48;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    min-height: auto;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-edit-sp-btn:hover {
        background: #435361;
        border-color: #435361;
    }

.cmd-palette-sp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 55vw;
    min-width: 500px;
    height: 100vh;
    z-index: 100000;
    background: #1e1e1e;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #2d2d2d;
    flex-shrink: 0;
    background: #323e48;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-title {
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions button {
        width: auto;
        height: auto;
        margin: 0;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    background: #252526;
    color: #ccc;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn:hover {
        background: #2a2d2e;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save {
    background: #0e639c;
    border-color: #0e639c;
    color: #fff;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save:hover {
        background: #1177bb;
        border-color: #1177bb;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.6;
    border: none;
    padding: 2rem;
    resize: none;
    outline: none;
    overflow-y: auto;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea,
    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea:hover {
        background: #303234;
        color: #fff;
        border-radius: 0;
    }

@media (max-width: 680px) {
    #aiRecCmdPalettePanel {
        top: 1rem;
        width: auto;
        left: 1rem;
        right: 1rem;
        transform: translateY(-12px);
        max-width: none;
    }

        #aiRecCmdPalettePanel.cmd-palette-visible {
            transform: translateY(0);
        }
}
.recommendations-container {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    position: relative;
    width: 100%;
    --recommendations-gap: 1rem;
    --recommendations-padding: 1rem;
}

.recommendations-repeater-prev,
.recommendations-repeater-next {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    cursor: pointer;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    top: 50%;
    transition: color 0.25s ease-in-out;
    width: 1.5rem;
    z-index: 10;
}

    .recommendations-repeater-prev:hover,
    .recommendations-repeater-next:hover {
        color: dodgerblue;
    }

    .recommendations-repeater-prev[aria-disabled="true"],
    .recommendations-repeater-next[aria-disabled="true"] {
        display: none;
    }

.recommendations-repeater-prev {
    left: 0.5rem;
}

    .recommendations-repeater-prev:before {
        content: '\e941';
        font-family: 'feather';
    }

.recommendations-repeater-next {
    right: 0.5rem;
}

    .recommendations-repeater-next:before {
        content: '\e942';
        font-family: 'feather';
    }

.recommendations-repeater {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    gap: var(--recommendations-gap);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--recommendations-padding);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    --recommendations-page-size: 6;
}

    .recommendations-repeater::-webkit-scrollbar {
        display: none;
    }

body.new-basket .basket-wrapper a.recommendations-item,
a.recommendations-item,
.recommendations-item {
    border: 1px solid #ededed;
    border-radius: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-sizing: border-box;
    color: #000;
    display: flex;
    flex: 0 0 calc((100cqi - 2 * var(--recommendations-padding) - (var(--recommendations-page-size) - 1) * var(--recommendations-gap)) / var(--recommendations-page-size));
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    transition: transform 0.25s ease-in-out;
}

    .recommendations-item:hover {
        transform: scale(1.02);
    }

    .recommendations-item .imgCtr {
        border: 1px solid #ededed;
        border-radius: 2rem;
    }

.recommendations-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .recommendations-item-details .pricingRepeater.fafSalePR {
        flex-wrap: wrap;
        line-height: normal;
    }

.recommendations-page-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.recommendations-page-dot {
    background: #ccc;
    border-radius: 100%;
    cursor: pointer;
    height: 0.5rem;
    transition: background 0.25s ease-in-out;
    width: 0.5rem;
}

    .recommendations-page-dot:hover {
        background: #999;
    }

    .recommendations-page-dot[aria-current="true"] {
        background: #000;
    }

.recommendations-repeater-footer {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: end;
}

@keyframes recommendations-border-rotate {
    from {
        --recommendations-border-angle: 0deg;
    }

    to {
        --recommendations-border-angle: 360deg;
    }
}

@property --recommendations-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.recommendations-repeater-footer-badge {
    animation: recommendations-border-rotate 2s linear infinite;
    border-radius: 0.5rem;
    letter-spacing: 0.1rem;
    padding: 0.15rem 0.4rem;
    position: relative;
}

    .recommendations-repeater-footer-badge::before {
        animation: recommendations-border-rotate 3s linear infinite;
        background: conic-gradient(from var(--recommendations-border-angle), #dae343, #00aeec, #dae343);
        border-radius: inherit;
        content: '';
        inset: 0;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 1.5px;
        position: absolute;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
    }

@media only screen and (max-width: 1279px) {
    .recommendations-repeater {
        --recommendations-page-size: 4;
    }
}

@media only screen and (max-width: 899px) {
    .recommendations-repeater {
        --recommendations-page-size: 3;
    }
}

@media only screen and (max-width: 768px) {
    .recommendations-repeater {
        --recommendations-page-size: 2;
    }
}
/* CSS Document *//* ==================== 01-CC-Brand.css ======================================
   THE RESKIN SURFACE. This is the file you fill in to make a new client.

   It loads first. Everything after it - 02's derived ramps, 03-08's component
   tokens, the homepage stripes, the PLP and PDP - reads from here. Nothing here
   reads from anywhere else, which is what makes it safe to rewrite wholesale.

   FOUR BLOCKS, in the order you fill them:
     TYPE ROLES   which font file does which job
     BRAND        the raw colour, radius and button values
     COPY         every word the stylesheets write
     SWITCHES     choices between known options (only the differences)

   Lines tagged with a SET THIS marker are placeholders and will look wrong until
   replaced. Everything else is a sane default you may leave alone. Delete the
   marker once you have set the values under it - that is how you signal the
   decision was made rather than skipped.

   (This paragraph deliberately does not reproduce the marker exactly. Lint
   matches the arrowed form, and prose that spelled it out made the check fire on
   its own instructions, so a correctly filled file could never pass.)

   RULES
   - Raw values only. No selectors, no rules. If you need a rule, it belongs in
     99-CC-Custom.css, and read that file's header first.
   - Never hardcode a colour, radius, shadow or font size anywhere else. If a
     value is missing, add a token to the component that owns it, not here.
   - tools/lint.ps1 fails while any SET THIS marker remains.

   WHY EVERY BLOCK BELOW USES `:root:root`, NOT `:root`
   This file loads FIRST (01), and the component files that declare a token's
   default load AFTER it (03 nav, 05 carousels). Two `:root` declarations of the
   same token have identical specificity, so the LATER one wins - which means a
   plain `:root` here would be silently overridden by the very default it is
   meant to replace. Thirteen switches shipped inert that way before this was
   caught, each one a real visual regression that no error message reported.

   `:root:root` is (0,2,0) and beats a component's `:root` at (0,1,0) regardless
   of load order, so the reskin surface wins by construction. It is deliberately
   the ONE place in the kit that plays a specificity trick, and it is confined to
   token declarations.

   It does not disturb the nav state machinery: the Solid State and
   transparent-over-hero blocks in 03 are body-level selectors at (0,4,1) and
   above, so they still re-point nav tokens per state exactly as before.

   Keep `:root:root` on any block you add. lint.ps1 checks for it.
   =========================================================================== */


/* ===========================================================================
   1. TYPE ROLES
   ---------------------------------------------------------------------------
   The three (optionally four) typographic jobs. Every rule in the kit names a
   ROLE, never a font, so a reskin repoints a role here and nothing else is
   edited. The slots themselves are declared in 02 and map to files in /font/.

     --font-body     running text, inputs, CTA labels
     --font-bold     semantic headings (h1-h6) and bold UI emphasis
     --font-display  the editorial face - big stripe statements, feature titles
     --font-accent   optional fourth face; leave pointed at body if unused

   HARD CONSTRAINT - font/body.* and font/bold.* are NOT optional.
   The platform's own stylesheets (Modules/CSS/**, citr-*.css at the site root,
   ~186 declarations) name `citrfontreg` and `citrfontbold` LITERALLY. Those
   rules are outside this tree and cannot be repointed, so both slots must
   always contain a real font file or platform-styled text loses its face.
   Leave these two role tokens on their matching slots; repointing them only
   splits our typography away from the platform's.

   `citrfontboldalt` (display) and `citrfontaccent` are ours alone - no platform
   rule names them, so those slots are genuinely optional.

   A client with one text face for both body and bold ships that file twice, as
   font/body.* and font/bold.*. The duplication is required, not waste.
   =========================================================================== */
:root:root {
    --font-body:    'citrfontreg';
    --font-bold:    'citrfontbold';
    /* No distinct editorial face in the mockup: every heading and stripe
       statement renders at the same DM Sans Medium as semantic bold, so
       display repoints to bold rather than shipping a duplicate font/display.*
       pair the design never asked for. */
    --font-display: var(--font-bold);
    --font-accent:  var(--font-body);
}


/* ===========================================================================
   2. BRAND
   ---------------------------------------------------------------------------
   Raw values. 02-CC-Global.css derives shade, opacity, border, overlay and
   shadow ramps from these with oklch(), so you set a handful of colours and the
   whole system follows. Do not add derived values here.
   =========================================================================== */
:root:root {
    /* Core palette. Source: RUNW homepage mockup - "brandColor" (#152428) is
       the only accent named anywhere in it (CTA fill, "Shop all" text-link).
       No separate hover/focus shade or add-to-cart accent appears in the
       mockup, so --brand-focus and --brand-accent default to --brand until a
       hover state or PDP design supplies real values - flat, not wrong. */
    --brand: #152428;
    --brand-dark: var(--brand-focus);
    --brand-accent: #152428;
    --brand-link: #152428;
    --brand-focus: #152428;
    --sale: #c8102e;

    /* Ink on brand surfaces. Not stated in the mockup (the CTA button's label
       carries no explicit colour in the export); white is the only value that
       is readable against #152428, so it stands as the working assumption
       until confirmed. */
    --text-on-brand: #FFFFFF;
    --text-on-accent: #FFFFFF;

    /* Canvas and ink. Source: mockup's "Dark" (#1C1F2C) and white canvas.
       Two near-white greys appeared in the mockup (#F3F3F3 hero-card panel,
       #F5F5F5 product-tile) and were collapsed to one --background-raised
       value rather than kept as two tokens. */
    --background: #FFFFFF;
    --background-raised: #F5F5F5;
    --text: #1C1F2C;
    --text-inverse: #FFFFFF;

    /* Geometry */
    --global-radius: 3px;
    --global-innerRadius: 2px;
    --global-border: 1px solid var(--border-light);

    /* CTA type ramp - one typographic voice for every button and link-text.
       Retune here, not in page CSS. */
    --global-buttonSize: var(--fontSize-md);
    --global-buttonFontFamily: var(--font-body);
    --global-buttonLetterSpacing: 0px;
    --global-buttonLineHeight: 1.2;
    --global-buttonTextTransform: none;
    --global-buttonColor: var(--text-on-brand);
    --global-buttonBorder: 1px solid var(--brand-dark);
    --global-buttonRadius: var(--global-radius);
    --global-buttonBackground: var(--brand-dark);
    --global-buttonPadding: 0.95rem 1.7rem;
    --global-buttonBackgroundHover: var(--background);
    --global-buttonColorHover: var(--text);
    --global-buttonBorderHover: 1px solid var(--brand-dark);
    --global-buttonPaddingHover: 0.65rem 2.2rem;
    --global-buttonRadiusHover: var(--global-radius);
    --global-buttonTransition: var(--global-transition);

    /* Add-to-cart, which usually wants the accent rather than the brand */
    --global-addToCart-background: var(--brand-accent);
    --global-addToCart-border: none;
    --global-addToCart-color: var(--text-on-accent);
    --global-addToCart-backgroundHover: oklch(from var(--brand-accent) calc(l + 0.2) c h);
    --global-addToCart-borderHover: none;
    --global-addToCart-colorHover: var(--text-on-accent);

    /* ---- Nav bar: SOLID state ------------------------------------------
       INERT UNLESS YOU OPT IN. These four only do anything on a page carrying
       class="cl-nav-over-hero" on <body>, which is off by default. On a normal
       solid-bar site the bar reads --navBackground in every state and you can
       ignore this block entirely.

       Where you have opted in: the bar floats transparent at rest and turns
       solid two ways - scrolled past 20px, or a panel is open - and BOTH read
       this one set, so they can never disagree.

       Only two things to think about:
           --navSolid-background   the fill
           the other three         everything sitting on it: links, their hover,
                                   the icons, and the masked wordmark (which
                                   follows --navSolid-linksHover)

       To invert to a DARK solid bar, change these four and nothing else:
           --navSolid-background: var(--brand-dark);
           --navSolid-links:      oklch(from var(--text-inverse) l c h / 0.85);
           --navSolid-linksHover: var(--text-inverse);
           --navSolid-icons:      var(--text-inverse);

       Values must name RAW colours, never var(--navLinks) and friends: 03 sets
       --navLinks: var(--navSolid-links), so pointing back would be a cyclic
       reference and both sides would resolve to invalid.

       Interior pages are NOT affected by any of this - they use --navBackground
       (03) in every state. */
    --navSolid-background: var(--text-inverse);
    --navSolid-links: oklch(from var(--brand-focus) l c h / 0.85);
    --navSolid-linksHover: var(--brand-focus);
    --navSolid-icons: var(--brand-focus);
}


/* ===========================================================================
   3. COPY
   ---------------------------------------------------------------------------
   Every word the CSS puts on the page. Read that twice: these are strings the
   STYLESHEET writes, not content the client edits in the back office.

   They exist because the platform emits the element and we cannot re-template
   it - there is no markup to put words into, so a ::before is the only way in.
   That is fine; what is not fine is those words hiding inside a framework file.
   Before this block existed, 06-CC-Footer.css shipped a previous client's
   newsletter blurb about "the latest bikes", and only a matching override
   buried in the client layer stopped it reaching production.

   Each consumer reads var(--copy-x, "<neutral default>"), so a token you leave
   unset degrades to something bland and correct rather than blank.

   TWO tokens intentionally default to nothing rather than to words:
     --copy-signature         defaults to `none`, removing the pseudo-element
                              outright. Decorative; unset means no line at all.
     --copy-statementEyebrow  defaults to "" - an EMPTY STRING, not `none`. The
                              same ::before also draws the statement stripe's
                              opening hairline via border-top, so `none` would
                              delete the rule and take the hairline with it.

   Anything a client should be able to edit themselves belongs in a banner
   collection or an FAF repeater, NOT here.
   =========================================================================== */
:root:root {

    /* Footer newsletter - platform-emitted, read by 06. No client-specific
       wording supplied yet; kept on the framework's neutral default. */
    --copy-newsletterTitle: "Join Our Newsletter";
    --copy-newsletterBody: "Sign up for news and offers.";

    /* Homepage stripes - no CMS field exists for either. Neither the
       statement stripe nor a signature flourish is used on this homepage. */
    --copy-statementEyebrow: "";
    --copy-signature: none;

    /* PDP - platform-emitted product page furniture */
    --copy-otherColours: "Other Colours Available";
    --copy-rrp: "RRP ";

    /* PLP - platform-emitted listing furniture and stock states */
    --copy-addToCart: "Add To Cart";
    --copy-stockNotification: "Stock Notification";
    --copy-specialOrder: "Special Order";
    --copy-comingSoon: "Coming Soon";
    --copy-search: "Search";
}


/* ===========================================================================
   4. SWITCHES
   ---------------------------------------------------------------------------
   Choices between known options. Each was a rule-level override in a client
   layer before; each is now a value, so the opposite choice is one line here
   rather than a block of CSS somewhere else.

   Only DIFFERENCES from the framework default need to appear. The defaults live
   with the component that owns them - 03 for the bar, 05 for carousels - and
   each is documented there. Deleting a line here returns that decision to the
   framework default; it does not break anything.

   The block below is COMMENTED OUT: a fresh build starts on framework defaults
   and switches on only what the design actually asks for. Uncomment what you
   need.
   =========================================================================== */
:root:root {

    /* --- Nav bar (defaults in 03) ---------------------------------------- */

    /* No accent seam under the bar. Default is a 2px brand-light rule. */
    /* --navBorderBottom: 0; */

    /* Nav link type. Defaults: --fontSize-sm, normal tracking, and the CMS
       author's own capitalisation. */
    /* --nav-fontSize: var(--fontSize-xs); */
    /* --navItemsLetterSpacing: 0.1em; */
    /* --navItemsTextTransform: uppercase; */

    /* Disable the underline-draw hover device on nav links. Hover feedback
       then comes from the --navLinks -> --navLinks-hover contrast. */
    /* --navUnderline-display: none; */

    /* Hide the platform CTA strip above the bar (TopSubBanner.ascx). */
    /* --ctaStrip-display: none; */

    /* Brand assets are PATHS, defaulted in 03. A reskin normally just replaces
       the files under /layout/generalLyout/. Repoint only if the client's asset
       layout differs. */
    /* --logo: url('/layout/generalLyout/logo.svg'); */
    /* --icon-bag: url('/layout/generalLyout/icons/bag.svg'); */
    /* --icon-account: url('/layout/generalLyout/icons/account.svg'); */
    /* --icon-search: url('/layout/generalLyout/icons/search.svg'); */
    /* --navIconSize: 22px; */

    /* --- Carousels (defaults in 05) -------------------------------------- */

    /* Dashes instead of dots. Defaults are an 8px marker that widens active. */
    /* --splidePaginationWidth: 1.5rem; */
    /* --splidePaginationHeight: 2px; */
    /* --splidePaginationRadius: 0; */
    /* --splidePaginationWidthActive: 2.5rem; */

    /* Quiet arrows with no bounce. Scale 1 disables the hover scale; the
       hover colour matching the rest state makes hover a gentle dim. */
    /* --splideArrowHoverColor: var(--splideArrowColor); */
    /* --splideArrowHoverOpacity: 0.55; */
    /* --splideArrowHoverScale: 1; */
}
/* CC-Global.css */

/* Body offset for fixed navigation */
body {
    padding-top: 75px !important;
}

.wrapper {
    float: none !important;
}

@media screen and (max-width: 1024px) {
    body {
        padding-top: 48px !important;
    }
}


/* Font 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;
}


/* Design Tokens
   Brand tokens (--brand, --brand-dark, --brand-accent, etc.)
   live in CC-Brand.css. That file must load before this one --
   the oklch() derivations below depend on those variables. */

:root {

    /* Layout and Typography */

    --global-NavFooterWidth: 100% !important;

    /* Spacing */
    --global-padding: 1rem;
    --global-gap:     1rem;
    --global-margin:  1rem;

    /* Section rhythm -- the vertical tier every homepage stripe pads with.
       lg is the standard gap between stripes; sm is the tightened variant for a
       stripe that opens hard against the one above it, rather than sitting in
       its own air. Named no stripe on purpose: this is a framework file. */
    --section-padding-lg: 5rem;
    --section-padding-sm: 3rem;

    --text-wrap: 0.35rem;
    --text-block-wrap: 1.25rem;

    /* 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:  1.2rem;
    --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);

    /* 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);






    /* 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: 500;
    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;
    }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.current, .bannerTitle, .mainFont,
.ctaTitle, .boldfont {
    font-family: var(--font-bold);
    font-weight: 300;
    font-style: normal;
}


/* Disable empty-href links */

a[href=""] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}


/* Grid Row System */

[class*="grirow"] > div > a {
    position: relative;
    width: 100%;
    height: 100%;
}

[class*="grirow"] > div {
    display: grid;
}

.grirow1 > div { grid-template-columns: repeat(1, 1fr); }
.grirow2 > div { grid-template-columns: repeat(2, 1fr); }
.grirow3 > div { grid-template-columns: repeat(3, 1fr); }
.grirow4 > div { grid-template-columns: repeat(4, 1fr); }
.grirow5 > div { grid-template-columns: repeat(5, 1fr); }
.grirow6 > div { grid-template-columns: repeat(6, 1fr); }
.grirow7 > div { grid-template-columns: repeat(7, 1fr); }

/* Grid: mobile */
@media screen and (max-width: 767.9px) {
    [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); }
    .grirow2 > div            { grid-template-columns: repeat(1, 1fr); }
    .grirow4 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow5 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow6 > div            { grid-template-columns: repeat(2, 1fr); }
}

/* Grid: tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); }
    .grirow2 > div            { grid-template-columns: repeat(1, 1fr); }
    .grirow4 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow5 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow6 > div            { grid-template-columns: repeat(2, 1fr); }
}



/* Starbuys and Coupon Drawer */

.coupon-drawer-container[data-state="open"],
.starbuy-drawer {
    z-index: 999999 !important;
}


.cc-container {
    max-width: 1440px;
    margin: 0px auto;
}/* ==================== Navigation Variables ==================== */
:root {
    /* Navigation Typography */
    --nav-fontSize: var(--fontSize-sm);
    --dropdown-titleSize: var(--fontSize-base);
    --dropdown-linkSize: var(--fontSize-base);
    --login-titleSize: var(--fontSize-md);
    --login-linkSize: var(--fontSize-sm);
    --search-inputSize: var(--fontSize-base);
    --navPadding: 5px 20px;

    /* Mobile Typography */
    --mobile-navLinkSize: var(--fontSize-base);

    /* Navigation Width */
    --navWidth: var(--global-NavFooterWidth);

    /* General Navigation Colors */
    --navBackground: var(--background);
    --navIcons: var(--brand-dark);
    --navLinks: oklch(from var(--brand-dark) l c h / 0.85);
    --navLinks-hover: var(--brand-dark);

    /* 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: 1px solid #f4f4f4;
    --navItemsLetterSpacing: normal;
    --navItemsTextTransform: none;
    --navUnderline-display: block;
    --ctaStrip-display: block;

    /* Masked brand assets -- see the Brand Assets section at the foot of this
       file. These are PATHS, deliberately defaulted rather than left unset: a
       reskin replaces the FILES at these paths, exactly as it does with the
       fonts. Override a URL here only if a client's asset layout differs.

       They must not be left to fall back, because the failure mode is silent
       and bad: an unset var() in mask-image computes to `none`, while the
       companion `content: ""` has already blanked the platform icon-font
       glyph -- so the icons would disappear rather than degrade.

       (`generalLyout` is misspelled. It is the established folder name on
       every existing site and is baked into asset URLs; left as found.) */
    --navIconSize: 22px;
    --logo: url('/layout/generalLyout/logo.svg');
    --icon-bag: url('/layout/generalLyout/icons/bag.svg');
    --icon-account: url('/layout/generalLyout/icons/account.svg');
    --icon-search: url('/layout/generalLyout/icons/search.svg');

    /* Sale Link Styles */
    --sale-color: var(--text-inverse);
    --sale-background: var(--sale);
    --sale-border: 1px solid var(--sale);
    --sale-padding: .2rem .5rem;
    --sale-radius: var(--global-buttonRadius);

    /* Sale Link Hover States */
    --sale-colorHover: var(--text-inverse);
    --sale-backgroundHover: var(--sale);
    --sale-borderHover: 1px solid var(--sale);
    --sale-paddingHover: var(--global-buttonPadding);
    --sale-transition: var(--global-buttonTransition);

    /* Sale Dropdown */
    --saleDropdownBackground: var(--sale);
    --saleDropdownText: var(--text-inverse);

    /* Dropdown Colors */
    --dropdownBackground: var(--background);
    --dropdownAreaBackground: var(--background);
    --dropdownAreaTitle: var(--text);
    --dropdownAreaTitleUnderline: 1px solid oklch(from var(--text) l c h / 0.2);
    --dropdownAreaLinks: var(--text);

    /* Login Dropdown */
    --loginDropdownBackground: var(--background);
    --loginTitleColor: var(--text);
    --loginLinkColor: var(--text);

    /* Search -- the exposed field sits ON the nav surface, so it takes NAV ink,
       not inverse ink. All three were --text-inverse (white), which is
       invisible in the default white bar: the masked glyph paints with
       currentColor and the placeholder inherited the same white, so the icon
       and the placeholder text both vanished rather than degraded. A site with
       a dark bar retunes these three in 01-CC-Brand.

       --searchIconColor must name a raw-ish colour and 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 value and never see the Solid
       State block's body-level re-point -- the same trap documented on
       --mobileHamburgerColor below. */
    --searchBackground: transparent;
    --searchText: var(--text);
    --searchIconColor: var(--text);
    --searchPlaceholderColor: oklch(from var(--text) l c h / 0.6);

    /* Mobile Navigation */
    --mobileNavLinkColor: var(--text-inverse);
    --mobileNavBackground: var(--brand-dark);
    --mobileHamburgerBackground: transparent;
    /* Rest-state value only. It must name a RAW colour, not var(--navIcons):
       a custom property resolves its var()s on the element that DECLARES it,
       so a :root indirection would bake in :root's white and never see the
       Solid State's body-level re-point. The solid value is set alongside the
       other four in that block instead. */
    --mobileHamburgerColor: var(--navIcons);
    --mobileNavOverlay: var(--black-50);
    --mobileNavBlur: blur(3px);

    /* CTA Bar */
    --ctaBackground: var(--brand-dark);
    --ctaColor: var(--text-inverse);
    --ctaFontSize: var(--fontSize-xs);
    --ctaDivider: 1px solid var(--white-30);

    /* Outlet Nav Button */
    --outletBorder: var(--text-inverse);
    --outletHoverBackground: var(--text-inverse);
    --outletHoverText: var(--text);

    /* Filter */
    --filterBackground: var(--background);
}

/* ==================== Navigation Solid State ====================
   Applies wherever body.cl-nav-over-hero is set - in practice the homepage.
   There the bar floats transparent over the hero (Transparent-over-hero, at
   the foot of this file), and it has to become solid whenever transparency
   would break it. Two ways in, one look - white bar, --brand-focus contents:

     the bar is SCROLLED   past 20px (.is-scrolled, homepage-nav.js)
     a PANEL is open       dropdown / mobile hamburger / account / search

   Scoped with .cl-nav-over-hero so it cannot reach interior pages, which keep
   the plain solid bar (--navBackground) in every state. Do not drop that
   scope without re-reading requirement 4.

   Implemented by re-pointing the four nav colour tokens rather than writing
   a parallel set of rules: every rule below already reads --navBackground /
   --navLinks / --navLinks-hover / --navIcons, so the whole bar follows - text,
   icons and the masked wordmark (Brand Assets paints it with --navLinks-hover)
   - with no new selectors and no specificity fight. The knobs are --navSolid-*
   in 01-CC-Brand: ONE set for both triggers, so the two can never disagree.

   Backgrounds are the exception and cannot be done by token:
   `body.cl-nav-over-hero .wrapper.masthead { background: transparent !important }`
   is a literal at (0,3,1) and has to be beaten declaration-to-declaration.
   Scrolled is handled below; the panel-open cases sit beside that transparent
   rule in Transparent-over-hero at the foot of this file. Keep those trigger
   lists in step with this one - all three now live in THIS file.

   On the triggers themselves:
     open-slide-menu  mobile hamburger panel. Stamped in two places by the
                      platform - #body-wrapper-overlay (see the rule below,
                      which display:none's it, so it CANNOT be a nav
                      ancestor) and a page wrapper, almost certainly <body>.
                      The markup is not on this share to check, so both
                      halves are covered: the class on body itself, and
                      :has() for anywhere else. :has() never matches its own
                      subject, which is why the pair is not redundant.
     .CSSFacetNavModules.active   a top-level nav node's dropdown
     .tbcntOpen                   the platform's toolbar-content open flag -
                                  account today, and search if it uses the
                                  same pattern (.srchCtr carries .tbcnt)
     #search:focus-within         belt and braces for search: covers the
                                  mobile field, which is permanently visible
                                  rather than a toggle. Focus only, never
                                  hover - 99 expands the desktop pill on
                                  hover too, and repainting the whole bar on
                                  a passing mouse would be twitchy.

   The mini-basket is deliberately NOT a trigger. */

body.cl-nav-over-hero:has(.wrapper.masthead.is-scrolled),
body.cl-nav-over-hero.open-slide-menu,
body.cl-nav-over-hero:has(.open-slide-menu),
body.cl-nav-over-hero:has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active),
body.cl-nav-over-hero:has(.wrapper.masthead .tbcntOpen),
body.cl-nav-over-hero:has(#search.srchCtr:focus-within) {
    --navBackground: var(--navSolid-background);
    --navLinks: var(--navSolid-links);
    --navLinks-hover: var(--navSolid-linksHover);
    --navIcons: var(--navSolid-icons);
    /* The mobile hamburger needs re-pointing HERE and cannot just be declared
       as var(--navIcons) up in :root: a custom property substitutes its var()s
       on the element that declares it, so a :root indirection resolves against
       :root's --navIcons (white) and inherits down already resolved, blind to
       this body-level override. The other icons dodge this because 03 reads
       var(--navIcons) directly in a `color` declaration on the glyph itself.
       Mobile-only element, but harmless to set at every width. */
    --mobileHamburgerColor: var(--navSolid-icons);
}

/* ==================== Navigation Fix ==================== */
#body-wrapper-overlay.open-slide-menu {
    display: none;
}

/* ==================== Navigation Styles ==================== */

.wrapper.masthead .fixed {
    background: transparent;
}

/* Background & Borders */
.wrapper.masthead {
    background: var(--navBackground) !important;
    border-bottom: var(--navBorderBottom);
    /* One 400ms curve for every way this bar changes surface - the open state
       and the scroll state are the same physical bar and must move alike.
       NB the desktop block below re-declares `transition` for height; this
       list is repeated there so the shorthand cannot drop it. */
    transition:
        background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wrapper.masthead .container {
    background: transparent;
}

.wrapper.masthead .navIcons {
    border-bottom: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation Links */
.wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
    gap: 1.5rem;
}

.wrapper.masthead .NodeLevel0 > a {
    color: var(--navLinks);
    padding: 0;
    font-size: var(--nav-fontSize);
    letter-spacing: var(--navItemsLetterSpacing);
    text-transform: var(--navItemsTextTransform);
}

.wrapper.masthead .NodeLevel0 > a:hover,
.wrapper.masthead .NodeLevel0 > a.active,
.wrapper.masthead .NodeLevel0 > div.active + a {
    color: var(--navLinks-hover);
}

.wrapper.masthead .NodeLevel0 {
    margin: 0;
}

/* Remove Default Arrows */
.wrapper.masthead .NodeLevel0 > a:before,
.wrapper.masthead .NodeLevel0 > a:after {
    display: none;
}

/* Icon Colors */
.wrapper.masthead .navIcons *[class*="icon-"] {
    color: var(--navIcons);
    width: 42px; 
    height: 48px;
}

/* ==================== Sale Link ==================== */

.NodeLevel0[data-nodename*='Sale'] > a {
    color: var(--sale-color) !important;
    background: var(--sale-background) !important;
    border: var(--sale-border);
    padding: var(--sale-padding) !important;
    border-radius: var(--sale-radius);
    transition: var(--sale-transition);
    line-height: normal;
}

.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a:hover,
.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a.active,
.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > div.active + a {
    color: var(--sale-colorHover) !important;
    background: var(--sale-backgroundHover) !important;
    border: var(--sale-borderHover);
    padding: var(--sale-paddingHover);
    filter: brightness(1.1);
}

/* Sale Dropdown */
[data-nodename="Sale"] .CSSFacetNavModules .NodeLevel1 {
    border: 1px solid var(--saleDropdownBackground) !important;
    background: var(--saleDropdownBackground) !important;
}

[data-nodename="Sale"] .NodeLevel1 > a {
    color: var(--saleDropdownText) !important;
    border-color: var(--saleDropdownText) !important;
}

.wrapper.masthead [data-nodename="Sale"] .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--saleDropdownText);
}

/* ==================== Navigation Dropdown ==================== */

.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
    background: var(--dropdownBackground);
    gap: .5rem;
    padding: 1rem;
    justify-content: center;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
    border: 2px solid var(--brand-link-light);
    border-top: 0;
    max-height: 80vh;
}

/* Dropdown Areas */
.wrapper.masthead .NodeLevel1 {
    width: auto;
    background: var(--dropdownAreaBackground);
    padding: 1rem;
    border-radius: var(--global-radius);
    border: 2px solid var(--brand-link-light);
    min-width: 350px;
    flex: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules {
    display: flex;
    flex-flow: column;
    gap: .25rem;
}

/* Dropdown Titles */
.wrapper.masthead .NodeLevel1 > a {
    font-family: var(--font-bold);
    font-size: var(--dropdown-titleSize);
    letter-spacing: 1px;
    border-bottom: var(--dropdownAreaTitleUnderline);
    color: var(--dropdownAreaTitle);
    text-transform: none;
    opacity: 1;
}

/* Dropdown Links */
.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--dropdownAreaLinks);
    font-size: var(--dropdown-linkSize);
    opacity: .8;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a:hover {
    opacity: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules > div {
    padding: 0;
}

/* Remove Link Animations */
.wrapper.masthead .NodeLevel2 > a:before {
    display: none;
}

/* ==================== Login Dropdown ==================== */

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
    background: var(--loginDropdownBackground);
    border: 2px solid var(--brand-link-light);
    border-top: none;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
}

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen .boldfont {
    color: var(--loginTitleColor);
    font-size: var(--login-titleSize);
}

.wrapper.masthead .loginCtr a {
    color: var(--loginLinkColor);
    font-size: var(--login-linkSize);
    border-bottom: 1px solid var(--loginLinkColor);
}

/* ==================== Search ==================== */

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm {
    background: var(--searchBackground);
    color: var(--searchText);
    font-size: var(--search-inputSize);
}

.wrapper.masthead .srchCtr.tbcnt .icon-search {
    color: var(--searchIconColor);
}

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm::placeholder {
    color: var(--searchPlaceholderColor);
}

/* ==================== Navigation Mobile ==================== */

@media screen and (max-width: 1024px) {
    .wrapper.masthead .NodeLevel0 > a {
        color: var(--mobileNavLinkColor) !important;
        padding: 1rem;
        background: var(--mobileNavBackground);
        font-size: var(--mobile-navLinkSize);
        border-bottom: var(--global-border);
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a {
        color: var(--sale-colorHover) !important;
        padding: 1rem 0.5rem 1rem 1rem !important;
        font-size: var(--mobile-navLinkSize) !important;
        background: var(--sale-backgroundHover) !important;
        border-radius: 0;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        flex-flow: column;
        padding: 1rem;
        padding-bottom: 15rem;
        display: flex;
        justify-content: flex-start;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        height: fit-content;
    }

    .wrapper.masthead .NodeLevel1 {
        width: 100%;
    }

    .icon-menu.mobile {
        order: 5;
        background: var(--mobileHamburgerBackground);
        color: var(--mobileHamburgerColor) !important;
        border-radius: var(--global-radius);
        margin-right: 2px;
        margin-top: 1px;
    }

    .ctrNavigation {
        background: var(--mobileNavOverlay);
        backdrop-filter: var(--mobileNavBlur);
    }
}

/* ==================== Navigation Active State ==================== */

@media screen and (min-width: 1024px) {
    .open-slide-menu .NodeLevel0 > a:not(.active) {
        opacity: 0.3;
    }

    .wrapper.masthead {
        transition: height .5s ease,
                    background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
                    backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wrapper.masthead.active {
        height: 75px;
    }

    .wrapper.masthead .CSSFacetNavModules {
        top: 0;
        opacity: 1;
        transition: .2s ease;
    }

    .wrapper.masthead.active .CSSFacetNavModules {
        top: 0px !important;
        opacity: 0;
    }

    /* Nav Link Underline Animation */
    .wrapper.masthead .NodeLevel0 > a:before {
        right: 0;
        transform: rotate(0deg);
    }

    .wrapper.masthead .NodeLevel0 > a::before {
        display: var(--navUnderline-display);
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px !important;
        bottom: 0;
        left: 0;
        background-color: var(--navLinks-hover);
        transform-origin: bottom center;
        transition: transform 0.25s ease-out;
        top: 23px;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a::before {
        background-color: var(--sale-color);
    }

    .wrapper.masthead .NodeLevel0 > a:hover::before,
    .wrapper.masthead .NodeLevel0 > a.active::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }
}

/* ==================== Search Bar (Exposed) ==================== */

/* The header's search TOGGLE is redundant once the field is permanently
   exposed, so it comes out of the icon row and leaves search / account / bag.

   !important, and keyed on data-link rather than .icon-search: the Nav Icon
   Fixes block further down declares `display: flex` on
   `.navIcons *[class*="icon-"]:not(.icon-menu.mobile)`, which outranks a plain
   `.menu-icons-header > .icon-search` (0,3,0 against 0,2,0) AND sits later in
   the file. That is what put a fourth icon back beside account and bag. */
.menu-icons-header > [data-link="search"] {
    display: none !important;
}

#search.srchCtr {
    display: flex;
    justify-content: center;
    padding: var(--navPadding);
    max-width: 600px;
    z-index: 999999;
}

#TopBanner1_clSearch1_containerSearch {
    display: flex;
    justify-content: center;
    max-width: 600px;
    width: 100%;
    position: relative;
}

/* The glyph OVERLAYS the left end of the field -- the input below carries a
   matching 40px left pad so the text starts clear of it.

   It has to be pinned here rather than left to the platform, because Nav Icon
   Fixes sets `position: relative` (plus padding and font-size) on every icon
   inside .navIcons; that drops this one back into flow as a flex item BESIDE
   the input instead of sitting inside it. Leading with #search lifts this to
   (1,2,0) so it beats that (0,3,0) rule, and scopes it to the nav field --
   the PDP's .cc-lookup-service-lookupbutton.icon-search is untouched.

   Anchored to #TopBanner1_clSearch1_containerSearch, which is position:
   relative above for exactly this. */
#search.srchCtr .icon-search {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.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%;
}
 
/* Mobile  */
@media screen and (max-width: 1024px) {
    #search.srchCtr, #TopBanner1_clSearch1_containerSearch {
        max-width: none;
    }
}


/* ==================== Layout & Responsive ==================== */

body {
    padding-top: 115px !important;
}

/* Mobile
   NB the block's closing brace used to sit straight after .menu-icons-header,
   so everything from .logoContainer down leaked to EVERY width. Three of those
   escapees were live desktop bugs: `#search.srchCtr { max-width: 100% }` beat
   the 600px cap above (same specificity, later in source), which is what let
   the field run from mid-bar to the icons instead of sitting centred at 600px;
   `body { padding-top: 103px }` fought the 115px desktop bar; and
   `.ctrNavigation { top: 50px }` fought #navi's own desktop offset. Keep the
   brace where it is. */
@media screen and (max-width: 1024px) {
    .menu-icons-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logoContainer {
        width: auto !important;
    }

    .logo {
        max-width: 110px !important;
    }

    body {
        padding-top: 103px !important;
    }

    #search.srchCtr {
        max-width: 100%;
    }

    .ctrNavigation {
        top: 50px !important;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    #search {
        position: absolute;
        top: calc(-90px + 1.5rem);
        z-index: 1;
        /* Centred on the bar. left + translateX, NOT `left: calc(50% - 300px)`:
           that form hard-coded half of the 600px max-width, so it only looked
           centred while those two numbers agreed -- retune the cap and the bar
           slides off-centre. This pair follows whatever width the field ends up
           with. `width: 100%` gives the absolute box something to cap; the
           600px max-width on #search.srchCtr does the capping. */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
        top: 40px;
        position: absolute;
    }

    .wrapper.masthead {
        height: 115px;
    }

    .menu-icons-header {
        width: 250px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #navi {
        display: flex;
        top: 78px !important;
        position: fixed;
        justify-content: center;
        padding-inline: 1rem;
        max-width: var(--navWidth);
        flex-grow: 0;
        width: 100%;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        display: flex;
        float: none;
        justify-content: flex-start;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: 42px;
    }

    /* NB unscoped - .zflex-s is a platform flex utility used site-wide (e.g.
       .col-1.zflex-s on the detail page), so this reaches well beyond the
       masthead. `flex-wrap: wrap` was removed: the masthead row is a .zflex-s
       and both #navi and .navIcons are width:100%, so wrapping gave each one
       its own line and stacked the bar into logo / links / icons rows. With
       the default nowrap they shrink and share one row, which is the intended
       horizontal bar. Left as a removal rather than an explicit `nowrap` so
       the other .zflex-s containers keep whatever the platform gives them. */
    .zflex-s, .zflexInline-s {
        align-items: center;
        -webkit-align-items:stretch;
        -ms-align-items:stretch;
        -moz-align-items:stretch;
        display: flex;
        align-content: center;
    }

}

/* ==================== Filter ==================== */

.sticky.sticknow .FAFoptionsContainer {
    margin-top: 0 !important;
    position: fixed;
    top: 109px !important;
    z-index: 7;
    background: var(--filterBackground);
    width: 100%;
    left: 0;
}

/* ==================== Logo ==================== */

.logoContainer {
    width: auto;
    padding: 0px;
}

/* ==================== CTA Bar ==================== */

/* Ctas */

.ctaContainer {display: flex;justify-content: flex-start;top: 0; background: transparent;}

.wrapper:has(.ctaContainer) {
    display: var(--ctaStrip-display);
    background: var(--ctaBackground);
}

div[id*="CTA_bannerCollectionPanel"] {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
    justify-content: flex-start;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr {
    position: static;
    padding: 0 !important;
    grid-gap: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    background: none !important;
    flex-flow: column;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span {
    font-size: var(--ctaFontSize) !important;
    width: auto;
    order: 0;
    text-align: center !important;
    color: var(--ctaColor) !important;
    background: none !important;
    padding: 0 !important;
    text-transform: none !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerTitle {

}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerView {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo:after{
    width: 0 !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc:before {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a:hover .bannerTxtCtr {
    background: none;
}

div[id*="CTA_bannerCollectionPanel"] a {
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: .5rem;
    border-left: var(--ctaDivider);
    border-radius: 0;
    gap: 1rem;
}


div[id*="CTA_bannerCollectionPanel"] a:nth-child(1) {
    border-left: none;
}

div[id*="CTA_bannerCollectionPanel"] a:last-child {
    border-right: none;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc{
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a .bannerTxtCtr,
div[id*="CTA_bannerCollectionPanel"] a{
    max-width: fit-content !important;
    min-width: fit-content;
    padding-inline: 1rem;
    height: fit-content !important;
}

/* ==================== Outlet Nav Button ==================== */

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet'] {
    margin-left: auto;
    border: 1px solid var(--outletBorder);
    padding: .2rem .5rem;
    transition: var(--global-transition);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover {
    background: var(--outletHoverBackground);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover > a {
    color: var(--outletHoverText) !important;
}

/* ==================== Brands Dropdown ==================== */

[data-nodename="Brands"] .NodeLevel1 .CSSFacetNavModules > div {
    min-width: 200px;
    max-width: 200px;
    display: flex;
}

[data-nodename="Brands"] .NodeLevel1 > .CSSFacetNavModules {
    flex-flow: row wrap !important;
    display: flex;
    justify-content: flex-start;
    gap: 1rem !important;
}

@media screen and (min-width: 1024px) {
    [data-nodename="Brands"] .NodeLevel1:nth-child(1) > .CSSFacetNavModules > div a {
        font-size: var(--fontSize-lg) !important;
        font-weight: bold;
    }
}



/* nav scroll animation */

.navIcons {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    /* Stays transparent in every state - the surface is painted by
       .wrapper.masthead beneath it. Only the ink animates here now; the
       background / shadow / blur transitions moved to the masthead with the
       fill they belong to.

       `color` is the row's inherited ink, tokenised so the Solid State block
       carries it. It was a literal `white`, which went invisible the moment
       the solid bar became white. --navIcons is white at rest, so this is a
       no-op outside the solid state. */
    background-color: transparent;
    color: var(--navIcons);

    transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navIcons a,
.navIcons button {
    color: inherit;
    transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navIcons svg {
    fill: currentColor;
    stroke: currentColor;

    transition:
        fill 400ms cubic-bezier(0.22, 1, 0.36, 1),
        stroke 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrolled SURFACE, homepage only. homepage-nav.js toggles .is-scrolled on
   .wrapper.masthead - the outermost masthead layer - so the fill covers the
   whole bar rather than just the inner .navIcons strip. Bump the ?v
   querystring in default.aspx if you touch that script.

   The .cl-nav-over-hero scope does double duty: it enforces requirement 4
   (interior pages never do this) AND lifts the selector to (0,4,1), which
   clears 99's `body.cl-nav-over-hero .wrapper.masthead { transparent !important }`
   at (0,3,1). Specificity beats source order, so this wins even though 99
   loads later - no duplicate override needed there.

   Do NOT rely on the script only being loaded on the homepage for the
   scoping; that was accidental, and a shared master page would undo it.

   Contents are not set here - the Solid State block at the top of this file
   re-points --navLinks / --navIcons / --navLinks-hover for the same trigger,
   which is what stops white text landing on this white bar.

   blur/shadow left as literals for now, by decision - they are surface
   texture rather than brand colour. */
body.cl-nav-over-hero .wrapper.masthead.is-scrolled {
    background: var(--navSolid-background) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}




    .masthead .fixed .navIcons {
        position: relative;
        padding: var(--navPadding)
    }

    .navIcons {
    height: 100%
}


/* Nav Icon Fixes */

    .navIcons > div:not(.icon-menu.mobile), .navIcons > a, .navIcons *[class*="icon-"]:not(.icon-menu.mobile) {
        width: auto;
        line-height: 1;
        font-size: 20px;
        position: relative;
        text-align: center;
        cursor: pointer;
        padding: 10px;
        display: flex;
        align-items: center;
    }

/* Icon order, left to right: search, account, bag. The platform emits them
   head, bag, menu, search - .menu-icons-header is flex at both breakpoints
   (438/483), so `order` does the reshuffle with no markup change. Keyed on
   data-link rather than the icon-font class names, same reasoning as 99: the
   data-link states the toggle's job, so a platform class rename cannot
   silently scramble the row. The mobile hamburger keeps its own order (310)
   and stays after these three. */

.menu-icons-header > [data-link="search"] {
    order: 1;
}

.menu-icons-header > [data-link="login"] {
    order: 2;
}

.menu-icons-header > [data-link="basket"] {
    order: 3;
}


/* ===========================================================================
   BRAND ASSETS -- wordmark and nav icons as CSS MASKS
   ---------------------------------------------------------------------------
   Promoted out of the client layer: this is mechanism every client needs and
   only the asset FILES differ. The technique is a mask filled with
   currentColor, so an asset inherits whatever ink the bar is painting and
   follows a reskin, a scroll state and a transparent-over-hero state with no
   second copy of the file and no edit here.

   To reskin: replace the files under /layout/generalLyout/. The URLs are
   tokens (--logo, --icon-bag, --icon-account, --icon-search) declared at the
   top of this file, so a client with a different asset layout can repoint
   them from 01-CC-Brand.css instead.
   =========================================================================== */

/* --- Wordmark ---
   The platform <img> is left in flow so the container keeps exactly the box it
   already had (sized in the Logo section above); only the PAINT changes. 
.logoContainer {
    -webkit-mask: var(--logo) left center / contain no-repeat;
            mask: var(--logo) left center / contain no-repeat;
    background-color: currentColor;
} */

/* .logoContainer has no colour of its own -- the masthead only paints
   --navLinks onto the nav anchors -- so give it the nav's full-strength ink.
   This is the ONE knob: change `color` here and the wordmark follows, over a
   hero photo and a solid bar alike. */
.wrapper.masthead .logoContainer {
    color: var(--navLinks-hover);
}

/* --- Nav icons (bag / account / search) ---
   The platform emits these as icon-font glyphs in .menu-icons-header, each
   toggle tagged with a data-link:

     <div class="icon-head"        data-link="login"><div id="loggedInPip"></div></div>
     <div class="icon-bag"         data-link="basket"><div class="basketPip">0</div></div>
     <div class="icon-menu mobile" data-link="navi"></div>
     <div class="icon-search"      data-link="search"></div>

   Keyed on data-link rather than the icon-font class names: the data-link
   states the toggle's JOB, so a platform icon-font rename cannot silently
   blank an icon.

   The mask sits on ::before, not on the toggle. Two reasons: it replaces the
   glyph in place, so no `visibility: hidden` dance is needed; and a mask on
   the toggle itself would clip the pips nested inside it -- .basketPip (08)
   and #loggedInPip.

   The hamburger (data-link="navi") is deliberately NOT in this list. Blanking
   a glyph without supplying a mask renders it invisible, and there is no
   hamburger asset. That is also why these rules enumerate three toggles
   instead of reusing the *[class*="icon-"] wildcard above.

   Search needs both selectors: the .menu-icons-header toggle is hidden
   elsewhere in this file, and the visible glyph is the
   <span class="icon-search"> inside #search. Everything is scoped to the
   masthead / #search, so the PDP's .cc-lookup-service-lookupbutton.icon-search
   keeps the platform glyph. */
.wrapper.masthead [data-link="basket"]::before,
.wrapper.masthead [data-link="login"]::before,
.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    content: "";
    display: inline-block;
    width: var(--navIconSize);
    height: var(--navIconSize);
    vertical-align: middle;
    /* currentColor, NOT a --navSolid-* token: the toggle already gets
       `color: var(--navIcons)` from the Nav Icon rules above, and the Solid
       State block re-points --navIcons per state. Naming a state token here
       would pin the icons to ONE state and break transparent-over-hero. */
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.wrapper.masthead [data-link="basket"]::before {
    -webkit-mask-image: var(--icon-bag);
            mask-image: var(--icon-bag);
}

.wrapper.masthead [data-link="login"]::before {
    -webkit-mask-image: var(--icon-account);
            mask-image: var(--icon-account);
}

.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    -webkit-mask-image: var(--icon-search);
            mask-image: var(--icon-search);
}


/* ===========================================================================
   TRANSPARENT-OVER-HERO -- the remainder of the mode
   ---------------------------------------------------------------------------
   Promoted out of the client layer so the whole mode lives in one file. The
   Solid State block at the top of this file re-points the token set; the
   Scrolled Surface block above paints the scrolled fill. These are the last
   two pieces: the at-rest transparency, and the panel-open cases that have to
   beat it declaration-to-declaration.

   OPT-IN, and OFF BY DEFAULT. Nothing here applies unless a page carries
   class="cl-nav-over-hero" on <body>, which the kit's default.aspx deliberately
   does NOT ship. Transparency is a special feature, not a house style: it only
   works over a full-bleed image, and over a light opening stripe it produces an
   invisible nav. A site that does not opt in gets the solid bar from
   --navBackground in every state, which is the correct default.

   Interior pages never carry the class.

   Note what else is gated on it: the Solid State block at the top of this file
   and the Scrolled Surface block above are BOTH scoped to the same class, so a
   non-transparent site gets no scroll blur/shadow either. That is consistent -
   there is no transparency for the scroll to resolve - but it does mean a
   client who wants a scrolled shadow on a solid bar needs a new switch rather
   than this class.

   ORDER MATTERS AND IS PRESERVED. This block sat in 99 (which loads after
   03-08) as one contiguous run. It is appended at the very END of 03, so its
   position relative to every rule in this file is unchanged, and its internal
   order is unchanged. The .active rule must stay ABOVE the panel-open list:
   the two tie at (0,4,1) and the panel-open cases win on order alone.
   =========================================================================== */

/* The hero slides under the fixed bar, so the body offset comes off. */
body.cl-nav-over-hero {
    padding-top: 0 !important;
}

body.cl-nav-over-hero .wrapper.masthead {
    background: transparent !important;
}

body.cl-nav-over-hero .wrapper.masthead.active {
    background: var(--navBackground) !important;
}

/* The transparent rule above is a literal `transparent !important`, not a
   token, so the Solid State block cannot reach it by re-pointing
   --navBackground -- it has to be beaten declaration-to-declaration. This is
   the case that state exists for: an open menu hanging off an invisible bar is
   the bug. The trigger list mirrors Solid State's exactly; keep the two in
   step. Each selector clears the transparent rule's (0,3,1) by one class. */
body.cl-nav-over-hero.open-slide-menu .wrapper.masthead,
body.cl-nav-over-hero:has(.open-slide-menu) .wrapper.masthead,
body.cl-nav-over-hero:has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active) .wrapper.masthead,
body.cl-nav-over-hero:has(.wrapper.masthead .tbcntOpen) .wrapper.masthead,
body.cl-nav-over-hero:has(#search.srchCtr:focus-within) .wrapper.masthead {
    background: var(--navSolid-background) !important;
}
/* CC-BannerCollections.css
   Quiet luxury banner chrome: white canvas, full-bleed photography with
   ghost 1px-outline CTAs, hairline vocabulary. Tokens only. */

/* Banner Collection Variables */
:root {
    --bannerRadius: 0px;
    --bannerPadding: clamp(1rem, 3vw, 2.5rem);
    --bannerGap: var(--global-gap);
    --bannerBorder: var(--global-border);
    --bannerText: var(--text-inverse);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    /* Banner description type ramp - one typographic voice for every
       .cc-banner__desc. Colour/opacity stay per-band; only type lives here. */
    --bannerDescFontFamily: var(--font-body);
    --bannerDescSize: var(--fontSize-md);
    --bannerDescLineHeight: 150%;
    --bannerDescLetterSpacing: normal;
    --brandLogoFilter: brightness(0) opacity(0.35);
    --brandLogoFilterHover: none;
    --brandLogoMaxHeight: 55px;
    --bannerViewSize: var(--global-buttonSize);
    --bannerViewColor: var(--text);
    --bannerViewBorder: 1px solid var(--text);
    --bannerViewBackground: transparent;
    --bannerViewPadding: var(--global-buttonPadding);
    --bannerViewRadius: var(--global-buttonRadius);
    --bannerViewBackgroundHover: var(--brand-dark);
    --bannerViewColorHover: var(--text-inverse);
    --bannerViewBorderHover: 1px solid var(--brand-dark);
    --bannerViewPaddingHover: var(--global-buttonPaddingHover);
    --bannerViewTransition: var(--global-buttonTransition);
}


/* CC-bg Colour Modifier Classes
   Apply to any col-1 to set the colour context for that section.
   Rescopes banner tokens -- buttons, text, logos, Splide arrows all update. */

.CC-bgDark {
    background: var(--brand-dark) !important;
    --bannerText: var(--text-inverse);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text-inverse) l c h / 0.15);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand-accent);
    --bannerViewColor: var(--text-on-accent);
    --bannerViewBorder: 1px solid var(--brand-accent);
    --bannerViewBackgroundHover: var(--brand-accent-dark);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent-dark);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-inverse);
    --splideArrowHoverColor: var(--text-inverse);
}

.CC-bgLight {
    background: var(--background-raised) !important;
    --bannerText: var(--text);
    --bannerCardBg: var(--background);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text) l c h / 0.12);
    --brandLogoFilter: brightness(0) opacity(0.4);
    --brandLogoFilterHover: brightness(0) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: var(--brand-accent);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
}

.CC-bgBrand {
    background: var(--brand) !important;
    --bannerText: var(--text-on-brand);
    --bannerCardBg: oklch(from var(--brand) calc(l + 0.08) c h);
    --bannerCardText: var(--text-on-brand);
    --comp-divider: oklch(from var(--text-on-brand) l c h / 0.2);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand-accent);
    --bannerViewColor: var(--text-on-accent);
    --bannerViewBorder: 1px solid var(--brand-accent);
    --bannerViewBackgroundHover: var(--brand-accent-dark);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent-dark);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-on-brand);
}

.CC-bgAccent {
    background: var(--brand-accent) !important;
    --bannerText: var(--text-on-accent);
    --bannerCardBg: oklch(from var(--brand-accent) calc(l + 0.08) c h);
    --bannerCardText: var(--text-on-accent);
    --comp-divider: oklch(from var(--text-on-accent) l c h / 0.2);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: oklch(from var(--brand) calc(l + 0.1) c h);
    --bannerViewColorHover: var(--text-on-brand);
    --bannerViewBorderHover: 1px solid oklch(from var(--brand) calc(l + 0.1) c h);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-on-accent);
}

.CC-bgWhite {
    background: var(--background) !important;
    --bannerText: var(--text);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text) l c h / 0.1);
    --brandLogoFilter: brightness(0) opacity(0.4);
    --brandLogoFilterHover: brightness(0) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: var(--brand-accent);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
}


/* cc-banner -- Visual Foundation
   Layout (grid columns, aspect-ratio, gap, padding) is set per-component
   in job CSS. This block owns only the visual style that must be consistent
   across every banner on every section.

   Height model: the <img> drives cc-banner height in-flow (no position:absolute
   chicken-and-egg). Per-component CSS sets aspect-ratio on the img, or for
   Splide the slide sets the height and cc-banner fills it. */

.cc-banner {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--bannerRadius);
    text-decoration: none;
}

.cc-banner__img {
    display: block;
    width: 100%;
}

.cc-banner__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-radius: var(--bannerRadius);
}

.cc-banner__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--text-block-wrap);
    padding: clamp(1rem, 2vw, 2rem);
    background: var(--gradient-overlay-diagonal);
    z-index: 2;
}

/* .text-wrap - the title + description wrapper. The two spans used to be
   direct flex children of .cc-banner__body; the wrapper has to reproduce that
   context or they collapse back to inline and run together on one line.
   gap/align-items are pulled from the parent so every band keeps the spacing
   and alignment it already declares. */
.text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--text-wrap);
    align-items: inherit;
    min-width: 0;
}

.cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-2xl);
    color: var(--bannerText);
    order: -1;
}

.cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--bannerText);
    opacity: 0.9;
}




.cc-banner__desc:empty,
.cc-banner__title:empty,
.cc-banner__cta:empty {
    display: none !important;
}


/* cc-banner in Splide context
   Keep cc-banner__img in-flow so the flex slide has real content width.
   Height chain: .splide (explicit) -> track/list/slide (100%) -> cc-banner (100%)
   -> cc-banner__img (100%) -> img (100%, object-fit: cover). */

.splide__slide .cc-banner {
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.splide__slide .cc-banner__img {
    display: block;
    height: 100%;
    overflow: hidden;
}

.splide__slide .cc-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}


/* cc-brand -- Brand Logo */

.cc-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
}

.cc-brand__img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: var(--brandLogoMaxHeight);
    object-fit: contain;
    filter: var(--brandLogoFilter);
    transition: filter var(--global-transition);
}

.cc-brand:hover .cc-brand__img {
    filter: var(--brandLogoFilterHover);
}


/* CC-HomepageTitles */

.CC-HomepageTitles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--bannerGap) * 0.5);
    /* padding-bottom: clamp(0.75rem, 1.5vw, 2.25rem); */
    max-width: var(--navWidth);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.CC-HomepageTitles h2 {
    font-family: var(--font-display);
    font-size: var(--fontSize-2xl);
    margin: 0;
    line-height: 1.2;
}

.CC-HomepageTitles p {
    font-size: var(--fontSize-base);
    margin: 0;
    opacity: 0.8;
}

.CC-HomepageTitles.wht,
.CC-HomepageTitles.wht h2,
.CC-HomepageTitles.wht p { color: var(--bannerText); }

.CC-HomepageTitles.blk,
.CC-HomepageTitles.blk h2,
.CC-HomepageTitles.blk p { color: var(--bannerCardText); }


/* CC-HomepageTitles - CMS-driven title block: a 1-item banner styled as heading + desc + CTA.
   The extra .cc-collection specificity (0,3,0) keeps a title banner above section tile rules. */
.CC-HomepageTitles .cc-collection { width: 100%; }
.CC-HomepageTitles .cc-collection .cc-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
    /* opt out of tile styling that would otherwise leak in */
    opacity: 1; height: auto; aspect-ratio: auto; background: none;
    border-radius: 0; overflow: visible; box-shadow: none; transform: none !important;
}
.CC-HomepageTitles .cc-collection .cc-banner::after { display: none; }   /* no tile corner stamp */
.CC-HomepageTitles .cc-collection .cc-banner__img { display: none; }     /* image slot unused on titles */
.CC-HomepageTitles .cc-collection .cc-banner__body {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
    width: 100%;
    justify-content: space-between;
}
.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: var(--global-buttonLetterSpacing);
    transition: var(--global-transition);
}

.CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    background: var(--bannerViewBackgroundHover); color: var(--bannerViewColorHover);
    border: var(--bannerViewBorderHover);
}  */
  
/* colour variants - mirror .wht/.blk which otherwise only target h2/p */
.CC-HomepageTitles.wht .cc-collection .cc-banner__title,
.CC-HomepageTitles.wht .cc-collection .cc-banner__desc { color: var(--bannerText); }
.CC-HomepageTitles.blk .cc-collection .cc-banner__title,
.CC-HomepageTitles.blk .cc-collection .cc-banner__desc { color: var(--bannerCardText); }


/* Scroll-in Animation */

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].inView {
    opacity: 1;
    transform: translateY(0);
}
/* CC-SplideBanners.css */

/* Splide Tokens */
:root {
    --splideArrowSize: 2.75rem;
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
    --splideArrowHoverBg: transparent;

    /* Arrow hover personality. Set --splideArrowHoverScale to 1 for a house
       style with no bounce; the arrow then only changes colour/opacity. */
    --splideArrowHoverColor: var(--text-inverse);
    --splideArrowHoverOpacity: 1;
    --splideArrowHoverScale: 1.1;

    /* Pagination marker SHAPE. The defaults are dots: a square-ish 8px marker
       that widens when active. Set width/height/radius to get dashes
       (e.g. 1.5rem x 2px, radius 0) or bars, without touching a rule. */
    --splidePaginationSize: 8px;
    --splidePaginationWidth: var(--splidePaginationSize);
    --splidePaginationHeight: var(--splidePaginationSize);
    --splidePaginationRadius: 1px;
    --splidePaginationWidthActive: 1.5rem;
    --splidePaginationBg: oklch(from var(--brand-dark) l c h / 0.3);
    --splidePaginationActiveBg: var(--brand-dark);
}


/* Base Splide Structure
   [data-splide-opts] scoping gives (0,2,0) specificity minimum,
   beating Splide's native (0,1,0) selectors without !important. */

[data-splide-opts] .splide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

[data-splide-opts] .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

[data-splide-opts] .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-splide-opts] .splide__slide {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}


/* Arrows */

[data-splide-opts] .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--splideArrowSize);
    height: var(--splideArrowSize);
    background: var(--splideArrowBg);
    color: var(--splideArrowColor);
    border: 0;
    border-radius: var(--global-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    opacity: 1;
}

[data-splide-opts] .splide__arrow:hover {
    background: var(--splideArrowHoverBg);
    color: var(--splideArrowHoverColor);
    opacity: var(--splideArrowHoverOpacity);
    transform: translateY(-50%) scale(var(--splideArrowHoverScale));
}

[data-splide-opts] .splide__arrow svg {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

[data-splide-opts] .splide__arrow--prev { left: var(--bannerPadding); }
[data-splide-opts] .splide__arrow--next { right: var(--bannerPadding); }

@media (max-width: 767px) {
    [data-splide-opts] .splide__arrow--prev { left: 0.4rem; }
    [data-splide-opts] .splide__arrow--next { right: 0.4rem; }
}

/* Arrows-top utility -- move arrows above the carousel */
.CC-SplideArrowsTop .splide__arrow {
    position: static;
    transform: none;
}
.CC-SplideArrowsTop .splide__arrow:hover {
    transform: scale(var(--splideArrowHoverScale));
}

.CC-SplideArrowsTop .splide__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 var(--bannerPadding) 0.5rem;
}


/* Pagination */

[data-splide-opts] .splide__pagination {
    position: absolute;
    bottom: var(--bannerPadding);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-splide-opts] .splide__pagination__page {
    width: var(--splidePaginationWidth);
    height: var(--splidePaginationHeight);
    border-radius: var(--splidePaginationRadius);
    background: var(--splidePaginationBg);
    transition: background 0.2s ease, width 0.2s ease;
    cursor: pointer;
    border: 0;
    display: flex;
}

[data-splide-opts] .splide__pagination__page:hover {
    background: var(--splidePaginationActiveBg);
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: var(--splidePaginationWidthActive);
    background: var(--splidePaginationActiveBg);
}


/* cc-banner in Splide context
   Height model for Splide carousels:
   Set height on .splide itself in per-component CSS, then chain 100% down.
   Splide's flex layout flows top-down -- the track/list/slide must all
   inherit from the .splide container, not from each other or the slide content.

   Per-component pattern:
     .hp-foo .splide                      { height: clamp(320px, 60vh, 780px); }
     .hp-foo .splide__track,
     .hp-foo .splide__list,
     .hp-foo .splide__slide               { height: 100%; }

   cc-banner and __img then fill the slide via the rules in 04-CC-BannerCollections.css. */
/* CC-Footer.css */

/* Footer Variables */
:root {
    --footer-titleSize: var(--fontSize-sm);
    --footer-textSize: var(--fontSize-sm);
    --footer-newsletterInputSize: var(--fontSize-sm);
    --footer-newsletterButtonSize: var(--fontSize-sm);
    --footer-width: var(--global-NavFooterWidth);
    --footer-maxWidth: 100%;
    --footer-padding: var(--global-padding);
    --footer-gap: var(--global-gap);
    --footer-borderRadius: var(--global-radius);
    --footer-background: var(--text);
    --footer-innerBackground: var(--text);
    --footer-text: var(--background);
    --footer-titles: var(--background);
    --footer-links: oklch(from var(--background) l c h / 0.78);
    --footer-linksHover: var(--background);
    --footer-underlineColor: oklch(from var(--background) l c h / 0.2);
    --newsletter-inputBackground: var(--background);
    --newsletter-inputText: var(--background);
    --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(--text);
    --tagline-text: var(--background);
    --footer-buttonSize: var(--global-buttonSize);
    --footer-buttonColor: var(--background);
    --footer-buttonBorder: 1px solid var(--background);
    --footer-buttonRadius: var(--global-buttonRadius);
    --footer-buttonBackground: transparent;
    --footer-buttonPadding: var(--global-buttonPadding);
    --footer-buttonBackgroundHover: var(--brand-dark);
    --footer-buttonColorHover: var(--text);
    --footer-buttonBorderHover: 1px solid var(--brand-dark);
    --footer-buttonPaddingHover: var(--global-buttonPaddingHover);
    --footer-buttonTransition: var(--global-buttonTransition);
}


/* Footer Width */

div#modular-footer-wrapper .fixed {
    max-width: var(--footer-width);
}

#modular-footer-wrapper {
    display: flex;
    flex-flow: row wrap;
    background: var(--footer-background) !important;
    margin: auto;
    float: none;
    max-width: var(--footer-maxWidth);
    padding-top: var(--footer-padding);
    padding-inline: var(--footer-padding);
    align-items: flex-start;
    gap: var(--footer-gap);
}

#modular-footer-wrapper:after {
    display: none;
}

#modular-footer-wrapper > div.fixed {
    width: 100%;
    justify-content: space-between;
    flex: 2;
    background: var(--footer-background);
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper :is(.modular-footer-socials, .modular-footer-retaillinks, .modular-footer-citruslime---tagline) {
    border-bottom: none;
}

#modular-footer-wrapper .modular-footer-socials,
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    border-top: 0;
    padding: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    grid-gap: 2em;
    background: var(--footer-innerBackground);
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    flex: 0 0 auto;
    width: auto;
    padding: 2rem;
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div br {
    display: none;
}


/* Inner footer column max width */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
    height: auto;
    /* was var(--maxWidth) - a token declared nowhere, so this max-width was
       invalid and silently computed to `none`. The token is --footer-maxWidth
       (declared at the top of this file, 100%). Practical effect of the fix is
       nil, because width: 100% below already constrains this to the same box. */
    max-width: var(--footer-maxWidth);
    padding: 0rem 0rem 2rem 0rem;
    width: 100%;
    margin: 0;
    border-radius: var(--footer-borderRadius);
}


/* Main column ordering */

#modular-footer-wrapper > div.modular-footer-socials {
    flex-flow: column nowrap;
    order: 1;
    justify-content: flex-start;
    max-width: 500px !important;
    grid-gap: 0.5rem;
    border-radius: var(--footer-borderRadius);
    display: flex;
    padding: 1rem;
    align-items: flex-start;
    flex: 1;
    height: 100%;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-retaillinks {
    order: 1;
}

#modular-footer-wrapper .modular-footer-retaillinks:nth-child(3) {
    order: 2;
}

#modular-footer-wrapper .modular-footer-citruslime---tagline {
    order: 4;
    background: var(--footer-innerBackground);
    color: var(--footer-titles);
    padding-block: 1em;
    border-radius: var(--footer-borderRadius);
}

@media screen and (max-width: 600px) {
    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
        padding: 0;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        width: 100%;
    }
}


/* Social and Newsletter */

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons {
    padding: 0;
    order: 1;
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    grid-gap: 0.5rem;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a {
    height: var(--social-iconSize);
    width: var(--social-iconSize);
    filter: var(--social-iconColor);
    margin: 0;
    background-color: var(--social-iconBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a:hover {
    filter: var(--social-iconHoverColor);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
    padding: 0;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    content: var(--copy-newsletterTitle, "Join Our Newsletter");
    font-family: var(--font-bold);
    display: block;
    margin-bottom: 0.5em;
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    max-width: 1400px;
    text-align: left;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container {
    padding: 0;
    max-width: 100%;
    height: auto;
    background: var(--footer-innerBackground);
    display: flex;
    flex-flow: column;
}

#newsletter-footer-text.newsletterFail {
    margin: auto;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
    position: relative;
    gap: 1rem;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: var(--footer-innerBackground);
}

/* Newsletter input */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
    border-radius: var(--footer-buttonRadius);
    margin: 0;
    height: 54px;
    line-height: 54px;
    font-size: var(--footer-newsletterInputSize);
    width: min(300px, 100%);
    background: var(--newsletter-inputBackground);
    max-width: 700px;
    color: var(--newsletter-inputText);
    justify-content: center;
    border: var(--footer-buttonBorder) !important;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input::placeholder {
    font-size: var(--footer-newsletterInputSize);
    color: var(--newsletter-inputPlaceholder);
}

/* Newsletter submit button */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
    border-radius: var(--footer-buttonRadius);
    font-size: var(--footer-buttonSize);
    height: 54px;
    line-height: 50px;
    color: var(--footer-buttonColor);
    background: var(--footer-buttonBackground);
    padding: var(--footer-buttonPadding);
    border: var(--footer-buttonBorder);
    transition: var(--footer-buttonTransition);
    display: flex;
    align-items: center;
    font-family: var(--font-bold);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit:hover {
    background: var(--footer-buttonBackgroundHover);
    color: var(--footer-buttonColorHover);
    border: var(--footer-buttonBorderHover);
    padding: var(--footer-buttonPaddingHover);
}

/* Newsletter: tablet */
@media screen and (max-width: 1024px) {
    #modular-footer-wrapper .modular-footer-socials {
        flex-flow: column nowrap;
        justify-content: center;
        padding: 24px;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
        order: 3;
        flex-basis: 90%;
        flex: 1;
        font-size: var(--footer-newsletterInputSize);
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
        order: 4;
    }
}


/* Footer Column Links */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    border-bottom: 1px solid var(--footer-underlineColor);
    padding-bottom: .5rem;
    margin-bottom: 1em;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4::after {
    content: "";
    display: none;
    width: 40px;
    height: 3px;
    background: var(--footer-background);
    margin: 10px 0px 10px 0px;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a {
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a:hover {
    color: var(--footer-linksHover);
}


/* Contact and Opening Hours */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact {
    order: 3;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont {
    font-size: initial;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont:after {
    display: none;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours {
    display: block;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 0.5rem;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dt {
    flex-basis: 50%;
    color: var(--footer-text);
    text-align: left;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dd {
    font-weight: bold;
    color: var(--footer-text);
    text-align: right;
}


/* Payment Icons */

#modular-footer-wrapper .modular-footer-payment-icons {
    text-align: center;
    background: var(--payment-background);
    order: 4;
}

#modular-footer-wrapper .modular-footer-payment-icons img {
    height: 1.5em;
}


/* Tagline */

#modular-footer-wrapper .modular-footer-citruslime---tagline a {
    color: var(--footer-titles);
}


/* Footer: Mobile */

@media screen and (max-width: 768px) {
    #modular-footer-wrapper {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding-inline: 1rem;
        gap: 1rem;
    }

    #modular-footer-wrapper > div.modular-footer-socials {
        order: -1;
        width: calc(100%);
        align-items: center;
        justify-content: center;
        border-radius: 0;
        margin-top: 0rem;
    }

    #modular-footer-wrapper .modular-footer-retaillinks {
        order: 2;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div,
    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
        width: 100%;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        text-align: left;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
        grid-gap: 0rem;
    }

    #modular-footer-wrapper > div.fixed {
        border-radius: var(--footer-borderRadius);
    }
}

/* Company details */
#modular-footer-wrapper .modular-footer-company-details {
    order: 3;
    background: var(--footer-background);
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-company-details > div {
    color: var(--company-text) !important;
}


/* Footer Column Inner Flex */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}


/* Footer Logo (via ::after pseudo-element) */

.modular-footer-socials {
    display: flex;
}

.modular-footer-socials:after {
    content: "";
    display: block;
    height: 40px;
    width: 150px;
    background: url(/layout/generalLyout/logo.png) center center / contain no-repeat;
    order: -1;
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    margin-bottom: 0;
}

/* Newsletter description text */
.modular-footer-newsletter---container:before {
    content: var(--copy-newsletterBody, "Sign up for news and offers.");
    display: block;
    margin-bottom: 1rem;
    opacity: .8;
}
/* CC-QuickLook.css */

/* Quick Look Variables */
:root {
    --quicklook-titleSize: var(--fontSize-lg);
    --quicklook-textSize: var(--fontSize-base);
    --quicklook-countSize: var(--fontSize-xs);
    --quicklook-background: var(--background);
    --quicklook-titleColor: var(--brand-dark);
    --quicklook-textColor: var(--text);
    --quicklook-countColor: var(--brand);
    --quicklook-hoverColor: var(--brand-link);
    --quicklook-padding: var(--global-padding);
    --quicklook-margin: var(--global-margin);
    --quicklook-gap: var(--global-gap);
    --quicklook-radius: var(--global-radius);
    --quicklook-buttonRadius: var(--global-buttonRadius);
    --quicklook-transition: var(--global-transition);
    --quicklook-border: var(--global-border);
    --quicklook-borderRadius: var(--global-radius);
    --quicklook-buttonSize: var(--global-buttonSize);
    --quicklook-buttonColor: var(--global-buttonColor);
    --quicklook-buttonBorder: var(--global-buttonBorder);
    --quicklook-buttonBackground: var(--global-buttonBackground);
    --quicklook-buttonPadding: var(--global-buttonPadding);
    --quicklook-buttonBackgroundHover: var(--global-buttonBackgroundHover);
    --quicklook-buttonColorHover: var(--global-buttonColorHover);
    --quicklook-buttonBorderHover: var(--global-buttonBorderHover);
    --quicklook-buttonPaddingHover: var(--global-buttonPaddingHover);
    --quicklook-buttonTransition: var(--global-buttonTransition);
    --quicklook-addToCart-background: var(--global-addToCart-background);
    --quicklook-addToCart-border: var(--global-addToCart-border);
    --quicklook-addToCart-color: var(--global-addToCart-color);
    --quicklook-addToCart-backgroundHover: var(--global-addToCart-backgroundHover);
    --quicklook-addToCart-borderHover: var(--global-addToCart-borderHover);
    --quicklook-addToCart-colorHover: var(--global-addToCart-colorHover);
    --quicklook-stockLabelWidth: 135px;
}


/* Quick Look Modal */

.quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
    margin-top: 55px;
}

/* Close button */
.quicklookitem-wrapper .quicklookitem-close {
    border-radius: var(--quicklook-borderRadius);
}

/* Right-side content layout */
.quicklookitem-wrapper .quicklookitem-inner-right {
    display: flex;
    flex-flow: column;
    background: var(--quicklook-background);
}

/* Product name */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---name {
    font-size: var(--quicklook-titleSize);
}

/* Price */
.quicklookitem-wrapper .quicklookitem-inner-right---prices-price {
    font-family: var(--font-bold);
    font-size: var(--quicklook-titleSize);
}

/* Was price */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
    color: var(--quicklook-hoverColor);
}

/* View full details link */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-buttonColor);
    background: var(--quicklook-buttonBackground);
    border: var(--quicklook-buttonBorder);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    transition: var(--quicklook-buttonTransition);
}

.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link:hover {
    background: var(--quicklook-buttonBackgroundHover);
    color: var(--quicklook-buttonColorHover);
    border: var(--quicklook-buttonBorderHover);
    padding: var(--quicklook-buttonPaddingHover);
}

/* Click and Collect notice */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
    margin-top: auto;
    background: transparent;
    border: none;
    color: var(--quicklook-textColor);
}

/* Product image spacing */
.quicklookitem-wrapper .quicklookitem-image > div {
    margin: var(--quicklook-margin);
}


/* Add to Cart Area */

.add-to-cart-area-1-row-2 > div {
    gap: .5rem;
}

/* Quantity label */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty-label {
    background: none;
    border: 0;
    color: var(--quicklook-textColor);
}

/* Quantity input */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty input {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
}

/* Add to cart button: in stock */
.quicklookitem-wrapper .add-to-cart-area-button.bgStandard {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-addToCart-color);
    background: var(--quicklook-addToCart-background);
    border: var(--quicklook-addToCart-border);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    width: 100%;
    display: flex;
    justify-content: center;
    transition: var(--quicklook-buttonTransition);
    line-height: normal;
    align-items: center;
}

.quicklookitem-wrapper .add-to-cart-area-button.bgStandard:hover {
    background: var(--quicklook-addToCart-backgroundHover);
    color: var(--quicklook-addToCart-colorHover);
    border: var(--quicklook-addToCart-borderHover);
}

/* Add to cart button: out of stock */
.quicklookitem-wrapper .add-to-cart-area-button[data-available="false"] {
    background: var(--quicklook-hoverColor);
}

/* Stock message */
.quicklookitem-wrapper .add-to-cart-area-msg-stock:after {
    text-align: left;
}

.quicklookitem-wrapper .add-to-cart-area-msg-stock:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Handling message */
.quicklookitem-wrapper .add-to-cart-area-msg-handling:after {
    text-align: left !important;
}

.quicklookitem-wrapper .add-to-cart-area-msg-handling:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Message container */
.quicklookitem-wrapper .add-to-cart-area-msg {
    border-top: none;
    margin-top: var(--quicklook-margin);
}
/* ==================== 08-CC-MiniBasket.css ====================
   Minibasket flyout. On mobile it becomes a full-height, 90%-width
   right-hand drawer; the "Continue Shopping" link (#ContinueLink, which
   calls clearAll() to close) is repurposed as a top-right close (x) on
   all viewports.
   Relocated here from 03-CC-NavigationSearch.css so all basket styling
   lives in one file. Loads last (08) so it wins the cascade.
   ============================================================ */

   :root {
    /* relocated basket tokens (unchanged values) */
    --basket-buttonSize: var(--fontSize-sm);
    --basket-pipSize: var(--fontSize-xs);
    --basketButtonBorder: var(--brand-dark);
    --basketButtonText: var(--text);
    --basketButtonHoverBackground: var(--brand-dark);
    --basketButtonHoverText: var(--text-inverse);
    --checkoutButtonBackground: var(--brand-accent);
    --basketPipBackground: var(--brand-accent);
    --basketPipColor: var(--text-on-accent);

    /* drawer knobs */
    --minibasket-width: 90%;          /* mobile */
    --minibasket-widthDesktop: 420px; /* desktop */
    --minibasket-z: 999999;


    --pipSize: 18px;
}

/* ---- relocated colour / border rules (unchanged behaviour) ---- */
.basketCtr.tbcnt.tbcntOpen {
    border-radius: var(--global-radius);
    border: 1px solid #c2c2c2;
    min-height: 70dvh;
    max-height: 100%;
    top: 0px;
    right: 0;
    max-width: 500px;
}

.activeminilink {
    border-radius: var(--global-radius) var(--global-radius) 0 0;
}




/* Basket pip (count badge) */
.wrapper.masthead .basketPip {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    font-size: var(--basket-pipSize);
    width: var(--pipSize);
    height: var(--pipSize);
    line-height: var(--pipSize);
    bottom: 50%;
    right: 5%;
}


.wrapper.masthead .basketPip2 {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    border-radius: 100%;
}

/* Checkout button */
.wrapper.masthead .CCartBut > div:last-of-type > a {
    background: var(--checkoutButtonBackground);
    border-radius: var(--global-buttonRadius);
}

/* ---- Continue Shopping -> close (x), all viewports ----
   #basket is a fixed full-height drawer (below), so it is the containing
   block for this absolutely-positioned close button on every viewport. */
#basket .CCartBut > div:first-of-type {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: auto;
    margin: 0;
    z-index: 1;
}
#ContinueLink {
    font-size: 0;              /* hide the "Continue Shopping" text */
    line-height: 0;
    width: auto;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border: none;
    background: none;
}
#ContinueLink::before {
    content: "\00D7";          /* x */
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text);
    transition: var(--global-transition);
}
#ContinueLink:hover::before { color: var(--brand); }

/* Checkout now fills the row (Continue is out of flow) */
#basket .CCartBut > div:last-of-type { width: 100%; }


/* ---- full-height right-hand drawer, slides in when opened (all viewports) ----
   Styled on .basketCtr (both states) and kept rendered off-canvas so the open
   transition can animate; display is forced on to beat the core display:none
   toggle, and the closed panel is hidden off-screen via transform + visibility. */
#basket.basketCtr {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: var(--minibasket-widthDesktop) !important;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    z-index: var(--minibasket-z);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: flex !important;
    flex-flow: column;
    transform: translateX(100%);   /* off-canvas to the right */
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
}
/* open state - slide into view */
#basket.basketCtr.tbcntOpen {
    transform: translateX(0);
    visibility: visible;
}

/* Push bottom section down */

#basket .col-1:has(#MiniBasketMerchandiseTotal) {
    margin-top: auto;
}


/* mobile / tablet: wider drawer + larger close */
@media (max-width: 1024px) {
    #basket.basketCtr { width: var(--minibasket-width) !important; }
    #basket .CCartBut > div:first-of-type { top: 0.75rem; right: 0.75rem; }
    #ContinueLink::before { font-size: 2.25rem; }
}

/* product list */

div[data-boxcontext*="minibasket"]{
    max-height: 100% !important;
}/* ==================== 99-CC-Custom.css ====================================
   THE CLIENT CHROME LAYER. Loads last, wins over every framework file.
   REWRITE THIS FILE FROM SCRATCH FOR EACH NEW CLIENT - stale rules here will
   override the next skin, and unlike a stray colour a stray rule cannot be
   found by searching for a token.

   WHAT BELONGS HERE
   Rule-level treatments that are this client's TASTE and nothing else: the
   specific way their dropdowns are framed, the shape of their search control,
   the devices that make their footer theirs.

   WHAT DOES NOT BELONG HERE - and must not creep back in
   Mechanism every client needs, and choices between known options. Those are in
   the framework, driven from 01-CC-Brand.css:

     the masked wordmark and nav icons ......... 03, Brand Assets
     transparent-over-hero nav ................. 03, Transparent-over-hero
     nav bar seam / link case / link tracking .. 03, --navBorderBottom,
                                                 --navItems*
     nav underline hover device ................ 03, --navUnderline-display
     platform CTA strip visibility ............. 03, --ctaStrip-display
     carousel pagination shape and arrow feel .. 05, --splidePagination*,
                                                 --splideArrowHover*
     every word the CSS writes ................. 01, --copy-*
     the page canvas ........................... 02

   Before adding a rule, ask whether a token could express it. If one could, add
   the token to the owning framework file instead. The test that keeps this file
   honest: could the NEXT client want the opposite of this rule and get it by
   editing 01 alone? If yes, it is a switch, not chrome.

   Tokens declared here use the --skin-* prefix, never the client's initials. A
   --tj-* style vocabulary is how one client's assumptions survive into the next
   build unnoticed. lint.ps1 flags any other prefix.

   A worked example of this file, fully populated, is in
   examples/templeton-jones/99-CC-Custom.css - including two blocks that were
   deliberately NOT promoted, and the reasoning for each.

   ---------------------------------------------------------------------------
   THIS CLIENT: a bright white canvas with near-black ink (#1C1F2C) and a
   single deep teal-black brand colour (#152428) used sparingly for CTAs and
   text links - no separate accent or hover shade yet. One typeface (DM Sans)
   for everything, regular and medium weight only, no distinct display face.
   Chrome is flat and rectangular: sharp 3px corners, filled buttons on light
   ground, plain underlined text links where a full button would be too
   heavy. No hardcoded copy or client-prefixed tokens are used below because
   none of the current homepage bands need client-only chrome - everything
   so far is expressible as a value in 01 or lives in the new stripe CSS.
   =========================================================================== */

:root {
    /* No client-local values needed yet - nothing on this homepage required
       a token outside 01 or the stripe CSS in CC-Home.css. */
}


/* ==================== Nav (03 overrides) ==================== */


/* ==================== Carousels (05 overrides) ==================== */


/* ==================== Footer (06 overrides) ==================== */


/* ==================== PLP / PDP (faf, detail overrides) ==================== */



/* 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 - the homepage
   ----------------------------------------------------------------------------
   ASSEMBLED FROM stripes/. This file is the concatenation of _shared/stripe.css
   followed by each chosen stripe's stripe.css, in display order. Keep that
   order in step with the section order in default.aspx: the numbers are
   documentation only, since every rule keys off its .hp-* class name, but they
   are the map the next person reads.

   CONVENTIONS THAT MUST HOLD
   - Tokens only. No raw colour, radius, shadow or font size. If a value is
     missing, add a token to the component that owns it - not a literal here.
   - Vertical rhythm comes from --section-padding-sm / -lg (02), not per-stripe
     invented values. A full-bleed opening hero carries no section padding at
     all, so the image runs flush to the nav.
   - Horizontal inset comes from --gutter (02). Do not re-type the clamp.
   - A carousel stripe must chain its height: set it on .splide, then pass 100%
     to .splide__track, __list and __slide. Content-height stripes omit the
     chain deliberately.
   - Comments here are load-bearing. They record WHY a rule exists. Read them
     before restructuring a stripe, and update them when the reasoning changes.

   THIS CLIENT: four bands - a full-bleed opening hero (single photo, left
   scrim, underlined text-link CTA), a collection-card carousel (image over a
   flat panel with heading/body/button), a heading row over a photographic
   category-tile carousel (caption + text-link, no panel), and a full-width
   product carousel (heading only, no side rail). The hero and the first two
   carousels are new stripe shapes built directly here, not yet proven in a
   browser or extracted to the shared kit - see this tree's CLAUDE.md.
   ============================================================================ */

/* ==== 0. SHARED CAROUSEL CHROME - scroll-bar pagination, quiet arrows ====
   Scoped to [data-splide-opts] so it self-maintains across grid/carousel swaps.
   The SAME geometry runs on every carousel (hero cards, category rail, product
   rail), so a stripe only sets its own colours if it sits on a dark band.

   SHAPE: a scroll bar, not dashes. One continuous thin track the full width of
   the carousel, divided into equal contiguous segments - one per Splide page -
   with the current segment filled dark like a scrollbar thumb. The segments are
   flex: 1 with zero gap, so the fill's width AND position report how far
   through the rail you are without any per-stripe geometry: 3 pages gives three
   thirds, 6 pages gives six sixths, and nothing needs re-tuning when perPage or
   the entry count changes in the back office.

   POSITION: static, so the bar flows BELOW the slides. The framework
   (05-CC-SplideBanners.css) absolutely positions pagination at bottom-centre
   INSIDE the track, which is right for a full-bleed photo hero but lands on top
   of the card panels here - it was sitting over the middle card's button.
   Overriding it once at this scope also means a new carousel stripe on this page
   inherits the below-the-cards placement instead of re-discovering the bug. */

[data-splide-opts] .splide__pagination {
    position: static;
    inset: auto;
    transform: none;
    display: flex;
    flex-wrap: nowrap;    /* Splide's own CSS wraps; wrapped segments would
                             stack into a second bar instead of dividing one */
    width: 100%;
    gap: 0;
    margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
    padding: 0;
    /* the unfilled part of the bar: inactive segments are transparent and let
       this show through, so the track reads as one unbroken line */
    background: var(--black-10);
    border-radius: 0;
    /* no overflow: hidden here - it would clip the segments' focus ring, which
       sits outside their 3px box */
    max-width: 1360px;
    margin: 40px auto;
}

/* Splide wraps each button in an <li>; the li has to stretch too or the
   buttons cannot divide the track evenly */
[data-splide-opts] .splide__pagination li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

[data-splide-opts] .splide__pagination__page {
    flex: 1 1 auto;
    width: auto;          /* beats the framework's --splidePaginationWidth */
    height: 2px;
    margin: 0;            /* Splide ships margin: 3px - it would gap the bar */
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    opacity: 1;
    transform: none;
    transition: var(--global-transition);
}

/* Splide's stock focus ring is a 3px #0bf outline on :focus as well as
   :focus-visible - loud, off-brand, and it fires on mouse clicks. Keyboard
   users still get a ring; clicking a segment no longer leaves one. */
[data-splide-opts] .splide__pagination__page:focus {
    outline: none;
}

[data-splide-opts] .splide__pagination__page:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 4px;
}

/* hover is a hint that the segment is clickable - a mid tone, NOT the active
   fill, or hovering reads as "this page is current" */
[data-splide-opts] .splide__pagination__page:hover {
    background: oklch(from var(--brand-dark) l c h / 0.4);
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: auto;
    background: var(--brand-dark);
    transform: none;
}

[data-splide-opts] .splide__arrow {
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    opacity: 0.7;
    transition: var(--global-transition);
}

[data-splide-opts] .splide__arrow svg {
    fill: var(--text);
    width: 1.1rem;
    height: 1.1rem;
    transition: var(--global-transition);
}

[data-splide-opts] .splide__arrow:hover {
    opacity: 1;
    background: var(--black-10);
    border-color: var(--border-light);
}


/* ==== 0b. SHARED HOMEPAGE BANNER CTA - filled button, the standard site
   button ramp (matches the mockup's solid dark button exactly, since
   --global-buttonBackground resolves to --brand-dark = --brand for this
   client). Every stripe's .cc-banner__cta is styled from this ONE rule -
   add a new stripe to the selector list below rather than re-declaring
   the button elsewhere in this file. */
.hp-feature-cards .cc-banner__cta,
.hp-category-rail .cc-banner__cta,
.CC-HomepageTitles .cc-collection .cc-banner__cta,
.CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    align-self: flex-start;
    margin-top: auto;
    background: transparent;
    color: var(--global-buttonBackground);
    border-bottom: 1px solid currentColor;
    border-radius: 0px;
    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-buttonTransition);
    padding-bottom: 2px;
}

.hp-feature-cards .cc-banner:hover .cc-banner__cta,
.hp-category-rail .cc-banner:hover .cc-banner__cta {
    border: var(--global-buttonBorderHover);
}


/* ==== 0c. hp-hero - full-bleed opening banner. NEW SHAPE: a single static
        photo (BannerCollectionDisplayGrid, no carousel) with a LEFT-edge
        gradient scrim rather than the framework default's bottom/diagonal
        one, text vertically centred and left-aligned over the scrim, and a
        plain underlined text-link CTA - the house style 99-CC-Custom.css's
        header calls for ("plain underlined text links where a full button
        would be too heavy") but that no stripe had used yet. Runs flush
        under the nav: no section-padding, per this file's own convention for
        a full-bleed opener. ==== */

.hp-hero .cc-banner__img,
.hp-hero .cc-banner__img img {
    aspect-ratio: 3.3 / 1;
    height: auto;
    object-fit: cover;
}

.hp-hero .cc-banner__body {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    background: var(--gradient-overlay-left);
    padding-inline: var(--gutter);
}

.hp-hero .text-wrap {
    max-width: 26rem;
}

.hp-hero .cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-lg);
    line-height: 1.15;
    color: var(--bannerText);
}

.hp-hero .cc-banner__desc {
    font-size: var(--fontSize-base);
    color: var(--bannerText);
    opacity: 0.95;
}

.hp-hero .cc-banner__cta {
    color: var(--bannerText);
    font-family: var(--global-buttonFontFamily);
    font-size: var(--global-buttonSize);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: var(--global-transition);
}

.hp-hero .cc-banner:hover .cc-banner__cta {
    opacity: 0.7;
}

/* mobile: image runs taller (not wider) so the scrim text-block still has
   room to breathe once the heading wraps to more lines */
@media (max-width: 640px) {
    .hp-hero .cc-banner__img,
    .hp-hero .cc-banner__img img {
        aspect-ratio: 4 / 5;
    }

    .hp-hero .cc-banner__title {
        font-size: var(--fontSize-2xl);
    }
}


/* ==== 0d. SHARED HOMEPAGE BANNER TITLE - unified typography and link-style
   hover, shared across every card-style banner title. hp-hero's title stays
   separate above (0c): it needs light, larger text for photo-overlay
   legibility, the same reason its CTA stayed its own text-link style. Add a
   new stripe to the selector list below rather than re-declaring the title
   elsewhere in this file. */
.hp-feature-cards .cc-banner__title,
.hp-category-rail .cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-mdl);
    line-height: 1.2;
    color: var(--text);
    max-width: none;
    transition: var(--global-transition);
}

.hp-feature-cards .cc-banner:hover .cc-banner__title,
.hp-category-rail .cc-banner:hover .cc-banner__title {
    color: var(--brand-link);
}

@media (max-width: 640px) {
    .hp-feature-cards .cc-banner__title,
    .hp-category-rail .cc-banner__title {
        font-size: var(--fontSize-lg);
    }
}


/* ==== 1. hp-feature-cards - collection-card carousel. NEW SHAPE: image on
        top, a FLAT PANEL below it (not an overlay) holding heading + body +
        filled button. Content-height slides - no splide height chain, the
        image's own aspect ratio plus the panel's natural height set the
        card height. ==== 

.hp-feature-cards {
    padding-block: var(--section-padding-sm);
} */

/* the framework's Splide-context rules (04-CC-BannerCollections.css) assume
   a chained, viewport-driven height and force height:100% + aspect-ratio:
   unset on the image so it fills that height. This stripe is content-height
   instead, so both are overridden back to a fixed aspect ratio - the mockup's
   hero cards run ~538x486. */
.hp-feature-cards .splide__slide .cc-banner {
    height: auto;
    display: flex;
    flex-direction: column;
}

.hp-feature-cards .splide__slide .cc-banner__img,
.hp-feature-cards .splide__slide .cc-banner__img img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* the panel - static in normal flow below the image, not the framework's
   absolute overlay. --bannerText is not used here (it defaults to
   --text-inverse for photo overlays): this panel sits on a light tile, so
   title/desc are recoloured to --text directly or they would be invisible. */
.hp-feature-cards .cc-banner__body {
    position: static;
    inset: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: flex-start;
    background: var(--background-raised);
    padding: 1.2rem;
    gap: var(--text-block-wrap);
}

/* title styled by the shared rule in section 0d */

.hp-feature-cards .cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--text);
    opacity: 0.85;
}

/* PRIMARY CTA - styled by the shared rule in section 0b, pinned to the foot
   of the panel with margin-top: auto so buttons stay flush even when
   descriptions run different lengths. */

/* pagination: the scroll bar in section 0 handles it. This stripe is where the
   framework's absolute placement did visible damage - the bar landed inside the
   middle card, level with its button - so if pagination ever reappears on top of
   a card, the rule that moved it is up there, not here. Full width is correct:
   these cards run full-bleed, so the bar spans exactly what scrolls. */

/* mobile title size: handled by the shared rule in section 0d */


/* ==== 2. hp-category-rail - heading row above a photographic category-tile
        carousel. NEW SHAPE: captioned photo tiles with a plain text-link
        CTA and no card panel - the opposite anatomy of hp-feature-cards,
        which is why this earns its own stripe rather than a retune of it.
        Entry 1 of the collection is the heading (bannerLimit=1), entries 2..
        are the tiles - same split-collection mechanism as hp-logo-strip. ==== */

.hp-category-rail {
    padding-block: var(--section-padding-sm);
}

/* heading - Title only. Description/CTA are left unbound in the back office
   for this entry; the framework's :empty rule (04) hides them automatically
   if so. */
.hp-category-rail .CC-HomepageTitles {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin: 0 0 var(--text-block-wrap);
    padding: 0 var(--gutter);
}

.hp-category-rail .CC-HomepageTitles .cc-collection .cc-banner {
    align-items: flex-start;
    text-align: left;
}

.hp-category-rail .CC-HomepageTitles .cc-collection .cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-lg);
    line-height: 1.3;
    color: var(--text);
    max-width: none;
}

.hp-category-rail > .cc-collection {
    padding-inline: var(--gutter);
}

/* the tiles - content-height, same override rationale as hp-feature-cards:
   the framework's Splide-context rules assume a chained height, this rail
   sizes each tile by the image's own aspect ratio instead. */
.hp-category-rail .splide__slide .cc-banner {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-category-rail .splide__slide .cc-banner__img,
.hp-category-rail .splide__slide .cc-banner__img img {
    height: auto;
    aspect-ratio: 7 / 8;
    object-fit: cover;
}

/* no card panel - the caption sits directly on the page canvas */
.hp-category-rail .cc-banner__body {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    gap: 0.5rem;
}

/* title styled by the shared rule in section 0d; the per-tile desc stays
   hidden below so the section heading above is not repeated on every tile */

.hp-category-rail .cc-banner__desc {
display: none;;
}

/* CTA is styled by the shared rule in section 0b, matching hp-feature-cards'
   filled button rather than a text link. */

/* pagination: nothing to add. The shared scroll bar in section 0 already flows
   below the rail in the right colours, and because it lives inside
   > .cc-collection (which carries padding-inline: var(--gutter) above) the bar
   lines up with the tiles rather than the viewport edge. */


/* ==== 3. hp-product-rail - RETUNED from the kit's stripes/product-rail: the
        mockup runs a full-width heading with nothing beside the cards, so
        the library's side-rail grid (rail 1fr beside a 3.2fr carousel) is
        collapsed to a single column here, and the rail's description/CTA
        are hidden - heading only. Card count per view raised from 3 to 6
        since the cards no longer share the row with a rail column. ==== */

.hp-product-rail {
    padding-block: var(--section-padding-sm);
}

/* RUNW retune: full-width stack (heading above, carousel below) at every
   width, not just the library's <1024px breakpoint - this design never uses
   the side-by-side rail layout. */
.hp-product-rail > .faf-product-carousel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--text-block-wrap);
    align-items: start;
    padding-inline: var(--gutter);
    padding-bottom: 3.25rem;
    position: relative;
}

/* Grid tracks default to minmax(auto, 1fr); "auto" falls back to this item's
   min-content size, which for a grid child wrapping a Splide list drills into
   the un-sized flex slides and picks up the full width of every product
   image. That stretches this column - and everything under it, .wrapper
   included - past the viewport before Splide ever gets to divide it into
   perPage slides. min-width: 0 opts this item out of that auto-sizing. */
.hp-product-rail .faf-splide-container {
    min-width: 0;
}

.hp-product-rail > .faf-product-carousel:not(:has(.faf-product-card)) {
    padding-bottom: 0;
}

.hp-product-rail .faf-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--text-wrap);
    margin: 0;
}

.hp-product-rail .faf-title {
    font-family: var(--font-display);
    font-size: var(--fontSize-lg);
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

/* RUNW retune: the mockup shows heading only in this band, no body copy and
   no separate view-more link beside it - both hidden rather than styled. */
.hp-product-rail .faf-description,
.hp-product-rail .faf-product-btn-container {
    display: none;
}

/* product cards - image on a light tile, name + price beneath.
   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;
}

/* wraps image link + the quick-buy circle so the circle can be pinned to the
   image's own corner regardless of how tall .faf-product-info grows below it */
.hp-product-rail .faf-product-image-wrap {
    position: relative;
}

.hp-product-rail .faf-product-image-link {
    display: block;
    background: var(--background-raised);
    overflow: hidden;
    padding: 20px;
}

.hp-product-rail .faf-product-image {
    aspect-ratio: 1 / 1;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: transform 0.6s ease;
    mix-blend-mode: darken;
}

.hp-product-rail .faf-product-card:hover .faf-product-image {
    transform: scale(1.03);
}

.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;
    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);
}

/* quick-buy button - a 32px circle pinned to the image's bottom-right corner,
   eye-icon-style overlay rather than an inline text button under the name */
.hp-product-rail .faf-quick-buy-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: var(--global-transition);
}

.hp-product-rail .faf-quick-buy-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.hp-product-rail .faf-quick-buy-btn:hover {
    background: var(--brand-dark);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
}

.hp-product-rail .faf-splide-container,
.hp-product-rail .faf-splide {
    position: static;
}

.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;
}

/* pagination: the shared scroll bar (section 0) flows in below the cards, and
   the carousel's padding-bottom above keeps it clear of the arrows, which are
   absolutely positioned into that reserved strip rather than in the flow. */


.gutter-padding {
    padding-inline: var(--gutter);
    padding-block: var(--section-padding-sm);
    float: none;
   }