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

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


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

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


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

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

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

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

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

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

.pos-rel {
    position:relative;
}

.pos-abs {
    position:absolute;
}

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

.pos-fix {
    position:fixed;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

.hdrRewardsTitle {
}

.slides.thinBanner {
    margin: 0;
}

.backgrounrdsignup.thinBanner {
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ctrNavigation {
    align-self: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .NodeLevel1 > .CSSFacetNavModules a {
    }

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

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

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

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

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

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

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

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

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

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

.loginCtr .lockIcon {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

div.basketCtr h3 {
    margin: 0;
}

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

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

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

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

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

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

    .CCartBut > div {
        padding: 4px;
    }

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

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

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

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

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

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

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

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

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

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

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

.minibasket-toggles {
}

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

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

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

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

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

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

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

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

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

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

.basketstarbuy-strap {
}

.basketstarbuy-desc {
}

.sbuy-offers {
    background: #a46ec2;
}

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

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

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

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

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

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

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

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

    .navIcons {
        height: 48px;
    }

    .logoContainer {
        width: 96px;
    }

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

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

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

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

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

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

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

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

        .ctrNavigation.tbcntOpen {
            display: block;
        }

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

    .CSSFacetNavModules {
    }

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

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

    a#TopBanner1_CSSFacetNav2_TopLevel_ctl02_hylNode {
    }

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

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

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

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

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

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

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

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

    .ctrNavigation > .CSSFacetNavModules {
        display: inline
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.lable, lable {
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancybox-active {
    height: auto
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancybox-spaceball {
    z-index: 1
}

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

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

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

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

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

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

.fancybox-iframe {
    vertical-align: top
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

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

.small {
    font-size: small;
}

.normal {
    font-size: medium;
}

.large {
    font-size: large;
}

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

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

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

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

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

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

.container {
    background: #fff;
}

.colorwhite {
    color: white
}

.colorblack {
    color: black
}

.backgroundwhite {
    background: white
}

.backgroundblack {
    background: black
}

.backgroundblacki {
    background: black !important;
}

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

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

.centralised {
    text-align: center
}

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

    .warning i {
        margin: 0 7px
    }

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

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

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

    .alert strong {
        font-size: large
    }

    .alert p {
        opacity: 0.8
    }

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

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .breadcrumbs a {
        opacity: 0.5
    }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.borderi {
    border: 1px solid;
}

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

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

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

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

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

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

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

.borderradius {
    border-radius: 4px;
}

.borderradius3 {
    border-radius: 3px;
}

.borderradius8 {
    border-radius: 8px;
}

.borderradius100 {
    border-radius: 100%;
}

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

.coGreen {
    color: #46d82d;
}

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

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

.coCCC {
    color: #ccc;
}

.coRED {
    color: #fd4239;
}

.coStarbuys {
    color: #a46ec2;
}

.coWhite {
    color: white;
}

.bgWhite {
    background: white;
}

.bgf4 {
    background: #f4f4f4;
}

.bgeb {
    background: #eee;
}

.bgd7 {
    background: #ddd;
}

.bgStandard {
    background: #2f76ec;
}

.bgGreen {
    background: #46d82d;
}

.bgLGreen {
    background: #E8FFED;
}

.bgLBlue {
    background: #e8f4ff;
}

.bgLRed {
    background: #fee7e6;
}

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

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

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

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

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

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

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



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

textarea {
    min-height: 200px
}

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

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

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

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

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

/* -- forms buttons  -- */

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

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

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

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

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

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

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

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

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

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


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

.dark select {
    color: #fff
}

.dark option {
    color: #000
}

.selectWrapper {
    position: relative
}

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

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

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


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

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

.error {
    background: #A82123 !important
}

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

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

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

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

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

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

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

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

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

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

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

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

    table#radFinanceProductList input {
        display:none;
    }

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

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

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


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

.minVal {
    text-align: left;
}

.maxVal {
    text-align: right;
}

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    33% {
        background: #3F37C9;
    }

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

    66% {
        background: #7209B7;
    }

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

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

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

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

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

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

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

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

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

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

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

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

[onclick*="AddStockNotificationModular"] {
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-cloud-off:before {
    content: "\e92a";
}

.icon-cloud-rain:before {
    content: "\e92b";
}

.icon-cloud-snow:before {
    content: "\e92c";
}

.fa-cloud-upload:before,
.icon-cloud-upload:before,
.icon-upload-cloud:before {
    content: "\ea04";
}

.icon-code:before {
    content: "\e92d";
}

.icon-codepen:before {
    content: "\e92e";
}

.icon-codesandbox:before {
    content: "\e92f";
}

.icon-coffee:before {
    content: "\e930";
}

.icon-cog:before,
.icon-settings:before {
    content: "\e9db";
}

.icon-columns:before {
    content: "\e931";
}

.icon-command:before {
    content: "\e932";
}

.icon-compass:before {
    content: "\e933";
}

.icon-content-left:before {
    content: "\e101";
}

.icon-content-right:before {
    content: "\e100";
}

.icon-minimize:before,
.icon-contract:before {
    content: "\e9b2";
}

.icon-copy:before {
    content: "\e934";
}

.icon-corner-down-left:before {
    content: "\e935";
}

.icon-corner-down-right:before {
    content: "\e936";
}

.icon-corner-left-down:before {
    content: "\e937";
}

.icon-corner-left-up:before {
    content: "\e938";
}

.icon-corner-right-down:before {
    content: "\e970";
}

.icon-corner-right-up:before {
    content: "\e971";
}

.icon-corner-up-left:before {
    content: "\e972";
}

.icon-corner-up-right:before {
    content: "\e973";
}

.icon-cpu:before {
    content: "\e954";
}

.icon-credit-card:before {
    content: "\e955";
}

.icon-crop:before {
    content: "\e956";
}

.fa-close:before,
.icon-x:before,
.icon-cross:before {
    content: "\ea16";
}

.icon-crosshair:before {
    content: "\e957";
}

.icon-database:before {
    content: "\e958";
}

.icon-delete:before {
    content: "\e959";
}

.icon-disc:before {
    content: "\e95a";
}

.icon-divide:before {
    content: "\e95b";
}

.icon-divide-circle:before {
    content: "\e95c";
}

.icon-divide-square:before {
    content: "\e95d";
}

.icon-dollar-sign:before {
    content: "\e95e";
}

.icon-download:before {
    content: "\e95f";
}

.icon-dribbble:before {
    content: "\e961";
}

.icon-drop:before,
.icon-droplet:before {
    content: "\e962";
}

.icon-edit:before {
    content: "\e963";
}

.icon-edit-2:before {
    content: "\e964";
}

.icon-edit-3:before {
    content: "\e965";
}

.fa-ellipsis-h:before,
.icon-more-horizontal:before,
.icon-ellipsis:before {
    content: "\e9b9";
}

.icon-esc:before {
    content: "\e089";
}

.icon-expand:before,
.icon-maximize:before {
    content: "\e9aa";
}

.icon-external-link:before,
.icon-open:before,
.fa-external-link:before,
.fa-external-link-square:before {
    content: "\e966";
}

.icon-eye:before {
    content: "\e967";
}

.icon-eye-off:before {
    content: "\e968";
}

.icon-facebook:before {
    content: "\e969";
}

.icon-fast-forward:before {
    content: "\e96a";
}

.icon-feather:before {
    content: "\e96b";
}

.icon-figma:before {
    content: "\e96c";
}

.icon-file:before {
    content: "\e96d";
}

.icon-file-add:before {
    content: "\e125";
}

.icon-file-minus:before {
    content: "\e96e";
}

.icon-file-plus:before {
    content: "\e96f";
}

.icon-file-subtract:before {
    content: "\e126";
}

.icon-file-text:before {
    content: "\e94c";
}

.icon-film:before {
    content: "\e94d";
}

.icon-filter:before {
    content: "\e94e";
}

.icon-flag:before {
    content: "\e94f";
}

.icon-folder:before {
    content: "\e950";
}

.icon-folder-minus:before {
    content: "\e951";
}

.icon-folder-plus:before {
    content: "\e952";
}

.icon-framer:before {
    content: "\e953";
}

.icon-frown:before {
    content: "\e98c";
}

.icon-gift:before {
    content: "\e98d";
}

.icon-git-branch:before {
    content: "\e98e";
}

.icon-git-commit:before {
    content: "\e98f";
}

.icon-git-merge:before {
    content: "\e992";
}

.icon-git-pull-request:before {
    content: "\e993";
}

.icon-github:before {
    content: "\e990";
}

.icon-gitlab:before {
    content: "\e991";
}

.icon-globe:before {
    content: "\e994";
}

.icon-grid:before {
    content: "\e995";
}

.icon-grid-2:before {
    content: "\e103";
}

.icon-hard-drive:before {
    content: "\e996";
}

.icon-hash:before {
    content: "\e997";
}

.icon-user:before,
.icon-head:before {
    content: "\ea07";
}

.icon-headphones:before {
    content: "\e998";
}

.icon-heart:before {
    content: "\e974";
}

.icon-help:before,
.icon-help-circle:before {
    content: "\e975";
}

.icon-hexagon:before {
    content: "\e976";
}

.icon-home:before {
    content: "\e977";
}

.icon-image:before {
    content: "\e978";
}

.icon-inbox:before {
    content: "\e979";
}

.icon-info:before {
    content: "\e97a";
}

.icon-instagram:before {
    content: "\e97b";
}

.icon-italic:before {
    content: "\e97c";
}

.icon-key:before {
    content: "\e97d";
}

.icon-layers:before {
    content: "\e97e";
}

.icon-layout:before {
    content: "\e97f";
}

.icon-life-buoy:before {
    content: "\e980";
}

.icon-link:before {
    content: "\e981";
}

.icon-link-2:before {
    content: "\e982";
}

.icon-linkedin:before {
    content: "\e983";
}

.icon-list:before {
    content: "\e984";
}

.icon-loader:before {
    content: "\e985";
}

.icon-location:before {
    content: "\e070";
}

.icon-location-2:before {
    content: "\e071";
}

.icon-lock:before,
.fa-lock:before {
    content: "\e986";
}

.icon-log-in:before {
    content: "\e987";
}

.icon-log-out:before {
    content: "\e988";
}

.icon-mail:before,
.fa-envelope-open:before,
.fa-envelope-open-o:before,
.fa-envelope-square:before,
.fa-envelope:before,
.fa-envelope-o:before {
    content: "\e989";
}

.icon-map:before {
    content: "\e98a";
}

.icon-map-pin:before {
    content: "\e98b";
}

.icon-marquee:before {
    content: "\e082";
}

.icon-marquee-minus:before {
    content: "\e084";
}

.icon-marquee-plus:before {
    content: "\e083";
}

.icon-maximize:before,
.fa-arrows-alt:before,
.fa-arrows:before,
.fa-expand:before {
    content: "\e9aa";
}

.icon-maximize-2:before {
    content: "\e9ab";
}

.icon-meh:before {
    content: "\e9ac";
}

.fa-bars:before,
.icon-menu:before,
.fa-sliders:before {
    content: "\e9ad";
}

.icon-message-square:before {
    content: "\e9af";
}

.icon-mic-off:before {
    content: "\e9b1";
}

.icon-microphone:before,
.icon-mic:before {
    content: "\e9b0";
}

.icon-minimize:before,
.fa-compress:before {
    content: "\e9b2";
}

.icon-minimize-2:before {
    content: "\e9b3";
}

.icon-minus:before {
    content: "\e9b4";
}

.icon-monitor:before {
    content: "\e9b7";
}

.icon-moon:before {
    content: "\e9b8";
}

.icon-more-vertical:before {
    content: "\e9ba";
}

.icon-mouse-pointer:before {
    content: "\e9bb";
}

.icon-move:before {
    content: "\e9bc";
}

.icon-music:before {
    content: "\e9bd";
}

.icon-volume-x:before,
.icon-mute:before {
    content: "\ea11";
}

.icon-navigation:before {
    content: "\e9be";
}

.icon-navigation-2:before {
    content: "\e9bf";
}

.icon-octagon:before {
    content: "\e999";
}

.icon-outbox:before {
    content: "\e123";
}

.icon-package:before {
    content: "\e99a";
}

.icon-paper:before {
    content: "\e034";
}

.icon-paper-clip:before,
.icon-paperclip:before {
    content: "\e99b";
}

.icon-paper-stack:before {
    content: "\e035";
}

.icon-paragraph:before {
    content: "\e025";
}

.icon-pause:before {
    content: "\e99c";
}

.icon-pause-circle:before {
    content: "\e99d";
}

.icon-pen-tool:before {
    content: "\e99e";
}

.icon-percent:before {
    content: "\e99f";
}

.icon-phone:before {
    content: "\e9a0";
}

.icon-phone-call:before {
    content: "\e9a1";
}

.icon-phone-forwarded:before {
    content: "\e9a2";
}

.icon-phone-incoming:before {
    content: "\e9a3";
}

.icon-phone-missed:before {
    content: "\e9a4";
}

.icon-phone-off:before {
    content: "\e9a5";
}

.icon-phone-outgoing:before {
    content: "\e9a6";
}

.icon-pie-chart:before,
.icon-pie-graph:before {
    content: "\e9a7";
}

.icon-play:before {
    content: "\e9a8";
}

.icon-play-circle:before {
    content: "\e9a9";
}

.icon-plus:before {
    content: "\e9c8";
}

.icon-pocket:before {
    content: "\e9cb";
}

.icon-power:before {
    content: "\e9cc";
}

.icon-printer:before {
    content: "\e9cd";
}

.icon-radio:before {
    content: "\e9ce";
}

.icon-record:before {
    content: "\e049";
}

.icon-refresh-ccw:before {
    content: "\e9cf";
}

.icon-refresh-cw:before,
.icon-reload:before {
    content: "\e9d0";
}

.icon-repeat:before {
    content: "\e9d1";
}

.icon-rewind:before {
    content: "\e9d2";
}

.icon-ribbon:before {
    content: "\e009";
}

.icon-reply:before,
.icon-rotate-ccw:before {
    content: "\e9d3";
}

.icon-rotate-cw:before {
    content: "\e9d4";
}

.icon-rss:before {
    content: "\e9d5";
}

.icon-save:before {
    content: "\e9d6";
}

.icon-scissors:before {
    content: "\e9d7";
}

.icon-search:before {
    content: "\e9d8";
}

.icon-send:before {
    content: "\e9d9";
}

.icon-server:before {
    content: "\e9da";
}

.icon-share:before {
    content: "\e9dc";
}

.icon-share-2:before {
    content: "\e9dd";
}

.icon-shield:before {
    content: "\e9de";
}

.icon-shield-off:before {
    content: "\e9df";
}

.icon-shopping-cart:before {
    content: "\e9e1";
}

.fa-unsorted:before,
.icon-shuffle:before {
    content: "\e9e2";
}

.icon-sidebar:before {
    content: "\e9e3";
}

.icon-signal:before {
    content: "\e011";
}

.icon-skip-back:before {
    content: "\e9c0";
}

.icon-skip-forward:before {
    content: "\e9c1";
}

.icon-slack:before {
    content: "\e9c2";
}

.icon-slash:before {
    content: "\e9c3";
}

.icon-sliders:before {
    content: "\e9c4";
}

.icon-smartphone:before {
    content: "\e9c5";
}

.icon-smile:before {
    content: "\e9c6";
}

.icon-speaker:before {
    content: "\e9c7";
}

.icon-speech-bubble:before,
.icon-message-circle:before {
    content: "\e9ae";
}

.icon-square:before {
    content: "\e9e4";
}

.icon-check-square:before,
.icon-square-check:before,
.fa-check-square-o:before,
.fa-check-square:before {
    content: "\e93f";
}

.icon-square-cross:before {
    content: "\e047";
}

.icon-minus-square:before,
.icon-square-minus:before {
    content: "\e9b6";
}

.icon-square-plus:before,
.icon-plus-square:before {
    content: "\e9ca";
}

.icon-stack:before {
    content: "\e032";
}

.icon-stack-2:before {
    content: "\e033";
}

.icon-star:before {
    content: "\e9e5";
}

.icon-stop:before {
    content: "\e054";
}

.icon-stop-circle:before {
    content: "\e9e6";
}

.icon-sun:before {
    content: "\e9e7";
}

.icon-sunrise:before {
    content: "\e9e8";
}

.icon-sunset:before {
    content: "\e9e9";
}

.icon-table:before {
    content: "\e9ea";
}

.icon-tablet:before {
    content: "\e9eb";
}

.icon-tag:before {
    content: "\e9ec";
}

.icon-target:before {
    content: "\e9ed";
}

.icon-terminal:before {
    content: "\e9ee";
}

.icon-thermometer:before {
    content: "\e9ef";
}

.icon-thumbs-down:before {
    content: "\e9f0";
}

.icon-thumbs-up:before {
    content: "\e9f1";
}

.icon-toggle:before {
    content: "\e003";
}

.icon-toggle-left:before {
    content: "\e9f2";
}

.icon-toggle-right:before {
    content: "\e9f3";
}

.icon-tool:before {
    content: "\e9f4";
}

.icon-trash:before {
    content: "\e9f5";
}

.icon-trash-2:before {
    content: "\e9f6";
}

.icon-trello:before {
    content: "\e9f7";
}

.icon-trending-down:before {
    content: "\e9f8";
}

.icon-trending-up:before {
    content: "\e9f9";
}

.icon-triangle:before {
    content: "\e9fa";
}

.icon-truck:before {
    content: "\e9fb";
}

.icon-tv:before {
    content: "\e9fc";
}

.icon-twitch:before {
    content: "\e9fd";
}

.icon-twitter:before {
    content: "\e9fe";
}

.icon-type:before {
    content: "\e9ff";
}

.icon-umbrella:before {
    content: "\ea00";
}

.icon-underline:before {
    content: "\ea01";
}

.icon-unlock:before {
    content: "\ea02";
}

.icon-upload:before {
    content: "\ea03";
}

.icon-user-check:before {
    content: "\ea05";
}

.icon-user-minus:before {
    content: "\ea06";
}

.icon-user-plus:before {
    content: "\ea08";
}

.icon-user-x:before {
    content: "\ea0a";
}

.icon-users:before {
    content: "\ea09";
}

.icon-video:before {
    content: "\ea0b";
}

.icon-video-off:before {
    content: "\ea0c";
}

.icon-voicemail:before {
    content: "\ea0d";
}

.icon-volume:before {
    content: "\ea0e";
}

.icon-volume-1:before {
    content: "\ea0f";
}

.icon-volume-2:before {
    content: "\ea10";
}

.icon-watch:before {
    content: "\ea12";
}

.icon-wifi:before {
    content: "\ea13";
}

.icon-wifi-off:before {
    content: "\ea14";
}

.icon-wind:before {
    content: "\ea15";
}

.icon-x-circle:before {
    content: "\ea17";
}

.icon-x-octagon:before {
    content: "\ea18";
}

.icon-x-square:before {
    content: "\ea19";
}

.icon-youtube:before {
    content: "\ea1a";
}

.icon-zap:before {
    content: "\ea1b";
}

.icon-zap-off:before {
    content: "\ea1c";
}

.icon-zoom-in:before {
    content: "\ea1d";
}

.icon-zoom-out:before {
    content: "\ea1e";
}
.modular-review-faq-container---header {
    border-bottom: 1px solid black;
}

    .modular-review-faq-container---header span {
        line-height: 200%;
        background: #666;
        color: white;
        cursor: pointer;
    }

        .modular-review-faq-container---header span.r-section-active {
            background: black;
        }

        .modular-review-faq-container---header span i {
            display: block;
            float: right;
            background: rgba(255,255,255,0.15);
            font-size: smaller;
        }

.modular-review-faq-container---body {
    display: none;
}

    .modular-review-faq-container---body.r-section-active {
        display: block;
    }

.modular-review-faq-slidein {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    z-index: 100000;
    opacity: 0;
    display: none;
}

    .modular-review-faq-slidein.slidein-show {
        display: block;
        opacity: 1;
    }

.modular-review-faq-slidein-inner {
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100%;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    overflow-y: auto;
}

.modular-review-faq-slidein.slidein-show .modular-review-faq-slidein-inner {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}


.modular-review-faq-slidein-close {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
/**** STARBUY BRANDING ***************************************************************************/

:root {
    --starbuyColourOne: #f4eef8;
    --starbuyColourTwo: #e0d0ed;
    --starbuyColourThree: #9158bf;
    --starbuyColourOneApplied: #f4f8ee;
    --starbuyColourTwoApplied: #e3edd0;
    --starbuyColourThreeApplied: #789b43;
}

/**** DRAWER GENERICS ***************************************************************************/

.starbuy-drawer *:not(.fa),
.starbuy-drawer-promotion *:not(.fa),
.starbuy-faf-preview *:not(.fa) {
    font-family: 'MuliRegularFont' !important;
}

.starbuy-list-element *:not(.fa),
.starbuy-drawer-promo-header-description-top,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
.starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer,
.starbuy-product-preview .starbuy-product-preview-header,
.starbuy-faf-preview .starbuy-faf-preview-message-lead,
.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-family: 'MuliBoldFont' !important;
}

.starbuy-drawer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] {
        opacity: 1;
    }

    .starbuy-drawer[data-drawer-number="1"] {
        z-index: 500;
    }

    .starbuy-drawer[data-drawer-number="2"] {
        z-index: 501;
    }

.starbuy-drawer-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    min-height: 100%;
    width: 500px;
    max-width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] .starbuy-drawer-inner {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
    }

    .starbuy-drawer[data-drawer-number="1"] .starbuy-drawer-inner {
        width: 500px;
    }

.starbuy-drawer-promotion {
    width: 100%;
    min-height: 100%;
    padding: 32px;
    background: white;
    flex-grow: 1;
    -webkit-box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    overflow-x: none;
    overflow-y: auto;
    user-select: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.starbuy-drawer-close {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    flex-grow: 0;
    min-width: 32px;
    cursor: pointer;
    position: relative;
    background: black;
}

    .starbuy-drawer-close:before, .starbuy-drawer-close:after {
        position: absolute;
        top: 8px;
        left: 15px;
        content: ' ';
        height: 16px;
        width: 2px;
        background-color: white;
    }

    .starbuy-drawer-close:before {
        transform: rotate(45deg);
    }

    .starbuy-drawer-close:after {
        transform: rotate(-45deg);
    }

.starbuy-drawer-close-inner {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0.0625rem solid;
    color: var(--starbuyColourThree);
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    gap: 0.25rem;
}

.starbuy-drawer-promo-header {
    margin-bottom: 16px;
}

.starbuy-drawer-promo-header-title {
    background-color: var(--starbuyColourThree);
    color: var(--starbuyColourOne);
    padding: 8px 0;
    margin-bottom: 8px;
    text-align: center;
}

    .starbuy-drawer-promo-header-title span:before {
        content: '\e9e5';
        font-family: feather;
    }

.starbuy-drawer-promo-header-description {
    padding: 16px;
    background-color: var(--starbuyColourOne);
}

.starbuy-drawer-promo-header-description-top {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.25em;
}

.starbuy-drawer-promo-header-description-bottom {
    color: #222;
    font-size: 0.9em;
}

.starbuy-drawer-divider {
    width:100%;
    float:left;
    height:1px;
    background: var(--starbuyColourTwo);
    margin: 16px 0;
}


/**** DRAWER 1 - PRODUCT ***************************************************************************/
.starbuy-list-element {
    padding: 16px 48px 16px 16px;
    font-size: 1.25em;
    margin-bottom: 16px;
    position: relative;
    color: var(--starbuyColourThree);
    background-color: var(--starbuyColourOne);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    -moz-align-items: stretch;
}

    .starbuy-list-element:hover {
        background-color: var(--starbuyColourTwo);
    }

    .starbuy-list-element[data-applied="true"] {
        color: var(--starbuyColourThreeApplied);
        background-color: var(--starbuyColourTwoApplied);
        cursor: auto;
    }

        .starbuy-list-element[data-applied="true"]:hover {
            background-color: var(--starbuyColourTwoApplied);
        }

    .starbuy-list-element [class*="starbuy-list-element-"] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 32px;
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        align-content: center;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        font-size: 0.8em;
    }

    .starbuy-list-element .starbuy-list-element-arrow {
        background-color: var(--starbuyColourTwo);
        color: var(--starbuyColourThree);
    }

        .starbuy-list-element .starbuy-list-element-arrow:after {
            content: '\e910';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-check {
        background-color: var(--starbuyColourTwoApplied);
        color: var(--starbuyColourThreeApplied);
    }

        .starbuy-list-element .starbuy-list-element-check:after {
            content: '\e93d';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-prefix {
        background-color: var(--starbuyColourThree);
        color: white;
        position: relative;
        padding: 0 8px;
        margin: 0 16px 0 0;
        width: auto;
        top: auto;
        bottom: auto;
        left: auto;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-size: 10px;
    }

        .starbuy-list-element .starbuy-list-element-prefix:before {
            content: '\e9e5';
            font-family: feather;
            margin-right: 4px;
        }

.basket-itemrow-offers .starbuy-product-preview {
    float: left;
    margin: 0 8px 16px 0;
}

/**** DRAWER 2 - OFFER ***************************************************************************/

.starbuy-drawer-single-product {
}

    .starbuy-drawer-multi-products,
    .starbuy-drawer-single-product,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-single-product .starbuy-drawer-addtobasket,
    .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
    .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
    .starbuy-drawer-viewalloffers-backbutton,
    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > a,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > div {
        width: 100%;
        float: left;
    }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
        .starbuy-drawer-viewalloffers-backbutton {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .starbuy-drawer-viewalloffers-backbutton {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
        .starbuy-drawer-viewalloffers-backbutton {
            color: white;
            background-color: var(--starbuyColourThree);
            text-align: center;
            border-radius: 3px;
            padding: 8px 0;
            font-size: 0.8em;
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
            .starbuy-drawer-viewalloffers-backbutton {
                background-color: white;
                border: 1px solid;
                border-color: var(--starbuyColourThree);
                color: var(--starbuyColourThree);
            }

                .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget:hover,
                .starbuy-drawer-viewalloffers-backbutton:hover {
                    background-color: var(--starbuyColourThree);
                    color: white;
                }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook {
            color: var(--starbuyColourThree);
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook:after {
                content: '\e966';
                font-family: feather;
                margin-left: 4px;
                display: inline-block;
            }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
        margin: 0 0 16px 0;
        display: block;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        margin: 0 0 8px 0;
    }

    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        min-height: calc(1.55em * 3);
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price > div,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price > div {
            float: left;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy {
            color: var(--starbuyColourThree);
            margin: 0 16px 0 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy {
            color: #999;
            text-decoration: line-through;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer {
            width: 100%;
            font-size: 0.7em;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-dropdown-qty {
            display: none !important;
        }

    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 16px 0 0 0;
    }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct {
            font-size: 0.8em;
            padding: 4px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
            font-size:0.9em;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
            font-size: 0.8em;
        }

    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 32px;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion {
        padding: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-single-product {
        padding: var(--padding, 32px);
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-promo-header {
        padding: var(--padding, 32px);;
        margin-bottom: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-viewalloffers-backbutton {
        margin-inline: var(--padding, 32px);
        width: calc( 100% - calc( var(--padding, 32px) * 2 ));
    }

    .starbuy-drawer[data-drawer-number="2"] :is(.starbuy-drawer-top-buttons, .starbuy-drawer-multi-products-items) {
        padding: 0 var(--padding, 32px) var(--padding, 32px) var(--padding, 32px);
        overflow: hidden;
    }

    .starbuy-drawer-bottom-buttons {
        width: 100%;
        float: left;
        display: block;
        padding: var(--padding, 32px);
        background: var(--starbuyColourTwo);
    }

    .starbuy-drawer-top-buttons {
        background: transparent;
    }

    .starbuy-drawer-bottom-buttons :is(.starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget, .starbuy-drawer-viewalloffers-backbutton) {
        background: var(--starbuyColourThree);
        color: #fff;
        text-transform: uppercase;
    }

@media screen and (max-width: 768px) {
    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 16px;
    }
}

/**** PREVIEWS ***************************************************************************/

#detailfast-starbuys {
    width: 100%;
}

.starbuy-product-preview,
.starbuy-faf-preview {
    border: 1px solid;
    border-color: var(--starbuyColourThree);
    background: white;
    border-radius: 3px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    line-height: 150%;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    .starbuy-product-preview:hover {
        background: var(--starbuyColourOne);
    }

    .starbuy-product-preview > div,
    .starbuy-faf-preview > div {
        padding: 16px;
    }

    .starbuy-faf-preview {
        max-width: 100%;
        line-height: 135%;
        margin: 0 0 16px 0;
        background-color: var(--starbuyColourOne);
    }

    .starbuy-product-preview .starbuy-product-preview-header,
    .starbuy-faf-preview .starbuy-faf-preview-header {
        background: var(--starbuyColourThree);
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

        .starbuy-faf-preview .starbuy-faf-preview-header {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            justify-content: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            align-content: center;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
        }

            .starbuy-product-preview .starbuy-product-preview-header .starbuy-product-preview-header-star:after,
            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                content: '\e9e5';
                font-family: feather;
            }

            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                margin-right: 3px;
            }

    .starbuy-product-preview .starbuy-product-preview-message {
        flex-grow: 1;
    }

        .starbuy-product-preview .starbuy-product-preview-message strong {
            text-transform: uppercase;
            color: var(--starbuyColourThree);
            font-weight: normal;
        }

    .starbuy-product-preview .starbuy-product-preview-link {
        color: var(--starbuyColourThree);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

.starbuy-faf-preview .starbuy-faf-preview-message-lead {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.5em;
    line-height: 1.5em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-size:1.2em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-explainer {
    font-size: 0.9em;
    margin: 8px 0 0 0;
}

@media screen and (max-width: 767.99px) {
    .starbuy-drawer-promo-header-title {
        padding: 4px 0;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promo-header-description {
        padding: 8px;
    }

    .starbuy-drawer-promo-header-description-top {
        font-size: 1em;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promotion {
        padding: 16px;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image .imgCtr:after {
            padding-bottom: 75%;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-msg {
        font-size: 0.8em;
    }

    .starbuy-product-preview,
    .starbuy-faf-preview {
        flex-wrap: wrap;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
    }

        .starbuy-product-preview > div {
            width: 100%;
            padding: 0 8px;
            text-align: center;
            line-height: 32px;
        }

        .starbuy-faf-preview > div {
            width: 100%;
            padding: 8px;
        }

        .starbuy-product-preview .starbuy-product-preview-link {
            border-top: 1px dotted;
            border-color: var(--starbuyColourTwo);
            color: var(--starbuyColourThree);
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-lead {
            font-size: 1.25em;
            line-height: 1.25em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
            font-size: 1em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-explainer {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .starbuy-faf-preview[data-view-all-explainer="1"] .starbuy-faf-preview-message-explainer {
            text-overflow: unset;
            white-space: unset;
            overflow: unset;
        }

}
.quicklookitem-wrapper,
.quicklookitem-inner {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.quicklookitem-wrapper {
    z-index: 3000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
}

    .quicklookitem-wrapper[data-state="open"] {
        opacity: 1;
        overflow: auto;
    }

    .quicklookitem-wrapper .quicklookitem-inner {
        width: 1250px;
        height: auto;
        max-height: none;
        max-width: calc(100vw - 32px);
        margin: 16px;
        background: white;
        -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        top: 10px;
        position: relative;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
        top: 0px;
    }

.quicklookitem-inner .quicklookitem-inner-left,
.quicklookitem-inner .quicklookitem-inner-right {
    width: 50%;
    float: left;
}

.quicklookitem-inner-right {
    padding: 32px;
    position: relative;
}

    .quicklookitem-inner-right[data-isstarbuy="true"] {
        padding: 80px 32px 32px 32px;
        background-color: var(--starbuyColourOne);
    }

        .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: white;
            background-color: var(--starbuyColourThree);
        }

    .quicklookitem-inner-right > div {
        width: 100%;
        float: left;
        margin-bottom: 16px;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---name {
        font-size: 1.25em;
        font-family: 'citrfontbold';
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---prices {
        font-size: 0.9em;
    }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices > div {
            float: left;
            margin-right: 8px;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy {
            color: var(--starbuyColourThree);
        }

            .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy + .quicklookitem-inner-right---prices-price {
                color: #999;
                text-decoration: line-through;
            }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy-explainer {
            color: var(--starbuyColourThree);
            font-size: 0.7em;
            width:100%;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-price {
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
            color: #999;
            text-decoration: line-through;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
        border: 1px solid #2f76ec;
        background: #e8f4ff;
        color: #2f76ec;
        padding: 8px;
        text-align: center;
        font-size: 0.9em;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        background: #2f76ec;
        color: white;
        border-radius: 4px;
        padding: 16px;
        text-align: center;
        display: block;
        float: left;
        width: 100%;
    }


.quicklookitem-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    background: black;
    cursor: pointer;
    z-index: 3001;
}

@media screen and (max-width : 1023px) {
    .quicklookitem-wrapper {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }

    .quicklookitem-inner .quicklookitem-inner-left,
    .quicklookitem-inner .quicklookitem-inner-right {
        width: 100%;
    }

    .quicklookitem-inner-right {
        padding: 16px;
    }

        .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button {
            width: auto;
            margin-top: 0;

        }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty-label,
            .quicklookitem-inner-right .add-to-cart-area-1 .add-to-cart-area-dropdown select {
                line-height: 36px;
                height: 36px;
            }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input {
                padding: 0 8px;
                width: 40px;
            }

        .quicklookitem-inner-right .add-to-cart-area-msg,
        .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
            font-size: 11px;
        }

        .quicklookitem-inner-right[data-isstarbuy="true"] {
            padding: 40px 16px 16px 16px;
        }

            .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
                height: 32px;
                line-height: 32px;
                font-size: 0.9em;
            }

        .quicklookitem-inner-right > div {
            margin-bottom: 8px;
        }

    .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div {
        background-size: cover !important;
    }

        .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div:after {
            padding-bottom: 80%;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        padding: 8px;
    }
}
 .imm-widget-anchor{
     display:flex !important;
     margin-bottom:0px !important;
     background: rgb(255, 255, 255);
 }
 .finance-output{
     width:100%;
 }
 .finance-output iframe{
     margin:0px auto;
     width:90% !important;
 }
.finance-hidden-price{
    display:none;
}
.view-all-link-container {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 0 1.25rem;
    width: 100%;
}
.view-all-link {
    font-size: 1rem;
    color: #0077cc;
}
.view-all-link:hover,
.view-all-link:focus {
    color: #004b99;
    text-decoration: underline;
}
/* Not found Page */
.not-found-page {
    display: flex;
    justify-content: center;
    width: 100%;
}

.not-found-container {
    align-items: center;
    background: #fff;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem;
    position: relative;
    width: 100%;
    z-index: 0;
    text-align: center;
}

    .not-found-container::before {
        align-items: center;
        bottom: 0;
        color: #f7f7f7;
        content: '404';
        display: flex;
        font-size: 20rem;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

.not-found-container-has-background::before {
    content: '';
}

.not-found-title {
    font-size: 4rem;
}

.not-found-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Classes only found in the default contents for the page. These may not be present, if the contents has been overridden. */
.not-found-paragraph-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.not-found-first-paragraph,
.not-found-second-paragraph {
    font-size: 2rem;
}

.not-found-link-container {
    display: flex;
    flex-direction: column;
}

.not-found-homepage-link {
    background-color: cornflowerblue;
    border-radius: 0.5rem;
    color: #fff;
    padding: 1rem;
}
/*
 *********************************
 * Collections Landing Page Styles
 *********************************
 */

 :root {
    --collections--content-search-gap: 2rem;
    --collections--clear-btn-color: #D54939;
    --collections--search-wrapper-count-color: #2f76ec;
    --collections--content-grid-columns: 1fr;
 }

 .filters-open {
    overflow-y: hidden
}

 .content-collection-landing-page {
    display: flex;
    justify-content: center;
}

.content-collection-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 90%;
}

#content-collection-search {
    grid-template-columns: var(--collections--content-grid-columns);
    gap: 3rem;
    display: grid;
    background: #fff;
}

#content-collection-search .search-column {
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: var(--collections--content-search-gap);
}

#content-collection-search .search-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

#content-collection-search .search-wrapper:nth-child(n+2) {
    padding-top: var(--collections--content-search-gap);
    border-top: 1px solid #ccc;
}

#content-collection-search .search-wrapper:last-child {
    margin-top: auto;
}

#content-collection-search  .search-wrapper h4 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 150%;
}

#content-collection-search  .search-wrapper > div {
    grid-row: 2;
    grid-column: 1 / -1;
}

#content-collection-search .tags {
    max-height: 33vh;
    overflow-y: auto;
}

.content-collection-title {
    margin: 0;
}

.content-collection-no-results-message {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}

.content-collection-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.content-collection-card {
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px -1px #eee;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 150ms ease-in-out;
    padding: 0px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    background-color: #f9f9f9;
}

.content-collection-info-container {
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-collection-card:hover {
    background: #fcfcfc;
    transform: scale(1.01);
}

.content-collection-card-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
}

.content-collection-image-container {
    width: 100%;
    padding-top: 75%;
    position: relative;
    background-color: #e5e5e5;
    overflow: hidden;
}

    .content-collection-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.content-collection-tag-container {
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.25rem;
}

.content-collection-landing-page-content {
    width: 100%;
}

    .content-collection-landing-page-content[data-isempty="True"] {
        display: none;
    }

.search-tag, .content-collection-tag {
    border-radius: 0.75rem;
    border: 1px solid #2f76ec;
    color: #2f76ec;
    font-size: 0.75rem;
    padding: 0.4rem;
    transition: all 150ms ease-in-out;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.search-tag:hover {
    background: #1563e0;
    color: white;
    cursor: pointer;
}

.content-collection-filter-tag {
    background: #2f76ec;
    color: #fff;
}

.search-container {
    position: relative;
}

.clear-btn, .clear-tags-button {
    font-size: 14px;
    cursor: pointer;
}

.clear-btn {
    background: var(--collections--clear-btn-color);
    border-radius: 100%;
    color: #fff;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    z-index: 10;
}

.clear-tags-button {
    color: var(--collections--clear-btn-color);
    text-decoration: underline;
}

.content-collection-description {
    font-size: 14px;
    color: #555;
}

.content-collection-date {
    font-size: 12px;
    color: #777;
    margin-top: auto;
}

.content-collection-hidden-element {
    display: none !important;
}

.search-wrapper-count {
    width: 3rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--collections--search-wrapper-count-color);
}


a.filter-button {
    text-align: center;
    padding: 0.75rem;
    color: #666;
    border: 1px solid;
    cursor: pointer;
}

a.filter-button:hover {
    border: 1px solid;
}

#TagSelectArea .tag-toggle-filters {
    display: flex;
    gap: 0.5rem;
    flex: 1 0 100%;
    padding: 0.5rem;
    background: #f4f4f4;
    margin-bottom: 1rem;
}

.content-collection-filter-type-button {
    flex:1;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #f4f4f4;
    color: #000;
    border: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem;
    text-transform: uppercase;
    border-radius: 0.25rem;
    height: auto;
    line-height: 100%;
    cursor: pointer;
}

.content-collection-filter-type-button:hover {
    background: #1563e0;
    color: #fff;
 }

.content-collection-filter-type-button.content-collection-filter-type-button-active {
    background: #2f76ec;
    color:white;
    cursor: default;
}

.collection-filter-actions {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    gap: 0.5rem;
    margin-top: auto;
}

.collection-filter-actions > span {
    cursor: pointer;
    height: 48px;
    text-align: center;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: #2f76ec;
    color: #fff;
}

.ffclose:before {
    font: normal normal normal 14px / 1 feather;
    content: "\e117";
    color: #ffffff;
    line-height: 48px;
}

 #content-collection-search > .search-column {
    display: none;
 }

.filters-open #content-collection-search > .search-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100;
    padding: 2rem;
    display: flex;
}

.content-collection-nopointer {
    pointer-events: none;
}

.content-collection-nopointer.collection-filter-actions ~.search-wrapper-count {
    border-color: #ccc;
}

.content-collection-nopointer.collection-filter-actions > span {
    background: #ccc;
}

@media screen and (min-width: 768px) {
    .content-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --collections--content-grid-columns: 300px 1fr;
    }

    #content-collection-search > .search-column {
        display: flex;
     }

    #content-collection-search #collections-related-wrapper.search-wrapper,
    #filter-button {
        display: none;
    }
}

@media screen and (min-width: 1440px) {
    .content-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1660px) {
    .content-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/*
 *******************************
 * Collection Article Styles
 *******************************
 */

 :root {
    --collection-content-width: 80%;

    --collection-image-aspect-ratio: 2.35 / 1;
    --collection-image-border-radius: 0.5rem;

    --collection-content-image-border-radius: 0.5rem;
    --collection-content-link-color: #2163d6;
 }

 div[data-type="collection"] #FAFImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

div[data-type="collection"] #FAFImg .collection-image {
    height: auto;
    width: 100%;
    aspect-ratio: var(--collection-image-aspect-ratio, 2.35 / 1);
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
    display: flex;
    margin: 0;
    border-radius: var(--collection-image-border-radius, 0.5rem);
}

div[data-type="collection"] #FAFDesc {
    display: block;
    max-width: var(--collection-content-width, 80%);
    margin: auto;
    background: transparent;
    margin-block: 2rem;
}

    div[data-type="collection"] #FAFDesc img {
        width: 100%;
        height: auto;
        border-radius: var(--collection-content-image-border-radius, --collection-image-border-radius, 0.5rem);
    }

    div[data-type="collection"] #FAFDesc a {
        color: var(--collection-content-link-color, #2163d6);
        text-decoration: underline;
    }

@media screen and (max-width: 500px) {
    :root {
        --collection-content-width: 100%;
        --collection-image-aspect-ratio: 1;
    }
}
#aiRecCmdPaletteBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPaletteBackdrop.cmd-palette-visible {
        opacity: 1;
    }

@property --cmd-gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#aiRecCmdPalettePanel {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    max-height: 70vh;
    border: 4px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--cmd-gradient-angle), #DAE343, #00AEEC, #DAE343) border-box;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.35);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: cmdGradientRotate 3s linear infinite;
    width: min(90vw, 1024px);
}

@keyframes cmdGradientRotate {
    to {
        --cmd-gradient-angle: 360deg;
    }
}

#aiRecCmdPalettePanel.cmd-palette-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#aiRecCmdPalettePanel .cmd-palette-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
}

#aiRecCmdPalettePanel .cmd-palette-search-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-input,
#aiRecCmdPalettePanel .cmd-palette-textarea {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    color: #111827;
    background: transparent;
    line-height: 1.5;
}

#aiRecCmdPalettePanel .cmd-palette-textarea {
    padding: 1rem;
    resize: none;
}

    #aiRecCmdPalettePanel .cmd-palette-input::placeholder,
    #aiRecCmdPalettePanel .cmd-palette-textarea::placeholder {
        color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-search-btn {
    display: none;
}

#aiRecCmdPalettePanel .cmd-palette-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: cmdPaletteSpin 0.6s linear infinite;
}

@keyframes cmdPaletteSpin {
    to {
        transform: rotate(360deg);
    }
}

#aiRecCmdPalettePanel .cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#aiRecCmdPalettePanel .cmd-palette-result {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

    #aiRecCmdPalettePanel .cmd-palette-result:hover,
    #aiRecCmdPalettePanel .cmd-palette-result.cmd-palette-result-active {
        background-color: #f9fafb;
    }

    #aiRecCmdPalettePanel .cmd-palette-result:last-child {
        border-bottom: none;
    }

#aiRecCmdPalettePanel .cmd-palette-result-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #f9fafb;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-info {
    flex: 1;
    min-width: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#aiRecCmdPalettePanel .cmd-palette-result-brand {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-meta {
    text-align: right;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-price {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-original {
    font-weight: 400;
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0.375rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-sale {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-in {
    color: #16a34a;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-out {
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-empty,
#aiRecCmdPalettePanel .cmd-palette-error {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-error {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.75rem;
    color: #9ca3af;
    border-radius: 0 0 10px 10px;
}

#aiRecCmdPalettePanel .cmd-palette-footer-logo {
    height: 20px;
    width: auto;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPalettePanel .cmd-palette-footer-logo:hover {
        opacity: 1;
    }

#aiRecCmdPalettePanel .cmd-palette-footer-hints {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

#aiRecCmdPalettePanel .cmd-palette-footer kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1.4;
    box-shadow: 0 1px 0 #d1d5db;
}

#aiRecCmdPalettePanel .cmd-palette-model-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter,
#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select,
#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    box-sizing: border-box;
    height: 32px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 4px;
    outline: none;
    margin: 0;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    border: none;
    color: #374151;
    background: #fff;
}

    #aiRecCmdPalettePanel .cmd-palette-model-filter:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select {
    flex: 1;
    min-width: 0;
    padding: 0 22px 0 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
    border: 1px solid #d1d5db;
    color: #374151;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-provider-select:focus,
    #aiRecCmdPalettePanel .cmd-palette-model-select:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    flex-shrink: 0;
    padding: 0 10px;
    background: #323e48;
    border: 1px solid #323e48;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    min-height: auto;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-edit-sp-btn:hover {
        background: #435361;
        border-color: #435361;
    }

.cmd-palette-sp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 55vw;
    min-width: 500px;
    height: 100vh;
    z-index: 100000;
    background: #1e1e1e;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #2d2d2d;
    flex-shrink: 0;
    background: #323e48;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-title {
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions button {
        width: auto;
        height: auto;
        margin: 0;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    background: #252526;
    color: #ccc;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn:hover {
        background: #2a2d2e;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save {
    background: #0e639c;
    border-color: #0e639c;
    color: #fff;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save:hover {
        background: #1177bb;
        border-color: #1177bb;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.6;
    border: none;
    padding: 2rem;
    resize: none;
    outline: none;
    overflow-y: auto;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea,
    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea:hover {
        background: #303234;
        color: #fff;
        border-radius: 0;
    }

@media (max-width: 680px) {
    #aiRecCmdPalettePanel {
        top: 1rem;
        width: auto;
        left: 1rem;
        right: 1rem;
        transform: translateY(-12px);
        max-width: none;
    }

        #aiRecCmdPalettePanel.cmd-palette-visible {
            transform: translateY(0);
        }
}
.recommendations-container {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    position: relative;
    width: 100%;
    --recommendations-gap: 1rem;
    --recommendations-padding: 1rem;
}

.recommendations-repeater-prev,
.recommendations-repeater-next {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    cursor: pointer;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    top: 50%;
    transition: color 0.25s ease-in-out;
    width: 1.5rem;
    z-index: 10;
}

    .recommendations-repeater-prev:hover,
    .recommendations-repeater-next:hover {
        color: dodgerblue;
    }

    .recommendations-repeater-prev[aria-disabled="true"],
    .recommendations-repeater-next[aria-disabled="true"] {
        display: none;
    }

.recommendations-repeater-prev {
    left: 0.5rem;
}

    .recommendations-repeater-prev:before {
        content: '\e941';
        font-family: 'feather';
    }

.recommendations-repeater-next {
    right: 0.5rem;
}

    .recommendations-repeater-next:before {
        content: '\e942';
        font-family: 'feather';
    }

.recommendations-repeater {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    gap: var(--recommendations-gap);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--recommendations-padding);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    --recommendations-page-size: 6;
}

    .recommendations-repeater::-webkit-scrollbar {
        display: none;
    }

body.new-basket .basket-wrapper a.recommendations-item,
a.recommendations-item,
.recommendations-item {
    border: 1px solid #ededed;
    border-radius: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-sizing: border-box;
    color: #000;
    display: flex;
    flex: 0 0 calc((100cqi - 2 * var(--recommendations-padding) - (var(--recommendations-page-size) - 1) * var(--recommendations-gap)) / var(--recommendations-page-size));
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    transition: transform 0.25s ease-in-out;
}

    .recommendations-item:hover {
        transform: scale(1.02);
    }

    .recommendations-item .imgCtr {
        border: 1px solid #ededed;
        border-radius: 2rem;
    }

.recommendations-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .recommendations-item-details .pricingRepeater.fafSalePR {
        flex-wrap: wrap;
        line-height: normal;
    }

.recommendations-page-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.recommendations-page-dot {
    background: #ccc;
    border-radius: 100%;
    cursor: pointer;
    height: 0.5rem;
    transition: background 0.25s ease-in-out;
    width: 0.5rem;
}

    .recommendations-page-dot:hover {
        background: #999;
    }

    .recommendations-page-dot[aria-current="true"] {
        background: #000;
    }

.recommendations-repeater-footer {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: end;
}

@keyframes recommendations-border-rotate {
    from {
        --recommendations-border-angle: 0deg;
    }

    to {
        --recommendations-border-angle: 360deg;
    }
}

@property --recommendations-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.recommendations-repeater-footer-badge {
    animation: recommendations-border-rotate 2s linear infinite;
    border-radius: 0.5rem;
    letter-spacing: 0.1rem;
    padding: 0.15rem 0.4rem;
    position: relative;
}

    .recommendations-repeater-footer-badge::before {
        animation: recommendations-border-rotate 3s linear infinite;
        background: conic-gradient(from var(--recommendations-border-angle), #dae343, #00aeec, #dae343);
        border-radius: inherit;
        content: '';
        inset: 0;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 1.5px;
        position: absolute;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
    }

@media only screen and (max-width: 1279px) {
    .recommendations-repeater {
        --recommendations-page-size: 4;
    }
}

@media only screen and (max-width: 899px) {
    .recommendations-repeater {
        --recommendations-page-size: 3;
    }
}

@media only screen and (max-width: 768px) {
    .recommendations-repeater {
        --recommendations-page-size: 2;
    }
}
/* CSS Document *//* CC-Brand.css - Templeton Jones */

/* Reskin Controls */
:root {
    --brand: #1E1E1E;
    --brand-dark: var(--brand-focus);
    --brand-accent: #1E1E1E;
    --brand-link: #1E1E1E;
    --brand-focus: #191937;
    --sale: #c8102e;
    --text-on-brand: #FFFFFF;
    --text-on-accent: #FFFFFF;
    --background: #FFFFFF;
    --background-raised: #F5F4F2;
    --text: #1E1E1E;
    --text-inverse: #FFFFFF;
    --global-radius: 3px;
    --global-innerRadius: 2px;
    --global-border: 1px solid var(--border-light);
    --global-buttonSize: var(--fontSize-xs);
    /* CTA type ramp - retune here, not in the page CSS. */
    --global-buttonFontFamily: citrfontreg;
    --global-buttonLetterSpacing: 10%;
    --global-buttonLineHeight: 1.2;
    --global-buttonTextTransform: uppercase;
    --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);
    --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);

    --navItemsFontSize: var(--fontSize-xs);
    --navItemsTextTransform: uppercase;

    /* ---- Nav bar: SOLID state (HOMEPAGE ONLY) ----------------------------
       On the homepage the bar floats transparent over the hero. It turns
       solid two ways, and BOTH read this one set, so they can never disagree:
           the page is scrolled past 20px
           a panel is open - dropdown, mobile hamburger, account, search

       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);

       Wired in 03 (Navigation Solid State), which re-points --navBackground /
       --navLinks / --navLinks-hover / --navIcons at these four.

       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);
}

/* 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;
    }
}


/* Custom Fonts */

@font-face {
    font-family: 'citrfontboldalt';
    src: url('/sitespecific/customcontent/font/boldalt.ttf') format('truetype');
    font-weight: normal !important;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontbold';
    src: url('/sitespecific/customcontent/font/bold.ttf') format('truetype');
    font-weight: normal !important;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontreg';
    src: url('/sitespecific/customcontent/font/regular.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 band pads with.
       lg is the standard band gap; sm is the tightened variant used where a
       band opens hard against the one above it (hp-new-in's top edge). */
    --section-padding-lg: 5rem;
    --section-padding-sm: 3rem;

    --text-wrap: 1.25rem;
    --text-block-wrap: 1.875rem;

    /* Motion */
    --global-transition: 0.3s ease;

    /* Font scale -- fluid clamp, except sm/md which are pinned so they render
       at a flat 14px / 16px on every viewport (rem, so user zoom still scales
       them; 1rem = 16px at the default root size).
       The clamp minimum is what small viewports get, so the floors on xs and
       lg..3xl are set for mobile legibility; each ramp reaches its max around
       1440px. */
    --fontSize-xs: 0.825rem;
    --fontSize-sm:   0.875rem;
    --fontSize-base: 0.925rem;
    --fontSize-md:   1rem;
    --fontSize-lg: 2rem;
    --fontSize-xl: 2.25rem;
    --fontSize-2xl: 2.5rem;
    --fontSize-3xl: 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: 'citrfontreg';
    font-weight: 400;
    font-style: normal;
    font-size: var(--fontSize-base);
    color: var(--text);
    background: #fff;
}

@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: 'citrfontbold';
    font-weight: 300;
    font-style: normal;
}


/* Disable empty-href links */

a[href=""] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}


/* Grid Row System */

[class*="grirow"] > div > a {
    position: relative;
    width: 100%;
    height: 100%;
}

[class*="grirow"] > div {
    display: grid;
}

.grirow1 > div { grid-template-columns: repeat(1, 1fr); }
.grirow2 > div { grid-template-columns: repeat(2, 1fr); }
.grirow3 > div { grid-template-columns: repeat(3, 1fr); }
.grirow4 > div { grid-template-columns: repeat(4, 1fr); }
.grirow5 > div { grid-template-columns: repeat(5, 1fr); }
.grirow6 > div { grid-template-columns: repeat(6, 1fr); }
.grirow7 > div { grid-template-columns: repeat(7, 1fr); }

/* Grid: mobile */
@media screen and (max-width: 767.9px) {
    [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); }
    .grirow2 > div            { grid-template-columns: repeat(1, 1fr); }
    .grirow4 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow5 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow6 > div            { grid-template-columns: repeat(2, 1fr); }
}

/* Grid: tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); }
    .grirow2 > div            { grid-template-columns: repeat(1, 1fr); }
    .grirow4 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow5 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow6 > div            { grid-template-columns: repeat(2, 1fr); }
}



/* Starbuys and Coupon Drawer */

.coupon-drawer-container[data-state="open"],
.starbuy-drawer {
    z-index: 999999 !important;
}
/* ==================== Navigation Variables - Templeton Jones ==================== */
: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);

    /* Mobile Typography */
    --mobile-navLinkSize: var(--fontSize-base);

    /* Navigation Width */
    --navWidth: var(--global-NavFooterWidth);

    /* General Navigation Colors */
    --navBackground: var(--brand-dark);
    --navIcons: var(--text-inverse);
    --navLinks: oklch(from var(--text-inverse) l c h / 0.85);
    --navLinks-hover: var(--text-inverse);

    /* Sale Link Styles */
    --sale-color: var(--text-inverse);
    --sale-background: var(--sale);
    --sale-border: 1px solid var(--sale);
    --sale-padding: .2rem .5rem;
    --sale-radius: var(--global-buttonRadius);

    /* Sale Link Hover States */
    --sale-colorHover: var(--text-inverse);
    --sale-backgroundHover: var(--sale);
    --sale-borderHover: 1px solid var(--sale);
    --sale-paddingHover: var(--global-buttonPadding);
    --sale-transition: var(--global-buttonTransition);

    /* Sale Dropdown */
    --saleDropdownBackground: var(--sale);
    --saleDropdownText: var(--text-inverse);

    /* Dropdown Colors */
    --dropdownBackground: var(--background);
    --dropdownAreaBackground: var(--background);
    --dropdownAreaTitle: var(--text);
    --dropdownAreaTitleUnderline: 1px solid oklch(from var(--text) l c h / 0.2);
    --dropdownAreaLinks: var(--text);

    /* Login Dropdown */
    --loginDropdownBackground: var(--background);
    --loginTitleColor: var(--text);
    --loginLinkColor: var(--text);

    /* Search */
    --searchBackground: transparent;
    --searchText: var(--brand-dark);
    /* --searchIconColor: var(--text-inverse); */
    --searchPlaceholderColor: oklch(from var(--searchText) l c h / 0.6);

    /* Mobile Navigation */
    --mobileNavLinkColor: var(--brand-dark);
    --mobileNavBackground: var(--text-inverse);
    --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(--text-inverse);
    --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 ====================
   HOMEPAGE ONLY. There the bar floats transparent over the hero (99), 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 :has(.hp-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 (99 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: 99's
   `body:has(.hp-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 are in 99 beside the rule
   they override. Keep those trigger lists in step with this one.

   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:has(.hp-hero):has(.wrapper.masthead.is-scrolled),
body:has(.hp-hero).open-slide-menu,
body:has(.hp-hero):has(.open-slide-menu),
body:has(.hp-hero):has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active),
body:has(.hp-hero):has(.wrapper.masthead .tbcntOpen),
body:has(.hp-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: 2px solid var(--brand-link-light);
    /* 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);
}

.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: 'citrfontbold';
    font-size: var(--dropdown-titleSize);
    letter-spacing: 1px;
    border-bottom: var(--dropdownAreaTitleUnderline);
    color: var(--dropdownAreaTitle);
    text-transform: none;
    opacity: 1;
}

/* Dropdown Links */
.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--dropdownAreaLinks);
    font-size: var(--dropdown-linkSize);
    opacity: .8;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a:hover {
    opacity: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules > div {
    padding: 0;
}

/* Remove Link Animations */
.wrapper.masthead .NodeLevel2 > a:before {
    display: none;
}

/* ==================== Login Dropdown ==================== */

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
    background: var(--loginDropdownBackground);
    border: 2px solid var(--brand-link-light);
    border-top: none;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
}

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen .boldfont {
    color: var(--loginTitleColor);
    font-size: var(--login-titleSize);
}

.wrapper.masthead .loginCtr a {
    color: var(--loginLinkColor);
    font-size: var(--login-linkSize);
    border-bottom: 1px solid var(--loginLinkColor);
}

/* ==================== Search ==================== */

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm {
    background: var(--searchBackground);
    color: var(--searchText);
    font-size: var(--search-inputSize);
}

.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: block;
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px !important;
        bottom: 0;
        left: 0;
        background-color: var(--navLinks-hover);
        transform-origin: bottom center;
        transition: transform 0.25s ease-out;
        top: 23px;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a::before {
        background-color: var(--sale-color);
    }

    .wrapper.masthead .NodeLevel0 > a:hover::before,
    .wrapper.masthead .NodeLevel0 > a.active::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }
}

/* ==================== Search Bar (Exposed) ====================

.menu-icons-header > .icon-search {
    display: none;
}

#search.srchCtr {
    display: flex;
    justify-content: center;
    padding: .5rem;
    max-width: 600px;
    z-index: 999999;
}

#TopBanner1_clSearch1_containerSearch {
    display: flex;
    justify-content: center;
    max-width: 600px;
    width: 100%;
    position: relative;
}

.srchCtr.tbcnt .icon-search {
    width: 40px;
    height: 40px;
    line-height: 40px;
    min-width: 40px;
    pointer-events: none;
    top: -1px;
}

.srchCtr.tbcnt .searchBoxForm,
.srchCtr.tbcnt .searchBoxForm:focus {
    padding: 0 0 0 40px;
    height: 40px;
    line-height: 40px;
    border-radius: var(--global-radius);
    border: var(--global-border);
    width: 100%;
}
 */



/* ==================== Layout & Responsive ==================== */

body {
    padding-top: 115px !important;
}

/* Mobile */
@media screen and (max-width: 1024px) {
    .menu-icons-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    }

    

    .logoContainer {
        width: 130px !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;
        left: calc(50% - 300px);
    }

    .wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
        top: 40px;
        position: absolute;
    }

    .wrapper.masthead {
        height: 115px;
    }

    .menu-icons-header {
        width: 250px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #navi {
        display: flex;
        top: 73px;
        /* position: fixed; ----- removed to put the navigation menu inline */
        justify-content: center;
        padding-inline: 2rem;
        max-width: var(--navWidth);
        flex-grow: 0;
        width: 100%;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        display: flex;
        float: none;
        justify-content: flex-start;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: 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: 200px;
    height: 100%;
    padding: 10px 0px;
}

/* ==================== CTA Bar ==================== */

/* Ctas */

.ctaContainer {display: flex;justify-content: flex-start;top: 0; background: transparent;}

.wrapper:has(.ctaContainer) {
    background: var(--ctaBackground);
}

div[id*="CTA_bannerCollectionPanel"] {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
    justify-content: flex-start;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr {
    position: static;
    padding: 0 !important;
    grid-gap: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    background: none !important;
    flex-flow: column;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span {
    font-size: var(--ctaFontSize) !important;
    width: auto;
    order: 0;
    text-align: center !important;
    color: var(--ctaColor) !important;
    background: none !important;
    padding: 0 !important;
    text-transform: none !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerTitle {

}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerView {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo:after{
    width: 0 !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc:before {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a:hover .bannerTxtCtr {
    background: none;
}

div[id*="CTA_bannerCollectionPanel"] a {
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: .5rem;
    border-left: var(--ctaDivider);
    border-radius: 0;
    gap: 1rem;
}


div[id*="CTA_bannerCollectionPanel"] a:nth-child(1) {
    border-left: none;
}

div[id*="CTA_bannerCollectionPanel"] a:last-child {
    border-right: none;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc{
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a .bannerTxtCtr,
div[id*="CTA_bannerCollectionPanel"] a{
    max-width: fit-content !important;
    min-width: fit-content;
    padding-inline: 1rem;
    height: fit-content !important;
}

/* ==================== Outlet Nav Button ==================== */

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet'] {
    margin-left: auto;
    border: 1px solid var(--outletBorder);
    padding: .2rem .5rem;
    transition: var(--global-transition);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover {
    background: var(--outletHoverBackground);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover > a {
    color: var(--outletHoverText) !important;
}

/* ==================== Brands Dropdown ==================== */

[data-nodename="Brands"] .NodeLevel1 .CSSFacetNavModules > div {
    min-width: 200px;
    max-width: 200px;
    display: flex;
}

[data-nodename="Brands"] .NodeLevel1 > .CSSFacetNavModules {
    flex-flow: row wrap !important;
    display: flex;
    justify-content: flex-start;
    gap: 1rem !important;
}

@media screen and (min-width: 1024px) {
    [data-nodename="Brands"] .NodeLevel1:nth-child(1) > .CSSFacetNavModules > div a {
        font-size: var(--fontSize-lg) !important;
        font-weight: bold;
    }
}



/* 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 :has(.hp-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:has(.hp-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:has(.hp-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: 0px 10px 0px 20px;
    }

    .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;
}



/* Vertically center nav items on desktop */

body:has(.hp-hero) .wrapper.masthead {
    display: flex !important;
    justify-content:center !important;
    align-items: center !important;
    
}

/* Set the logo max width */

@media (max-width: 1024px) {
.logoContainer {
    max-width: 130px !important
}
}

div.wrapper.masthead:has(> .grid.fixed .navIcons) {
    /* styles */
    display: flex;
    align-items: center;
}/* CC-BannerCollections.css - Templeton Jones
   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 - .cc-banner__desc. Colour/opacity stay per-band; only type lives here. */
    --bannerDescFontFamily: citrfontreg;
    --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 - 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: 'citrfontbold';
    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: 'citrfontboldAlt';
    font-size: var(--fontSize-2xl);
    margin: 0;
    line-height: 1.2;
}

.CC-HomepageTitles p {
    font-size: var(--fontSize-base);
    margin: 0;
    opacity: 0.8;
}

.CC-HomepageTitles.wht,
.CC-HomepageTitles.wht h2,
.CC-HomepageTitles.wht p { color: var(--bannerText); }

.CC-HomepageTitles.blk,
.CC-HomepageTitles.blk h2,
.CC-HomepageTitles.blk p { color: var(--bannerCardText); }


/* CC-HomepageTitles - CMS-driven title block: a 1-item banner styled as heading + desc + CTA.
   The extra .cc-collection specificity (0,3,0) keeps a title banner above section tile rules. */
.CC-HomepageTitles .cc-collection { width: 100%; }
.CC-HomepageTitles .cc-collection .cc-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
    /* opt out of tile styling that would otherwise leak in */
    opacity: 1; height: auto; aspect-ratio: auto; background: none;
    border-radius: 0; overflow: visible; box-shadow: none; transform: none !important;
}
.CC-HomepageTitles .cc-collection .cc-banner::after { display: none; }   /* no tile corner stamp */
.CC-HomepageTitles .cc-collection .cc-banner__img { display: none; }     /* image slot unused on titles */
.CC-HomepageTitles .cc-collection .cc-banner__body {
    position: static; inset: auto; background: none; padding: 0;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
}
.CC-HomepageTitles .cc-collection .cc-banner__title {
    order: 0; font-family: citrfontboldalt; 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: citrfontbold;
    font-size: var(--bannerViewSize);
    letter-spacing: 0.12em;
    transition: var(--global-transition);
}
.CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    background: var(--bannerViewBackgroundHover); color: var(--bannerViewColorHover);
    border: var(--bannerViewBorderHover);
}
/* colour variants - mirror .wht/.blk which otherwise only target h2/p */
.CC-HomepageTitles.wht .cc-collection .cc-banner__title,
.CC-HomepageTitles.wht .cc-collection .cc-banner__desc { color: var(--bannerText); }
.CC-HomepageTitles.blk .cc-collection .cc-banner__title,
.CC-HomepageTitles.blk .cc-collection .cc-banner__desc { color: var(--bannerCardText); }


/* Scroll-in Animation */

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].inView {
    opacity: 1;
    transform: translateY(0);
}
/* CC-SplideBanners.css - Templeton Jones */

/* Splide Tokens */
:root {
    --splideArrowSize: 2.75rem;
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
    --splideArrowHoverBg: transparent;
    --splidePaginationSize: 8px;
    --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(--text-inverse);
    transform: translateY(-50%) scale(1.1);
}

[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(1.1);
}

.CC-SplideArrowsTop .splide__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 var(--bannerPadding) 0.5rem;
}

/* Splide disables the arrow buttons when there are no more real slides than
   perPage but never hides them -- splide-config.js flags the root with
   is-not-overflowing so we can hide the whole wrapper instead of showing two
   dead arrows. Placed last so it wins over the arrows-top utility above when
   both apply. */
.splide.is-not-overflowing .splide__arrows { display: none; }


/* 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(--splidePaginationSize);
    height: var(--splidePaginationSize);
    border-radius: 1px;
    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: 1.5rem;
    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 - Templeton Jones */

/* Footer Variables */
:root {
    --footer-titleSize: var(--fontSize-sm);
    --footer-textSize: var(--fontSize-sm);
    --footer-newsletterInputSize: var(--fontSize-sm);
    --footer-newsletterButtonSize: var(--fontSize-sm);
    --footer-width: var(--global-NavFooterWidth);
    --footer-maxWidth: 100%;
    --footer-padding: var(--global-padding);
    --footer-gap: var(--global-gap);
    --footer-borderRadius: var(--global-radius);
    --footer-background: var(--background);
    --footer-innerBackground: var(--background);
    --footer-text: var(--text);
    --footer-titles: var(--text);
    --footer-links: oklch(from var(--text) l c h / 0.78);
    --footer-linksHover: var(--text);
    --footer-underlineColor: oklch(from var(--text) l c h / 0.2);
    --newsletter-inputBackground: var(--background);
    --newsletter-inputText: var(--text);
    --newsletter-inputPlaceholder: var(--text-muted);
    --social-iconColor: brightness(0) opacity(0.7);
    --social-iconSize: 44px;
    --social-iconHoverColor: brightness(0) opacity(1);
    --social-iconBackground: transparent;
    --company-text: var(--text);
    --payment-background: transparent;
    --tagline-background: var(--background);
    --tagline-text: var(--text);
    --footer-buttonSize: var(--global-buttonSize);
    --footer-buttonColor: var(--text);
    --footer-buttonBorder: 1px solid var(--text);
    --footer-buttonRadius: var(--global-buttonRadius);
    --footer-buttonBackground: transparent;
    --footer-buttonPadding: var(--global-buttonPadding);
    --footer-buttonBackgroundHover: var(--brand-dark);
    --footer-buttonColorHover: var(--text-inverse);
    --footer-buttonBorderHover: 1px solid var(--brand-dark);
    --footer-buttonPaddingHover: var(--global-buttonPaddingHover);
    --footer-buttonTransition: var(--global-buttonTransition);
}


/* Footer Width */

div#modular-footer-wrapper .fixed {
    max-width: var(--footer-width);
}

#modular-footer-wrapper {
    display: flex;
    flex-flow: row wrap;
    background: var(--footer-background) !important;
    margin: auto;
    float: none;
    max-width: var(--footer-maxWidth);
    padding-top: var(--footer-padding);
    padding-inline: var(--footer-padding);
    align-items: flex-start;
    gap: var(--footer-gap);
}

#modular-footer-wrapper:after {
    display: none;
}

#modular-footer-wrapper > div.fixed {
    width: 100%;
    justify-content: space-between;
    flex: 2;
    background: var(--footer-background);
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper :is(.modular-footer-socials, .modular-footer-retaillinks, .modular-footer-citruslime---tagline) {
    border-bottom: none;
}

#modular-footer-wrapper .modular-footer-socials,
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    border-top: 0;
    padding: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    grid-gap: 2em;
    background: var(--footer-innerBackground);
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    flex: 0 0 auto;
    width: auto;
    padding: 2rem;
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div br {
    display: none;
}


/* Inner footer column max width */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
    height: auto;
    max-width: var(--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: "Join Our Newsletter";
    font-family: 'citrfontbold';
    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: 'citrfontbold';
}

#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: 60px;
    width: 225px;
    background: url(/layout/generalLyout/logo.svg) 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: "Get training tips, competitions, nutritional advice, the latest bikes, product info and more.";
    display: block;
    margin-bottom: 1rem;
    opacity: .8;
}
/* CC-QuickLook.css - Templeton Jones */

/* 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: 'citrfontbold';
    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-dark);
    --basketPipBackground: var(--brand-dark);
    --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 - Templeton Jones ====================
   Per-client chrome layer. Loads LAST - wins over every 0x platform file.
   REWRITE FROM SCRATCH for each new client: stale rules here override the
   next skin. Platform files 03-08 carry only variable retunes; every
   rule-level customisation for THIS client lives below.

   Templeton Jones language: quiet English country outfitter. One white
   canvas, ink type, hairline rules, ghost 1px-outline chrome, transparent
   nav over the hero (solid ink elsewhere), dash carousel pagination. */

:root {
    --tj-hairline: 1px solid oklch(from var(--text) l c h / 0.2);
    --tj-hairline-inverse: 1px solid oklch(from var(--text-inverse) l c h / 0.4);
    --tj-dropdownShadow: var(--shadow-md);
    --tj-navIconSize: 22px;
}

/* ==================== Page canvas ==================== */

/* The single continuous white canvas (contract) - painted explicitly so
   nothing else leaks through between full-bleed bands */
body {
    background: var(--background);
}

/* ==================== Nav (03 overrides) ==================== */

/* Platform CTA strip (CommonControls/TopSubBanner.ascx -> .wrapper > .grid.fixed
   > .container.ctaContainer, legacy a.Banner/.bannerTitle markup, bannerid 3)
   renders four banner titles as a dark strip above the nav. TJ mockup has no
   such strip. Also hide its .wrapper: 03's .wrapper:has(.ctaContainer) paints
   --ctaBackground and :has() still matches a display:none child. Platform
   chrome, not a .cc-banner__* CMS field. */
.ctaContainer,
.wrapper:has(.ctaContainer) {
    display: none;
}

/* No accent seam under the bar - the ink bar (or the hero photo on the
   homepage) provides its own edge */
.wrapper.masthead {
    border-bottom: 0;
}

/* Letterspaced small caps feel - case is typed by the CMS user, the
   tracking is ours (house rule: no text-transform) */
.wrapper.masthead .NodeLevel0 > a {
    letter-spacing: 0.1em;
    font-size: var(--navItemsFontSize);
    text-transform: var(--navItemsTextTransform);
}

/* Kill the underline-draw nav hover - house rule: no underline devices.
   Hover feedback comes from --navLinks -> --navLinks-hover contrast. */
@media screen and (min-width: 1024px) {
    .wrapper.masthead .NodeLevel0 > a::before {
        display: none;
    }
}

/* Wordmark: the SVG logo is painted as a MASK on .logoContainer and filled
   with currentColor, so it takes the container's own colour and scales to the
   container's own box (250px desktop / 130px mobile, per CC-NavigationSearch)
   rather than carrying a size or colour of its own.
   The platform <img> is kept in flow but hidden, so the container's box is
   exactly what it is today - only the paint changes. */


/*
.logoContainer {
    display: block;
    width: 200px !important;
    height: 50px;

    background-color: currentColor;

    -webkit-mask-image: url("/layout/generalLyout/logo.svg");
    -webkit-mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-image: url("/layout/generalLyout/logo.svg");
    mask-position: left center;
    mask-repeat: no-repeat;
    mask-size: contain;
}
 */


.logoContainer img,
.logoContainer .logo {
 /* visibility: hidden; */
} 


/* .logoContainer has no colour of its own - the masthead only paints
   --navLinks onto the nav anchors - so give the container the nav's
   full-strength ink. This is the ONE knob: change `color` here and the
   wordmark follows, over the hero photo and the 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 (inside .navIcons), 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>

   Swap in the TJ line SVGs the same way the wordmark is done: mask +
   currentColor, so they keep inheriting --navIcons (03 paints it onto
   .navIcons *[class*="icon-"]) and follow a reskin with no asset edit.
   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, for 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 left on the icon font - it
   was not part of this swap, and blanking a glyph without supplying a mask
   would render it invisible. That is also why these rules enumerate the three
   toggles instead of reusing 03's *[class*="icon-"] wildcard.

   Search needs both selectors: the .menu-icons-header toggle is hidden by 03,
   and the visible glyph is the <span class="icon-search"> inside #search.
   Everything is scoped to the masthead / #search, so the detail page'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: "\e9af";
    display: inline-block;
    width: var(--tj-navIconSize);
    height: var(--tj-navIconSize);
    vertical-align: middle;
    /* currentColor, NOT a --navSolid-* token: the toggle these sit on already
       gets `color: var(--navIcons)` from 03, and the Solid State block
       re-points --navIcons per state. Naming a state token here would pin the
       icons to ONE state and break the transparent-over-hero case. */
    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;
}



/* --- Single-row nav (mockup 00-nav band: wordmark left, links centre,
   icons right in ONE 73px row; platform default stacks links in a second
   row). Desktop only - mobile keeps the platform hamburger pattern. --- */
@media screen and (min-width: 1024px) {
    .wrapper.masthead,
    .wrapper.masthead.active {
        height: 73px;
    }

    body {
        padding-top: 73px !important;
    }

    /* Links row rides in the same 73px band; pointer-events dance keeps
       the full-width fixed layer from blocking logo/icon clicks */
    #navi {
        top: 0;
        height: auto;
        align-items: center;
        /* padding-inline: clamp(230px, 20vw, 300px); */
        pointer-events: none;
    }

    #navi .NodeLevel0 {
        pointer-events: auto;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        justify-content: center;
    }

    /* Dropdowns open at the bottom edge of the 73px bar (was 115px) */
    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: 73px;
    }

    .wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
        top: 73px;
    }

    /* 03's scroll state fades the links row out (two-row shrink device);
       with a single row the links must stay visible and in place */
    .wrapper.masthead.active .CSSFacetNavModules {
        opacity: 1;
    }

    .wrapper.masthead.active .NodeLevel0 > .CSSFacetNavModules.active {
        top: 73px !important;
    }

    /* Sticky FAF filter tracks the shorter bar (was 109px) */
    .sticky.sticknow .FAFoptionsContainer {
        top: 73px !important;
    }
}

/* --- Search: collapsed hairline pill in the icon zone (mockup shows a
   search icon, not an exposed bar). CSS-only expand on hover/focus keeps
   search functional with no JS dependency. Desktop only. --- */
@media screen and (min-width: 1024px) {
    #search.srchCtr {
        position: fixed;
        top: 0;
        left: auto;
        right: 140px;
        height: 73px;
        align-items: center;
        padding: 0;
        max-width: none;
        width: auto;
    }

    #TopBanner1_clSearch1_containerSearch {
        width: auto;
    }

    .srchCtr.tbcnt .searchBoxForm,
    .srchCtr.tbcnt .searchBoxForm:focus {
        width: 44px;
        border: var(--tj-hairline-inverse);
        border-radius: 999px;
        transition: width 0.3s ease;
    }

    #search.srchCtr:hover .searchBoxForm,
    #search.srchCtr:focus-within .searchBoxForm {
        width: 240px;
    }
}

/* --- Transparent over the hero (wireframe GLOBAL DECISIONS): homepage
   only, scoped via :has(.hp-hero); the hero slides under the fixed bar.
   Scroll state (.active, platform JS) restores the solid ink bar. --- */
body:has(.hp-hero) {
    padding-top: 0 !important;
}

body:has(.hp-hero) .wrapper.masthead {
    background: transparent !important;
}

body:has(.hp-hero) .wrapper.masthead.active {
    background: var(--navBackground) !important;
}

/* NB the scrolled fill is NOT here - 03's Navigation Solid State carries it,
   scoped `body:has(.hp-hero) .wrapper.masthead.is-scrolled`, which reaches
   (0,4,1) and so beats the transparent rule above on specificity despite 03
   loading first. Contents come from the same block's token re-pointing. A
   duplicate here would just be a second place to forget. */

/* The transparent rule above is a literal `transparent !important`, not a
   token, so 03's Navigation Open State cannot reach it by re-pointing
   --navBackground - it has to be beaten declaration-to-declaration. This is
   the case the open state exists for: on the homepage the bar floats over
   the hero photo, and an open menu hanging off an invisible bar is the bug.
   Trigger list mirrors 03's exactly; keep the two in step. Each selector
   clears the transparent rule's (0,3,1) by one class. */
body:has(.hp-hero).open-slide-menu .wrapper.masthead,
body:has(.hp-hero):has(.open-slide-menu) .wrapper.masthead,
body:has(.hp-hero):has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active) .wrapper.masthead,
body:has(.hp-hero):has(.wrapper.masthead .tbcntOpen) .wrapper.masthead,
body:has(.hp-hero):has(#search.srchCtr:focus-within) .wrapper.masthead {
    background: var(--navSolid-background) !important;
}

/* --- Dropdown surfaces: ink canvas seamless with the bar, floating on a
   soft shadow; area panels are white cards framed by a hairline --- */
.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
    border: 0;
    border-radius: 0;
    box-shadow: var(--tj-dropdownShadow);
}

.wrapper.masthead .NodeLevel1 {
    border: var(--tj-hairline);
    border-radius: 0;
}

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
    border: var(--tj-hairline);
    border-top: none;
    border-radius: 0;
    box-shadow: var(--tj-dropdownShadow);
}

/* ==================== Splide chrome (05 overrides) ==================== */

/* Dash pagination - the mockup's thin dashes (hero bottom-right; the
   horizontal position per section is CC-Home's job) */
[data-splide-opts] .splide__pagination__page {
    width: 1.5rem;
    height: 2px;
    border-radius: 0;
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: 2.5rem;
}

/* Quiet arrows: no fill, no scale bounce (motion personality: no bounce
   anywhere) - hover feedback is a gentle dim of the line arrow */
[data-splide-opts] .splide__arrow:hover {
    background: transparent;
    color: var(--splideArrowColor);
    opacity: 0.55;
    transform: translateY(-50%);
}

.CC-SplideArrowsTop .splide__arrow:hover {
    transform: none;
}

/* ==================== Footer (06 overrides) ==================== */

/* Full-width hairline seam where the white footer meets the white page -
   the brand's rule vocabulary, rule-20-legal as a border-top divider */
#modular-footer-wrapper {
    border-top: var(--tj-hairline);
}

/* Letterspaced small column headings over the platform hairline rule */
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
    letter-spacing: 0.12em;
}

/* Footer wordmark: ink silhouette on the white band (nav copy is white) */
.modular-footer-socials:after {
    filter: brightness(0);
}

/* Newsletter copy - Templeton Jones voice (content strings frozen in 06) */
#modular-footer-wrapper > div.modular-footer-socials::before {
    content: " ";
    letter-spacing: 0.12em;
}

.modular-footer-newsletter---container:before {
    content: "Sign up to be the first to discover new arrivals exclusive offers and special events.";
}

@media (max-width: 1024px) {
    .modular-footer-newsletter---container:before {
        text-align: center;
    }
}

/* Ghost newsletter input: quiet hairline, not the button border 06 wires */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
    border: var(--tj-hairline) !important;
}

/* Ghost CTAs read as typed letterspaced caps - track the footer submit
   and every banner/title CTA the same way (device carry-through) */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
    letter-spacing: 0.12em;
}

.cc-banner .cc-banner__cta {
    letter-spacing: 0.12em;
}


/* ==========================================================================
   NAV ICON MASKS
   SVGs embedded as data URIs to avoid iOS Safari external SVG mask issue
   ========================================================================== */


/* --------------------------------------------------------------------------
   Account
   -------------------------------------------------------------------------- */

.wrapper.masthead [data-link="login"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.4021%203.897C13.3911%203.89806%2014.3392%204.29138%2015.0385%204.99066C15.7378%205.68994%2016.1311%206.63807%2016.1321%207.627C16.1311%208.61593%2015.7378%209.56406%2015.0385%2010.2633C14.3392%2010.9626%2013.3911%2011.3559%2012.4021%2011.357C11.4131%2011.3559%2010.4649%2010.9627%209.76544%2010.2634C9.066%209.56415%208.67246%208.61602%208.67113%207.627C8.67245%206.63815%209.06586%205.69018%209.76508%204.99095C10.4643%204.29173%2011.4123%203.89832%2012.4011%203.897M20.4311%2014.032C19.2781%2012.867%2017.7801%2012.182%2015.9751%2011.97C16.617%2011.4428%2017.1341%2010.7799%2017.489%2010.0289C17.844%209.27795%2018.0281%208.45764%2018.0281%207.627C18.0263%206.13537%2017.433%204.70535%2016.3783%203.65051C15.3237%202.59567%2013.8938%202.00212%2012.4021%202C10.9102%202.00159%209.47972%202.59491%208.42464%203.6498C7.36956%204.7047%206.77599%206.13502%206.77413%207.627C6.77413%209.374%207.57413%2010.937%208.82813%2011.97C7.02313%2012.182%205.52313%2012.867%204.37013%2014.032C1.99013%2016.439%201.99813%2021.842%202.00013%2021.992L3.89713%2021.973C3.89713%2021.945%203.90313%2017.191%205.72913%2015.356C6.76413%2014.316%208.21813%2013.789%2010.0521%2013.789H14.7511C16.5841%2013.789%2018.0391%2014.316%2019.0731%2015.356C20.8991%2017.19%2020.9061%2021.954%2020.9061%2021.983L22.8021%2022C22.8041%2021.851%2022.8131%2016.439%2020.4311%2014.032Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.4021%203.897C13.3911%203.89806%2014.3392%204.29138%2015.0385%204.99066C15.7378%205.68994%2016.1311%206.63807%2016.1321%207.627C16.1311%208.61593%2015.7378%209.56406%2015.0385%2010.2633C14.3392%2010.9626%2013.3911%2011.3559%2012.4021%2011.357C11.4131%2011.3559%2010.4649%2010.9627%209.76544%2010.2634C9.066%209.56415%208.67246%208.61602%208.67113%207.627C8.67245%206.63815%209.06586%205.69018%209.76508%204.99095C10.4643%204.29173%2011.4123%203.89832%2012.4011%203.897M20.4311%2014.032C19.2781%2012.867%2017.7801%2012.182%2015.9751%2011.97C16.617%2011.4428%2017.1341%2010.7799%2017.489%2010.0289C17.844%209.27795%2018.0281%208.45764%2018.0281%207.627C18.0263%206.13537%2017.433%204.70535%2016.3783%203.65051C15.3237%202.59567%2013.8938%202.00212%2012.4021%202C10.9102%202.00159%209.47972%202.59491%208.42464%203.6498C7.36956%204.7047%206.77599%206.13502%206.77413%207.627C6.77413%209.374%207.57413%2010.937%208.82813%2011.97C7.02313%2012.182%205.52313%2012.867%204.37013%2014.032C1.99013%2016.439%201.99813%2021.842%202.00013%2021.992L3.89713%2021.973C3.89713%2021.945%203.90313%2017.191%205.72913%2015.356C6.76413%2014.316%208.21813%2013.789%2010.0521%2013.789H14.7511C16.5841%2013.789%2018.0391%2014.316%2019.0731%2015.356C20.8991%2017.19%2020.9061%2021.954%2020.9061%2021.983L22.8021%2022C22.8041%2021.851%2022.8131%2016.439%2020.4311%2014.032Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
}


/* --------------------------------------------------------------------------
   Bag
   -------------------------------------------------------------------------- */

.wrapper.masthead [data-link="basket"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.979%205.978C16.7747%204.86263%2016.1863%203.85403%2015.3158%203.12734C14.4454%202.40065%2013.3479%202.00178%2012.214%202C11.0803%202.00202%209.98302%202.40099%209.11277%203.12766C8.24252%203.85433%207.65422%204.8628%207.45%205.978H3V22H21.328V5.978H16.979ZM4.739%2020.262H19.589V7.716H4.74L4.739%2020.262ZM12.214%203.739C13.624%203.739%2014.804%204.689%2015.184%205.978H9.244C9.43066%205.33391%209.82088%204.76759%2010.3563%204.36379C10.8917%203.96%2011.5434%203.74045%2012.214%203.738V3.739Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.979%205.978C16.7747%204.86263%2016.1863%203.85403%2015.3158%203.12734C14.4454%202.40065%2013.3479%202.00178%2012.214%202C11.0803%202.00202%209.98302%202.40099%209.11277%203.12766C8.24252%203.85433%207.65422%204.8628%207.45%205.978H3V22H21.328V5.978H16.979ZM4.739%2020.262H19.589V7.716H4.74L4.739%2020.262ZM12.214%203.739C13.624%203.739%2014.804%204.689%2015.184%205.978H9.244C9.43066%205.33391%209.82088%204.76759%2010.3563%204.36379C10.8917%203.96%2011.5434%203.74045%2012.214%203.738V3.739Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
}


/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.548%2017.187C8.78753%2017.1851%207.0997%2016.485%205.85486%2015.2401C4.61002%2013.9953%203.90985%2012.3075%203.908%2010.547C3.91012%208.7867%204.6104%207.09913%205.85521%205.8545C7.10002%204.60988%208.7877%203.90985%2010.548%203.908C12.3085%203.90985%2013.9963%204.61002%2015.2411%205.85486C16.486%207.0997%2017.1861%208.78753%2017.188%2010.548C17.1861%2012.3085%2016.486%2013.9963%2015.2411%2015.2411C13.9963%2016.486%2012.3085%2017.1851%2010.548%2017.187ZM17.177%2015.934C18.4186%2014.4137%2019.0962%2012.5108%2019.095%2010.548C19.095%205.834%2015.26%202%2010.548%202C5.835%202%202%205.834%202%2010.548C2%2015.26%205.835%2019.095%2010.548%2019.095C12.4585%2019.0945%2014.3132%2018.4505%2015.813%2017.267L20.546%2022L21.896%2020.651L17.177%2015.934Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.548%2017.187C8.78753%2017.1851%207.0997%2016.485%205.85486%2015.2401C4.61002%2013.9953%203.90985%2012.3075%203.908%2010.547C3.91012%208.7867%204.6104%207.09913%205.85521%205.8545C7.10002%204.60988%208.7877%203.90985%2010.548%203.908C12.3085%203.90985%2013.9963%204.61002%2015.2411%205.85486C16.486%207.0997%2017.1861%208.78753%2017.188%2010.548C17.1861%2012.3085%2016.486%2013.9963%2015.2411%2015.2411C13.9963%2016.486%2012.3085%2017.1851%2010.548%2017.187ZM17.177%2015.934C18.4186%2014.4137%2019.0962%2012.5108%2019.095%2010.548C19.095%205.834%2015.26%202%2010.548%202C5.835%202%202%205.834%202%2010.548C2%2015.26%205.835%2019.095%2010.548%2019.095C12.4585%2019.0945%2014.3132%2018.4505%2015.813%2017.267L20.546%2022L21.896%2020.651L17.177%2015.934Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
}








.logoContainer {

    display: block;
    width: 280px !important;
    height: 50px;
    padding: 10px;

    background-color: currentColor;

    -webkit-mask-image: url("data:image/png;base64,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");
    mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaAAAAByCAQAAAC/vs1CAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAABLAAAASwAB0KZVBgAAAAd0SU1FB+oIBwoRHnLtepkAAC0XSURBVHja7Z15oE1V+8e/+17TReaZyliGkkqlIvUrpUFvb1HxVtJIowZvmmgUJQ0qQwoVITI2iUo0SEQir1JKGcLN7HK5n98fZ5911t5nn+HiOuh87z/37OdZa6/17DU861nPepaURhoHBTiVwXzPaoqluiQ2CuWzEmXUSk11tIopV5napiyt0xd6z/kz1RVJ49AFGbpCD+gYSZ/rGicn1eXZs0oU5nKmMpW7OJWi1vOqdORjJnBcqkuYxqEJLuZ7AL7i/FSXJRpOUlUopBt0k97Rm84fMTha6BVNVg9nV8EWlwqqrFIqrVIqqc36W5v0t35xdu9vsaWxf0Bd9VdrbdIoDXS+S3VpgpBEB+IsPaGJetnZGperuN5UYV0emWDJVEVVUjUdJkdlJG0Q2qiV+tP5O59ibKjT1UjHqILWa6W2aKM2KVfFVEZldKzq6xu9rTec3FQLM419CbLUXTdruiboPWdbqksTCwk6ECXUR4fpHmddEhUupHe1TVerqc7QCaqvo1U0Busmzdc8zdM8LYk3e3CYzlFrNdXP+kQL9WNwx6OkWuhmHaFWzvpUizONvQdFdYKa6RhV0Mv6zNmZ6vLER9wORG0N0LPO1CQrfqw6qLt2qkg+3r9NC9yutMieQcjUubpeNTVeUzXXyUvi7Z11pHN/CiSYxj4BVdVA9VVPaLu+0dFqrJsO3HkngjgdiLN0r25Kxr5GPXXWv7Vdc7RV1+s8rdA27VAxZamsquhwHa6aqq/6Kh4nkx1a6HalDbpKbfWFXnNmJ18RSmiAc02qxZlG8qC06qme6uko1VN1LdJMzdQcZxsVNFhrdNtBvrLlXwyhaEIuh4v4kM+5lSMkiUyWcXsM3gxqcyEP8C6/Ex87GMJ1nJi8xR+Hp2iTapmlkQgUpxm3MoRZrAFgK9N4kNMpbDhasJKHUl3Ova9oewaSkZCrBTMYQCPPs0dYmET+lbiAHkxiZdyOtIvFjOYx2nMiJWPmVZyL+JiuqZZZGvHA0TzM5+w033YBj9ECn7pPJ3ZwX6rLmh8EqnC0UWvd5hBXIEfqOa3VE84K3/OmmqM6zi/JFoDqaqqmOlX/l9AiuEJL9YfWarU2a5e2qLzKqbxO1ImaosedRakWZRrBwFEb3afTzIOlGqbR0S2EDPXRvXrAeSrVJd7bCp/JODIT8HRiKicEUoqykxvz9T6HtnxKe8rTki68zKf8SXLYyvvcTrVUSyyN2OAkvjHfK49JnBGDrygTgAdTXd78IsqVhwZ6UufHNS6X02DNVetg25izgz91TPIF4HgN0Fdq42yRNEMz3KfFVEu1daQqqaKq6jCVkaPS2qEc7VC2VmmllmqB/lfQG7dp7A0oqqd0h8KD8VTd68RQ7ymu8TpXLzhPprrMe1/pYdSMS2/Ax5wcl2MBHyX5rkL0YE168X9oglrMMXPPn1wch7MknwLjE6+6D3pwAe9RKQHPIr5JKq9azGExtVJdpzQKApzk2tkARlM2DmcpZgGzKZ587gcpuII3kzBt/86SJPI6i7V8S4VU1ymNggCnssXtPLncHZezCNOBP6mc6jIXvFDaMzCRcUHCYRsJLWLcwk5mUSrVddpHkunK89zKrfSmc6rLciCAo1jndp9t8RV0MngbyI1lWjiEQFteIhnX0xrA1wl4HgUWUy7VddpHkqnLDre5ZFMx1aVJPSjGd648NtMiAW8/AB5IdZkLXign8WpySzzOBqbE5XgaWBXfVHEwgSlG178l1WU5EMCjrjRyOCcB5z0AfHDIGw+owesRZ4sEvD2A5+LQXwB20CzVddpX4GzTfeYlVnAPfVCdra48Engmch67gL8P+X08MhlOmaS5PwZujkkNjU53pbpO+wpkuqclIe8foMcnAZ505TEgAV9t1gNwfapLXPAi6UrDpHlLswOIsZFKFwDGJ7OWOjjAbWb+GZ7qshwIIINVACynRFy+EiwAYNqh0xZiVbVJ7PkkgPtq4K9goXAZu4BVh4rxQKIsa93us+mQV0SSAk1deVyagG8kAFuoneoSF7RAHHrnZ4xgGvBqIKWJqxtfluo67TvwvJl/7t773A4F0BWA+fHbDJ1dqR38xxYSCuTKYJfRGNyNyAPOCqCUYxkA76S6RvtQNvWNc/6iZE0shzoYDBDfmZij3aF0OVmpLm9Bi6MYPfLF/zrwv2ijJJl85O6TVEl1nfahdN4z8895qS7LgQImAbmUj8NRhG9dqV2R6tIWvDg60iAf3EeRC9wUQHnCFdntyeeWgtp2YQVTGMcsXkuC+7yIp1eqS37ggE+B+XE5nnKlNjNazSOTLqmuwb4Vx2P54h4DLI8+hk1LdgHwA/mMg7pf61reuJ9s4ciE3EX40ZxJSsj9zwHvx7dHcga7XaN/0wBqy2T9+A8cxGnSnKikz5VKtFI7Sd39gVcpozfcEyF3HtCnd/oqrHg87PyWkPtO1Xf/ezIJ7hggSz21RNkqqcp6Pv4J4IME6yStjVPfIQop+GOdbwMYWuunVFdgH4KH4umyPt4sfgY+C5iWR7kj9buprk/c8p9OnlvO7xMbBKjMBpf7570Jdc5jRg28LdUS2Dfgv0CvmNRebm13BS0NcFiayPx9IIHDGcEH8RgG5yOzl4DN0VZ9Ohin9qNTXeE4pc807o+7OTUJ/jdNw79wL95ah+1uLge0cpuvOp0CDIxBa2yslsMC6eew6sC6eSFuTauzAvg2NoPDG0ln1oa8IKcMKvCXK7JXk80rJcK4y3SIAUlwn2Zmq4l79daIE+qZqZbAvgIZLGVWICWT2W5tdwQfomTGwWRCYDoAF8RmKM8LSWZVh3UQNF/xhiuy7Rye6grHKX8Vo5CtTay0kmGCZORQby/eeonpPm+nWgL7EtxOTpCvibvFCvByYLr2TDp43Hq4OHZNwiwNk7PBUYpFwBfRJ1U514js2VRXOG4N3jblvDoJ7i6G+5G9eGcWvxyaVjyKsJDuUU+rsMkMO9UDUtVjQfIr7lQDhx+BD+Iq3tSjbxJZFeNj4PvoMYfipolsOpAPbnOGUchmJB4BKWe8336L7y6ZIJ/HTTfsvue5HJjgJP7yn/biNVPfQQEpqvP+wTSMcCowm8PiM5VibMKMijAZWELVAFqffTFSF7goirDYaOZJbBozwNTq33vx1oj54OfEMSYOPnAZ8+35hBPd3R/IpU4Ud30mBrWgAxf0Y24SLtF8Stx7FijFR8CcoGPMHGssLmsT9NQQfwVO4MygyV2SKEGLICcgsjiVk4OPsVGcZpySyLpFd9MhHjc5toglHI53t4Th4yTqlEFtmnNyOCgxpTnH/Ztq3trHPItxwx+ZHEELmiT2G6MBzYJkQTFO4gxKJy7xvgOXMCdcIxxmmvq+FcV5Oc8Eh22mGPU5i7oJg3xmclqwjZcKtIjVPuLmWIpj+T/qxjhVUJqPIufj4h2mnao4Zwqprc91rt7V/zlRG2dkaJDCuym9nM1xC3scfZmvwTpepTWaUf4PjcP1eljN9Cs3+J530aM6Ro9pKSf60hTlIT2tY9VaCzgtzruPUNgfeJl6UZxeGqbjdbq+4YUAjwpHz7tbwjsV1ymJIrRllH5QF1XRcVrihhqpqLIqq7K6RK1cxln61n1WVgFhKmnJYE3XlSqjphpFhzhvLMqdOku99B01PM+zeFQv6kQdr6+4V/sNzgR1VF+ep5KkK9Q8XBx5wvZyDAOV43RztvhqU4yrmKSRaq6SaqMPqR/7TdRSNzXWZwzzdhRqMljddZQu1mJaJltujqQHX2miWqqkHtPnAfNlhp7WAmdDMpmVZmEs6xnXsJFtdI3RR282I85vsS37ZNCe2cCMsPLERX7TMBk8G9pr4Ud2RQRJCQaGjL+UYhd/2bHqqM1rHO/+349NsW1ljDPlbE01Pg5HkKEOO5nod4rlqsi8EUdqFXiS1ezkqXCcM8YAbQ29sFEad9E4Tj5nMYuNdAqXAofJMWfoCtxBEYk23rmRoxgWHly4EPZ3AH7+zQeMtO7iGG8o5bmSAXQOMD0VoTMrWMRJ5kklYt5QxSmhrVcGemtHW54La0a8wrZ4krYk/gG7WRLeVOAIYIm//dKDM5M+Uc0ZfB/QB1vyJfBBNMWlV+FvI7IYB3ZxuJxFwC66RzohdwC7I3MQDi9wuiSRRU5kN4lSDA9rzRRiG2BGNprSP/JZeMr+bL4ynG9KOYayTOQoi7YA38F0DjMRu1fFCsdFWZ5kE/C7HbuVOZ6m08289cWYcj+cKcByu0QSF9M+kPswuoS6mZv3Ke7zxjxjXRtyNrB1/x9mpDcRTKAPgxjB2/Tm/4I8PjiLn4DJXoWVQcEKKE3C1w7zKfCXGWyu4yqLqx8wLUEpW/AZAEMiHYaWADT38F1KJ8pwZ/LVb8ZCHqchhSRKcTrd+YEcxsULCsJYI7AlwWsQmrha8UbOtZ4W5gcgL6IR82B4o4o2AMxx+V6KnP/kZADcC2hpSI/IzIHDIiA3aBVGMX5yS7mRuoz22o2YCfxiz0H0NbUKbsYZ3Oha6GbZq0KakQdhg4y157Q+2GyLw01sBJb4Z3+OIeAGPopwV1h5cRvBLZLEET6VN2T+2M9XkFGZjUZuY6lGrdi2S0oxgDxgpL9rcV/QDEKd8IEIKrhGmSMliVZ2dAoK8QuQFzvgGDUY7WoEno1c96nV0mnEUxKH0y8/IihCJ97le5axmBm8SIf4y1Eut0acdgH0ovRzl+JrvIf1XEf3b62cjIcYnwLwo0JXaVmqDAMBWCdJ1KKXrVTyL7ccJwWUo6cp5V0M90dxcE3w5rPRwBhFZgaprRxt9tmn2CFqKcsPANzh/n7LvDUwBCPl3VNGP0YHUOak6FUMDveH50OauDk/IFHOO/dTg21AHD+1ggGDTH3z4h/NpKkr8+EB58l6RltIqcg95v8H3XccJ3GKN7gL17i05oFvdbjdjaG63WtX5UoAsiMdnrIMobBEdb4sOIFVNM47MCfAtbQh813qGu/S0BVCHq0Mp1lpcJKb5j2J+21HeCq6DWO5RFX622OXtRMV5d9mGZLn8oDf0EBll2aW7XzoPtkVZC3jBhPIdrynBGX5GoBlIcXAclldGDQ305Tf3M92VAC1XbSrJddF3GKM38cVZNHFK3ujFTxaQB8+EDQk17SGuG5PdCbHnb0DLL8M8cfNJpOHwpKmmKtc76YUDbzONZRxg5wQdCEClXjfpeZ4D0VyqTtg3mW9cXBoFqMiOwpMFXanvVB1opvtOUaB2WBbzsjidbf7uKEJKWlH4XbPs0JXLuNyT45h/95JFGWo1xzKM6YsNaJK8p4p5SPeHCXLCBIuTVuT0/NRvJn0N9Rp9pKTJvwMwArqupzzDWeAXYgL3G64y1ZsJYnaDOR1hvsDl9AyEjiXY9x5fSfludHbDLnAvPfKAvrwgTDfDYhtDcUxe4a/+eddWjGW23gvKs3dlhJ/j9ENSttrH0niZfOdo/QmGrLcDItWG8DhPnffapC1Pn8yPHBTGvITaCc/ArPVt6gdZzoYNWin7T5JK/4XmkUiDYdBEROFOfuZy2ne6/+oYYL43Uxv35L7eDP6/RpVkogf2odBY7JRx66SJLL41cyaZXychRlv8ppvrd6K0cOd48Ybc8fthnNUwDsvM+X12XhoRjYAM3zPq9HT+jXZTT2ZC6NM2ctc2vbk4/vtPbjQag0xD8rhGDVvK018tHvIA/L8lz7yr4gXPGXd+HLQhRu86h8nmQ3c6VHvbWaZuix1msbu+nwD11vd52pLGykGwQ6zeyuww01VYJ3ffYfW1v2YJugEDXkHgN/pZjW/zpERwQpdOI6nvIoPQ13KRm72abCZ1t00Pk88ipuRZyMjo1UGzjQpz5Bku910ivr4wwxtdeiaZYkM2rkGiulhK5HsE6/bot1WONfE1/7Ap3xVZbVLudXzvDADI7Yq12IEcIN/5jehDvfr4XMKGXM9xFiBSB7jjG9vjYtdhTfP671NXdtLk6fd1Cu50tvmKGSiL0QZT6hvvgb0t2T9IrnA3/Qxw15t2nFVaJvdfeKQR94+D8hFhrvQD+E6H7W2cSY0RwY4lXHsZiujudSzcviXfaKEm9xUeQzxjazHmfFlkt9dyPIw2O1fT1hzxorofS4ymetSc8jyrJa+itoZesrklBsKo04WnfgRWM7TXsuRayED7HnDpbU00lkfpaaF96o22Ho3DsMihg/rPNMX/lAdHG8Grrzw7pihnVtwZm0r5CRx9nEie2u+EIuUNgOH59AalZhgmZrruWsnGBZVu/tM3r/4VNoSZmUEM0KDMkfzCjnk8hHXha22lGKE28a8ms828ITb4XDu4mHO3iuBPWIJ7HOfMDL43NDmU4wjuJdF/MxALvObNTmSUZF5hgpmpPjTt8yLOIjk8L5PQMcaseI/1cStRlXK8681JIlbTMrxksQE0xF9p/g5zjj2wANkcjoDWctMenKy33xCH2M+iArmRJZxUI0ykdPYpPPEUKOrPeMa5XAng3xzdGFr3eULKUa1gpuRKGPViVh3NFDTGF82hOdvQws3/zzParkwo+1Bzxh3/vRbNWlgBj641kd731DWUp3yXM8sVvEW19pzGOVdCyrAUut5IXaDdQcW/zYriT2OWc35VmNa7d8x51JLmGN4g4F0DJ4CKco7nkq8btL5jroZ8yRsp5GHUph5hrbFt79zBH8YWsB5Jyq66w2Asz3qXNQ5S3flBpDNK7zN41wY7PdHM2vEiwosyQeGNimKFj70vcY2kNDSnuGtA+ar/OZey1i/3euRQQbjC+52QEsxg/djcr1reKIW5UYF93R7nuBY61ekXc3wDaGZfGVo83yDSgszKMF0hjKUWzg2asgrZA36no1YqrrPQh2b+q4hGGAPQzpwlLUg2xptb7Eq0ze+aynP2bsFVlV/8VnYypgJPspBxVyvAT69mkLMMJTF0e6ZOJZzz1SJDKNFr49a091myraDlvEcFqngGrMBPomiXmjm2F3egUBS5KyStSlKc28EBYab3O/xpW5sVlZRiiPdC84iR21LAzCeEVFcjQxHwIa7uwG7NWTBdJ/dbq+lKOEa/WGHf3PBWOZgt9eATabZ3IDJcbZX77dqsNnXKkMIrYsYygrD+PceiauMCfEEOyLLZkOvaprasvg+xdxoa/AUZqERwpk+zojpeLpPXWxs7T185rPK9DK7VDv9DqiSxN0m5UbqemY532FjjuATQ4vjGSdRmDeME1CU9xuVrBXZsIDUoW3iDy17UAefi9GZRrqzfLV1rDF0idfrjGYU4H3Yli9KwKxquCKBkdsGUEOd4w5Ljr18XeFpk/5hX9pqbDY036lRHjQ6RpyjjFQxCuBaBvvW3j1dSsi7hD+obRbjM/dAWCX5whR2K60DONrHE5TF18rrqmIZAnxeYzQ1CuNWvypozLlRocs5n2mG9lTA+0+1ltv/lihs3CAX+Dx9i/CKUbzWBDvjG97nrZNRL/loDs/zokvLDfqcnMJuNoS1fkryEP/y0IsaW1du1CgckTve9S0leaXg7jKyYkYEzqqGL1zyeYG+HT3tAZB69LPnItkHZv7nd0m1gr6s9hruaW7ZJOOcuHYtrxNpFS0ns8nxVejnZhxXm8/NvxmBYm5whVBTCoxoY9wnl8S7iYxGvOhxw4ksMFd6N8EsO1n0nkkt6+N57oujBiPM3LQiutFT0XQXdzuXi0xOvsNzPEQtY1yPGyCdblxgfO7W+W1edKaR6dQxAiTxBsMoIlGd23jSfxWvpa76hgQc896oqAv0KkDrm2NiRkDg+VOXr5j5UoEhvSjCSncf7gR60NW3jomEKIm6l4kGVhvwbKxSjl4m0MCWuAGIlxDj4knX9xLCgdr4jSya8jbDY9vqY76mFB+b7Ob67SiGK4nAvtRloMeU7VizhW/esvTb2f7xwZq1PvF0x8K8ypeGFqX9U8J8kF3h/Rb3Co6oEZJOXGBUjNx4x9W5iQ6cEtyhJVpzueTekxPDzZNGPM1x3MqdXBmtr3OUUTSi7uOx3rvJa9Sha34uDMgvLLUXtsQ+aUoNlyc32utPkriZS2nNHdzG+QF7dZFN6dejaJFB5XNfG3iW4rRzaXHiRFGTKG3B0Mab3EOrSqbvqTipbkyku+kX59zPve5IETMyDzUZ5k1PR1NMnw2HI83MtNO2yPiqt9N7RpHeVtf6LipVYePas8na4w6rGF6l6ZyQxu02/KgdbouzE52txehyr48xx/CEZKxNOwI9xssyPPapYBzLJBK98ow0MY/zPW2DXHz3FShurajjet5RyeUJ3COiOQ/GSVvD7JutjR7AjGl7p/diOJ6mpiKhbmIGpOIwJvF3jFOyEe+K3a7KzbXJxEILyOp0o/IsD7rQxOIMnbtZEZPekIFeZ0Eqml2EbVFrnEg0tYBlsFmPebwPuIsLWWnS+f2lHGMsn2Obet2F6FzPKNaIfqHf7vwUcylOl5A/tHvhh/90UWX6hmZP1xNjXkAOmQyNd20XN5gaBUR9NV6C823lh1MK9npNy2yeIOwKmW4nCFiJUIMhcdX9yCxwQwA1rFz39jy9M7TAoLpLjXVsvyKvcUbwNdmUsTZBwjMUWfwQy9AYp/I93PVEDr0SRaehBBuAb2JQW/KKf5S1FoE+8Vredsv9HrqS5KqU6+1VE1dxsXEqhGW+HYNCDHFr8qhPidzl/0RUoZ85exNaogeqpTg8bs6qhDrQX/ZbyeKR8G/X02JcVB4ZvBT3OHplY03KCdpTMw5Il1jPahbshfJUM9oBEHF0jcE9EYhyj5KoxOh4PnuWJ+O8oG7memVs9nhuXGI5Vc0FcmLkXZe3KE+JwCGpiLWsmGtpTDThp/wE3uU0V+3IY1xyoQV5DPgz4HkG99ItagurlSnmyqjdn8g8ckngm0Ie2LYr0IX8hxON1W4SIzz8JV3lbWr0AQJ+BvIoa35X5QXLQ7wQPxNszavCa5EhiTsAGGnRi9PTOmVSknVEuZdSlMHxTTpmhRZYBsnV9Zdbxwtr8kjBXihvRdiDCQm5zwnUB45kXLxbpChlKYmB1zq7/oneNmB7W4ckE2BCoB3PuwdPRkT5ixQ2Ud7hc18HpzlLuTgpETViBHnAbsYmc87cTVWUOeT5OynHMCzamYbixnc42qMuElRqSow3HcNurOU67elIhjEQbOco27WHOnwL/Bh9oEFyO+M68+so+vu68ynk8FWU09LVDLEbAJXZgqVSUolHfabVDn4VjlqMi68V0NoaZIK9H7JYbXdMjuOuAu4+tvf1hlgmJU+KEWC7aUq05p34ARaN2R/GxOA4A7CCZHKlf73DW0Qd9qQa/S0n51N4xked5b41l2cD1vscyUQ+DLqzxXAU51I+Jg9YTS9/4LyEoirHJywIH6EjgzN4hd6BC+fIrsl3vo3B08x+1fbYvrD0DOunlKEn58gOcfKIxNSQ6kcpHmYrC2kfq1lRjt/YzRESGVzFIwG75WexjhfCswmluYbR0Ut0rmJX2BGVC+kWHQuAbuwODxZU4jHeih8nzToqGKACGa4L2BlawVGYTv7BaF+DElaZ4D9JpcniPdaFl/ocxxv0jH83BicbXWJb7DbIc+GOSUUeDDiXVpghrImcyaIxvRnks1X+hzdogkNRjqOv6xexiwl+k5u9QG6hu3SEJutrzYuEqqKqjlVjtdTZytIyTdFEzdyTe35wdKU6qoKytVvb9JWGOwH3yFBavbVVW1Rc5TTM8Zy6oJsO1yZJ5TTPGRLnTdfpbv2hX7RGLzvrqKD/KaQN/6pGznZOV3etVzFV1xca7XynOOBwPasm+kJbNNoJDpleTnerlfKUrQyt1mRNcILCU/2fHtFhmqNsTXICjwNzmu5TVWXL0VoNchJsaNNK/9ZG7VRZobuC3ujyNVcvFdEPWquBe36LUXKgvyL7OeOctkmmylAndRLarEL6Xi86vyfgv1tHaqMKqay+c2LeHoKjLrpdP+tP/ayXne2BPGfpFtXWRu1UjhZqmLMsiqOu7tZZqqPC2qw1+k5fany0FP3rj9I6TyeqiWooT5kqo6LaoDX6Vcs0V7Od1ftA0JnO7r3PJfm38JrCY+8ljnusmIzYjW7PSpyYB0dOorcWhGzIEImv7qKdrlIJzVbv+FH8YqZvrhkmxuAine5szGf6gqj5PvluEoUO6IvhChbWmcSD7vLA/Qfr8PvwPUpf2TLvrj6YolynERdkmoMNOw7kC75SC+u6ZFi/B+kLWYcFs+Oto9M4yMCd5sM+keqyHLjgPasDbM3/HT08Z1KvK0gnoTT2M6hsTin9vjdXkRzqYIEbthLiXVkYK3XE921F8hsbaRwEYIT5tAfR1bX7H3xJCXcNszOR90BU2rbGw/3LeNufaRx0sE6zJnEVyT8ZzJKoTjfuin12J0bKS82ZnEGH4j1H/2BQyLgU7oh3OUYaEu94j6olne4ud1NzdX7nrTQOePBfo7713vvcDm1wfv798SnuOsnmMTJ2XIE0DlJQw5yJXxH/wHUaEg4T87dK5GSWADA/2J0zjYMcVlCLy/c+t0MflGeOP3ZaTN7qDGEXsJgrCtY5NY0UwToOkcS922lIEqX5kJGJPKg5hpfYSh7T+Fe68xyioKirXkBu9JHvNGIBh/YsYShnB3idZ9KUB/kS+JGeQVev/HNxyI3Q9FD4JP6zzn68VvdQAIV0rv6jptqoH7VR2ySVVVkdpbpapu/0haY5v+71Sw4xHGIdiCO1WKGj3qtVP78+wWmEQAXVVWmVkrRVG/W7Vv2D/ZH/WbDCKnbY+9zSSOMfBXMnaoybTNNII42YIMscKs4Nusk0jTTSiAMr6vFzqS5LGmkcZLDuKlu9P28CTSONQwLWrWPX7H1uaaTxj4IVsfSLtPkgjf2HQ6KxUVxvaaX+VnXV1R3O/FSXJ4000kgjjTTSSCONNNJII4000kgjjTTSSCONNNJII4000kgjjTTSSCONNNJII4000kgjjTTSSCMEHGpxuCTFv4J8P5anZigI4IFRnoTlLbq/AgxTnPqUlCjtj+5GBrVoGKscOFTnaIpJZFI6tdLaZ7IoTSOOKOjDLUnEl+QSLdA9epgvGRC+iZmT6U8263mchhK1uJ81ZDM8dHU4rRlJNr8zjfeYzdN2+HHaMYVsZjOGMYzhU9ZxpiRRlf5kk81jlOQ0ppPNSrqQKVGeh1jPKGq5OVygBfqvHuBLXtE97rMT6E02q3mf1xnBNLpTyryxA5+QzSKuCz2jIQ+wnlHue69kGtks432m8zkPkuWmqsarZJPNTC5xn1zNr6zj6T24B6ej7vbJtCqdWU42s3iDYUzlpcgdEtThTlaxzpXQRH5kuks5jZfIZhUzGM8cBoQl4lKLM0Tv6wa9zRSNVxkPpZem6zq11Tje8aaSOIze+lZ3q51e4nU9r/MkiXo8zFqyGUJziXLcylKy+ZAk79+WqMx9/ER2WH4S9ejGWl5zW0kbRpHNd249p7MmlDdl6E022TxHeY5nItmsoyvFJUpwL6uZTEOJGtzKCrL5gQ+ZR39vVFVO5gP118W6R3O4PRJFlea8QjYrmcEE5vBy5D5X+vEX8/mY/5HNZ3zCT2TTIN9fOkAMx/M3NSWJcszmMfPcIYfFFt9nEBm7qA+8LEm0YgdLKG5xng+YkIfcyr/N/3OBSpJEDXJYap4X5dfw/TM0YmMoNialmckzVnnWs8CIby2LIqMtlwE9PLX60RLdJcDtkkRn4KPImMVLwCAr1Uw67pEMF/JHQLzP4RAqBZX5hM2catFmsMP8X5IJ5v8i7OYDSeI41vMX1a00g3jb/e9icqlgnpdjPiPIdH91ZR0nWqkOZzEjKeL+asBf3Gxoc8iL3PvDC5DfYPI0IIdNHGM9mRfRGjgR6GN+teMm8/8HELqtiDL8zd9WF/jZamVjgbISDVnFmsjAQHs208LUfgFjwrWXyAImS27LXk1V9/mroVIyAKgikckrNEtcw8QzUDutcpZLkpOtLpHHDtooO3Dh35I2mV8bDN/HGqWjZQd5916k/qbWmv+HSjpXkpw/9J7qUc193kxjnXCDulTZzlJJcjbqpkg2DtY7v9GjaqhOhpgtyRtkcaP+tP4PpxuoOTpXJxtKNy3VNdR2RXyqVjh7cIs1Z6miquuSKEKkvGt0nUrqkWAZOVv0qvl/p7a7/y3Qi6qoSGPPUHvNcGmTNMLKa4RqqHP4OnfneS3RhPD8TKZGqoSud3a61B91g8pa3zTHyD1U3nyGqnR+1GoV0wTKWdKO1M3bEsZrufl/mMItYYNGqYzcIM000CwrXKbb3pzFelqV5A7KNNEwveTMdGnZulnt9JAp0Xa5NXK+00uqrBtdwsfOD56S79azyehniVky1YDr3Uzn6XeLgvD8ioW1kg4LJlFEhZxZ5udo5Zqu9pGky9z/L9NIqzw1uc18nqXB+WqFpGqKDWKU9y+7rM52Xa8iGowjUVi91DWxQANwmy7VNt0aUIYI/tTuWOWlivNeUnLN1J2hlaqkSeHcOUOtNc6xm+obqqFb3P8vUnMNdbZb1Cn6I4aUYn/heFipO1VHY6Jn4ChUcKaa/ydpk2kJUxXcEuwSLZZU0/3/URXR0AiT87WWqBtlFQ1Lgs4YP9FZ5nyZuHqJO9Br2qghjAjNBs6Q/MqP4rpQOXovBvkUWeqEs1ZTdZ47Wp2hbeogSWSqsfOdYXpTW9Wfd0JNxXk18J2OOglNyXdZq+t0rdTXVolm6RWdreskddNw56/85ihxpLKcLzVSZ8a9QPFaZWpSDFqXwHwzdJnQu6akeRqk+prHDWRIzrtO+ML6iyV5rw6eIyl8p1x7SZ/bRCfPeSv/tYwHZ4AG6mz1TSCn+jrbSrNd7+oU6kiSztBWdXAV67P1SWDyRpIWSBLFdK426ScPda5K2LkbCV4qNH7vapdwXHCW0kYj1EFteFQvOrkeYuWI1qpaUUlL0UgN1U2F1cb5xUe7gAqSyugiS9GSpBG6UG01mOKqqpG6njrOMp2pT63yLKO13lBbXcATejaserioyoPapeI6X1V0ufNFPuRQniY6QQ/oJ13vbPFQ7tdF6stPOk17dpHhLXpF0su6QbcEzEJdWa1MHa8L9JR6eiiZ9JZUWHVUzUcpTgPV1u1qoGvCiook6b/K0O16VTdyizPX813WedKvkeSqpTpK0uo4pS9kfeETtae4Qw10JwucoQG0lvSWdJjO89XyLV2r9nqCTJ2sF3W/TtZsGmtxVJTuwhKnqLuWKbQerqpiWul4Z8vVVo3DEqyjO1RP/0lmlomHJLQ8Z6Ya6gUVV1/N89klcvSL+dsalbCO2miosnS0My2K9qn6qI/66X3f84narPaS2miSRshRe0lXapSnPLN0jJ5RYfXSAt/F6pv1oabpa81RRXU06kwyaKK2GqKFzsnOQl/tt+hGldYUdXX2QIUhSy31vuTM1xe6OmIZNPhM0zRT32qzLtaZHspu9VEf9VF/+ee9yrpQg3WCGnjnCmeX01WnaYFO1mz6mWVzhvyhY3IVUX7KSNqh2MD6wn/nv/5uyXLVVss1wDaTGMxWH/XRcxoXJZmVai+ppT7TW5I6SLpSb0elv4MXdZ0eU2MnVD5H0a3arrEkVdWFelWN1cCJzq+gwHHMAn6msHmyGqv38i5Y9qsqISscNwAP+3JqHrHCUYvmPupwdlODcVQhg99ZTBGiu58kGvEp8DvFzJNlYSucREeIlI7TAI8hmW+ssp4VssLRF2gX+K5lfL+HUruBn1wz7ULAMwPxfNgKJ1GTTWyJmGKZYlnhrvKk2sIHEmezm2GBbyzE7WyI1JcXgM4ejnqAu+5kFgQ26xD1I6xhkUcg/yGTw1+BxmxmJdX5NGzxkzgqYoWjNBf7UvYFjmMwjSS+YzWF+Mx7rRevhaxwnmfF2clmH99AiFxiSQ6TJc4jj4AFSdgKlywSzkDhSxKdBTpTH6uOTsmP+Jwhekc9OC0m/VfLhBDCCGWos4o4q508jVID3aepNpl2oabvLNI5mqLD1SIw4ze1Tacag+kWSd4tVydgPnlAczU48Ja2PVs+S9K1aupc7lzuXK6TtE63xNrWc5brI5XQWYG0gDWJM13PqCPtPYW8XJKcXU5/tdIO/cd9/KGkpp7EjSWzPpwmxZDgPobzvTqqisYrKwZ9o+NfA46Q1FF1nEWSRqiy7tccJy/he7bpc5WU92b2Y7XVv3ZyPlI/XR88YOYHiVW4hmE1ydmlVxVqjPnBTfpTbwXaQFxwMzWsn9O1Wv/VWCPChzTaw266sLNbg2KWp6SKaqsxk/6sXFnKJ1WD1BFnpzqokEYkYS9KEpypBWGjq5OjoWro6SLezlReodVJUD5Z3B/18GF9owHYmr3pTs4czTFy+VDf6lIO8/CtUvhe7oHaqJvJ8rwr1l7XXu7pO+/qMZ0UbwDmMo63+L/TIt2mDyVJbytPD3tV+ZglelLIik5LbTVTP2dDFN8DmqtBkf3AAgKP8Gl4S5J+zDUbcg6bWWTxfQyRmNQ0Btw9E5qTy4fWhtwFtlpHk9DGoJXTc2wz+xQL8c1QdOeL8FYavVhoKQR/mY3U4rwJdqPjBXaEtw8pyRTOt2hXAN3d/68FXvbPE2xk2R7Jbpq98UgzsNVRXjMbqQ6dyGOmtV34OXnhjkwhBoXLS0nycA0H1GEj8yNDE9nhoMaU46/w1oNEbVbwerhOdGCDrRHQhlwmG4mW5ulIZ+ML8iz59gXyOVtRhOXWL4exYOXYFOhvftXlc1/q+9kdXskynagtCyZD0EqX+9mOO+tSghlMiQyKlAZcoxT12MxcbyR13gTX+rdvQA/GMpunuYexfBLySZBoSl8gl56uK09XtgFDQw2G83gHWMdNIeM3PYAF3EkhiSuZAaxmLGN4h8/Yic82RVPMnEP38J6PeXIfY5lNX+5hNDOp6z49gd7ADr7iHSawmE99K4fCPM96htOTwXzLlRblCmYB/+Oa0DDB28AnXG3ox/EEkMeDcc3Q0XKrwhvASJq4v2vwKgBDqee68qwDFjGZsXzJfB4PN1zqcB85wAzGMIbJ/MTa0MqTU3kFyOEu6kkS/wF+oXuoCfAFnzCR//IIi3jAU5ZqjGQ6t3Ejo3if+r6Sns7XbGQkfRjIM6Yr1eMecoBBnC5Rjuv5A/gospZIQgZN6Qc8HDH1UJIFxuuhDe8D2YxjDGP4hK084kt/JEbx4rqIF4wrz1vYALzFOQFvbst8+tGJB/iG+63uczqDgO3cGWo5dASWcZ/r5FWFzqwHRnC2kkTCaZmqziqJo1VVvzq/5aMF7QWo4bibeZTVbmeThxYqTz1V13L9lh/LGKVUS+W1WksPzQsLqeqsooQaa5eWOJujqKXUSBla6qwNTFtNtZSjnwv+UkzKKzv5r2a1hBLKctYlm05y20i2FoV9MNJII4000kgjjTTSSEOS9P+CU6N5NslIkQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNi0wOC0wN1QxMDoxNzozMCswMDowMLrn+64AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjYtMDgtMDdUMTA6MTc6MzArMDA6MDDLukMSAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI2LTA4LTA3VDEwOjE3OjMwKzAwOjAwnK9izQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=");

    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}




/* Hide Opening Hours In The Footer */

.modular-footer-retaillinks---openinghours {
    display: none !important
}/* 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 - Templeton Jones (tj)
 Layout-model replication of TJ Design.png. One white canvas; rhythm from
 full-bleed photography bands vs contained, hairline-ruled text bands.
 Motif: the hairline (section rules, 1px ghost CTAs, dash pagination).
 Signature: the three-town lockup (Shrewsbury / Abersoch / Newport) echoed
 in the closing band; the About declaration set as the large serif statement.
 All colour/shadow/radius values are semantic var(--token) refs - the
 colours-only run supplies the actual brand values.
 Fix pass 2026-08-03: brands header anatomy (band-opening hairline - label - 
 H2/VIEW ALL row), about label hairline, new-in nested-control guards.
 Full-width hairlines use var(--border) - var(--border-light) computes too
 faint to render as a visible rule on this canvas.
 Rhythm pass 2026-08-04: the per-band padding tiers (strip / content / airy,
 each its own clamp) are retired in favour of ONE flat value - every band
 pads padding-block: var(--section-padding-sm), top and bottom. The single
 exception is hp-hero, which carries no section padding at all so the
 full-bleed photo still runs flush to the nav. Retune the rhythm in
 02-CC-Global.css, not here - --section-padding-lg is still declared there
 but no homepage band currently uses it.
 ============================================================================ */


/* ==== 0. SHARED CAROUSEL CHROME - one dash-pagination geometry, quiet arrows ====
 Scoped to [data-splide-opts] so it self-maintains across grid/carousel swaps.
 Dash dots are the mockup's hero pagination - the SAME geometry runs on every
 carousel (hero, New-in, Brands); only the inactive colour flips per background. */

[data-splide-opts] .splide__pagination__page {
 width: 1.75rem;
 height: 2px;
 border-radius: var(--global-radius);
 background: var(--splidePaginationBg);
 border: none;
 opacity: 1;
 transform: none;
 transition: var(--global-transition);
}

[data-splide-opts] .splide__pagination__page.is-active {
 width: 2.5rem;
 background: var(--splidePaginationActiveBg);
 transform: none;
}

[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);
}


/* ==== 1. hp-hero - full-bleed editorial fade hero; text bottom-left,
 dash pagination bottom-right, minimal white arrows (band 01) ==== */

.hp-hero > .cc-collection {
 padding: 0; /* deliberate full-bleed - band 01 runs edge to edge */
}

/* carousel height chain - mockup hero is ~800px on a 1440 canvas; the vw track
 runs a touch taller (65vw) and the ceiling is viewport-relative (80vh) so the
 stage never outgrows the fold on short, wide screens */
.hp-hero .splide {
 height: clamp(30rem, 65vw, 80vh);
}

.hp-hero .splide__track,
.hp-hero .splide__list,
.hp-hero .splide__slide {
 height: 100%;
}

/* Band 01: a soft even veil over the whole frame, gathering weight only in the
 lower third where the text block sits - NOT a heavy flat wash. */
.hp-hero .cc-banner__body {
 justify-content: flex-end;
 align-items: flex-start;
 padding: clamp(1.5rem, 2.8vw, 3rem);
 background: linear-gradient(
 to top,
 var(--black-50) 0%,
 var(--black-10) 45%,
 var(--black-10) 100%
 );
}

.hp-hero .cc-banner__title {
 font-family: citrfontboldalt;
 font-size: var(--fontSize-3xl);
 line-height: 1;
 letter-spacing: 0;
 color: var(--bannerText);
 max-width: 22ch;
 text-wrap: balance;
}

/* Band 01: the desc is BODY COPY beneath the title on a ~474px measure - 
 two quiet sans lines, not an eyebrow. */
.hp-hero .cc-banner__desc {
 font-family: var(--bannerDescFontFamily);
 font-size: var(--bannerDescSize);
 line-height: var(--bannerDescLineHeight);
 letter-spacing: var(--bannerDescLetterSpacing);
 color: var(--bannerText);
 opacity: 0.92;
 max-width: 48ch;
}

/* PRIMARY CTA - the ghost. White variant for photo bands (band 01 anatomy:
 1px outline, letterspaced 13px label, quiet). */
.hp-hero .cc-banner__cta {
 align-self: flex-start;
 background: transparent;
 border: 1px solid var(--text-inverse);
 border-radius: var(--global-radius);
 color: var(--text-inverse);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 padding: var(--global-buttonPadding);
 box-shadow: none;
 transition: var(--global-transition);
}

/* hover-reset law - one combined rule, all four properties */
.hp-hero .cc-banner:hover .cc-banner__cta {
 background: var(--background);
 border-color: var(--background);
 box-shadow: none;
 color: var(--text);
}

/* chrome reconciliation: dashes move to bottom-RIGHT (band 01) - the body is
 bottom-LEFT so the two never collide; arrows go minimal white on the photo */
.hp-hero .splide__pagination {
 left: auto;
 right: var(--bannerPadding);
 bottom: var(--bannerPadding);
 transform: none;
 width: auto;
}

/* Hero dashes sit on photography, so both states read off --text-inverse
 (30% -> solid) instead of the global brand-dark ramp.
 SPECIFICITY: these MUST use the [data-splide-opts].hp-hero compound, not
 .hp-hero alone. 05-CC-SplideBanners.css sets the same backgrounds via
 [data-splide-opts] .splide__pagination__page[.is-active] = (0,3,0); a bare
 .hp-hero ... .is-active only ties at (0,3,0) and loses to whichever bundle
 loads last. .hp-hero is the SAME element that carries data-splide-opts
 (default.aspx band 01), so the compound is valid and reaches (0,4,0). */
[data-splide-opts].hp-hero .splide__pagination__page {
 background: var(--white-30);
}

[data-splide-opts].hp-hero .splide__pagination__page.is-active {
 background: var(--text-inverse);
}

/* hover must not fall back to the dark global rule mid-photo */
[data-splide-opts].hp-hero .splide__pagination__page:hover {
 background: var(--text-inverse);
}

.hp-hero .splide__arrow {
 background: transparent;
 border-color: transparent;
}

.hp-hero .splide__arrow svg {
 fill: var(--text-inverse);
}

.hp-hero .splide__arrow:hover {
 background: var(--white-30);
 border-color: var(--white-30);
 opacity: 1;
}

@media (max-width: 640px) {
 /* distinct mobile hero: taller portrait stage, tighter type, the veil
 deepens so the shorter measure stays legible over any crop */
 .hp-hero .splide {
 height: min(34rem, 82svh);
 }

 .hp-hero .cc-banner__body {
 padding: 1.25rem 1.25rem 2.75rem; /* clears the dashes on narrow screens */
 gap: 2rem;
 background: linear-gradient(
 to top,
 var(--black-80) 0%,
 var(--black-10) 60%
 );
 }

 .hp-hero .cc-banner__title {
 font-size: var(--fontSize-2xl);
 max-width: 16ch;
 }

 .hp-hero .cc-banner__desc {
 max-width: 100%;
 }

 .hp-hero .splide__pagination {
 right: 1.25rem;
 bottom: 1rem;
 }
}


/* ==== 2. hp-new-in - the grid-break: asymmetric text rail (1fr) + product
 carousel (3.2fr); hairline rules the rail top; arrows live bottom-left
 of the rail, never over the cards (band 02) ==== */

.hp-new-in {
 padding-block: var(--section-padding-sm);
}

/* the rail grid. This is FafCustomRepeaterSplide's own Panel - the band holds
 nothing else, so the control's two children ARE the two columns:
 .faf-header (the text rail) and .faf-splide-container (the cards).
 Kept as a direct-child selector: the control nests no second
 .faf-product-carousel now, and this must not start matching one if it ever
 does again. */
.hp-new-in > .faf-product-carousel {
 display: grid;
 grid-template-columns: minmax(15rem, 1fr) 3.2fr;
 gap: clamp(1.5rem, 3vw, 3rem);
 align-items: start;
 padding-inline: clamp(1.25rem, 2.8vw, 3rem); /* content gutter */
 padding-bottom: 3.25rem; /* reserves the arrow row at the rail's foot */
 position: relative; /* arrows anchor to the whole band */
}

/* graceful empty state - the platform hides the Panel entirely when repeater 1
 binds nothing, but a bound-yet-cardless render would still reserve the arrow
 row, so stand it down (no dead space beneath the rail) */
.hp-new-in > .faf-product-carousel:not(:has(.faf-product-card)) {
 padding-bottom: 0;
}

/* the rail - the control's own header, bound from repeater 1 (repeaterTitle /
 repeaterDesc / the Shop All link's detailLink). Hairline motif rules its top
 edge, exactly as band 02 draws it.
 NOTE the control does NOT wrap title+desc in a .text-wrap the way the banner
 controls do, so all three children sit in one flex column: the gap here is
 the tight title - desc value and the CTA pushes itself off with margin-top,
 which reproduces band 02's two-tier spacing. */
.hp-new-in .faf-header {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--text-wrap);
 border-top: 1px solid var(--border);
 padding-top: 2rem;
 margin: 0;
}

.hp-new-in .faf-title {
 font-family: citrfontboldalt;
 font-size: var(--fontSize-2xl);
 line-height: 1.1;
 letter-spacing: 0.01em;
 color: var(--text);
 margin: 0;
}

.hp-new-in .faf-description {
 font-family: citrfontreg;
 font-size: var(--fontSize-md);
 line-height: 1.55;
 color: var(--text-secondary);
 max-width: 26ch;
 margin: 0;
}

.hp-new-in .faf-product-btn-container {
 margin: calc(var(--text-block-wrap) - var(--text-wrap)) 0 0;
}

/* PRIMARY CTA - the same ghost, ink recolour for the white band */
.hp-new-in .faf-view-more {
 display: inline-block;
 background: transparent;
 border: 1px solid var(--brand-dark);
 border-radius: var(--global-radius);
 color: var(--text);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 padding: var(--global-buttonPadding);
 text-decoration: none;
 box-shadow: none;
 transition: var(--global-transition);
}

.hp-new-in .faf-view-more:hover {
 background: var(--brand-dark);
 border-color: var(--brand-dark);
 box-shadow: none;
 color: var(--text-inverse);
}

/* product cards - image on a light tile, name + price beneath (band 02).
 FAF carousels are content-height: the image aspect sizes the card. */
.hp-new-in .faf-product-card {
 background: transparent;
 border: none;
 display: flex;
 flex-direction: column;
}

.hp-new-in .faf-product-image-link {
 display: block;
 background: var(--background-sunken); /* the grey tile */
 overflow: hidden;
}

/* .faf-product-image is a background-image div; the inline style shorthand
 resets size/repeat, so these two need !important to land */
.hp-new-in .faf-product-image {
 aspect-ratio: 1 / 1;
 background-size: contain !important; /* products float on the tile, uncropped */
 background-repeat: no-repeat !important;
 transition: transform 0.6s ease;
}

.hp-new-in .faf-product-card:hover .faf-product-image {
 transform: scale(1.03); /* gentle - the luxury register, no bounce */
}

.hp-new-in .faf-product-info {
 padding: 1rem 0 0;
 display: flex;
 flex-direction: column;
 gap: 0.4rem;
 align-items: flex-start;
}

.hp-new-in .faf-product-link {
 display: flex;
 flex-direction: column;
 gap: 0.3rem;
 text-decoration: none;
 color: var(--text-secondary);
 font-family: citrfontreg;
 font-size: var(--fontSize-sm);
}

.hp-new-in .faf-product-name {
 order: -1; /* band 02: name first, price beneath */
 font-family: citrfontreg;
 font-size: var(--fontSize-sm);
 line-height: 1.45;
 color: var(--text);
 transition: var(--global-transition);
}

.hp-new-in .faf-product-link:hover .faf-product-name {
 color: var(--brand-link);
}

/* quiet quick-buy - present and usable, deferential to the editorial card */
.hp-new-in .faf-quick-buy-btn {
 background: transparent;
 border: 1px solid var(--border);
 border-radius: var(--global-radius);
 color: var(--text);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 padding: var(--global-buttonPadding);
 cursor: pointer;
 box-shadow: none;
 transition: var(--global-transition);
}

.hp-new-in .faf-quick-buy-btn:hover {
 background: var(--brand-dark);
 border-color: var(--brand-dark);
 box-shadow: none;
 color: var(--text-inverse);
}

/* chrome reconciliation - the mockup's arrows sit bottom-left IN the rail
 column: re-anchor them to the whole band (static splide, relative band) */
.hp-new-in .faf-splide-container,
.hp-new-in .faf-splide {
 position: static;
}

.hp-new-in .splide__arrow {
 top: auto;
 bottom: 0;
 transform: none;
}

.hp-new-in .splide__arrow--prev {
 left: clamp(1.25rem, 2.8vw, 3rem);
 right: auto;
}

.hp-new-in .splide__arrow--next {
 left: calc(clamp(1.25rem, 2.8vw, 3rem) + 2.75rem);
 right: auto;
}

/* card carousel: pagination flows BELOW the track, dark dashes on white */
.hp-new-in .splide__pagination {
 position: static;
 transform: none;
 margin-top: 1.5rem;
 justify-content: center;
 width: auto;
}

.hp-new-in .splide__pagination__page {
 background: var(--black-10);
}

.hp-new-in .splide__pagination__page.is-active {
 background: var(--brand-dark);
}

@media (max-width: 1024px) {
 .hp-new-in > .faf-product-carousel {
 grid-template-columns: 1fr; /* rail stacks above the cards */
 }

 .hp-new-in .faf-description {
 max-width: 44ch;
 }
}


/* ==== 3. hp-collections - full-bleed triptych, 10px gaps, bottom-up gradient,
 serif white title + ghost CTA bottom-left per panel (band 03) ==== */

.hp-collections {
 padding-block: var(--section-padding-sm);
}

.hp-collections > .cc-collection {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px; /* the mockup's exact seam */
 padding: 0; /* deliberate full-bleed */
}

.hp-collections > .cc-collection .cc-banner__img,
.hp-collections > .cc-collection .cc-banner__img img {
 aspect-ratio: 4 / 5; /* ~477x600 panels in the render */
}

/* bottom-up gradient only where the text lives - the upper frame stays clean */
.hp-collections > .cc-collection .cc-banner__body {
 justify-content: flex-end;
 align-items: flex-start;
 padding: clamp(1.5rem, 2.8vw, 2.5rem);
 background: linear-gradient(
 to top,
 var(--black-50) 0%,
 transparent 45%
 );
 transition: background 0.6s ease;
}

.hp-collections > .cc-collection .cc-banner__title {
 font-family: citrfontboldalt;
 font-size: var(--fontSize-2xl);
 line-height: 1.1;
 letter-spacing: 0.01em;
 color: var(--bannerText);
 max-width: 16ch;
}

/* desc kept quiet, body-copy role - the mockup panels carry title + CTA only,
 but a CMS-filled desc must stay legible on the photo */
.hp-collections > .cc-collection .cc-banner__desc {
 font-family: var(--bannerDescFontFamily);
 font-size: var(--bannerDescSize);
 line-height: var(--bannerDescLineHeight);
 letter-spacing: var(--bannerDescLetterSpacing);
 color: var(--bannerText);
 opacity: 0.9;
 max-width: 34ch;
}

/* PRIMARY CTA - ghost, white variant (photo band) */
.hp-collections > .cc-collection .cc-banner__cta {
 align-self: flex-start;
 background: transparent;
 border: 1px solid var(--text-inverse);
 border-radius: var(--global-radius);
 color: var(--text-inverse);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 padding: var(--global-buttonPadding);
 box-shadow: none;
 transition: var(--global-transition);
}

.hp-collections > .cc-collection .cc-banner:hover .cc-banner__cta {
 background: var(--background);
 border-color: var(--background);
 box-shadow: none;
 color: var(--text);
}

/* hover: overlay tint deepens + the platform's gentle image scale - 
 never the zoom alone */
.hp-collections > .cc-collection .cc-banner:hover .cc-banner__body {
 background: linear-gradient(
 to top,
 var(--black-80) 0%,
 transparent 55%
 );
}

/* reveal: quiet staggered rise, left to right */
.hp-collections > .cc-collection .cc-banner {
 opacity: 0;
 transform: translateY(14px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.hp-collections.inView > .cc-collection .cc-banner {
 opacity: 1;
 transform: none;
}

.hp-collections.inView > .cc-collection .cc-banner:nth-child(2) {
 transition-delay: 0.12s;
}

.hp-collections.inView > .cc-collection .cc-banner:nth-child(3) {
 transition-delay: 0.24s;
}

@media (max-width: 900px) {
 /* mobile: the triptych becomes a horizontal scroll-snap rail */
 .hp-collections > .cc-collection {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 }

 .hp-collections > .cc-collection .cc-banner {
 flex: 0 0 78%;
 scroll-snap-align: start;
 }
}


/* ==== 4. hp-brands - header anatomy per band 04: band-opening full-width
 hairline, eyebrow label beneath it top-left, serif H2 left +
 VIEW ALL right on the same row, greyscale logo drift below ==== */

.hp-brands {
 padding-block: var(--section-padding-sm);
}

/* heading: left-aligned editorial override of the CC-HomepageTitles baseline.
 Top spacing owned by the section; zero bottom (gap owned by the strip).
 Selectors carry .cc-collection so they outrank the baseline's
 .CC-HomepageTitles .cc-collection rules on every property (the baseline's
 text-align:center was leaking through - the centred-desc bug). */
.hp-brands .CC-HomepageTitles {
 align-items: flex-start;
 text-align: left;
 max-width: none;
 margin: 0;
 padding: 0 clamp(1.25rem, 2.8vw, 3rem);
}

.hp-brands .CC-HomepageTitles .cc-collection .cc-banner {
 align-items: stretch;
 text-align: left;
}

.hp-brands .CC-HomepageTitles .cc-collection .cc-banner__body {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: end;
 justify-items: start;
 gap: 1.5rem 2rem;
 width: 100%;
 text-align: left;
}

/* band 04's header body is a GRID that places desc, title and CTA on named
 rows/columns individually. The .text-wrap wrapper would swallow desc+title
 into a single grid item and collapse that anatomy, so here it dissolves and
 lets its children participate in the grid directly. */
.hp-brands .CC-HomepageTitles .cc-collection .text-wrap {
 display: contents;
}

/* the eyebrow - row 1, spanning the band, sitting beneath the band-opening
 FULL-WIDTH HAIRLINE it carries as border-top (bands/04: the rule runs
 above the "Brands" label; var(--border) so it actually renders) */
.hp-brands .CC-HomepageTitles .cc-collection .cc-banner__desc {
 grid-column: 1 / -1;
 grid-row: 1;
 justify-self: stretch;
 width: 100%;
 border-top: 1px solid var(--border);
 padding-top: 1.5rem;
 font-family: var(--bannerDescFontFamily);
 font-size: var(--bannerDescSize);
 line-height: var(--bannerDescLineHeight);
 letter-spacing: var(--bannerDescLetterSpacing);
 color: var(--text);
 opacity: 1;
 text-align: left;
}

.hp-brands .CC-HomepageTitles .cc-collection .cc-banner__title {
 grid-column: 1;
 grid-row: 2;
 font-family: citrfontboldalt;
 font-size: var(--fontSize-2xl);
 line-height: 1.1;
 letter-spacing: 0.01em;
 text-wrap: balance;
 max-width: none;
}

/* QUIET CTA - the arrow-link (band 04's VIEW ALL, sans the banned underline) */
.hp-brands .CC-HomepageTitles .cc-collection .cc-banner__cta {
 grid-column: 2;
 grid-row: 2;
 justify-self: end;
 margin: 0;
 background: transparent;
 border: none;
 box-shadow: none;
 padding: 0;
 color: var(--text);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 display: inline-flex;
 align-items: center;
 gap: 0.5em;
 transition: var(--global-transition);
}

.hp-brands .CC-HomepageTitles .cc-collection .cc-banner__cta::after {
 content: "\2192";
 display: inline-block;
 transition: transform 0.3s ease;
}

.hp-brands .CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
 background: transparent;
 border-color: transparent;
 box-shadow: none;
 color: var(--brand-link);
}

.hp-brands .CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta::after {
 transform: translateX(0.35em);
}

/* the logo drift - greyscale at rest, brand colour breathes back on hover.
 Content-height strip (logo row): NO fixed splide height chain here. */
.hp-brands > .cc-collection {
 padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.8vw, 3rem) 0;
}

.hp-brands .splide__slide {
 display: flex;
 align-items: center;
 justify-content: center;
}

.hp-brands .cc-brand {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0.5rem 0;
}

.hp-brands .cc-brand__img {
 max-height: 1.875rem;
 width: auto;
 object-fit: contain;
 filter: grayscale(1);
 opacity: 0.55;
 transition: var(--global-transition);
}

.hp-brands .cc-brand:hover .cc-brand__img {
 filter: grayscale(0);
 opacity: 1;
}

/* chrome: logo-strip pagination flows below, dark dashes on white;
 arrows inherit the quiet ink baseline and stay at the strip's edges */
.hp-brands .splide__pagination {
 position: static;
 transform: none;
 margin-top: 1.75rem;
 justify-content: center;
 width: auto;
}

.hp-brands .splide__pagination__page {
 background: var(--black-10);
}

.hp-brands .splide__pagination__page.is-active {
 background: var(--brand-dark);
}

@media (max-width: 640px) {
 .hp-brands .CC-HomepageTitles .cc-collection .cc-banner__body {
 grid-template-columns: 1fr;
 }

 .hp-brands .CC-HomepageTitles .cc-collection .cc-banner__cta {
 grid-column: 1;
 grid-row: 3;
 justify-self: start;
 }
}


/* ==== 5. hp-seasonal-duo - three full-bleed panels on a two-column split:
 one tall feature panel down the left, two stacked panels right
 (band 05, per the contract's layout model); the triptych's
 deliberate echo, differing in scale, gradient depth, wipe reveal
 and the frame-draw hover ==== */

.hp-seasonal-duo {
 padding-block: var(--section-padding-sm);
}

.hp-seasonal-duo > .cc-collection {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, minmax(0, 1fr));
 gap: 10px; /* the same seam as the triptych - the structural echo */
 padding: 0; /* deliberate full-bleed */
 height: clamp(28rem, 79vw, 71rem); /* band height is set here, not by image size */
}

/* entry 1 is the feature: it holds the whole left column. All three panels
 now take their height from the grid track (set by the clamp above), not
 from an intrinsic image ratio, so the band's height stays fixed regardless
 of what image is uploaded. */
.hp-seasonal-duo > .cc-collection .cc-banner:first-child {
 grid-column: 1;
 grid-row: 1 / span 2;
}

.hp-seasonal-duo > .cc-collection .cc-banner:first-child .cc-banner__img,
.hp-seasonal-duo > .cc-collection .cc-banner:nth-child(n+2),
.hp-seasonal-duo > .cc-collection .cc-banner__img img,
.hp-seasonal-duo > .cc-collection .cc-banner:nth-child(n+2) .cc-banner__img {
 height: 100%;
}

/* deeper gradient than the triptych: the panel is taller, the text larger */
.hp-seasonal-duo > .cc-collection .cc-banner__body {
 justify-content: flex-end;
 align-items: flex-start;
 padding: clamp(1.75rem, 3vw, 3rem);
 background: linear-gradient(
 to top,
 var(--black-50) 0%,
 var(--black-10) 40%,
 transparent 60%
 );
}

.hp-seasonal-duo > .cc-collection .cc-banner__title {
 font-family: citrfontboldalt;
 font-size: var(--fontSize-2xl);
 line-height: 1.12;
 letter-spacing: 0.015em;
 color: var(--bannerText);
 max-width: 18ch;
}

.hp-seasonal-duo > .cc-collection .cc-banner__desc {
 font-family: var(--bannerDescFontFamily);
 font-size: var(--bannerDescSize);
 line-height: var(--bannerDescLineHeight);
 letter-spacing: var(--bannerDescLetterSpacing);
 color: var(--bannerText);
 opacity: 0.9;
 max-width: 40ch;
}

/* PRIMARY CTA - ghost, white variant (photo band) */
.hp-seasonal-duo > .cc-collection .cc-banner__cta {
 align-self: flex-start;
 background: transparent;
 border: 1px solid var(--text-inverse);
 border-radius: var(--global-radius);
 color: var(--text-inverse);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 padding: var(--global-buttonPadding);
 box-shadow: none;
 transition: var(--global-transition);
}

.hp-seasonal-duo > .cc-collection .cc-banner:hover .cc-banner__cta {
 background: var(--background);
 border-color: var(--background);
 box-shadow: none;
 color: var(--text);
}

/* hover: hairline frame draws inward - the motif made interactive
 (full four-side inset frame, all edges at once) */
.hp-seasonal-duo > .cc-collection .cc-banner:hover {
 box-shadow: inset 0 0 0 10px var(--white-30);
}

/* reveal: quiet clip-path wipe, distinct from the triptych's rise */
.hp-seasonal-duo > .cc-collection .cc-banner {
 clip-path: inset(0 0 8% 0);
 opacity: 0;
 transition: clip-path 0.9s ease, opacity 0.9s ease, box-shadow 0.4s ease;
}

.hp-seasonal-duo.inView > .cc-collection .cc-banner {
 clip-path: inset(0);
 opacity: 1;
}

.hp-seasonal-duo.inView > .cc-collection .cc-banner:nth-child(2) {
 transition-delay: 0.15s;
}

.hp-seasonal-duo.inView > .cc-collection .cc-banner:nth-child(3) {
 transition-delay: 0.3s;
}

@media (max-width: 900px) {
 /* the trio stacks - each panel keeps presence, none carries the split.
 The clamp height only applies to the two-column desktop layout, so each
 stacked panel goes back to sizing itself off its own aspect-ratio. */
 .hp-seasonal-duo > .cc-collection {
 grid-template-columns: 1fr;
 grid-template-rows: none;
 height: auto;
 }

 .hp-seasonal-duo > .cc-collection .cc-banner:first-child {
 grid-column: auto;
 grid-row: auto;
 }

 .hp-seasonal-duo > .cc-collection .cc-banner__img,
 .hp-seasonal-duo > .cc-collection .cc-banner:nth-child(n+2),
 .hp-seasonal-duo > .cc-collection .cc-banner__img img,
 .hp-seasonal-duo > .cc-collection .cc-banner:nth-child(n+2) .cc-banner__img {
 height: auto;
 }

 .hp-seasonal-duo > .cc-collection .cc-banner__img,
 .hp-seasonal-duo > .cc-collection .cc-banner__img img {
 aspect-ratio: 4 / 3;
 }
}


/* ==== 6. hp-usp - compressed service strip: small icon above one sans line,
 three across, pure whitespace separation (band 06) ==== */

.hp-usp {
 padding-block: var(--section-padding-sm);
}

.hp-usp > .cc-collection {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
 padding-inline: clamp(1.25rem, 2.8vw, 3rem);
}

.hp-usp > .cc-collection .cc-banner {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 overflow: visible;
}

/* the banner image IS the line icon - small, contained, centred */
.hp-usp > .cc-collection .cc-banner__img {
 display: flex;
 justify-content: center;
}

.hp-usp > .cc-collection .cc-banner__img img {
 height: 2.75rem;
 width: auto;
 object-fit: contain;
 transition: transform 0.4s ease;
}

.hp-usp > .cc-collection .cc-banner__body {
 position: static;
 inset: auto;
 background: none;
 padding: 0.9rem 0 0;
 gap: 0.4rem;
 align-items: center;
}

.hp-usp > .cc-collection .cc-banner__title {
 font-family: citrfontreg;
 font-size: 1.1rem;
 letter-spacing: 0.02em;
 line-height: 1.4;
 color: var(--text);
}

.hp-usp > .cc-collection .cc-banner__desc {
 font-family: var(--bannerDescFontFamily);
 font-size: var(--bannerDescSize);
 line-height: var(--bannerDescLineHeight);
 letter-spacing: var(--bannerDescLetterSpacing);
 color: var(--text-muted);
 max-width: 30ch;
}

/* a CMS-filled CTA reads as the quiet arrow-link */
.hp-usp > .cc-collection .cc-banner__cta {
 background: transparent;
 border: none;
 box-shadow: none;
 padding: 0;
 align-self: center;
 color: var(--text);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 transition: var(--global-transition);
}

.hp-usp > .cc-collection .cc-banner:hover .cc-banner__cta {
 background: transparent;
 border-color: transparent;
 box-shadow: none;
 color: var(--brand-link);
}

/* hover: the icon lifts a breath - no bounce */
.hp-usp > .cc-collection .cc-banner:hover .cc-banner__img img {
 transform: translateY(-3px);
}

/* reveal: pure fade stagger - stiller than the photo bands */
.hp-usp > .cc-collection .cc-banner {
 opacity: 0;
 transition: opacity 0.9s ease, transform 0.4s ease;
}

.hp-usp.inView > .cc-collection .cc-banner {
 opacity: 1;
}

.hp-usp.inView > .cc-collection .cc-banner:nth-child(2) {
 transition-delay: 0.12s;
}

.hp-usp.inView > .cc-collection .cc-banner:nth-child(3) {
 transition-delay: 0.24s;
}

@media (max-width: 640px) {
 .hp-usp > .cc-collection {
 grid-template-columns: 1fr;
 gap: 2rem;
 }
}


/* ==== 7. hp-about - band-opening full-width hairline, "About Us" eyebrow
 beneath it, then the serif declaration over a wide left-aligned
 measure (band 07): "Made for the countryside, chosen for wherever
 the day takes you." ==== */

.hp-about {
 padding-block: var(--section-padding-sm);
}

.hp-about__body {
 padding-inline: clamp(1.25rem, 2.8vw, 3rem);
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 align-items: flex-start;
}

/* the eyebrow device - the mockup's "About Us" label, sitting beneath the
 band-opening FULL-WIDTH HAIRLINE it carries as border-top (align-self
 stretch spans the flex column; var(--border) so the rule actually renders) */
.hp-about__body::before {
 content: "About Us";
 align-self: stretch;
 border-top: 1px solid var(--border);
 padding-top: var(--text-block-wrap);
 font-family: citrfontreg;
 font-size: var(--fontSize-sm);
 color: var(--text);
}

.hp-about__body p {
 font-family: citrfontboldalt;
 font-size: var(--fontSize-2xl);
 line-height: 1.2;
 color: var(--text);
 /* max-width: 72ch; */ /* the render's ~1100px measure, left-aligned */
 margin: 0;
 text-wrap: pretty;
}

@media (max-width: 640px) {
 .hp-about__body p {
 font-size: var(--fontSize-lg);
 line-height: 1.55;
 }
}


/* ==== 8. hp-stay-inspired - centred serif close, one quiet sans line, and
 the three-town lockup as the page's signing-off mark (band 08 +
 the signature: Shrewsbury / Abersoch / Newport) ==== */

.hp-stay-inspired {
 padding-block: var(--section-padding-sm);
}

/* the mockup band is pure type - the banner's PHOTO stands down here
 (the image only; all three body fields stay live for the CMS) */
.hp-stay-inspired > .cc-collection .cc-banner__img {
 display: none;
}

.hp-stay-inspired > .cc-collection .cc-banner {
 overflow: visible;
}

.hp-stay-inspired > .cc-collection .cc-banner__body {
 position: static;
 inset: auto;
 background: none;
 padding: 0 clamp(1.25rem, 2.8vw, 3rem);
 gap: 1.1rem;
 align-items: center;
 text-align: center;
}

.hp-stay-inspired > .cc-collection .cc-banner__title {
 font-family: citrfontboldalt;
 font-size: var(--fontSize-2xl);
 line-height: 1.15;
 letter-spacing: 0.015em;
 color: var(--text);
 max-width: 24ch;
 text-wrap: balance;
}

.hp-stay-inspired > .cc-collection .cc-banner__desc {
 font-family: var(--bannerDescFontFamily);
 font-size: var(--bannerDescSize);
 line-height: var(--bannerDescLineHeight);
 letter-spacing: var(--bannerDescLetterSpacing);
 color: var(--text-secondary);
 max-width: 52ch;
}

/* PRIMARY CTA - ghost, ink recolour (white band); shows when the CMS fills it */
.hp-stay-inspired > .cc-collection .cc-banner__cta {
 align-self: center;
 background: transparent;
 border: 1px solid var(--brand-dark);
 border-radius: var(--global-radius);
 color: var(--text);
 font-family: var(--global-buttonFontFamily);
 font-size: var(--global-buttonSize);
 letter-spacing: var(--global-buttonLetterSpacing);
 line-height: var(--global-buttonLineHeight);
 text-transform: var(--global-buttonTextTransform);
 padding: var(--global-buttonPadding);
 box-shadow: none;
 transition: var(--global-transition);
}

.hp-stay-inspired > .cc-collection .cc-banner:hover .cc-banner__cta {
 background: var(--brand-dark);
 border-color: var(--brand-dark);
 box-shadow: none;
 color: var(--text-inverse);
}

/* the SIGNATURE - the three towns sign the page off, tiny and letterspaced,
 echoing the wordmark lockup that opens it. No competitor ships these towns. */
.hp-stay-inspired > .cc-collection .cc-banner__body::after {
 content: "Shrewsbury \00A0\00B7\00A0 Abersoch \00A0\00B7\00A0 Newport";
 font-family: citrfontreg;
 font-size: var(--fontSize-xs);
 letter-spacing: 0.22em;
 color: var(--text-muted);
 margin-top: 0.75rem;
}