@charset "UTF-8";
/**
 * CONTENTS
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Core.................inuitcss’ core and setup settings.
 * Global...............Project-wide variables and settings.
 *
 * TOOLS
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Sass MQ..............inuitcss’ default media query manager.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      inuitcss framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacings.............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Responsive-Spacings..Enhances the function of normal spacings for
 *                      responsive usage.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content
 */
/* General
========================================================================== */
/* General
========================================================================== */
/* Fractions
========================================================================== */
/* Ratios
========================================================================== */
/* Breakpoints
========================================================================== */
/*==========================================================================
  #COLORS
  ========================================================================== */
/* Color Palette
========================================================================== */
/* Color Options
========================================================================== */
.l-layout--product-page #product-images,
.path-product #product-images {
  order: 1;
}
.l-layout--product-page #product-details,
.path-product #product-details {
  order: 3;
}
.l-layout--product-page #product-details .o-table,
.path-product #product-details .o-table {
  font-size: 0.8rem;
}
.l-layout--product-page #product-details .o-table .u-h4,
.path-product #product-details .o-table .u-h4 {
  font-size: 0.9rem !important;
}
.l-layout--product-page #add-to-cart,
.path-product #add-to-cart {
  order: 2;
}
@media (min-width: 61.25em) {
  .l-layout--product-page #product-page,
.path-product #product-page {
    flex-wrap: nowrap;
  }
  .l-layout--product-page #product-page > .o-grid,
.path-product #product-page > .o-grid {
    align-items: flex-start;
  }
  .l-layout--product-page #product-images,
.path-product #product-images {
    order: 1;
    max-width: 400px;
    position: sticky;
    z-index: 25;
    top: 0;
  }
  .l-layout--product-page #product-details,
.path-product #product-details {
    order: 2;
    position: relative;
    flex: 1 1 !important;
  }
  .l-layout--product-page #add-to-cart,
.path-product #add-to-cart {
    order: 3;
    position: sticky;
    top: 0;
  }
}
@media (min-width: 46.25em) {
  .l-layout--product-page #product-details,
.path-product #product-details {
    padding: 0 12px;
  }
}
@media (min-width: 61.25em) {
  .l-layout--product-page #product-details .c-accorditab__content,
.path-product #product-details .c-accorditab__content {
    overflow-y: auto;
    margin-bottom: -1;
  }
}
.l-layout--product-page #product-details .c-accorditab__content.js-trade-tab a.use-ajax,
.path-product #product-details .c-accorditab__content.js-trade-tab a.use-ajax {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0;
  cursor: pointer;
  padding: 12px 24px;
  transition: all 300ms ease-in-out;
  border-radius: 0.3rem;
  font-family: var(--font-heading);
  background-color: var(--cta-color);
  color: var(--white-color);
}

/* ==========================================================================
   # BADGE
   ========================================================================== */
/**
 * Badges are highly visual notices. They are to be used in conjunction with
 * icons to make them stand out on a page.
 */
/**
	<div class="c-badge c-badge--primary c-badge--square">1</div>
	<div class="c-badge c-badge--secondary c-badge--circle">2</div>
	<div class="c-badge c-badge--tertiary">New</div>
	<div class="c-badge c-badge--alert">Updated</div>
	<div class="c-badge c-badge--warning">Ready</div>
	<div class="c-badge c-badge--success">Steady</div>
	<div class="c-badge c-badge--info">Go</div>
*/
/**
 * 1. Set item to inline-flex
 * 2. Disable wrapping on the item
 * 3. Align items to horizontal and vertical center
 * 4. Add space around the outer edge of the component
 */
.c-badge {
  display: inline-flex; /* [1] */
  flex-wrap: nowrap; /* [2] */
  justify-content: center; /* [3] */
  align-items: center; /* [3] */
  align-content: center; /* [3] */
  border-radius: 0.3rem;
  position: relative;
}
@media (min-width: 46.25em) {
  .c-badge {
    margin-top: 0;
  }
}
.c-badge__feature {
  padding: 4px;
  flex: none;
}
.c-badge__content {
  flex-grow: 1;
  padding: 4px;
  font-size: 1em;
  font-weight: bold;
}
.c-badge__tooltip {
  display: none;
  position: absolute;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-size: 0.75rem;
  width: max-content;
  max-width: 220px;
  bottom: 3rem;
  border-radius: 0.3rem;
  padding: 12px;
  z-index: 29;
}
.c-badge__tooltip:before, .c-badge__tooltip:after {
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
  border: 1rem solid transparent;
}
.c-badge__tooltip:before {
  border-top-color: var(--primary-color);
  position: absolute;
  bottom: -1.5rem;
  left: 45%;
  z-index: 2;
}
.c-badge .is-active .c-badge__tooltip {
  display: block;
}
.c-badge--primary {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}
.c-badge--primary .c-badge__feature {
  background-color: var(--primary-color);
  color: var(--primary-color--lighten-45);
}
.c-badge--primary .c-badge__content {
  color: var(--primary-color);
}
.c-badge--secondary {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
}
.c-badge--secondary .c-badge__feature {
  background-color: var(--secondary-color);
  color: var(--secondary-color--lighten-45);
}
.c-badge--secondary .c-badge__content {
  color: var(--secondary-color);
}
.c-badge--tertiary {
  border: 1px solid var(--tertiary-color);
  background-color: var(--tertiary-color);
}
.c-badge--tertiary .c-badge__feature {
  background-color: var(--tertiary-color);
  color: var(--tertiary-color--lighten-45);
}
.c-badge--tertiary .c-badge__content {
  color: var(--tertiary-color);
}
.c-badge--alert {
  border: 1px solid var(--alert-color);
  background-color: var(--alert-color);
}
.c-badge--alert .c-badge__feature {
  background-color: var(--alert-color);
  color: var(--alert-color--lighten-45);
}
.c-badge--alert .c-badge__content {
  color: var(--alert-color);
}
.c-badge--warning {
  border: 1px solid var(--warning-color);
  background-color: var(--warning-color);
}
.c-badge--warning .c-badge__feature {
  background-color: var(--warning-color);
  color: var(--warning-color--lighten-45);
}
.c-badge--warning .c-badge__content {
  color: var(--warning-color);
}
.c-badge--success {
  border: 1px solid var(--success-color);
  background-color: var(--success-color);
}
.c-badge--success .c-badge__feature {
  background-color: var(--success-color);
  color: var(--success-color--lighten-45);
}
.c-badge--success .c-badge__content {
  color: var(--success-color);
}
.c-badge--info {
  border: 1px solid var(--info-color);
  background-color: var(--info-color);
}
.c-badge--info .c-badge__feature {
  background-color: var(--info-color);
  color: var(--info-color--lighten-45);
}
.c-badge--info .c-badge__content {
  color: var(--info-color);
}
.c-badge--cta {
  border: 1px solid var(--cta-color);
  background-color: var(--cta-color);
}
.c-badge--cta .c-badge__feature {
  background-color: var(--cta-color);
  color: var(--cta-color--lighten-45);
}
.c-badge--cta .c-badge__content {
  color: var(--cta-color);
}
.c-badge--black {
  border: 1px solid var(--black-color);
  background-color: var(--black-color);
}
.c-badge--black .c-badge__feature {
  background-color: var(--black-color);
  color: var(--black-color--lighten-45);
}
.c-badge--black .c-badge__content {
  color: var(--black-color);
}
.c-badge--dark-grey {
  border: 1px solid var(--dark-grey-color);
  background-color: var(--dark-grey-color);
}
.c-badge--dark-grey .c-badge__feature {
  background-color: var(--dark-grey-color);
  color: var(--dark-grey-color--lighten-45);
}
.c-badge--dark-grey .c-badge__content {
  color: var(--dark-grey-color);
}
.c-badge--medium-grey {
  border: 1px solid var(--medium-grey-color);
  background-color: var(--medium-grey-color);
}
.c-badge--medium-grey .c-badge__feature {
  background-color: var(--medium-grey-color);
  color: var(--medium-grey-color--lighten-45);
}
.c-badge--medium-grey .c-badge__content {
  color: var(--medium-grey-color);
}
.c-badge--light-grey {
  border: 1px solid var(--light-grey-color);
  background-color: var(--light-grey-color);
}
.c-badge--light-grey .c-badge__feature {
  background-color: var(--light-grey-color);
  color: var(--light-grey-color--lighten-45);
}
.c-badge--light-grey .c-badge__content {
  color: var(--light-grey-color);
}
.c-badge--white {
  border: 1px solid var(--white-color);
  background-color: var(--white-color);
}
.c-badge--white .c-badge__feature {
  background-color: var(--white-color);
  color: var(--white-color--lighten-45);
}
.c-badge--white .c-badge__content {
  color: var(--white-color);
}
.c-badge a {
  color: inherit;
  text-decoration: none;
}
.c-badge a:hover {
  color: inherit;
  text-decoration: underline;
}

.c-product-minicard {
  padding: 6px;
  background-color: var(--white-color);
  color: var(--primary-color);
  text-align: left;
}
.c-product-minicard--border {
  border: 0.1rem solid var(--primary-color);
  border-radius: 0.3rem;
}
.c-product-minicard__img {
  max-width: 50vw;
}
@media (min-width: 46.25em) {
  .c-product-minicard__img {
    max-width: 10vw;
  }
}
@media (min-width: 81.25em) {
  .c-product-minicard__img {
    max-width: 8vw;
  }
}
.c-product-minicard__header {
  font-size: 1rem;
  font-family: "Vag Bold";
}
.c-product-minicard .c-product-rating__stars {
  text-align: left;
}
.c-product-minicard .c-product-rating__score {
  display: none;
}

/* ==========================================================================
   # ACCORDITABS
   ========================================================================== */
/**
 * Provide contextual feedback messages for typical user actions with a
 * handful of available and flexible alert messages.
 */
/**
	<div class="c-accorditab">
		<h3 class="c-accorditab__header">Tab One</h3>
		<div class="c-accorditab__content">Tab One Content</div>
	</div>
*/
/**
 * 1. Set the container to be a flexbox item
 * 2. Disable wrapping on the item
 * 3. Align items to horizontal and vertical center
 * 4. Add space around the outer edge of the component
 * 5. Stop the icon container from resizing
 * 6. Make the content take up all available space
 */
.c-accorditab {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width: 46.25em) {
  .c-accorditab {
    flex-direction: row;
    margin-bottom: 24px;
  }
}

.c-accorditab__header {
  flex: 0 1 auto;
  padding: 12px;
  cursor: pointer;
  background-color: #efefef;
  z-index: 0;
}
.c-accorditab__header h1, .c-accorditab__header h2, .c-accorditab__header h3, .c-accorditab__header h4, .c-accorditab__header h5 {
  margin: 0 0 0 0;
}
@media (min-width: 46.25em) {
  .c-accorditab__header .c-accorditab__icon {
    display: none;
  }
}
.c-accorditab__header.is-active {
  border-bottom: 0.1rem solid black;
  background-color: #fff;
}
@media (min-width: 46.25em) {
  .c-accorditab__header {
    order: 1;
    border-bottom: 0.1rem solid var(--light-grey-color);
  }
  .c-accorditab__header.is-active {
    border: 0.1rem solid var(--light-grey-color);
    border-radius: 0.3rem 0.3rem 0 0;
    border-bottom: 0;
  }
}

.c-accorditab__overflow {
  display: none;
  z-index: 0;
}
@media (min-width: 46.25em) {
  .c-accorditab__overflow {
    display: block;
    flex: 1 1 auto;
    text-align: right;
    border-bottom: 0.1rem solid var(--light-grey-color);
    background-color: #efefef;
    order: 1;
  }
}

.c-accorditab__content {
  flex: 1 0 100%;
  display: none;
}
.c-accorditab__content.is-active {
  display: block;
}
@media (min-width: 46.25em) {
  .c-accorditab__content.is-active {
    order: 99;
    border: 0.1rem solid var(--light-grey-color);
    border-top: none;
  }
}

.c-product-title {
  margin: 0;
}
@media (max-width: 46.24em) {
  .c-product-title {
    font-size: 1rem;
  }
}

.c-product-rating {
  position: relative;
  display: inline-block;
}
.c-product-rating__stars {
  color: var(--primary-color);
}
.c-product-rating__stars--overlay {
  position: absolute;
  left: 0;
  top: 0;
  clip-path: inset(0 40% 0 0);
}
.c-product-rating__score {
  font-size: 0.75rem;
}

.c-product-price__main {
  color: var(--black-color);
}
.c-product-price__rrp {
  display: block;
  color: var(--black-color);
  filter: brightness(50%);
}
.c-product-price__strike {
  position: relative;
  display: inline-block;
}
.c-product-price__strike::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 45%;
  right: 0;
  border-bottom: 0.1rem solid red;
  transform: rotate(-10deg);
}

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

.c-image-gallery {
  margin: auto;
  position: relative;
  margin-bottom: 12px;
}
.c-image-gallery__slide {
  width: 100%;
  position: relative;
  text-align: center;
}
.c-image-gallery__zoom {
  position: absolute;
  color: var(--primary-color);
  top: 6px;
  right: 6px;
}
@media (max-width: 61.24em) {
  .c-image-gallery__zoom {
    display: none;
  }
}

.c-image-gallery--flickity-nav .c-image-gallery__image {
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
}
.c-image-gallery--flickity-nav .c-image-gallery__image.is-nav-selected {
  border: 0.2rem solid var(--primary-color);
}

/* Flickity fullscreen v1.0.1
------------------------- */
.flickity-enabled.is-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: hsla(0deg, 0%, 0%, 0.9);
  padding-bottom: 35px;
  z-index: 10;
}
.flickity-enabled.is-fullscreen .flickity-page-dots {
  bottom: 10px;
}
.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
  background: white;
}
.flickity-enabled.is-fullscreen .c-image-gallery__image {
  max-height: 100%;
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

/* ---- flickity-fullscreen-button ---- */
.flickity-fullscreen-button {
  display: flex;
  justify-content: center;
  right: 12px;
  top: 12px;
  width: 48px;
  height: 48px;
  background-color: rgba(var(--primary-color), 0.25);
  border: 0.1rem solid rgba(var(--primary-color), 0.75);
  border-radius: 0.3rem;
  padding: 0;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit {
  display: none;
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit {
  display: flex;
  background-color: rgba(var(--primary-color), 0.25);
  border: 0.1rem solid rgba(var(--primary-color), 0.75);
}
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit .flickity-button-icon {
  fill: rgba(var(--primary-color), 0.75);
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view {
  display: none;
}

.flickity-fullscreen-button .flickity-button-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: rgba(var(--primary-color), 0.75);
}

.c-rollovers {
  display: none;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: absolute;
  background: #ffffff;
  z-index: 1;
}
.c-rollovers .c-rollovers__container .c-rollovers__image {
  display: none;
}
.c-rollovers .c-rollovers__container .c-rollovers__image.is-active {
  display: block;
}

.c-img-zoom {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 25;
}
.c-img-zoom.is-active {
  display: flex;
}
.c-img-zoom__header {
  background-color: var(--primary-color--darken-25);
  color: var(--white-color);
}
.c-img-zoom__container {
  height: 100%;
  background-color: var(--black-color);
}
.c-img-zoom__container img {
  max-height: 100%;
}
.c-img-zoom__close {
  position: absolute;
  top: 12px;
  right: 6px;
}

.js-modal--is-open {
  overflow: hidden;
  height: 100vh;
}

/*# sourceMappingURL=product-details.css.map */