wickes-css2 2.113.0-ripple.7 → 2.113.0

package/src/page_product-details-flooring.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-gallery-actual.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-mfe-calculator.html

@@ -7,7 +7,9 @@ isSize=false
 isGuide=true
 isQuantity=true
 hourly-delivery=true
-badges=pdp-price-badges.yellowGrayText
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
 currentlyInStock=false
 pagePdp=true
 }}

package/src/page_product-details-mtm-doors.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-only-clearpay.html

@@ -5,7 +5,9 @@ isDescription=true
 isCashback=false
 isSize=true
 hourly-delivery=true
-badges=pdp-price-badges.yellowGrayText
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
 step3=true
 currentlyInStock=true
 pagePdp=true

package/src/page_product-details-paint-mixing.html

@@ -6,7 +6,9 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badges=pdp-price-badges.blueDarkPaintMixing
+badge-text='Paint Mixing'
+badge-color='blue-dark'
+badge-text-color='white'
 badge-wide=true
 paintMixing=true
 pagePdp=true

package/src/page_product-details-saved-pl.html

@@ -8,7 +8,9 @@
     isSize=true
     isGuide=true
     hourly-delivery=true
-    badges=pdp-price-badges.yellowGrayText
+    badge-text='15% off'
+    badge-color='yellow'
+    badge-text-color='gray'
     currentlyInStock=true
     pagePdp=true
     miniBasketEmpty=true

package/src/page_product-details-tile-steps-klarna-widget-with-method-ids.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-logout.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-no-new-project-list.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-with-klarna.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-v2.html

@@ -6,7 +6,9 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-vat.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-wisdom-mcfc-registered.html

@@ -6,7 +6,9 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badges=pdp-price-badges.yellowGrayText
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
 currentlyInStock=true
 pagePdp=true
 }}

package/src/page_product-details-wisdom-mcfc.html

@@ -6,7 +6,9 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badges=pdp-price-badges.yellowGrayText
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
 currentlyInStock=true
 pagePdp=true
 }}

package/src/page_product-details-wisdom-oos-registered.html

@@ -6,7 +6,9 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom-oos.html

@@ -6,7 +6,9 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom-registered.html

@@ -6,7 +6,9 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom.html

@@ -6,7 +6,9 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-with-favourite.html

@@ -5,7 +5,9 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-with-global-search-v2.html

@@ -6,7 +6,9 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badges=pdp-price-badges.yellowGrayText
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
 currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
@@ -67,12 +69,10 @@ switch-vat=true
       <div class="pdp__description">
         {{> product-main-info-v2 isProductSaved=true}}
       </div>
-      <div
-          class="pdp__widget"
-          data-complete-widget
-          data-mock-key="completeYourProject3Recomendations"
-      >
-        {{> bloomreach/complete-your-project title="Complete your project"}}
+      <div class="pdp__widget">
+        {{> bloomreach/complete-your-project
+            context="completeYourProject3Recomendations"
+        }}
       </div>
       {{> fulfilment-accordions }}
     </div>

package/src/page_product-details-with-why-not-add-single.html

@@ -18,7 +18,7 @@ switch-vat=true
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
 {{#content "body"}}
-<main class="pdp__main">
+<main class="pdp__main" data-cart-mock-key="cartPDPSingle">
   <div class="container">
     <div class="pdp">
       <div class="pdp__title">

package/src/page_product-details_no-previous-default.html

@@ -6,7 +6,9 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badges=pdp-price-badges.yellowGrayText
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
           currentlyInStock=true
           pagePdp=true
 }}

package/src/scss/components/_cards-slider.scss

@@ -66,7 +66,9 @@
     background-color: $gray;
     height: 6px;
     width: 6px;
-    transition: width 0.3s ease-in, background-color 0.3s ease-in;
+    transition:
+      width 0.3s ease-in,
+      background-color 0.3s ease-in;
 
     &-active {
       background-color: $blue;

package/src/scss/components/_checkout_order.scss

@@ -341,7 +341,8 @@
       }
     }
 
-    &:last-child {
+    &:last-child,
+    &:has(+ .delivery-block__heavy-banners-wrapper.d-none:last-child) {
       .order-block__product-line {
         .show-products {
           padding-bottom: 0;

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -286,35 +286,6 @@
       }
     }
   }
-
-  .rapid-info-icon {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: bottom;
-    pointer-events: auto;
-    margin-left: 4px;
-    cursor: pointer;
-    color: $white;
-    font-size: 1rem;
-
-    [data-prefix='fas'],
-    [data-prefix='far'] {
-      color: $white;
-    }
-
-    &:hover {
-      opacity: 0.8;
-
-      [data-prefix='far'] {
-        color: $white;
-      }
-    }
-  }
-
-  &__image {
-    position: absolute;
-    right: 12px;
-  }
 }
 
 .delivery-container {

package/src/scss/components/_heavy-banners.scss

@@ -0,0 +1,216 @@
+// Big & Bulky (Heavy) delivery banners component
+// Used on delivery details page for heavy/bulky orders
+// Mobile-first approach
+
+.delivery-block {
+  &__show-products {
+    display: inline-block;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    color: $blue;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+  }
+
+  &__weight-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $ma-white;
+    padding: 8px;
+    margin: 0 -15px;
+    gap: 8px;
+    border-bottom: 1px solid $blue-satin;
+
+    .banner-news + & {
+      margin-top: 20px;
+    }
+
+    &-content {
+      p {
+        @include font-size(12);
+        @include line-height(16);
+        color: $blue-ocean;
+        font-weight: 700;
+        margin: 0;
+        text-align: center;
+      }
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i,
+      svg {
+        @include font-size(21);
+        color: $blue-satin;
+      }
+    }
+  }
+
+  // Outer wrapper for the whole banner section
+  &__heavy-banners-wrapper {
+    background: $white;
+    border: 1px solid $gray;
+    border-radius: 4px;
+    padding: 24px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__heavy-banners-header {
+    margin-bottom: 0;
+  }
+
+  &__heavy-banners-title {
+    @include font-size(18);
+    @include line-height(24);
+    color: $gray-dark;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  &__heavy-banners-terms {
+    @include font-size(12);
+    @include line-height(16);
+    color: $blue;
+    font-weight: 400;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+
+    // Mobile: T&C at bottom visible, desktop one hidden
+    &--mobile {
+      display: block;
+      margin-top: 16px;
+    }
+
+    &--desktop {
+      display: none;
+    }
+  }
+
+  &__heavy-banners-description {
+    @include font-size(14);
+    @include line-height(22);
+    color: $gray-dark;
+    font-weight: 400;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  // Images container - matches Hybris class: delivery-block__heavy-banners
+  &__heavy-banners {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 16px;
+    margin-bottom: 16px;
+
+    img {
+      flex: 0 1 calc(33.333% - 12px);
+      max-width: calc(33.333% - 12px);
+      height: auto;
+      object-fit: contain;
+    }
+  }
+
+  &__heavy-banners-contact {
+    display: flex;
+    align-items: center;
+    background: $ma-white;
+    padding: 8px;
+    border-radius: 4px;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+
+    i,
+    svg {
+      @include font-size(21);
+      color: $blue-satin;
+    }
+
+    span {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+    }
+
+    a {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+      text-decoration: underline;
+
+      &:hover {
+        color: $blue-darker;
+      }
+    }
+  }
+}
+
+// Tablet and Desktop: all 5 in one row, T&C in header
+@include media-breakpoint-up(sm) {
+  .delivery-block {
+    &__weight-banner {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .delivery-block {
+    &__heavy-banners-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__heavy-banners-terms {
+      &--mobile {
+        display: none;
+      }
+
+      &--desktop {
+        display: inline-block;
+      }
+    }
+
+    &__heavy-banners {
+      flex-wrap: nowrap;
+
+      img {
+        flex: 1;
+        min-width: 0;
+        max-width: 120px;
+        width: 100%;
+      }
+    }
+  }
+}

package/src/scss/components/_kitchen-card.scss

@@ -49,7 +49,6 @@
 
   &__title {
     margin-bottom: 0;
-    user-select: none;
   }
 
   &__parameters {

package/src/scss/components/_price-badges-critical.scss

@@ -4,16 +4,6 @@
       width: 140px;
       padding: 0;
 
-      &.pdp__badges--static .pdp__badge {
-        min-width: auto;
-        padding: 4px 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 0.875rem;
-        line-height: 1.375rem;
-      }
-
       &-cashback {
         width: auto;
         padding: 0 10px;

package/src/scss/components/_price-badges.scss

@@ -4,16 +4,6 @@
       width: 140px;
       padding: 0;
 
-      &.pdp__badges--static .pdp__badge {
-        min-width: auto;
-        padding: 4px 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 0.875rem;
-        line-height: 1.375rem;
-      }
-
       &-cashback {
         width: auto;
         padding: 0 10px;

package/src/scss/components/_price-block-critical.scss

@@ -69,7 +69,6 @@
   .pdp-price-sale__value .pdp-price__old-price {
     color: $warm-grey;
     font-weight: 500;
-    line-height: 1rem;
 
     s {
       text-decoration-color: $line-through;

package/src/scss/components/_price-block.scss

@@ -114,7 +114,6 @@
   .pdp-price-sale__value .pdp-price__old-price {
     color: $warm-grey;
     font-weight: 500;
-    line-height: 1rem;
 
     s {
       text-decoration-color: $line-through;

package/src/scss/components/_sticky-element-appearance.scss

@@ -7,7 +7,9 @@
   opacity: 0;
   pointer-events: none;
   will-change: transform, opacity;
-  transition: transform 0.5s ease, opacity 0.5s ease;
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
 
   &:not(.is-hidden) {
     transform: translateY(0);
@@ -18,7 +20,9 @@
   &.is-hidden {
     transform: translateY(100%);
     opacity: 0;
-    transition: transform 0.5s ease 0s, opacity 0.5s ease 5s;
+    transition:
+      transform 0.5s ease 0s,
+      opacity 0.5s ease 5s;
     pointer-events: none;
   }
 }

package/src/scss/components/bloomreach/_bloomreach.scss

@@ -1,3 +1,4 @@
+@import 'card-shared';
 @import 'complete-your-project';
 @import 'complete-card';
 @import 'complete-card-dropdown';