/* =========================================================================
   THEME CSS
   ========================================================================= */
/**
 * CONTENTS
 *
 * COLOURS
 *
 * GENERIC
 * Normalize.css
 * Reset
 * Shared
 *
 * ELEMENTS
 * Page
 * Links
 * Forms
 * SVG
 * Placeholder
 * Paragraphs
 * Headings
 * Tables
 *
 * OBJECTS
 * Accordion
 * Block
 * Box
 * Bullseye
 * Grid
 * Input button groups
 * List-bare
 * Media
 * Ratio
 * Wrapper
 *
 * COMPONENTS
 * Buttons
 * Breadcrumbs
 * Cart
 * Categories
 * Category description
 * Category lists
 * Category page name
 * Category products
 * Currency
 * Drawer
 * Drawer nav
 * Filters
 * Headings
 * Icons
 * Login
 * Loyalty points
 * Menu
 * Messages
 * Modals
 * Newsletter
 * Overlay
 * Page content
 * Pagination
 * Primary nav
 * Products
 * Product add to cart
 * Product attributes
 * Product back-in-stock
 * Product container
 * Product header
 * Product image viewer
 * Product lists
 * Product options
 * Product prices
 * Product rating
 * Product reviews
 * Product short description
 * Product stock message
 * Product tabs
 * Promos
 * Review stars
 * Search form
 * Site header
 * Site footer
 * Site logo
 * Social
 * Sortby
 * Toolbar
 * Webpages
 * Welcome
 * Wishlist
 *
 * PAGES
 * Approve review
 * Contact us
 * Customer review
 * Customer secure area
 * Password protect
 * Reset password
 * Search
 *
 * INDUSTRY-VARIANTS
 * Automotive
 * Sports and Recreation
 *
 * NEWSLETTER MODAL
 *
 * OVERRIDES
 * Fonts
 * Product options
 * Promo stickers
 * Softcart
 * UI slider
 *
 * UTILITIES
 * Borders
 * Clearfix
 * Display
 * Float
 * Font-size
 * Font-weight
 * Headings
 * Measure
 * Spacing
 * Text-align
 * Text-decoration
 * Text-transform
 * Visual
 * Width
 *
 * FEATURES
 * Quick View
 */
/* =========================================================================
   $COLOURS
   ========================================================================= */
/*

[ekm:colour]
   colour_reference='color_primary';
   colour_name='Primary';
   colour_description='This is your theme's primary call-to-action colour. It is used to style your shop's add-to-cart and checkout buttons.';
   default_colour='#418ae7';
[/ekm:colour]

[ekm:colour]
   colour_reference='color_secondary';
   colour_name='Secondary';
   colour_description='The colour of your theme's secondary buttons (e.g. form submit buttons) and text links.';
   default_colour='#86c91c';
[/ekm:colour]

[ekm:colour]
   colour_reference='color_header';
   colour_name='Header';
   colour_description='This is the colour of your theme's header area.';
   default_colour='#fafafa';
[/ekm:colour]

[ekm:colour]
   colour_reference='color_newsletter';
   colour_name='Newsletter';
   colour_description='This is the background colour of your theme's newsletter signup section. This section will only appear if you have installed the Email Marketing feature.';
   default_colour='#222222';
[/ekm:colour]

[ekm:colour]
   colour_reference='color_footer';
   colour_name='Footer';
   colour_description='This is the background colour of your theme's bottom footer area.';
   default_colour='#222222';
[/ekm:colour]

[ekm:colour]
    colour_reference='add_to_cart_bg';
    colour_name='Add to cart Background color';
    colour_description='This is the the background colour of the add to cart buttons mainly found in the quickview feature.';
    default_colour='#0363CD';
[/ekm:colour]

[ekm:colour]
    colour_reference='add_to_cart_text';
    colour_name='Add to cart Background text color';
    colour_description='This is the the text colour of the add to cart buttons mainly found in the quickview feature.';
    default_colour='#FFFFFF';
[/ekm:colour]

[ekm:colour]
    colour_reference='success_colour_text';
    colour_name='Success Colour Text';
    colour_description='This is the default colour text in areas displaying a positive message, such as a product being in stock';
    default_colour='#013800';
[/ekm:colour]

[ekm:colour]
    colour_reference='success_colour_background';
    colour_name='Success Colour Background';
    colour_description='This is the default background colour for areas displaying a positive message, such as a product being in stock.';
    default_colour='#bffdbf';
[/ekm:colour]

[ekm:colour]
    colour_reference='caution_colour_text';
    colour_name='Caution Colour Text';
    colour_description='This is the default colour text in areas displaying something to be careful or aware of, such as a product running low on stock.';
    default_colour='#6d4100';
[/ekm:colour]

[ekm:colour]
    colour_reference='caution_colour_background';
    colour_name='Caution Colour Background';
    colour_description='This is the default background colour for areas displaying something to be careful or aware of, such as a product running low on stock.';
    default_colour='#fddebf';
[/ekm:colour]

[ekm:colour]
    colour_reference='warning_colour_text';
    colour_name='Warning Colour Text';
    colour_description='This is the default colour text in areas displaying something that might disrupt what your customer wants to do, such as a product being out of stock.';
    default_colour='#6d0a00';
[/ekm:colour]

[ekm:colour]
    colour_reference='warning_colour_background';
    colour_name='Warning Colour Background';
    colour_description='This is the default background colour for areas displaying something might disrupt what your customer wants to do, such as a product being out of stock.';
    default_colour='#fdbfbf';
[/ekm:colour]

[ekm:colour]
    colour_reference='inverse_colour_text';
    colour_name='Inverse Colour Text';
    colour_description='This is the the text colour that should be used in an area where the background is inverted to the default colour. Where the main text colour would be black, this should be white and vice-verse';
    default_colour='#ffffff';
[/ekm:colour]

[ekm:colour]
    colour_reference='inverse_colour_background';
    colour_name='Inverse Colour Background';
    colour_description='This is the the background colour that should be used in an area where the text is inverted to the default colour. Where the main background colour would be white, this should be black and vice-verse';
    default_colour='#000000';
[/ekm:colour]

*/
/* ==========================================================================
   $GENERIC
   ========================================================================= */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
 
:root {
    --ekm-success-colour-text: [ekm:colour]colour_reference='success_colour_text';[/ekm:colour];
    --ekm-success-colour-background: [ekm:colour]colour_reference='success_colour_background';[/ekm:colour];
    --ekm-caution-colour-text: [ekm:colour]colour_reference='caution_colour_text';[/ekm:colour];
    --ekm-caution-colour-background: [ekm:colour]colour_reference='caution_colour_background';[/ekm:colour];
    --ekm-warning-colour-text: [ekm:colour]colour_reference='warning_colour_text';[/ekm:colour];
    --ekm-warning-colour-background: [ekm:colour]colour_reference='warning_colour_background';[/ekm:colour];
    --ekm-inverse-colour-text: [ekm:colour]colour_reference='inverse_colour_text';[/ekm:colour];
    --ekm-inverse-colour-background: [ekm:colour]colour_reference='inverse_colour_background';[/ekm:colour];
    
    --ekm-atc-background-colour:[ekm:colour]colour_reference='add_to_cart_bg';[/ekm:colour];
    --ekm-atc-text-colour:[ekm:colour]colour_reference='add_to_cart_text';[/ekm:colour];
    
} 
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 {
  -webkit-box-sizing: content-box;
          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 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and 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 */
  -webkit-text-decoration: underline dotted;
          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;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 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 {
  -webkit-box-sizing: border-box;
          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"] {
  -webkit-box-sizing: border-box;
          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;
}

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/**
 * Disable auto-enlargement of small text in mobile Safari.
 */
body,
input,
textarea,
button,
select {
  -webkit-text-size-adjust: 100%;
}

/**
 * Remove margins and paddings from all the things.
 */
body,
h1, h2, h3, h4, h5, h6,
p,
ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

a:focus {
  color: inherit;
}

/**
 * 1. Offset alt text.
 * 2. Ensure responsive images and override system heights.
 * 3. Remove whitespace caused by inline images.
 */
img {
  font-style: italic;
  /* [1] */
  height: auto !important;
  /* [2] */
  max-width: 100%;
  /* [2] */
  vertical-align: middle;
  /* [3] */
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

/**
 * Form element resets.
 */
form {
  margin: 0;
}

input,
textarea,
select {
  font-size: 1rem;
}

@media screen and (min-width: 46.875em) {
  input,
  textarea,
  select {
    font-size: inherit;
  }
}

button,
input[type="submit"],
label[for] {
  cursor: pointer;
}

optgroup {
  font-weight: 800;
}

option {
  color: #222;
  background-color: #fff;
}

[tabindex='-1']:focus {
  outline: none;
}

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * Reset iOS touchstart higlighting.
 */
input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

/**
 * Enable no-delay taps on supporting browsers.
 */
a,
button,
[role="button"],
input,
label,
select,
textarea {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 1.5rem;
}

/**
 * Consistent indentation for lists.
 */
dd, ol, ul {
  margin-left: 1.5rem;
}

/* ==========================================================================
   $ELEMENTS
   ========================================================================= */
/* =========================================================================
   #PAGE
   ========================================================================= */
html,
body {
  min-height: 100%;
}

html {
  font-size: 0.75em;
  line-height: 1.5;
  overflow-y: scroll;
}

body {
  background-color: #fff;
  color: #222;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  min-height: 100%;
}

/* =========================================================================
   #LINKS
   ========================================================================= */
a {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  text-decoration: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}

a:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* =========================================================================
   #FORMS
   ========================================================================= */
/**
 * A scaffolding for styling form elements.
 */
textarea,
input,
button,
select {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

input,
textarea,
select {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1rem;
  line-height: 1;
  max-width: 100%;
  padding: 0.91666667rem;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

/**
 * Give styled focus to certain inputs using a utility mixin.
 */
textarea {
  min-height: 100px;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-color: transparent;
  cursor: pointer;
  padding-right: 1.5rem;
  text-indent: .01px;
}

input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"], textarea
    { font-size: 16px; } /* input zoom fix */

/* =========================================================================
   #SVG
   ========================================================================= */
svg g,
svg polygon,
svg circle {
  fill: inherit;
}

/* =========================================================================
   #PLACEHOLDER
   ========================================================================= */
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #aaa;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #aaa;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #aaa;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #aaa;
}

/* =========================================================================
   #PARAGRAPHS
   ========================================================================= */
p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   #HEADINGS
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
}

h1 {
  font-size: 1.5rem;
  line-height: 1;
}

h2 {
  font-size: 1.33333333rem;
  line-height: 1;
}

h3 {
  font-size: 1.16666667rem;
  line-height: 1;
}

h4 {
  font-size: 1rem;
  line-height: 1.28571429;
}

h5 {
  font-size: 0.83333333rem;
  line-height: 1.28571429;
}

h6 {
  font-size: 0.83333333rem;
  line-height: 1.5;
}

/* =========================================================================
   #TABLES
   ========================================================================= */
table {
  width: 100%;
}

/* ==========================================================================
   $OBJECTS
   ========================================================================= */
/* =========================================================================
   #ACCORDION
   ========================================================================= */
.o-accordion__heading {
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  display: block;
  margin: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.o-accordion__heading:hover {
  text-decoration: underline;
}

.o-accordion__heading.is-active {
  border-bottom: 0;
}

.o-accordion__panel {
  border-bottom: 1px solid #e8e8e8;
}

.o-accordion__panel.is-hidden {
  border-bottom: 0;
  display: none;
}

.o-accordion__panel:not(.is-hidden) {
  padding-bottom: 1.5rem;
}

/* Accordions with arrows.
============================================================================ */
.o-accordion--has-arrows .o-accordion__heading {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.o-accordion--has-arrows .o-accordion__heading.is-active .o-accordion__arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* =========================================================================
   #BLOCK
   ========================================================================= */
/**
 * Stack images above text; handy for product or category grids etc.
 */
.o-block {
  display: block;
  text-align: center;
}

.o-block__image {
  margin-bottom: 1.5rem;
 
  /* Size variants.
  ======================================================================== */
}

.o-block--flush .o-block__image {
  margin-bottom: 0;
}

.o-block--tiny .o-block__image {
  margin-bottom: 0.41666667rem;
}

.o-block--small .o-block__image {
  margin-bottom: 0.75rem;
}

.o-block--large .o-block__image {
  margin-bottom: 3rem;
}

.o-block--huge .o-block__image {
  margin-bottom: 6rem;
}

.o-block__body {
  display: block;
}

/* Alignment variants.
============================================================================ */
.o-block--right {
  text-align: right;
}

.o-block--left {
  text-align: left;
}

/* =========================================================================
   #BOX
   ========================================================================= */
/**
 * Box off content.
 */
.o-box {
  display: block;
  padding: 1.5rem;
}

.o-box > :last-child {
  margin-bottom: 0;
}

/* Size variants.
============================================================================ */
.o-box--tiny {
  padding: 0.41666667rem;
}

.o-box--small {
  padding: 0.75rem;
}

.o-box--large {
  padding: 3rem;
}

.o-box--huge {
  padding: 6rem;
}

/* =========================================================================
   #BULLSEYE
   ========================================================================= */
/**
 * Center content within its container.
 *
 * 1. Center content horizontally.
 * 2. Make sure the element always takes up all the space it can.
 * 3. Center content vertically.
 */
.o-bullseye {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* [1] */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  /* [2] */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* [3] */
  width: 100%;
  /* [2] */
}

/* Stack content vertically.
============================================================================ */
.o-bullseye--stacked {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* =========================================================================
   #GRID
   ========================================================================= */
.o-grid {
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -1.5rem;
}

.o-grid__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 1.5rem;
  width: 100%;
}

/* Gutter variants.
============================================================================ */
.o-grid--flush {
  margin-left: 0;
}

.o-grid--flush > .o-grid__item {
  padding-left: 0;
}

.o-grid--tiny {
  margin-left: -0.41666667rem;
}

.o-grid--tiny > .o-grid__item {
  padding-left: 0.41666667rem;
}

.o-grid--small {
  margin-left: -0.75rem;
}

.o-grid--small > .o-grid__item {
  padding-left: 0.75rem;
}

.o-grid--large {
  margin-left: -3rem;
}

.o-grid--large > .o-grid__item {
  padding-left: 3rem;
}

.o-grid--huge {
  margin-left: -6rem;
}

.o-grid--huge > .o-grid__item {
  padding-left: 6rem;
}

/* Responsive gutter variants.
============================================================================ */
@media screen and (min-width: 36.25em) {
  .o-grid--tiny\@small {
    margin-left: -0.41666667rem;
  }
  .o-grid--tiny\@small > .o-grid__item {
    padding-left: 0.41666667rem;
  }
  .o-grid--small\@small {
    margin-left: -0.75rem;
  }
  .o-grid--small\@small > .o-grid__item {
    padding-left: 0.75rem;
  }
  .o-grid--medium\@small {
    margin-left: -1.5rem;
  }
  .o-grid--medium\@small > .o-grid__item {
    padding-left: 1.5rem;
  }
  .o-grid--large\@small {
    margin-left: -3rem;
  }
  .o-grid--large\@small > .o-grid__item {
    padding-left: 3rem;
  }
  .o-grid--huge\@small {
    margin-left: -6rem;
  }
  .o-grid--huge\@small > .o-grid__item {
    padding-left: 6rem;
  }
}

@media screen and (min-width: 46.875em) {
  .o-grid--tiny\@small {
    margin-left: -0.41666667rem;
  }
  .o-grid--tiny\@small > .o-grid__item {
    padding-left: 0.41666667rem;
  }
  .o-grid--small\@medium {
    margin-left: -0.75rem;
  }
  .o-grid--small\@medium > .o-grid__item {
    padding-left: 0.75rem;
  }
  .o-grid--medium\@medium {
    margin-left: -1.5rem;
  }
  .o-grid--medium\@medium > .o-grid__item {
    padding-left: 1.5rem;
  }
  .o-grid--large\@medium {
    margin-left: -3rem;
  }
  .o-grid--large\@medium > .o-grid__item {
    padding-left: 3rem;
  }
  .o-grid--huge\@medium {
    margin-left: -6rem;
  }
  .o-grid--huge\@medium > .o-grid__item {
    padding-left: 6rem;
  }
}

@media screen and (min-width: 61.875em) {
  .o-grid--tiny\@large {
    margin-left: -0.41666667rem;
  }
  .o-grid--tiny\@large > .o-grid__item {
    padding-left: 0.41666667rem;
  }
  .o-grid--small\@large {
    margin-left: -0.75rem;
  }
  .o-grid--small\@large > .o-grid__item {
    padding-left: 0.75rem;
  }
  .o-grid--medium\@large {
    margin-left: -1.5rem;
  }
  .o-grid--medium\@large > .o-grid__item {
    padding-left: 1.5rem;
  }
  .o-grid--large\@large {
    margin-left: -3rem;
  }
  .o-grid--large\@large > .o-grid__item {
    padding-left: 3rem;
  }
  .o-grid--huge\@large {
    margin-left: -6rem;
  }
  .o-grid--huge\@large > .o-grid__item {
    padding-left: 6rem;
  }
}

@media screen and (min-width: 87.5em) {
  .o-grid--tiny\@huge {
    margin-left: -0.41666667rem;
  }
  .o-grid--tiny\@huge > .o-grid__item {
    padding-left: 0.41666667rem;
  }
  .o-grid--small\@huge {
    margin-left: -0.75rem;
  }
  .o-grid--small\@huge > .o-grid__item {
    padding-left: 0.75rem;
  }
  .o-grid--medium\@huge {
    margin-left: -1.5rem;
  }
  .o-grid--medium\@huge > .o-grid__item {
    padding-left: 1.5rem;
  }
  .o-grid--large\@huge {
    margin-left: -3rem;
  }
  .o-grid--large\@huge > .o-grid__item {
    padding-left: 3rem;
  }
  .o-grid--huge\@huge {
    margin-left: -6rem;
  }
  .o-grid--huge\@huge > .o-grid__item {
    padding-left: 6rem;
  }
}

/* Vertical alignment modifiers.
============================================================================ */
.o-grid--middle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.o-grid--bottom {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

/* Horizontal alignment modifiers.
============================================================================ */
.o-grid--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.o-grid--right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.o-grid--between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.o-grid--around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

/* Inline grid item modifiers.
============================================================================ */
.o-grid--inline > .o-grid__item {
  width: auto;
}

/* Equal width item modifiers.
============================================================================ */
.o-grid--equal > .o-grid__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* Make an item stretch to take up all available space.
============================================================================ */
.o-grid--stretch > .o-grid__item--stretch {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* Negate grid items' bottom spacing.
============================================================================ */
/**
 * 1. The negative top margin on the parent grid element is equal to the top
 *    padding of the child grid items.
 */
.o-grid--vertical {
  margin-top: -1.5rem;
  /* [1] */
  /* Use vertical grids with our gutter variants.
  ======================================================================== */
}

.o-grid--vertical > .o-grid__item {
  padding-top: 1.5rem;
  /* [1] */
}

.o-grid--vertical.o-grid--tiny {
  margin-top: -0.41666667rem;
}

.o-grid--vertical.o-grid--tiny > .o-grid__item {
  padding-top: 0.41666667rem;
}

.o-grid--vertical.o-grid--small {
  margin-top: -0.75rem;
}

.o-grid--vertical.o-grid--small > .o-grid__item {
  padding-top: 0.75rem;
}

.o-grid--vertical.o-grid--large {
  margin-top: -3rem;
}

.o-grid--vertical.o-grid--large > .o-grid__item {
  padding-top: 3rem;
}

.o-grid--vertical.o-grid--huge {
  margin-top: -6rem;
}

.o-grid--vertical.o-grid--huge > .o-grid__item {
  padding-top: 6rem;
}

/* =========================================================================
   #INPUT-BUTTON-GROUP
   ========================================================================= */
.o-input-button-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/**
 * 1. Force <input> to 100% width if the below class hasn't been applied
 *    directly to the <input> element.
 */
.o-input-button-group__input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 0.75rem;
}

.o-input-button-group__input,
.o-input-button-group__input input {
  width: 100%;
  /* [1] */
}

.o-input-button-group__button {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Remove any margin between the field and button.
============================================================================ */
.o-input-button-group--flush .o-input-button-group__input {
  margin-right: 0;
}

/* Stack the field and button.
============================================================================ */
.o-input-button-group--stacked {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.o-input-button-group--stacked .o-input-button-group__input,
.o-input-button-group--stacked .o-input-button-group__button {
  display: block;
  width: 100%;
}

.o-input-button-group--stacked .o-input-button-group__input {
  margin-right: 0;
  margin-bottom: 0.75rem;
}

.o-input-button-group--stacked .o-input-button-group__button {
  -ms-flex-negative: unset;
      flex-shrink: unset;
}

/* =========================================================================
   #LIST-BARE
   ========================================================================= */
/**
 * Strip bullet points and indentation from lists.
 */
.o-list-bare {
  list-style: none;
  margin-left: 0;
}

.o-list-bare__item {
  margin-left: 0;
}

/* =========================================================================
   #MEDIA
   ========================================================================= */
.o-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.o-media__img {
  margin-right: 1.5rem;
}

.o-media__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.o-media__body,
.o-media__body > :last-child {
  margin-bottom: 0;
}

/* Alignment variants.
============================================================================ */
.o-media--middle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Size variants.
============================================================================ */
.o-media--small > .o-media__img {
  margin-right: 0.75rem;
}

.o-media--small.o-media--reverse > .o-media__img {
  margin-left: 0.75rem;
  margin-right: 0;
}

.o-media--large > .o-media__img {
  margin-right: 3rem;
}

.o-media--large.o-media--reverse > .o-media__img {
  margin-left: 3rem;
  margin-right: 0;
}

/* Reverse direction.
============================================================================ */
.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 1.5rem;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

/* Gutterless media object.
============================================================================ */
.o-media--flush > .o-media__img {
  margin-right: 0;
  margin-left: 0;
}

/* =========================================================================
   #RATIO
   ========================================================================= */
/**
 * Keep content (e.g. images, videos) in a pre-defined aspect ratio.
 *
 * 1. The default raio is 1:1 (i.e. a square).
 */
.o-ratio {
  position: relative;
  display: block;
}

.o-ratio:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  /* [1] */
}

.o-ratio__content {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Ratio variants.
   ========================================================================= */
.o-ratio--2\:1:before {
  padding-bottom: 50%;
}

.o-ratio--4\:3:before {
  padding-bottom: 75%;
}

/* =========================================================================
   #WRAPPER
   ========================================================================= */
/**
 * Constrain page content.
 */
.o-wrapper {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

/* Size variants.
============================================================================ */
.o-wrapper--tiny {
  padding-right: 0.41666667rem;
  padding-left: 0.41666667rem;
}

.o-wrapper--small {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.o-wrapper--large {
  padding-right: 3rem;
  padding-left: 3rem;
}

.o-wrapper--huge {
  padding-right: 6rem;
  padding-left: 6rem;
}

/* Width variant.
============================================================================ */
.o-wrapper--full {
  max-width: none;
}

/* =========================================================================
   $COMPONENTS
   ========================================================================= */
/* ==========================================================================
   #BUTTONS
   ========================================================================= */
.c-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.c-button:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

/* Type modifiers.
============================================================================ */
.c-button--primary {
  background-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  font-size: 1.33333333333rem;
}

.c-button--primary, .c-button--primary:focus {
  color: #fff;
}

.c-button--secondary {
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-button--secondary, .c-button--secondary:focus {
  color: #fff;
}

.c-button--link {
  background-color: transparent;
  border-radius: 0;
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-button--link:hover, .c-button--link:focus {
  border-color: transparent;
  text-decoration: none;
}

.c-button--link:hover {
  background-color: transparent;
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  opacity: 0.7;
}

.c-button--tertiary {
  background-color: #222;
  border-color: #222;
}

.c-button--tertiary, .c-button--tertiary:focus {
  color: #fff;
}

/* Size modifiers.
============================================================================ */
.c-button--full {
  display: block;
  width: 100%;
}

/* Ghost button (outline) modifiers.
============================================================================ */
.c-button--primary.c-button--outline {
  background-color: transparent;
  border-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
}

.c-button--primary.c-button--outline:hover {
  background-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  color: #fff;
}

.c-button--secondary.c-button--outline {
  background-color: transparent;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-button--secondary.c-button--outline:hover {
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  color: #fff;
}

/* =========================================================================
   #BREADRCUMBS
   ========================================================================= */
.c-breadcrumb {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 0.66666667rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.c-breadcrumb__crumb.current {
  color: #222;
  pointer-events: none;
}

/* =========================================================================
   #CART
   ========================================================================= */
@media screen and (min-width: 46.875em) {
  .c-cart {
    padding-right: 0;
  }
}

.c-cart__count {
  color: #222;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: 700;
  position: relative;
  top: .15em;
}

.c-cart__count.is-hidden {
  display: none;
}

.c-cart:hover .c-cart__count {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  -webkit-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
}

/* =========================================================================
   #CATEGORIES
   ========================================================================= */
.c-category {
  text-align: center;
}

@media screen and (min-width: 25em) {
  .c-category {
    width: 50%;
  }
}

@media screen and (min-width: 36.25em) {
  .c-category {
    width: 33.3333333%;
  }
}

@media screen and (min-width: 46.875em) {
  .c-category {
    width: 25%;
  }
}

.c-category__link {
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 0.75rem;
}

.c-category__link:hover {
  opacity: 0.7;
}

.c-category__name {
  font-weight: 700;
  margin-bottom: 0;
}

.c-category__image {
  width: 92px;
}

/**
 * Categories with images
 */
.c-category--image .c-category__name {
  text-align: left;
}

.c-category--image .c-category__link {
  display: block;
}

/**
 * Sub-categories
 */
.c-category--sub {
  text-align: left;
}

@media screen and (min-width: 25em) {
  .c-category--sub {
    width: 100%;
  }
}

@media screen and (min-width: 36.25em) {
  .c-category--sub {
    width: 50%;
  }
}

@media screen and (min-width: 46.875em) {
  .c-category--sub {
    width: 33.333333%;
  }
}

/* =========================================================================
   #CATEGORY-DESCRIPTION
   ========================================================================= */
.c-category-description {
  color: #a2a1a1;
  margin-top: 1rem;
  margin-bottom: 3rem;
}

@media screen and (min-width: 46.875em) {
  .c-category-description {
    margin-left: auto;
    margin-right: auto;
    max-width: 60em;
  }
}

/* =========================================================================
   #CATEGORY-LISTS
   ========================================================================= */
.c-category-list {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.c-category-list > .o-wrapper {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Sub-category lists.
============================================================================ */
.c-category-list--sub-categories {
  margin-top: 1.5rem;
}

/* =========================================================================
   #CATEGORY-PAGE-NAME
   ========================================================================= */
.c-category-page-name {
  margin-bottom: 0;
}

/* =========================================================================
   #CATEGORY-PRODUCTS
   ========================================================================= */
.c-category-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-category-products__side {
  padding-right: 1.5rem;
  width: 240px;
}

.c-category-products__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* =========================================================================
   #CURRENCY
   ========================================================================= */
.c-currency {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-currency table {
  margin-bottom: 0;
  width: auto;
}

.c-currency td {
  padding: 0;
}

.c-currency a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}

.c-currency img {
  -ms-flex-item-align: center;
      align-self: center;
  border-style: solid;
}

.c-currency img[border="2"] {
  height: 18px !important;
  width: 26px !important;
}

/* Gutter size variants.
============================================================================ */
.c-currency--tiny a {
  margin-right: 0.20833333rem;
  margin-left: 0.20833333rem;
}

.c-currency--small a {
  margin-right: 0.375rem;
  margin-left: 0.375rem;
}

.c-currency--large a {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.c-currency--huge a {
  margin-right: 3rem;
  margin-left: 3rem;
}

/* =========================================================================
   #DRAWER
   ========================================================================= */
.c-drawer {
  background-color: #fff;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  -webkit-transition: -webkit-transform 0.225s cubic-bezier(0.7, 0, 0.3, 1);
  transition: -webkit-transform 0.225s cubic-bezier(0.7, 0, 0.3, 1);
  transition: transform 0.225s cubic-bezier(0.7, 0, 0.3, 1);
  transition: transform 0.225s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.225s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: translateX(0);
          transform: translateX(0);
  width: calc(100% - 96px);
  will-change: transform;
  z-index: 10001;
}

.c-drawer.is-hidden {
  -webkit-transition: -webkit-transform 0.195s cubic-bezier(0.7, 0, 0.3, 1);
  transition: -webkit-transform 0.195s cubic-bezier(0.7, 0, 0.3, 1);
  transition: transform 0.195s cubic-bezier(0.7, 0, 0.3, 1);
  transition: transform 0.195s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.195s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

@media screen and (min-width: 46.875em) {
  .c-drawer {
    max-width: 100%;
    width: 31.33333333rem;
  }
}

/* ==========================================================================
   #DRAWER-NAV
   ========================================================================= */
.c-drawer-nav__list {
  margin-bottom: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.c-drawer-nav__link {
  color: #222;
  display: block;
  font-weight: 800;
  padding: 0.75rem 1.5rem;
}

.c-drawer-nav__link:hover {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

/**
 * Dropdowns
 */
.c-drawer-nav__item--has-dropdown .c-drawer-nav__link {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c-drawer-nav__item--has-dropdown .c-drawer-nav__link.is-expanded .c-icon {
  -webkit-transform: scale(-1);
          transform: scale(-1);
}

.c-drawer-nav__dropdown.is-hidden {
  display: none;
}

/**
 * Login
 */
.c-drawer-nav__item--login {
  margin-top: 0.75rem;
}

.c-drawer-nav__item--login .c-drawer-nav__link {
  margin-top: 0.75rem;
}

.c-drawer-nav__item--login .c-drawer-nav__link:hover .c-icon {
  fill: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-drawer-nav__item--login .c-icon {
  fill: #222;
}

.c-drawer-nav__item--login:before {
  border-top: 1px solid #e8e8e8;
  content: "";
  display: block;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

/* =========================================================================
   #FILTERS
   ========================================================================= */
.c-filters .c-filters__heading {
  margin-bottom: 0;
  text-align: left;
}

.c-filters__item {
  border-top: 1px solid #e8e8e8;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.c-filters__inner {
  position: relative;
}

.c-filters__filter-heading {
  margin-bottom: 0.41666667rem;
  text-align: left;
}

.c-filter__checkbox {
  opacity: 0;
  position: absolute;
}

.c-filter__checkbox:checked + .c-filter__label:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  background: #222;
  width: 2px;
  height: 2px;
  -webkit-box-shadow: 2px 0 0 #222, 4px 0 0 #222, 4px -2px 0 #222, 4px -4px 0 #222, 4px -6px 0 #222, 4px -8px 0 #222;
          box-shadow: 2px 0 0 #222, 4px 0 0 #222, 4px -2px 0 #222, 4px -4px 0 #222, 4px -6px 0 #222, 4px -8px 0 #222;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.c-filter__label {
  position: relative;
}

.c-filter__label:hover {
  opacity: 0.7;
}

.c-filter__label:before {
  border: 1px solid #e8e8e8;
  content: "";
  display: inline-block;
  height: 1.33333333rem;
  margin-right: 0.75rem;
  vertical-align: text-top;
  width: 1.33333333rem;
}

.ekm-filter-count {
  color: #a2a1a1;
}

/* Filter style variants.
============================================================================ */
.c-filters--drawer {
  /* ... */
}

.c-filters--sidebar {
  border: 1px solid #e8e8e8;
  border-radius: 3px;
}

.c-filters--sidebar .c-filters__heading {
  font-size: 1.33333333rem;
  line-height: 1.125;
  padding: 0.75rem;
}

.c-filters--sidebar .c-filters__item {
  margin-top: 0;
  padding: 0.75rem;
}

/* ==========================================================================
   #HEADINGS
   ========================================================================= */
/**
 * Purpose-driven cosmetic styles for our h1-h6 elements.
 */
.c-heading-page {
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
}

@media screen and (min-width: 46.875em) {
  .c-heading-page {
    font-size: 2.5rem;
  }
}

.c-heading-section {
  font-size: 1.33333333rem;
  line-height: 1;
  text-align: center;
}

@media screen and (min-width: 46.875em) {
  .c-heading-section {
    font-size: 2rem;
  }
}

.c-heading-footer {
  font-size: 1.16666667rem;
  line-height: 1.28571429;;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* ==========================================================================
   #ICONS
   ========================================================================= */
/**
 * Reset <button> elements' default styles when used to wrap an <svg> icon.
 */
.c-icon-handle {
  background: 0;
  border: 0;
  padding: 0;
}

.c-icon {
  display: inline-block;
  fill: #222;
  height: 1.33333333rem;
  vertical-align: middle;
  width: 1.33333333rem;
}

/* Size variants.
============================================================================ */
.c-icon--tiny {
  height: 0.83333333rem;
  width: 0.83333333rem;
}

.c-icon--small {
  height: 1rem;
  width: 1rem;
}

.c-icon--large {
  height: 2rem;
  width: 2rem;
}

.c-icon--huge {
  height: 2.66666667rem;
  width: 2.66666667rem;
}

/* Colour variants.
============================================================================ */
.c-icon--body {
  fill: #222;
}

.c-icon--primary {
  fill: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
}

.c-icon--secondary {
  fill: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-icon--grey {
  fill: #fafafa;
}

/* Rotation variants.
============================================================================ */
.c-icon--90-deg {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* ==========================================================================
   #LOGIN
   ========================================================================= */
.c-login {
  padding: 1.5rem;
  padding-top: 0;
}

.c-login label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.75rem;
  font-size: 0.83333333rem;
  font-weight: 700;
}

.c-login input {
  width: 100%;
}

.c-login input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-login input[type="submit"]:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

.c-login input[type="submit"], .c-login input[type="submit"]:focus {
  color: #fff;
}

.c-login__row {
  margin-top: 1.5rem;
}

.c-login__row:first-child {
  margin-top: 0.75rem;
}

.c-login__reset-password {
  font-size: 0.83333333rem;
}

.c-login__logged-in-link {
  margin-top: 0.75rem;
}

.c-login__logged-in-link a {
  color: #222;
  display: block;
}

/* =========================================================================
   #LOYALTY-POINTS
   ========================================================================= */
.c-loyalty-points {
  color: #a2a1a1;
  font-size: 0.83333333rem;
  line-height: 1.8;
  margin-top: 0.75rem;
  margin-bottom: 0;
  text-align: center;
}

/* ==========================================================================
   #MESSAGES
   ========================================================================= */
.c-messages {
  color: #e8e8e8;
  font-size: 0.83333333rem;
  line-height: 1.2;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.c-messages__inner {
  background-color: #fafafa;
  padding: 0.75rem;
}

.c-messages__heading {
  color: #a2a1a1;
  font-weight: 700;
  margin-right: 0.25rem;
}

.c-messages__text {
  color: #a2a1a1;
  margin-left: 0.25rem;
}

/* ==========================================================================
   #MODALS
   ========================================================================= */
.c-modal {
  background-color: #fff;
  height: 400px;
  max-height: 100%;
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 120;
  width: 360px;
}

.c-modal.is-hidden {
  display: none;
}

.c-modal__inner {
  height: 100%;
  overflow: auto;
  padding: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Login modal.
============================================================================ */
.c-modal--login {
  height: 302px;
}

/* ==========================================================================
   #NEWSLETTER
   ========================================================================= */
.c-newsletter {
  background-color: [ekm:colour] colour_reference='color_newsletter'; default_colour='#222222'; [/ekm:colour];
  color: #fff;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

@media screen and (min-width: 46.875em) {
  .c-newsletter .o-wrapper {
    max-width: 50rem;
  }
  .c-newsletter .c-heading-footer {
    font-size: 2rem;
    line-height: 1;
  }
  .c-newsletter form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.c-newsletter__text {
  margin-bottom: 0.75rem;
}

@media screen and (min-width: 46.875em) {
  .c-newsletter__row--field {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.c-newsletter__label {
  font-size: 0;
}

.c-newsletter__field {
  background-color: [ekm:colour] colour_reference='color_newsletter'; default_colour='#222222'; [/ekm:colour];
  color: #fff;
  font-size: 0.83333333rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  width: 100%;
}

.c-newsletter__field:focus {
  color: #fff;
}

@media screen and (min-width: 46.875em) {
  .c-newsletter__field {
    margin-bottom: 0;
  }
}

.c-newsletter__button {
  width: 100%;
}

@media screen and (min-width: 46.875em) {
  .c-newsletter__button {
    height: 100%;
    margin-left: 0.75rem;
  }
}

/* =========================================================================
   #OVERLAY
   ========================================================================= */
/**
 * Offset the overlay by the height of the header
 */
.c-overlay {
  background-color: rgba(0, 0, 0, 0.65);
  height: 100%;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
  width: 100%;
  z-index: 10000;
}

.c-overlay.is-hidden {
  height: 0%;
  opacity: 0;
}

/**
 * Prevent page from being scrolled when overlay is open.
 */
.overlay-is-showing {
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.overlay-is-showing body {
  overflow: hidden;
}

/* =========================================================================
   #PAGE-CONTENT
   ========================================================================= */
.c-page-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding-top: 3rem;
}

/* Page variants.
============================================================================ */
.c-page-content--main {
  padding-top: 0;
}

.c-page-content--category,
.c-page-content--product {
  padding-top: 0.75rem;
}

/**
 * Restrict the content width on certain page types for a better experience.
 */
.c-page-content--webpage > .o-wrapper,
.c-page-content--general > .o-wrapper,
.c-page-content--cart > .o-wrapper {
  max-width: 60em;
}

.c-page-content--webpage h1,
.c-page-content--general h1,
.c-page-content--cart h1 {
  text-align: center;
}

/* =========================================================================
   #PAGINATION
   ========================================================================= */
.c-pagination {
  margin-top: 1.5rem;
  text-align: center;
}

.c-pagination__list {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 0;
}

.c-pagination__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.c-pagination__link {
  line-height: 1;
  padding: 0.75rem;
}

.c-pagination__link:hover {
  color: #fff;
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-pagination__link.is-current-page {
  background-color: #fafafa;
  pointer-events: none;
}

.c-pagination__link.is-current-page a {
  color: #222;
}

/* Bordered pagination.
============================================================================ */
.c-pagination--bordered .c-pagination__list {
  border: 1px solid #e8e8e8;
}

.c-pagination--bordered .c-pagination__item {
  border-left: 1px solid #e8e8e8;
}

.c-pagination--bordered .c-pagination__item:first-child {
  border-left: 0;
}

/* =========================================================================
   #PRIMARY-NAV
   ========================================================================= */
.c-primary-nav {
  background-color: #222;
  display: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
}

@media screen and (min-width: 46.875em) {
  .c-primary-nav {
    display: block;
  }
}

.c-primary-nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  max-width: 1200px;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.c-primary-nav__list--level-2 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-left: -1.5rem;
  padding-left: 0;
  padding-right: 0;
}

.c-primary-nav__item {
  font-size: 1.16666667rem;
  line-height: 1.28571429;
  text-align: center;
}

/**
 * Level 1 Items
 */
.c-primary-nav__item--level-1.has-dropdown .c-primary-nav__link--level-1 {
  padding-right: 1.75rem;
  position: relative;
}

.c-primary-nav__item--level-1.has-dropdown .c-primary-nav__link--level-1:after {
  content: "";
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  height: .5rem;
  pointer-events: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  width: .5rem;
}

/**
 * Level 2 Items
 */
.c-primary-nav__item--level-2 {
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  max-width: 20%;
  text-align: left;
}

.c-primary-nav__item--level-2 .c-primary-nav__link {
  padding: 0;
}

/**
 * Dropdowns
 */
.c-primary-nav__link {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 1rem 1.5rem;
}

.c-primary-nav__link, .c-primary-nav__link:active, .c-primary-nav__link:focus {
  color: #fff;
}

.c-primary-nav__link.is-active {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-primary-nav__dropdown {
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 120;
}

.c-primary-nav__dropdown.is-hidden {
  display: none;
}

.c-primary-nav__dropdown .c-primary-nav__link {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-primary-nav__dropdown-sub {
  border-top: 1px solid #e8e8e8;
  margin-top: 0.41666667rem;
  padding-top: 0.41666667rem;
}

.c-primary-nav__dropdown-sub .c-primary-nav__link {
  color: #a2a1a1;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0;
}

/* =========================================================================
   #PRODUCTS
   ========================================================================= */
.c-product {
  text-align: center;
}

.c-product__link {
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  color: #222;
  cursor: pointer;
  display: block;
  padding: 0.75rem;
}

.c-product__link:hover {
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  opacity: 1;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.c-product__name {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  font-weight: 700;
  margin-bottom: 0.75rem;
}

@media screen and (min-width: 36.25em) {
  .c-product__name {
    font-size: 1.33333333rem;
    margin-bottom: 1.5rem;
    text-align: left;
  }
}

@media screen and (min-width: 36.25em) {
  .c-product__image-wrapper {
    max-width: 140px;
  }
}

@media screen and (min-width: 46.875em) {
  .c-product__image-wrapper {
    max-width: 240px;
  }
}

.c-product__image {
  margin-bottom: 0.75rem;
}

.c-product__attributes-wrapper {
  text-align: left;
}

@media screen and (min-width: 36.25em) {
  .c-product__attributes-wrapper,
  .c-product__attributes-wrapper-cat {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
    
  .c-product__attributes-wrapper-home {
    -webkit-box-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

.c-product__attributes {
  font-size: 0;
  margin-bottom: 0.75rem;
  text-align: left;
}

.c-product__attributes p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0;
}

.c-product__attributes .ekmProductAttributeName,
.c-product__attributes > span span:first-child + span {
  font-size: 1rem;
}

.c-product__attributes .ekmProductAttributeName {
  font-weight: 700;
}

.c-product__attributes .ekmProductAttributeName:after {
  content: ":";
  display: inline-block;
}

/*.c-product__attributes span:first-child + span {
  margin-left: 0.5rem;
}*/

.c-product__attributes span:first-child li {
  margin-left: 0.5rem;  
}

@media screen and (min-width: 36.25em) {
  .c-product__prices-wrapper {
    max-width: 190px;
  }
}

.c-product__prices {
  border-top: 1px solid #fafafa;
  padding-top: 0.75rem;
}

@media screen and (min-width: 36.25em) {
  .c-product__prices {
    border-bottom: 1px solid #fafafa;
    max-width: 190px;
    padding-bottom: 0.75rem;
  }
}

.c-product__short-description {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #333;
}

.c-product__price {
  font-size: 1.16666667rem;
  line-height: 1.28571429;
  font-weight: 700;
}

.c-product__rrp {
  margin-right: 0.75rem;
  text-decoration: line-through;
}

.c-product__vat {
  margin-left: 0.75rem;
  opacity: .75;
}

.c-product__rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #fafafa;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

@media screen and (min-width: 36.25em) {
  .c-product__rating {
    border-top: none;
    padding-top: 0;
  }
}

.c-product__rating .c-review-stars {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c-product__rating .c-icon {
  height: 1.16666667rem;
  width: 1.16666667rem;
}

.c-review-stars__count {
  margin-left: 0.5rem;
}

/* Product list variants.
============================================================================ */
.shopui-product-variant-preview { padding-bottom: 1.5rem; }

.c-product--compact .c-product__image-wrapper,
.c-product--compact .c-product__prices-wrapper,
.c-product--compact .c-product__prices {
  max-width: none;
}

.c-product--compact .c-product__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .c-product--compact .c-product__link {
    display: block;
  }
}

.c-product--compact .c-product__link > .o-grid {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.c-product--compact .c-product__name {
  text-align: center;
}

.c-product--compact .c-product__rating {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.c-product--compact .c-product__attributes-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.c-product--compact .c-product__attributes {
  width: 100%;
}

.c-product--compact .c-product__prices-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.c-product--compact .c-product__prices {
  border-bottom: 0;
  padding-bottom: 0;
}

@media screen and (min-width: 36.25em) {
  .c-product--compact {
    width: 50%;
  }
}

@media screen and (min-width: 46.875em) {
  .c-product--compact {
    width: 33.333333%;
  }
}

/* =========================================================================
   #PRODUCT-ADD-TO-CART
   ========================================================================= */
/**
 * 1. Make the Add-to-cart button take up all the remaining space.
 * 2. Keep the Quantity box and Add-to-cart button the same height based on
 *    whichever element is taller.
 * 3. Centre the out-of-stock message.
 */
.c-product-add-to-cart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* [1] */
  margin-top: 3rem;
}

@media screen and (min-width: 46.875em) {
  .c-product-add-to-cart {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.c-product-add-to-cart > span:first-child {
  margin-right: 0.75rem;
  width: 6.25rem;
}

.c-product-add-to-cart span[style="display: none;"] + span {
  text-align: center;
  /* [3] */
  width: 100%;
  /* [3] */
}

.c-product-add-to-cart__quantity input {
  padding: 0.75rem;
}

.c-product-add-to-cart__button-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* [1] */
}

.c-product-add-to-cart__button-wrapper > span {
  display: block;
  /* [2] */
  height: 100%;
  /* [2] */
}

@media screen and (min-width: 46.875em) {
  .c-product-add-to-cart__button-wrapper {
    -ms-flex-preferred-size: 28.33rem;
        flex-basis: 28.33rem;
    max-width: 28.33333333rem;
  }
}

.c-product-add-to-cart__button {
  display: block;
  /* [2] */
  height: 100%;
  /* [2] */
  width: 100%;
}

/* =========================================================================
   #PRODUCT-ATTRIBUTES
   ========================================================================= */
.c-product-attributes {
  margin-top: 1.5rem;
}

.c-product-attributes__attribute {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c-product-attributes__name {
  font-weight: 700;
}

/* =========================================================================
   #PRODUCT-BACK-IN-STOCK
   ========================================================================= */
.c-product-back-in-stock {
  margin-top: 1.5rem;
}

.c-product-back-in-stock span span:first-child + span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.75rem;
}

.c-product-back-in-stock__field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 0.75rem;
}

/* =========================================================================
   #PRODUCT-CONTAINER
   ========================================================================= */
@media screen and (min-width: 46.875em) {
  .c-product-container__images-wrapper {
    width: 50%;
  }
}

@media screen and (min-width: 46.875em) {
  .c-product-container__info-wrapper {
    width: 50%;
  }
  .c-product-container__info-wrapper > :first-child {
    margin-top: 0;
  }
}

.c-product-container {
  margin-bottom: 3rem;
}
/* =========================================================================
   #PRODUCT-HEADER
   ========================================================================= */
.c-product-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.c-product-header__name {
  margin-bottom: 0;
}

.c-product-header__meta {
  color: #a2a1a1;
  margin-top: 0.33333333rem;
}

/* =========================================================================
   #PRODUCT-IMAGE-VIEWER
   ========================================================================= */
.c-product-image-viewer__image--extra {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  max-width: 25%;
}

.c-product-image-viewer__image--extra.has-no-image {
  display: none;
}

.c-product-image-viewer__inner {
  position: relative;
  display: block;
}

.c-product-image-viewer__inner:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  /* [1] */
}

.c-product-image-viewer__inner > a,
.c-product-image-viewer__inner > a span {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #e8e8e8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.75rem;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.c-product-image-viewer__inner > a img {
  -ms-flex-negative: 0; 
    flex-shrink: 0; 
  max-height: 100%;
  width: auto;
}

a[data-video^="{"] {
    display: inline-flex !important;
    position: absolute !important;
}

/* =========================================================================
   #PRODUCT-LISTS
   ========================================================================= */
.c-product-list {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.c-product-list > .o-wrapper {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.c-product-list__heading {
  margin-bottom: 0.75rem;
}

@media screen and (min-width: 46.875em) {
  .c-product-list__heading {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}

.c-product-list__showing {
  color: #a2a1a1;
  text-align: center;
}

/* Product list variants.
============================================================================ */
.c-product-list--category {
  margin-top: 0;
}

.c-product-list--related {
  margin-top: 0;
}

/* =========================================================================
   #PRODUCT-OPTIONS
   ========================================================================= */
.c-product-options {
  margin-top: 1.5rem;
}

.c-product-options label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.75rem;
  margin-bottom: 0.41666667rem;
  text-align: center;
}

.c-product-options select,
.c-product-options input,
.c-product-options textarea {
  width: 100%;
}

.c-product-options br {
  display: none;
}

.c-product-options__row {
  margin-top: 1.5rem;
}

/**
 * Hide the label for image upload product options
 */
._EKM_OPTIONIMAGE_BUTTON {
  font-size: 0;
}

/* =========================================================================
   #PRODUCT-PRICES
   ========================================================================= */
.c-product-prices {
  margin-top: 1.5rem;
  text-align: center;
}

.c-product-prices__inner {
  border-top: 1px solid #fafafa;
  border-bottom: 1px solid #fafafa;
  font-weight: 800;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.c-product-prices__price {
  color: #d0021b;
  font-size: 1.5rem;
  line-height: 1;
}

.c-product-prices__rrp {
  color: #a2a1a1;
  display: inline-block;
  margin-top: 0.75rem;
}

.c-product-prices__vat {
  display: block;
  opacity: .75;
}

/* =========================================================================
   #PRODUCT-RATING
   ========================================================================= */
.c-product-rating {
  margin-top: 1.5rem;
}

.c-product-rating .c-review-stars__star,
.c-product-rating .c-review-stars__empty-star {
  height: 1.5rem;
  width: 1.5rem;
}

.c-product-rating--summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* =========================================================================
   #PRODUCT-SHORT-DESCRIPTION
   ========================================================================= */
.c-product-short-description {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

/* =========================================================================
   #PRODUCT-STOCK-MESSAGE
   ========================================================================= */
.c-product-stock-message {
  margin-bottom: 0;
  margin-top: 1.5rem;
  text-align: center;
}

/* ==========================================================================
   #PRODUCT-TABS
   ========================================================================= */
.c-product-tabs {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.c-product-tabs__heading {
  font-size: 1.33333333rem;
  line-height: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
}

.c-product-tabs__panel:not(.is-hidden) {
  padding-bottom: 1rem;
}

/* =========================================================================
   #PRODUCT-REVIEWS
   ========================================================================= */
.c-product-reviews__heading {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}



.c-product-reviews__average-rating {
  margin-top: 0;
  margin-left: 1.5rem;
}

.no-average-stars {
    display: none;
}

.c-product-reviews__list {
  margin-bottom: 0;
}

.c-product-reviews__item {
  border-top: 1px solid #e8e8e8;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.c-product-reviews__item:first-child {
  border-top: 0;
  margin-top: 0;
}

.c-product-reviews__item--no-reviews {
  text-align: center;
}

/**
 * Review
 */
.c-product-reviews__meta {
  -ms-flex-preferred-size: 33.333333%;
      flex-basis: 33.333333%;
  max-width: 180px;
}

.c-product-reviews__review {
  -ms-flex-preferred-size: 66.666666%;
      flex-basis: 66.666666%;
  max-width: 66.666666%;
}

.c-product-reviews__reviewer {
  font-weight: 700;
}

.c-product-reviews__location {
  color: #a2a1a1;
}

/**
 * Write a review button
 */
.c-product-reviews__button {
  width: 100%;
}

@media screen and (min-width: 36.25em) {
  .c-product-reviews__button {
    width: auto;
  }
}

/* ==========================================================================
   #PROMOS
   ========================================================================= */

/* Banner promos.
============================================================================ */
.c-banner {
  text-align: center;
}

/* Home page promos.
============================================================================ */
.c-promos .o-grid__item {
  flex-basis: 100%;
  max-width: 100%;
}

@media screen and (min-width: 36.25em) {
  .c-promos .o-grid__item {
    flex-basis: 50%;
    max-width: 50%;
  }
}

/* ==========================================================================
   #REVIEW-STARS
   ========================================================================= */
.c-review-stars {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.c-review-stars__star,
.c-review-stars__empty-star {
  margin-left: 0.20833333rem;
}

.c-review-stars__star:first-child,
.c-review-stars__empty-star:first-child {
  margin-left: 0;
}

.c-review-stars__star {
  fill: #f5a41f;
}

.c-review-stars__empty-star {
  fill: #e8e8e8;
}

/* Review score modifiers.
============================================================================ */
.c-review-stars--0-stars .c-review-stars__star {
  display: none;
}

.c-review-stars--1-stars .c-review-stars__star--2 {
  display: none;
}

.c-review-stars--1-stars .c-review-stars__star--3 {
  display: none;
}

.c-review-stars--1-stars .c-review-stars__star--4 {
  display: none;
}

.c-review-stars--1-stars .c-review-stars__star--5 {
  display: none;
}

.c-review-stars--1-stars .c-review-stars__empty-star--1 {
  display: none;
}

.c-review-stars--2-stars .c-review-stars__star--3 {
  display: none;
}

.c-review-stars--2-stars .c-review-stars__star--4 {
  display: none;
}

.c-review-stars--2-stars .c-review-stars__star--5 {
  display: none;
}

.c-review-stars--2-stars .c-review-stars__empty-star--1 {
  display: none;
}

.c-review-stars--2-stars .c-review-stars__empty-star--2 {
  display: none;
}

.c-review-stars--3-stars .c-review-stars__star--4 {
  display: none;
}

.c-review-stars--3-stars .c-review-stars__star--5 {
  display: none;
}

.c-review-stars--3-stars .c-review-stars__empty-star--1 {
  display: none;
}

.c-review-stars--3-stars .c-review-stars__empty-star--2 {
  display: none;
}

.c-review-stars--3-stars .c-review-stars__empty-star--3 {
  display: none;
}

.c-review-stars--4-stars .c-review-stars__star--5 {
  display: none;
}

.c-review-stars--4-stars .c-review-stars__empty-star--1 {
  display: none;
}

.c-review-stars--4-stars .c-review-stars__empty-star--2 {
  display: none;
}

.c-review-stars--4-stars .c-review-stars__empty-star--3 {
  display: none;
}

.c-review-stars--4-stars .c-review-stars__empty-star--4 {
  display: none;
}

.c-review-stars--5-stars .c-review-stars__empty-star {
  display: none;
}

/* ==========================================================================
   #SEARCH-FORM
   ========================================================================= */
.c-search-form {
  padding: 0.75rem;
}

.c-search-form__textarea {
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0;
  font-size: 1rem;
  width: 100%;
}

/* Mobile search form.
============================================================================ */
.c-search-form--mobile {
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.c-search-form--mobile.is-hidden {
  display: none;
}

/* Desktop search form.
============================================================================ */
.header-search-bar input{
	border:none;
}
.c-search-form--desktop {
  display: none;
}

@media screen and (min-width: 46.875em) {
  .c-search-form--desktop {
    display: block;
  }
}

.c-search-form--desktop form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.c-search-form--desktop .c-search-form__textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media screen and (min-width: 46.875em) {
  .c-search-form--desktop .c-search-form__textarea {
    border-bottom: 0;
  }
}

.c-search-form__button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: 0;
  border: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.75rem;
}

.c-search-form__button:hover .c-search-form__icon {
  fill: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  -webkit-transition: fill 0.25s ease-in-out;
  transition: fill 0.25s ease-in-out;
}

/* =========================================================================
   #SITE-FOOTER
   ========================================================================= */
.c-site-footer {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  font-size: 1rem;
  line-height: inherit;
  margin-top: 3rem;
}

.c-site-footer__content {
  background-color: #fafafa;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

@media screen and (min-width: 46.875em) {
  .c-site-footer__content > .o-grid__item {
    width: 25%;
  }
}

/**
 * Columns
 */
@media screen and (min-width: 46.875em) {
  .c-site-footer__column {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (min-width: 46.875em) {
  .c-site-footer__column:not(:first-child) {
    border-left: 1px solid #e8e8e8;
    padding-left: 1.5rem;
    margin-left: 1.5rem;
  }
}

.c-site-footer__column:not(:first-child) .c-site-footer__column-inner {
  border-top: 1px solid #e8e8e8;
  padding-top: 3rem;
  margin-top: 3rem;
}

@media screen and (min-width: 46.875em) {
  .c-site-footer__column:not(:first-child) .c-site-footer__column-inner {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
}

.c-site-footer__bottom {
  background-color: [ekm:colour] colour_reference='color_footer'; default_colour='#222222'; [/ekm:colour];
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

.c-site-footer__micro-pages a {
  color: #fff;
}

.currency-column table {
  width: auto;
  margin: 0 auto;
}

.currency-column td {
  padding: 0 0.5rem;
}

/* ==========================================================================
   #SITE-HEADER
   ========================================================================= */
.c-site-header {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  background-color: [ekm:colour] colour_reference='color_header'; default_colour='#fafafa'; [/ekm:colour];
  position: relative;
}

@media screen and (min-width: 46.875em) {
  .c-site-header .o-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/**
 * Logo
 */
.c-site-header__logo-wrapper.o-grid__item {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

@media screen and (min-width: 46.875em) {
  .c-site-header__logo-wrapper.o-grid__item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

/**
 * Icons
 */
.c-site-header__icon {
  height: 2rem;
  width: 2rem;
}

/**
 * Header elements
 */
.c-site-header__handle:hover .c-site-header__icon {
  opacity: .75;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}

@media screen and (min-width: 46.875em) {
  .c-site-header__element--search.o-grid__item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-transition: -webkit-box-flex 0.25s ease-in-out;
    transition: -webkit-box-flex 0.25s ease-in-out;
    transition: flex 0.25s ease-in-out;
    transition: flex 0.25s ease-in-out, -webkit-box-flex 0.25s ease-in-out, -ms-flex 0.25s ease-in-out;
  }
  .c-site-header__element--search.o-grid__item.is-expanded {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
    -webkit-transition: -webkit-box-flex 0.25s ease-in-out;
    transition: -webkit-box-flex 0.25s ease-in-out;
    transition: flex 0.25s ease-in-out;
    transition: flex 0.25s ease-in-out, -webkit-box-flex 0.25s ease-in-out, -ms-flex 0.25s ease-in-out;
  }
}

@media screen and (min-width: 46.875em) {
  .c-site-header__element--utilities.o-grid__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .c-site-header__element--utilities.o-grid__item .c-site-header__handle {
    width: auto;
  }
}

/**
 * Header handles
 */
.c-site-header__handle {
  display: block;
  padding: 0.75rem;
  text-align: center;
  width: 100%;
}

.c-site-header__handle:focus {
  outline: 0;
}

.c-site-header__handle.is-active .c-site-header__icon {
  fill: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

/* ==========================================================================
   #SITE-HEADER
   ========================================================================= */
.c-site-logo {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

@media screen and (min-width: 46.875em) {
  .c-site-logo {
    text-align: left;
  }
}

/* =========================================================================
   #SOCIAL
   ========================================================================= */
.c-social {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1.5rem;
}

.c-social > a {
  padding-left: 1.5rem;
}

/* Social plugin type variants.
============================================================================ */
.c-social--main {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.c-social--main:first-child {
  padding-top: 0;
}

.c-social--product {
  margin-top: 1.5rem;
}

/* Gutter variants.
============================================================================ */
.c-social--tiny {
  margin-left: -0.41666667rem;
}

.c-social--tiny > a {
  padding-left: 0.41666667rem;
}

.c-social--small {
  margin-left: -0.75rem;
}

.c-social--small > a {
  padding-left: 0.75rem;
}

/* Center social plugins horizontally.
============================================================================ */
.c-social--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-social--center.c-social--equal > a {
  text-align: center;
}

/* Equal width social plugins.
============================================================================ */
.c-social--equal > a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* =========================================================================
   #SORTBY
   ========================================================================= */
.c-sortby {
  position: relative;
}

.c-sortby select {
  background: none;
  font-size: 0;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
}

.c-sortby select:hover {
  border-color: #fafafa;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.c-sortby select:focus {
  outline: #fafafa;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.c-sortby option {
  font-size: 1rem;
}

.c-sortby__button {
  background-color: #fff;
  display: block;
  line-height: 1;
}

.c-sortby__label {
  margin-left: 0.41666667rem;
}

/* =========================================================================
   #TOOLBAR
   ========================================================================= */
.c-toolbar {
  margin-top: 3rem;
}

@media screen and (min-width: 25em) {
  .c-toolbar__grid > .o-grid__item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (min-width: 46.875em) {
  .c-toolbar__grid {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media screen and (min-width: 46.875em) {
  .c-toolbar__sortby {
    max-width: 260px;
  }
}

.c-toolbar__button {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1rem;
  line-height: 1;
  max-width: 100%;
  padding: 0.91666667rem;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}

.c-toolbar__button:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

.c-toolbar__button:hover {
  border-color: #fafafa;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.c-toolbar__button:focus {
  outline: #fafafa;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

/* =========================================================================
   #WELCOME
   ========================================================================= */
.c-welcome {
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: center;
}

/* =========================================================================
   #WISHLIST
   ========================================================================= */
.wishlist-wrapper { margin-top: 2rem; }

.wishlist-wrapper svg path { 
	transition: fill 0.2s ease-in-out; 
		-webkit-transition: fill 0.2s ease-in-out;
}

.wishlist-wrapper button:hover { opacity: 1; }

.wishlist-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

.wishlist-text { 
	margin-left: 6px;
	font-size: 14px;
}

.wishlist-btn:hover .wishlist-text { opacity: 0.7; }

.wishlist-heart {
    border-radius: 50%;
    height: 34px;
    position: relative;
    width: 34px;
}

.wishlist-heart svg {
    height: 20px;
    left: 50%;
    margin-top: 1px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    	-webkit-transform: translate(-50%,-50%);
    width: 20px;
}

.wishlist-heart-inner-color { fill: #333; }

.i-Electronics .wishlist-heart-outer-color,
.i-Electronics .wishlist-btn:hover .wishlist-heart-inner-color,
.i-Electronics .wishlist-heart-icon-added,
.i-Sports-and-Recreation .wishlist-heart-outer-color,
.i-Sports-and-Recreation .wishlist-btn:hover .wishlist-heart-inner-color,
.i-Sports-and-Recreation .wishlist-heart-icon-added { fill: #fff; }

.i-Automotive .wishlist-heart-outer-color,
.i-Automotive .wishlist-btn:hover .wishlist-heart-inner-color,
.i-Automotive .wishlist-heart-icon-added { fill: #f0f0f0; }
		
.wishlist-heart { background: #333; }



/* =========================================================================
   #WEBPAGES
   ========================================================================= */
.c-webpages {
  margin-bottom: 0;
}

.c-webpages__page {
  margin-top: 0.75rem;
}

.c-webpages__link {
  color: #a2a1a1;
}

/* =========================================================================
   $PAGES
   ========================================================================= */
/* ==========================================================================
   $APPROVE-REVIEW
   ========================================================================== */
form[name="customerreview"] input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

form[name="customerreview"] input[type="submit"]:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

form[name="customerreview"] input[type="submit"], form[name="customerreview"] input[type="submit"]:focus {
  color: #fff;
}

/* ==========================================================================
   $CUSTOMER-REVIEW
   ========================================================================== */
body .ekmps-write-your-own-review {
  /**
   * Header
   */
  /**
   * Description
   */
  /**
   * Sections
   */
}

body .ekmps-write-your-own-review .ekmps-review-header {
  font-size: 1.33333333rem;
  line-height: 1;
  border-bottom: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  text-align: center;
}

body .ekmps-write-your-own-review .ekmps-review-description {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 1.41666667rem;
  padding-top: 0;
  margin-bottom: 3rem;
}

body .ekmps-write-your-own-review .ekmps-form-section {
  border-bottom-color: #efefef;
  margin-bottom: 3rem;
  padding-top: 0;
  padding-bottom: 1.5rem;
  /**
     * Review Section
     */
  /**
     * Submit Section
     */
}

body .ekmps-write-your-own-review .ekmps-form-section .ekmps-frm-row {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

body .ekmps-write-your-own-review .ekmps-form-section .ekmps-frm-row label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.75rem;
}

body .ekmps-write-your-own-review .ekmps-form-section .ekmps-frm-row .text-field {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1rem;
  line-height: 1;
  max-width: 100%;
  padding: 0.91666667rem;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  width: 100%;
}

body .ekmps-write-your-own-review .ekmps-form-section .ekmps-frm-row .text-field:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

body .ekmps-write-your-own-review .ekmps-form-section.ekmps-review {
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}

body .ekmps-write-your-own-review .ekmps-form-section .ekmps-form-section-header {
  font-size: 1.16666667rem;
  line-height: 1;
}

body .ekmps-write-your-own-review .ekmps-form-section.send-message .ekmps-frm-row input.send-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

body .ekmps-write-your-own-review .ekmps-form-section.send-message .ekmps-frm-row input.send-button:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

body .ekmps-write-your-own-review .ekmps-form-section.send-message .ekmps-frm-row input.send-button, body .ekmps-write-your-own-review .ekmps-form-section.send-message .ekmps-frm-row input.send-button:focus {
  color: #fff;
}

/* ==========================================================================
   $CUSTOMER-SECURE-AREA
   ========================================================================== */
table[style="background-color:#FFF;"][width="100%"] tr[bgcolor="#AAAAAA"] {
  background-color: #efefef;
}

table[style="background-color:#FFF;"][width="100%"] tr[bgcolor="#AAAAAA"] font[size="2"] {
  font-size: 0.83333333rem;
}

table[style="background-color:#FFF;"][width="100%"] tr {
  font-size: 0.83333333rem;
}

table[style="background-color:#FFF;"][width="100%"] td {
  padding: 0.375rem;
}

table[style="background-color:#FFF;"][width="100%"] [style="color:#333333;"],
table[style="background-color:#FFF;"][width="100%"] [style="color: #000000;"] {
  color: #222 !important;
}

table[style="background-color:#FFF;"][width="100%"] + table[width="100%"] {
  margin-bottom: 0;
}

table[style="background-color:#FFF;"][width="100%"] + table[width="100%"] table td[align="right"] {
  text-align: center;
}

table[style="background-color:#FFF;"][width="100%"] + table[width="100%"] table td[align="right"] ~ td {
  display: none;
}

table[style="background-color:#FFF;"][width="100%"] + table[width="100%"] table font[color="#666666"] {
  color: #222;
}

/* ==========================================================================
   $CONTACT-US
   ========================================================================== */
div.contact-form {
  font-size: 1rem;
}

div.contact-form h1 {
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

div.contact-form h1 + .hr {
  display: none;
}

div.contact-form .hr {
  border-bottom-style: solid;
  border-bottom-color: #efefef;
  margin-top: 0;
  margin-bottom: 2.91666667rem;
}

div.contact-form p.required,
div.contact-form-row .star {
  color: #e74c3c;
}

/**
 * Offset the password required message by the width of the "*"
 */
div.contact-form p.required {
  font-size: 1rem;
  margin-left: -0.283125em;
  /* [1] */
  margin-bottom: 1.5rem;
}

/**
 * Form Fields
 */
div.contact-form-row {
  margin: 0;
  margin-bottom: 1.5rem;
}

div.contact-form-row:last-of-type,
div.contact-form-row:empty {
  margin-bottom: 0;
}

div.contact-form-row label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.75rem;
  float: none;
  width: auto;
}

div.contact-form-row input,
div.contact-form-row textarea {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  -webkit-box-shadow: none;
          box-shadow: none;
  line-height: 1;
  max-width: 100%;
  padding: 0.91666667rem;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  width: 100%;
}

div.contact-form-row input:focus,
div.contact-form-row textarea:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

/**
 * Submit Button
 */
div#contact-form-submit input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  margin-left: 0;
  width: 100% !important;
}

div#contact-form-submit input:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

div#contact-form-submit input, div#contact-form-submit input:focus {
  color: #fff;
}

@media screen and (min-width: 36.25em) {
  div#contact-form-submit input {
    width: auto !important;
  }
}

/* ==========================================================================
   $PASSWORD-PROTECT
   ========================================================================== */
form[action="?function=PP-LOGIN&posted=TRUE"] input[type="password"] {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  display: block;
  margin-top: .375rem;
  width: 100%;
}

form[action="?function=PP-LOGIN&posted=TRUE"] input[type="password"]:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

form[action="?function=PP-LOGIN&posted=TRUE"] input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  margin-top: .75rem;
}

form[action="?function=PP-LOGIN&posted=TRUE"] input[type="submit"]:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

form[action="?function=PP-LOGIN&posted=TRUE"] input[type="submit"], form[action="?function=PP-LOGIN&posted=TRUE"] input[type="submit"]:focus {
  color: #fff;
}

/* ==========================================================================
   $RESET-PASSWORD
   ========================================================================== */
.c-page-content--webpage .o-wrapper > br:first-child,
.c-page-content--webpage .o-wrapper center + br {
  display: none;
}

.c-page-content--webpage center table {
  margin-bottom: 0;
}

/**
 * Password Reset Form
 */
form[name="lostemail"] {
  /**
   * Generic Resets
   */
  /**
   * Page Heading
   */
  /**
   * Page Subtext
   */
  /**
   * Form Wrapper
   */
  /**
   * Email Address Input
   */
  /**
   * Submit Input
   */
}

form[name="lostemail"] table,
form[name="lostemail"] tr,
form[name="lostemail"] td {
  margin: 0;
  padding: 0;
}

form[name="lostemail"] table,
form[name="lostemail"] tbody,
form[name="lostemail"] tr,
form[name="lostemail"] td,
form[name="lostemail"] font {
  display: block;
}

form[name="lostemail"] input,
form[name="lostemail"] table[width] {
  width: 100%;
}

form[name="lostemail"] br {
  display: none;
}

form[name="lostemail"] font[size="4"] {
  margin-bottom: 1.5rem;
  text-align: center;
}

form[name="lostemail"] font[size="2"][face="verdana, arial"] {
  margin-bottom: 1.5rem;
}

form[name="lostemail"] table[width="400"] td:last-child table[border="0"][cellpadding="0"][cellspacing="0"] font[face="verdana"][size="1"] b {
  display: none;
}

form[name="lostemail"] font[face="verdana"] b {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.75rem;
}

form[name="lostemail"] input[name="thelostemail"] {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  margin-bottom: 1.5rem;
}

form[name="lostemail"] input[name="thelostemail"]:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

form[name="lostemail"] input[value="Request Password"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
}

form[name="lostemail"] input[value="Request Password"]:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

form[name="lostemail"] input[value="Request Password"], form[name="lostemail"] input[value="Request Password"]:focus {
  color: #fff;
}

@media screen and (min-width: 36.25em) {
  form[name="lostemail"] input[value="Request Password"] {
    width: auto;
  }
}

/**
 * No Record Page
 */
.c-page-content--webpage center td {
  padding: 0;
}

.c-page-content--webpage center table[width="350"] br {
  display: none;
}

.c-page-content--webpage center table[width="350"] font {
  display: block;
}

.c-page-content--webpage center table[width="350"] font[size="4"] {
  margin-bottom: 1.5rem;
  text-align: center;
}

.c-page-content--webpage center table[width="350"] font[size="2"] br:first-of-type,
.c-page-content--webpage center table[width="350"] font[size="2"] br:first-of-type + br {
  display: block;
}

.c-page-content--webpage center table[width="350"] font[size="2"] a {
  margin-top: 1.5rem;
}

/* =========================================================================
   $SEARCH
   ========================================================================= */
body .ekm-search-page {
  padding: 0;
}

body .ekm-search-page-search-box {
  border: 1px solid #e8e8e8;
  margin-bottom: 3rem;
  padding: 1.5rem;
}

body .ekm-search-page-search-box form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

body .ekm-search-page-search-box__label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.75rem;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

body .ekm-search-page-search-box__field {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1rem;
  line-height: 1;
  max-width: 100%;
  padding: 0.91666667rem;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

body .ekm-search-page-search-box__field:focus {
  color: #222;
  outline: 0;
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
}

body .ekm-search-page-search-box__button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  -webkit-box-flex: 0;
      -ms-flex: 0 1 20%;
          flex: 0 1 20%;
  margin-left: 0.75rem;
  width: auto;
}

body .ekm-search-page-search-box__button:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

body .ekm-search-page-search-box__button, body .ekm-search-page-search-box__button:focus {
  color: #fff;
}

body .ekm-search-page-intro {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  padding-left: 0;
  padding-right: 0;
}

body .ekm-search-page-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1.5rem;
  margin-bottom: -1.5rem;
}

body .ekm-search-page-item__wrapper {
  display: block;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  max-width: 50%;
  padding: 0;
  padding-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  width: auto;
}

@media screen and (min-width: 36.25em) {
  body .ekm-search-page-item__wrapper {
    -ms-flex-preferred-size: 33.3333333%;
        flex-basis: 33.3333333%;
    max-width: 33.3333333%;
  }
}

@media screen and (min-width: 61.875em) {
  body .ekm-search-page-item__wrapper {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }
}

body .ekm-search-page-item {
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 0.75rem;
}

body .ekm-search-page-item:hover {
  border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

body .ekm-search-page-item__image {
  display: block;
  margin-bottom: 0.75rem;
  position: relative;
}

body .ekm-search-page-item__image:before {
  content: "";
  display: block;
  padding-bottom: 100%;
  width: 100%;
}

body .ekm-search-page-item__image > a {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

body .ekm-search-page-item__image > a img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  left: 50%;
  max-height: 100%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
}

body .ekm-search-page-item__details {
  margin-top: auto;
}

body .ekm-search-page-item__name {
  font-weight: 700;
  margin-top: 0;
}

body .ekm-search-page-item__price {
  margin-top: 0;
}

/**
 * No results page
 */
body .ekm-search-page-no-results {
  font-size: 1rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

body .ekm-search-page-no-results__description {
  margin-top: 0;
}

/* =========================================================================
   $INDUSTRY-VARIANTS
   ========================================================================= */
/* =========================================================================
   $AUTOMOTIVE
   ========================================================================= */
.i-Automotive optgroup,
.i-Automotive h1,
.i-Automotive h2,
.i-Automotive h3,
.i-Automotive h4,
.i-Automotive h5,
.i-Automotive h6,
.i-Automotive .c-drawer-nav__link,
.i-Automotive .c-login label,
.i-Automotive .c-product-options label,
.i-Automotive .c-product-prices__inner,
.i-Automotive .c-promo__heading,
.i-Automotive .c-promo--banner .c-promo__heading,
body.i-Automotive .ekmps-write-your-own-review .ekmps-form-section .ekmps-frm-row label,
.i-Automotive div.contact-form-row label,
.i-Automotive form[name="lostemail"] font[face="verdana"] b,
body.i-Automotive .ekm-search-page-search-box__label {
  font-weight: 700;
}

body.i-Automotive {
  background-color: #f0f0f0;
}

.i-Automotive .c-search-form--desktop .c-search-form__textarea
{
  border: 1px solid #e8e8e8;
}

.i-Automotive .c-search-form--mobile {
  background-color: #fff;
}

.i-Automotive .c-messages__inner {
  background-color: #f0f0f0;
}

.i-Automotive .c-product__link,
.i-Automotive .c-category__link {
  background-color: #fff;
}

.i-Automotive .c-filters--sidebar {
  background-color: #fff;
}

.i-Automotive .c-product-image-viewer__inner > a {
  background-color: #fff;
}

.i-Automotive .c-review-stars__empty-star {
  fill: #a2a1a1;
  opacity: .4;
}

.i-Automotive .c-product-prices__inner {
  border-color: #e8e8e8;
}

/* =========================================================================
   $SPORTS-AND-RECREATION
   ========================================================================= */
.i-Sports-and-Recreation .c-button,
.i-Sports-and-Recreation .c-login input[type="submit"],
.i-Sports-and-Recreation form[name="customerreview"] input[type="submit"],
body.i-Sports-and-Recreation .ekmps-write-your-own-review .ekmps-form-section.send-message .ekmps-frm-row input.send-button,
.i-Sports-and-Recreation div#contact-form-submit input,
.i-Sports-and-Recreation form[action="?function=PP-LOGIN&posted=TRUE"] input[type="submit"],
.i-Sports-and-Recreation form[name="lostemail"] input[value="Request Password"],
body.i-Sports-and-Recreation .ekm-search-page-search-box__button,
.i-Sports-and-Recreation .ekm-softcart div.ekm-softcart-links a.ekm-softcart-gotocheckout,
.i-Sports-and-Recreation .ekm-softcart a.ekm-softcart-more,
body.i-Sports-and-Recreation .ekmpscart-wrapper.ekmpscart-empty .ekmpscart-checkout-button.ekmpscart-checkout-button-continue a,
body.i-Sports-and-Recreation .ekmpscart-checkout-button-checkout a {
  border-radius: 100px;
}

/*.i-Sports-and-Recreation .c-newsletter,
.i-Sports-and-Recreation .c-newsletter__field,
.i-Sports-and-Recreation .c-site-footer__bottom {
  background-color: #323630;
}*/

.i-Sports-and-Recreation .c-site-logo a {
  color: #fff;
}

.i-Sports-and-Recreation .c-site-header__icon {
  fill: #fff;
}

.i-Sports-and-Recreation .c-cart__count {
  color: #fff;
}

.i-Sports-and-Recreation .c-primary-nav {
  background-color: #fff;
}

.i-Sports-and-Recreation .c-primary-nav__link--level-1 {
  color: #222;
  font-weight: 700;
}

/* =========================================================================
   $NEWSLETTER MODAL
   ========================================================================= */


/* Exit Modal Overlay */
.shopui-exit-modal__overlay {
  background-color: #fff;
}

/* Exit Modal Main Window */
.shopui-exit-modal__window {
  background-color: #fff;
  border-radius: 2px; 
  box-shadow: none; 
  
}

/* Exit Modal Title */
/* Exit Modal Message */

    body .shopui-exit-modal__title {
      font-family: "Open sans", sans-serif;
      font-weight: 800;
      color: #000;
    }

    body .shopui-exit-modal__message {
      font-family: "Open sans", sans-serif;
      font-weight: 400;
      color: #000;
    }

  /* Exit Modal Email Field */
  .shopui-exit-modal__window .shopui-text-field {
    border: 2px solid #ddd;
    font-size: 18px;
    border-radius: 2px;
  }

  /* Exit Modal Button */
  .shopui-exit-modal__window .shopui-button--primary,
  .shopui-exit-modal__window a.shopui-button--primary {
    border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
    background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  }

    .shopui-exit-modal__window .shopui-button--primary:hover,
    .shopui-exit-modal__window a.shopui-button--primary:hover {
      border-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
        background-color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
        -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
        box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
    }

/* =========================================================================
   $OVERRIDES
   ========================================================================= */
/* =========================================================================
   $FONT-OVERRIDES
   ========================================================================= */
font[face="verdana"],
font[face="verdana, arial"],
font[face="Verdana, Arial, Helvetica, sans-serif"] {
  font-family: inherit;
}

font[size="4"] {
  font-size: 1.33333333rem;
  line-height: 1;
  line-height: 1;
}

@media screen and (min-width: 36.25em) {
  font[size="4"] {
    font-size: 1.5rem;
    line-height: 1;
  }
}

font[size="2"] {
  font-size: 0.83333333rem;
  line-height: 1.28571429;
}

font[size="1"] {
  font-size: 0.83333333rem;
  line-height: 1.5;
}

/* =========================================================================
   $PROMO-STICKERS
   ========================================================================= */
.ekm-product-image-badge-wrapper {
  -ms-flex-item-align: end;
      align-self: flex-end;
  display: block !important;
  height: 0      !important;
}


/* ==========================================================================
   #SOFTCART
   ========================================================================== */
/**
 * To override the default Softcart styles we need to increase the specificity
 * of our selectors. We do this here by nesting them inside the `ekm-softcart`
 * parent element.
 */
.ekm-softcart {
  /**
   * This button is shown if there is an error when adding a product to the
   * soft cart.
   */
}

.ekm-softcart,
.ekm-softcart div.ekm-softcart-header h1,
.ekm-softcart span.ekm-softcart-item-name a,
.ekm-softcart span.ekm-softcart-item-cost,
.ekm-softcart p.ekm-softcart-subtotal,
.ekm-softcart p.ekm-softcart-delivery,
.ekm-softcart p.ekm-softcart-vat,
.ekm-softcart p.ekm-softcart-total,
.ekm-softcart div.ekm-softcart-links a.ekm-softcart-continue,
.ekm-softcart span.ekm-softcart-item-qty-value,
.ekm-softcart span.ekm-softcart-item-options,
.ekm-softcart p.ekm-softcart-error {
  color: #222;
}

.ekm-softcart span.ekm-softcart-item-name a {
  color: [ekm:colour] colour_reference='color_secondary'; default_colour='#86c91c'; [/ekm:colour];
  text-decoration: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}

.ekm-softcart span.ekm-softcart-item-name a:hover {
  opacity: 0.7;
  text-decoration: none;
}

.ekm-softcart div.ekm-softcart-links a.ekm-softcart-gotocheckout {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
}

.ekm-softcart div.ekm-softcart-links a.ekm-softcart-gotocheckout:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

.ekm-softcart div.ekm-softcart-links a.ekm-softcart-gotocheckout, .ekm-softcart div.ekm-softcart-links a.ekm-softcart-gotocheckout:focus {
  color: #fff;
}

.ekm-softcart a.ekm-softcart-item-remove,
.ekm-softcart .ekm-softcart-close:hover:before {
  color: #e74c3c;
}

.ekm-softcart a.ekm-softcart-more {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
  border-color: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
}

.ekm-softcart a.ekm-softcart-more:hover {
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

.ekm-softcart a.ekm-softcart-more, .ekm-softcart a.ekm-softcart-more:focus {
  color: #fff;
}

/*CART PAGE*/

.ekmpscart-estimate-delivery-row > select, .ekmpscart-estimate-delivery-row > input{
	width: 100% !important;
    max-width: 150px !important;
}

/* =========================================================================
   #UI-SLIDER
   ========================================================================= */
.ui-slider {
  background-color: #d5d4d4 !important;
}

.ui-slider .ui-slider-range {
  background-color: #a2a1a1 !important;
}

.ui-slider .ui-slider-handle {
  background-color: #222 !important;
}

.ui-slider .ui-slider-handle:first-of-type {
  margin-left: 0 !important;
}

.ui-slider .ui-slider-handle:last-of-type {
  margin-left: -8px !important;
}

/* =========================================================================
   $UTILITIES
   ========================================================================= */

/* ==========================================================================
   #MEASURE
   ========================================================================== */
/**
 * Limit content to a readable width
 */
.u-measure {
  max-width: 43.75em !important;
  margin-left: auto  !important;
  margin-right: auto !important;
}

/* =========================================================================
   #SPACING
   ========================================================================= */
/**
 * Utility classes to put specific spacing values onto elements.
 */
.u-margin {
  margin: 1.5rem !important;
}

.u-margin-tiny {
  margin: 0.41666667rem !important;
}

.u-margin-small {
  margin: 0.75rem !important;
}

.u-margin-large {
  margin: 3rem !important;
}

.u-margin-huge {
  margin: 6rem !important;
}

.u-margin-none {
  margin: 0 !important;
}

.u-margin-top {
  margin-top: 1.5rem !important;
}

.u-margin-top-tiny {
  margin-top: 0.41666667rem !important;
}

.u-margin-top-small {
  margin-top: 0.75rem !important;
}

.u-margin-top-large {
  margin-top: 3rem !important;
}

.u-margin-top-huge {
  margin-top: 6rem !important;
}

.u-margin-top-none {
  margin-top: 0 !important;
}

.u-margin-right {
  margin-right: 1.5rem !important;
}

.u-margin-right-tiny {
  margin-right: 0.41666667rem !important;
}

.u-margin-right-small {
  margin-right: 0.75rem !important;
}

.u-margin-right-large {
  margin-right: 3rem !important;
}

.u-margin-right-huge {
  margin-right: 6rem !important;
}

.u-margin-right-none {
  margin-right: 0 !important;
}

.u-margin-bottom {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-tiny {
  margin-bottom: 0.41666667rem !important;
}

.u-margin-bottom-small {
  margin-bottom: 0.75rem !important;
}

.u-margin-bottom-large {
  margin-bottom: 3rem !important;
}

.u-margin-bottom-huge {
  margin-bottom: 6rem !important;
}

.u-margin-bottom-none {
  margin-bottom: 0 !important;
}

.u-margin-left {
  margin-left: 1.5rem !important;
}

.u-margin-left-tiny {
  margin-left: 0.41666667rem !important;
}

.u-margin-left-small {
  margin-left: 0.75rem !important;
}

.u-margin-left-large {
  margin-left: 3rem !important;
}

.u-margin-left-huge {
  margin-left: 6rem !important;
}

.u-margin-left-none {
  margin-left: 0 !important;
}


/* =========================================================================
   #VISUAL
   ========================================================================= */
/**
 * Visually hide elements while still making them readable by screen readers.
 */
.u-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

.u-visually-shown {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: auto;
  position: inherit !important;
  width: auto;
}

/**
 * Hide elements so they won't take up space; maybe with the intention of 
 * un-hiding it with JS.
 */
.u-hidden {
  display: none !important;
}

/* Responsive visual modifiers.
   ========================================================================= */
/**
 * Responsive hide utility classes. There are no 'show' classes because these
 * could override the initial 'display' property.
 */
@media screen and (min-width: 25em) {
  .u-hidden\@tiny-up {
    display: none !important;
  }
}

@media screen and (min-width: 36.25em) {
  .u-hidden\@small-up {
    display: none !important;
  }
}

@media screen and (min-width: 46.875em) {
  .u-hidden\@medium-up {
    display: none !important;
  }
}

@media screen and (min-width: 61.875em) {
  .u-hidden\@large-up {
    display: none !important;
  }
}

@media screen and (min-width: 87.5em) {
  .u-hidden\@huge-up {
    display: none !important;
  }
}

@media screen and (max-width: 24.9375em) {
  .u-hidden\@tiny-down {
    display: none !important;
  }
}

@media screen and (max-width: 36.1875em) {
  .u-hidden\@small-down {
    display: none !important;
  }
}

@media screen and (max-width: 46.8125em) {
  .u-hidden\@medium-down {
    display: none !important;
  }
}

@media screen and (max-width: 61.8125em) {
  .u-hidden\@large-down {
    display: none !important;
  }
}

@media screen and (max-width: 87.4375em) {
  .u-hidden\@huge-down {
    display: none !important;
  }
}

/* ==========================================================================
#QUICK VIEW FEATURE
========================================================================= */

@media only screen and (min-width: 768px){
	.quickview-btn-wrapper {
	    left: 0px !important;
	    height: calc(100% + 20px) !important;
	}
}

/* ==========================================================================
#QUICK VIEW FEATURE V1 CUSTOM MODE
========================================================================= */


.quickview-parent {
	position: relative;
}

.quickview-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9;
    display: none;
}

@media screen and (min-width: 36.25em) {
    .quickview-parent:hover .quickview-wrapper {display: flex;justify-content: space-evenly;align-items: center;flex-direction: column;}
}

.quickview-wrapper a, .quickview-wrapper span {
    border: 0.675rem solid #fff;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto;
    padding: 1rem 2rem;
    color: #ffffff;
    font-size: 1.8rem;
    transition: 0.2s linear all;
}

.quickview-wrapper a:hover, .quickview-wrapper span:hover {
    opacity: 1;
    background: #ffffff;
    color: #000000;
    transition: 0.2s linear all;
}

.quickview-icon {
    display: block;
    width: 100%;
    margin-top: 1.2rem;
    cursor: pointer;
    padding: 1rem 0;
    background: [ekm:colour] colour_reference='color_primary'; default_colour='#418ae7'; [/ekm:colour];
    color: #ffffff;
}

.quickview-icon:hover {
    opacity: 0.8;
}

.quickview-icon span.quickview-label {
    display: inline-block;
    margin: 0.5rem 0 0 1rem;
}

.quickview-icon svg {
    height: 22px;
    width: 22px;
    display: inline-block;
    fill: #ffffff;
    vertical-align: text-top;
}

.quickview-wrapper .ekm-edit-button-wrapper.ekm-design.ekm-design-html a:first-child {
    display: none;
}

/* PRODUCT TABS*/

.tab > .c-product-attributes{
	max-width: 500px;
}
.tab-header-wrapper > label{
	font-size: 1.2rem;
}