/* Media Quuery Mixin */
.ProductImage {
  position: relative; }
  .ProductImage__imagery {
    background: #fafafa;
    position: relative;
    width: 100%;
    padding-top: 133.333%;
    overflow: hidden;
    text-align: center;
    outline: none;
    z-index: 1; }
    .ProductImage__imagery > * {
      width: 100%;
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
    .ProductImage__imagery .logo {
      height: 100%; }
      .ProductImage__imagery .logo svg {
        margin: 0 auto; }
  .ProductImage--main {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.4s ease-in-out; }
    .ProductImage--main:hover {
      opacity: 0; }
    .ProductImage--main--no-hover:hover {
      opacity: 1; }
  .ProductImage--hover {
    left: 0; }

/* Media Quuery Mixin */
.product-promotion {
  text-transform: uppercase;
  padding: 0 0.3125rem;
  left: 1.25rem;
  bottom: 1.25rem;
  font-size: 0.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  position: absolute;
  z-index: 100;
  min-width: 3.75rem;
  color: #313131; }
  @media (max-width: 740px) {
    .product-promotion {
      left: 0.625rem;
      bottom: 0.625rem; } }
  .product-promotion.\--sale {
    color: #ffffff;
    background-color: #d0021b; }
  .product-promotion.\--pride {
    color: #ffffff;
    background: #e70000;
    /* For browsers that do not support gradients */
    /* ff3.6+ */
    /* safari4+,chrome */
    /* safari5.1+,chrome10+ */
    /* opera 11.10+ */
    /* ie10+ */
    background: linear-gradient(130deg, #e70000 0%, #ff8c00 20%, #d7cb28 40%, #00811f 60%, #0044ff 80%, #760089 100%);
    /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e70000', endColorstr='#760089', GradientType=0 );
    /* ie6-9 */
    opacity: 0.85;
    line-height: 1.1875rem; }
  .product-promotion.\--ig {
    background-color: #ffffff;
    color: #000000;
    opacity: 0.8; }
    .product-promotion.\--ig::after {
      position: relative;
      top: 0.0625rem;
      left: 0.3125rem;
      display: inline-block;
      height: 0.75rem;
      width: 0.75rem;
      content: ' ';
      background-size: 0.75rem 0.75rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23000000' d='M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z'/%3E%3Cpath style='fill:%23000000' d='M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z'/%3E%3Ccircle style='fill:%23000000' cx='390.476' cy='121.524' r='30.23'/%3E%3C/svg%3E"); }
  .product-promotion.\--sustainability {
    color: #009a3d; }

.product-carousel .product-promotion {
  left: 2.5rem; }
  @media (max-width: 740px) {
    .product-carousel .product-promotion {
      left: 0.625rem;
      bottom: 0.625rem; } }

@media (max-width: 740px) {
  .product-page .product-promotion {
    left: 1.25rem; } }

@media (min-width: 741px) {
  .product-page__main-col .product-promotion {
    left: 1.25rem; } }

/* Media Quuery Mixin */
.WishList {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  padding: 0;
  cursor: pointer; }
  .WishList .wishlist-icon--delete g {
    stroke: inherit;
    stroke-width: inherit; }
  @media (min-width: 1025px) {
    .WishList svg:hover {
      fill: #9e9e9e; } }
  .WishList--active svg {
    fill: #9e9e9e; }
  .WishList--disabled {
    opacity: 0.3;
    color: white;
    cursor: default; }
    .WishList--disabled svg,
    .WishList--disabled svg:hover {
      fill: white; }
  .WishList > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0; }

/* Media Quuery Mixin */
.skeleton {
  position: absolute;
  width: 100%;
  z-index: 11; }
  .skeleton .product-image > div {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%; }
  .skeleton h4 {
    margin: 0; }

/* Media Quuery Mixin */
.product-tile {
  overflow: hidden; }
  .product-tile__product-link {
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-decoration: none; }
    .product-tile__product-link:hover, .product-tile__product-link:focus, .product-tile__product-link:active {
      text-decoration: none;
      outline: none; }
    .product-tile__product-link > .css-g3fk1c {
      height: 12.5rem; }
  .product-tile__details {
    order: 2;
    margin-bottom: 0.9375rem;
    height: 4.5rem;
    overflow: hidden;
    padding: 0.5rem 0 0 0.625rem;
    z-index: 2;
    position: relative; }
    @media (min-width: 1025px) {
      .product-tile__details {
        padding: 0.1875rem 0 0;
        min-height: 5.9375rem; } }
    @media (min-width: 741px) {
      .product-tile__details {
        position: relative;
        min-height: 5rem;
        overflow: visible;
        padding: 0; } }
  .product-tile__imagery {
    background: #fafafa;
    position: relative;
    width: 100%;
    padding-top: 133.333%;
    overflow: hidden;
    text-align: center;
    order: 1;
    outline: none;
    z-index: 1; }
    @media screen and (-moz-images-in-menus: 0) {
      .product-tile__imagery {
        min-height: calc(((100vw) * 0.8) * 0.3); } }
    .product-tile__imagery .ProductImage {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0; }
  .product-tile__name {
    display: block;
    font-size: 0.81em;
    line-height: 0.8125rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #6d6d6d;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: normal; }
  .product-tile__footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 0;
    color: #9e9e9e;
    font-size: 0.75rem; }
    @media (min-width: 741px) {
      .product-tile__footer {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0.3125rem 0 0 1.25rem;
        font-size: 0.8125rem; } }
  .product-tile__colours {
    font-size: 0.6875rem;
    letter-spacing: 0.025rem;
    line-height: 1rem;
    color: #9e9e9e;
    display: block;
    padding-top: 0.375rem; }
  .product-tile__price {
    display: block;
    margin-top: 0.3125rem;
    margin-bottom: 0.625rem;
    line-height: 1; }
    @media (min-width: 741px) {
      .product-tile__price {
        margin-bottom: 0.625rem; } }
    .product-tile__price .PriceDisplay--price {
      font-size: 0.8125rem; }
      @media (min-width: 1025px) {
        .product-tile__price .PriceDisplay--price {
          font-size: 0.8125rem;
          color: #000; } }
      @media (min-width: 741px) {
        .product-tile__price .PriceDisplay--price {
          font-size: 0.8125rem;
          letter-spacing: 0.03125rem; } }
    .product-tile__price .PriceDisplay--has-was-price .PriceDisplay--was-price {
      font-size: 0.8125rem;
      color: #000000; }
    .product-tile__price .PriceDisplay--has-was-price .PriceDisplay--price {
      color: red; }
  .product-tile__loading {
    display: none;
    height: 0.1875rem;
    position: absolute;
    width: 2.8125rem;
    background-color: #313131;
    transition: all 0.01s;
    top: 0; }
  .product-tile.\--loading .product-tile__loading {
    display: block;
    -webkit-animation: loadingLine 2s infinite;
            animation: loadingLine 2s infinite; }
  .product-tile.skeleton .product-image .css-g3fk1c {
    height: 100%;
    width: 100%; }
    .product-tile.skeleton .product-image .css-g3fk1c .react-loading-skeleton {
      display: block; }
  @media (min-width: 1025px) {
    .product-tile__promotion {
      left: 1.25rem;
      bottom: 1.25rem;
      padding: 0 1.25rem;
      height: 1.25rem;
      line-height: 1.25rem; } }
  @media (min-width: 741px) {
    .product-tile__header {
      flex-direction: column;
      padding: 0.375rem 0 0 1.25rem; } }

@-webkit-keyframes loadingLine {
  0% {
    left: 0;
    width: 10%; }
  25% {
    left: 50%;
    width: 40%; }
  100% {
    left: 100%;
    width: 10%; } }

@keyframes loadingLine {
  0% {
    left: 0;
    width: 10%; }
  25% {
    left: 50%;
    width: 40%; }
  100% {
    left: 100%;
    width: 10%; } }