From af3577e1a8edcc5a2aa9a69a4d083f98d062e9a2 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Fri, 26 Dec 2025 17:21:09 +0200
Subject: [PATCH 1/2] Fix duplcate IDs

---
 sections/products.liquid     | 17 ++++++-----------
 sections/testimonials.liquid |  4 ++--
 snippets/product-card.liquid |  4 +---
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/sections/products.liquid b/sections/products.liquid
index dbc3e10..ec474e8 100644
--- a/sections/products.liquid
+++ b/sections/products.liquid
@@ -142,23 +142,18 @@
                     {% assign product = item %}
                 {% endcase %}
 
-                {%- if carousel -%}
-                  <div id="{{ item.id }}"{% if items_type == "blocks" %} data-block-key="{{ item.id }}" data-block-name="{{ item.name }}"{% endif %} class="carousel__item">
+                <div class="products__item{% if carousel %} carousel__item{%- endif -%}" id="{{- item.id -}}"{% if items_type == "blocks" %} data-block-key="{{- item.id -}}" data-block-name="{{- item.name -}}"{%- endif -%}>
+                  {%- if carousel -%}
                     <div class="carousel__inner">
-                {%- else -%}
-                  <div id="{{ item.id }}"{% if items_type == "blocks" %} data-block-key="{{ item.id }}" data-block-name="{{ item.name }}"{% endif %}>
-                {%- endif -%}
+                  {%- endif -%}
                       {%- render 'product-card',
-                          block_id: item.id,
                           product: product,
                           settings: settings
                       -%}
-                {%- if carousel -%}
+                  {%- if carousel -%}
                     </div>
-                  </div>
-                {%- else -%}
-                  </div>
-                {%- endif -%}
+                  {%- endif -%}
+                </div>
               {%- endfor -%}
 
         {%- if carousel -%}
diff --git a/sections/testimonials.liquid b/sections/testimonials.liquid
index 0baeb51..f7d420f 100644
--- a/sections/testimonials.liquid
+++ b/sections/testimonials.liquid
@@ -113,11 +113,11 @@
               {%- assign button_outline_url   = block.settings.button_outline_url -%}
 
               {%- if carousel -%}
-                <div id="{{ block.id }}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}" class="carousel__item">
+                <div class="carousel__item" id="{{- block.id -}}" data-block-key="{{- block.id -}}" data-block-name="{{- block.name -}}">
                   <div class="carousel__inner">
               {%- endif -%}
                     {%- if description != blank -%}
-                      <div id="{{ block.id }}"{% unless carousel %} data-block-key="{{ block.id }}" data-block-name="{{ block.name }}"{% endunless %} class="testimonials__content">
+                      <div class="testimonials__content"{% unless carousel %} id="{{- block.id -}}" data-block-key="{{- block.id -}}" data-block-name="{{- block.name -}}"{%- endunless -%}>
                         <blockquote class="testimonials__blockquote text-medium">
                           <q class="testimonials__quote bq-content rx-content">
                             {{- description -}}
diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid
index cdf7994..2d75341 100644
--- a/snippets/product-card.liquid
+++ b/snippets/product-card.liquid
@@ -18,7 +18,6 @@
 {%- assign border          = settings.card_borders -%}
 {%- assign color_scheme    = settings.card_color_scheme -%}
 {%- assign excerpt         = "" -%}
-{%- assign id              = "" -%}
 {%- assign image           = "" -%}
 {%- assign image_bg        = settings.card_image_background -%}
 {%- assign image_fit       = settings.card_image_fit -%}
@@ -50,7 +49,6 @@
     {%- assign points = image.coordinates -%}
   {%- endif -%}
 
-  {%- assign id      = product.id -%}
   {%- assign url     = product.url -%}
   {%- assign name    = product.name -%}
   {%- assign excerpt = product.excerpt -%}
@@ -91,7 +89,7 @@
 {%- endcapture -%}
 {% comment %} CSS variables end {% endcomment %}
 
-<div id="{{ block_id }}" class="product-card product-card--{{- border -}}-border{% if border == "full" and use_colors %} color-{{- color_scheme.id -}}{%- endif -%}"{% if id != blank %} id="{{- id -}}"{% endif %} style="{{- card_variables | escape -}}">
+<div class="product-card product-card--{{- border -}}-border{% if border == "full" and use_colors %} color-{{- color_scheme.id -}}{%- endif -%}" style="{{- card_variables | escape -}}">
   <div class="product-card__vision{% if image_fit == 'contain' %}{% unless image_bg %} product-card__vision--white{% endunless %}{% endif %}{% unless image.url != blank %} no-image{%- endunless -%}">
     {%- if image.url != blank -%}
       {%- render 'image',

From adcde4fc18829343b10c3c60b29e83f42f4f75a2 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Fri, 26 Dec 2025 17:26:32 +0200
Subject: [PATCH 2/2] Fix carousel goes beyond screen edges on some resolutions

---
 assets/carousel.css     | 28 +++++++++++++++++++++++-----
 assets/testimonials.css | 13 ++++---------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/assets/carousel.css b/assets/carousel.css
index d3efeb2..df4eefa 100644
--- a/assets/carousel.css
+++ b/assets/carousel.css
@@ -1,14 +1,15 @@
 .carousel {
   height: 100%;
-  width: calc(100% + 2 * var(--horizontal-padding));
-  margin: 0 calc(-1 * var(--horizontal-padding));
+  width: calc(100% + 2 * var(--horizontal-padding-mobile));
+  margin: 0 calc(-1 * var(--horizontal-padding-mobile));
+  padding: 12px 0 0;
   position: relative;
   contain: content; /* Performance: Reduces the scope of layout recalculations */
 }
 
 .carousel__wrapper {
   height: 100%;
-  padding: 0 var(--horizontal-padding);
+  padding: 0 var(--horizontal-padding-mobile);
   display: flex;
   gap: 16px;
   align-items: stretch;
@@ -39,7 +40,7 @@
   right: 0;
   bottom: 0;
   display: flex;
-  margin: 0 calc(var(--horizontal-padding) - 4px);
+  margin: 0 calc(var(--horizontal-padding-mobile) - 4px);
   z-index: 2;
 }
 
@@ -83,7 +84,7 @@
   position: absolute;
   left: 0;
   bottom: 0;
-  margin: 0 calc(var(--horizontal-padding) - 8px);
+  margin: 0 calc(var(--horizontal-padding-mobile) - 8px);
   display: flex;
   z-index: 2;
 }
@@ -127,10 +128,27 @@
 }
 
 @media (min-width: 992px) {
+  .carousel {
+    width: calc(100% + 2 * var(--horizontal-padding));
+    margin: 0 calc(-1 * var(--horizontal-padding));
+  }
+
+  .carousel__wrapper {
+    padding: 0 var(--horizontal-padding);
+  }
+
   .carousel__item {
     min-width: var(--slide-width);
     max-width: var(--slide-width);
   }
+
+  .carousel__navigation {
+    margin: 0 calc(var(--horizontal-padding) - 8px);
+  }
+
+  .carousel__pagination {
+    margin: 0 calc(var(--horizontal-padding) - 4px);
+  }
 }
 
 @media (min-width: 1200px) {
diff --git a/assets/testimonials.css b/assets/testimonials.css
index b06cc32..8064eb1 100644
--- a/assets/testimonials.css
+++ b/assets/testimonials.css
@@ -11,7 +11,7 @@
 }
 
 .testimonials__side {
-  margin: 0 0 50px;
+  margin: 0 0 38px;
 }
 
 .testimonials__bg-image-holder {
@@ -31,7 +31,6 @@
   flex-direction: column;
   align-items: flex-start;
   border-radius: var(--border-radius-rounded-blocks);
-  overflow: hidden;
   color: var(--color-accent);
   background: var(--background-accent);
 }
@@ -99,9 +98,6 @@
   background: var(--background-primary-hover);
 }
 
-.testimonials__side + .carousel .carousel__list {
-  padding: 12px 0;
-}
 
 @media (min-width: 992px) {
   .testimonials__wrapper--padding-top {
@@ -121,7 +117,7 @@
     flex: 0 0 calc(var(--title-max-width) + 32px);
     max-width: calc(var(--title-max-width) + 32px);
     padding: 0 32px 0 0;
-    margin: 12px 0;
+    margin: 12px 0 0;
     border-right: 1px solid var(--background-accent);
   }
 
@@ -175,13 +171,12 @@
   }
 
   .testimonials__side + .carousel .carousel__list {
-    overflow-x: scroll;
-    overflow-y: hidden;
+    overflow-x: clip;
   }
 
   .testimonials__side + .carousel .carousel__navigation {
     left: calc(-1 * var(--title-max-width) - var(--carousel-indent) * 2);
-    bottom: 12px;
+    bottom: 0;
     margin: 0;
   }
 }