.product-tile-pd {
  font-family: Roboto, sans-serif; }
  .product-tile-pd .product-tile-image {
    font-size: 1em;
    position: relative; }
    .product-tile-pd .product-tile-image .image-tile-tag-wrapper {
      position: absolute;
      left: 0;
      top: auto;
      bottom: 18px;
      max-width: 80%;
      z-index: 2; }
      @media (min-width: 544px) {
        .product-tile-pd .product-tile-image .image-tile-tag-wrapper {
          top: 18px;
          bottom: auto; } }
    .product-tile-pd .product-tile-image .quick-shop {
      background-color: #fff;
      color: #000;
      font-weight: 600;
      box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.4);
      position: relative;
      border-radius: 0; }
    .product-tile-pd .product-tile-image .product-tile-component-figure {
      width: 100%; }
    .product-tile-pd .product-tile-image .product-tile-component-image {
      width: 100%;
      transition: opacity 0.6s ease-in-out;
      background-color: #eaeaea; }
      .product-tile-pd .product-tile-image .product-tile-component-image[data-packshot="true"] {
        padding: 10% 8%; }
      .product-tile-pd .product-tile-image .product-tile-component-image.tile-hover-image {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        visibility: hidden; }
    .product-tile-pd .product-tile-image .product-tile-image-link {
      width: 100%;
      height: auto;
      display: block;
      position: relative;
      padding-top: calc(2500 * 100% / 1875); }
      .product-tile-pd .product-tile-image .product-tile-image-link img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; }
    .product-tile-pd .product-tile-image .product-tile-image-skeleton {
      width: 100%;
      height: auto;
      display: block;
      position: relative;
      padding-top: calc(2500 * 100% / 1875); }
      .product-tile-pd .product-tile-image .product-tile-image-skeleton .skeleton-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ebebea;
        overflow: hidden; }
        .product-tile-pd .product-tile-image .product-tile-image-skeleton .skeleton-image::after {
          content: "";
          position: absolute;
          top: -100%;
          left: 0;
          width: 100%;
          height: 200%;
          background: linear-gradient(to top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 65%);
          animation: vertical-shimmer 2s infinite; }

@keyframes vertical-shimmer {
  0% {
    transform: translateY(100%); }
  100% {
    transform: translateY(-100%); } }
  .product-tile-pd .product-tile-image .quick-shop {
    display: none; }
  .product-tile-pd .product-tile-body {
    padding: 15px;
    font-size: 14px;
    letter-spacing: 0.5px; }
    .product-tile-pd .product-tile-body.skeleton-tile-body {
      padding: 15px 0; }
    .product-tile-pd .product-tile-body .product-name-link {
      color: #000;
      line-height: 20px;
      font-size: 14px;
      margin-bottom: 10px;
      font-family: Roboto, sans-serif;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden; }
    .product-tile-pd .product-tile-body .product-price {
      font-weight: 400;
      color: #222;
      font-size: 14px; }
      @media (max-width: 1199.98px) {
        .product-tile-pd .product-tile-body .product-price > span {
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
          letter-spacing: 0;
          font-size: 12px; } }
      .product-tile-pd .product-tile-body .product-price .strike-through {
        text-decoration: line-through;
        color: #000;
        margin-right: 20px; }
        @media (max-width: 991.98px) {
          .product-tile-pd .product-tile-body .product-price .strike-through {
            margin-right: 10px; } }
      .product-tile-pd .product-tile-body .product-price .sales.reduced-price {
        color: #c00;
        font-family: Roboto, sans-serif; }
        @media (max-width: 991.98px) {
          .product-tile-pd .product-tile-body .product-price .sales.reduced-price {
            display: block; } }
    .product-tile-pd .product-tile-body .product-ratings .rating-number {
      font-size: 0.75em;
      font-weight: 400;
      color: #444; }
    .product-tile-pd .product-tile-body .color-swatches {
      min-height: 40px;
      position: relative;
      padding: 0; }
      .product-tile-pd .product-tile-body .color-swatches.skeleton-swatches {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
            flex-direction: row;
        gap: 0.3rem; }
      .product-tile-pd .product-tile-body .color-swatches a {
        border: 1px solid transparent; }
        .product-tile-pd .product-tile-body .color-swatches a:hover {
          border: 1px solid #f60; }
      .product-tile-pd .product-tile-body .color-swatches .swatches-title {
        transition: all 0.15s ease-in-out;
        position: absolute;
        left: 0;
        min-height: 40px;
        line-height: 40px;
        font-family: Roboto, sans-serif; }
      .product-tile-pd .product-tile-body .color-swatches .product-tile-color-label {
        cursor: pointer;
        font-size: 1em; }
        @media (max-width: 991.98px) {
          .product-tile-pd .product-tile-body .color-swatches .product-tile-color-label {
            font-size: 0.9375em; } }
        @media (max-width: 768.98px) {
          .product-tile-pd .product-tile-body .color-swatches .product-tile-color-label {
            font-size: 0.8125em; } }
      .product-tile-pd .product-tile-body .color-swatches .swatches-ul {
        list-style: none;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease-in-out;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center; }
        .product-tile-pd .product-tile-body .color-swatches .swatches-ul.skeleton-swatch {
          visibility: visible;
          opacity: 1; }
        .product-tile-pd .product-tile-body .color-swatches .swatches-ul .swatch-li {
          background-repeat: no-repeat;
          background-position: 25%; }
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .swatch-li.skeleton-swatch-li {
            background: #ebebea; }
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .swatch-li .swatch-button-li {
            float: left;
            margin-bottom: 4px;
            margin-right: 3px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid transparent;
            /* stylelint-disable max-nesting-depth */
            /* stylelint-enable max-nesting-depth */ }
            .product-tile-pd .product-tile-body .color-swatches .swatches-ul .swatch-li .swatch-button-li:hover {
              border: 1px solid #f60; }
        .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches-li,
        .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches-li-sm {
          display: inline-block;
          text-align: center;
          width: 40px; }
        @media (max-width: 768.98px) {
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .swatch-li:nth-child(4),
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .swatch-li:nth-child(5) {
            display: none; }
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches-li {
            display: none; } }
        .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches,
        .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches-sm {
          font-size: 1em;
          font-weight: 300;
          color: #444;
          vertical-align: bottom; }
        @media (min-width: 769px) {
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches-li {
            display: inline-block;
            vertical-align: top;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-family: Roboto, sans-serif; }
          .product-tile-pd .product-tile-body .color-swatches .swatches-ul .more-swatches-li-sm {
            display: none; } }
  @media (min-width: 1200px) {
    .product-tile-pd:hover .swatches-title {
      opacity: 0;
      height: 0;
      visibility: hidden; } }
  @media (min-width: 1200px) {
    .product-tile-pd:hover .color-swatches .swatches-ul {
      visibility: visible;
      opacity: 1; } }
  @media (min-width: 1200px) {
    .product-tile-pd:hover .product-tile-component-image + .tile-hover-image {
      visibility: visible;
      opacity: 1; } }

.product-tile-pd .product-tile-image .product-tile-component-image {
  background-color: #fff; }

.product-tile-pd .product-tile-body {
  text-align: center; }
  .product-tile-pd .product-tile-body .swatches-title {
    color: #bfbfbf;
    width: 100%;
    text-align: center; }
  .product-tile-pd .product-tile-body .swatches-ul {
    -ms-flex-pack: center;
        justify-content: center; }
  .product-tile-pd .product-tile-body .product-name-link {
    text-align: center; }
    .product-tile-pd .product-tile-body .product-name-link a {
      display: block;
      margin: 0 auto; }
  .product-tile-pd .product-tile-body .strike-through {
    text-decoration: line-through;
    color: #bfbfbf;
    margin-right: 20px; }
    @media (max-width: 991.98px) {
      .product-tile-pd .product-tile-body .strike-through {
        margin-right: 10px; } }
  .product-tile-pd .product-tile-body .sales.reduced-price {
    color: #000;
    font-family: Roboto, sans-serif; }
    @media (max-width: 991.98px) {
      .product-tile-pd .product-tile-body .sales.reduced-price {
        display: block; } }