From f645246965739bdb7125d5d8d79cef878e6c08d2 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Wed, 17 Dec 2025 22:15:55 +0200
Subject: [PATCH 1/4] fix validation of element ids

---
 sections/images.liquid       |  4 ++--
 sections/products.liquid     | 32 ++++++++++++++++++--------------
 sections/testimonials.liquid |  4 ++--
 snippets/product-card.liquid |  5 ++---
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/sections/images.liquid b/sections/images.liquid
index 37fdcf2..a9ff401 100644
--- a/sections/images.liquid
+++ b/sections/images.liquid
@@ -335,11 +335,11 @@
             {% comment %} CSS variables end {% endcomment %}
 
             {%- if carousel -%}
-              <div id="{{ block.id }}" class="carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}"{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}">
+              <div id="{{- block.id -}}" class="carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}"{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}">
                 <div class="carousel__inner">
             {%- endif -%}
                   <div
-                    id="{{ block.id }}"
+                    {% unless carousel %}id="{{- block.id -}}"{% endunless %}
                     class="images__container container{% if padding_top != blank or padding_top_mobile != blank %} images__container--padding-top{% endif %}{% if padding_bottom != blank or padding_bottom_mobile != blank %} images__container--padding-bottom{% endif %}"
                     style="{{- text_variables | escape -}}"
                   >
diff --git a/sections/products.liquid b/sections/products.liquid
index c9bf6ec..c6ff5de 100644
--- a/sections/products.liquid
+++ b/sections/products.liquid
@@ -122,25 +122,29 @@
             {%- for item in items limit: items_limit -%}
               {%- assign index = forloop.index -%}
 
-              {% case items_type %}
-                {% when "blocks" %}
-                  {% assign product = item.settings.product %}
-                {% when "collection" %}
-                  {% assign product = item %}
-              {% endcase %}
-
-              {%-  if items_type == 'blocks' -%}
-                {%  assign id = item.id %}  
-              {%- else -%}
-                {%  assign id = product.id %}
-              {%- endif -%}
+              {%- case items_type -%}
+                {%- when "blocks" -%}
+                  {%- assign product = item.settings.product -%}
+                  {%- assign id      = item.id -%}
+                {%- when "collection" -%}
+                  {%- assign product = item -%}
+                  {%- assign id      = product.id -%}
+              {%- endcase -%}
 
               {%- if carousel -%}
-                <div id="{{ id }}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
+                <div id="{{- id -}}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
                   <div class="carousel__inner">
+
+                  {%- if id contains '-' -%}
+                    {%- assign id = '' -%}
+                  {%- endif -%}
+
+                  {%- if id contains 'product' -%}
+                    {%- assign id = product.id -%}
+                  {%- endif -%}
               {%- endif -%}
                     {%- render 'product-card',
-                        block_id: id,
+                        item_id: id,
                         product: product,
                         settings: settings,
                         image_loading: loading_strategy
diff --git a/sections/testimonials.liquid b/sections/testimonials.liquid
index b719fb9..661c68a 100644
--- a/sections/testimonials.liquid
+++ b/sections/testimonials.liquid
@@ -117,10 +117,10 @@
               {%- assign stars       = block.settings.stars -%}
 
               {%- if carousel -%}
-                <div id="{{ block.id }}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
+                <div id="{{- block.id -}}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
                   <div class="carousel__inner">
               {%- endif -%}
-                    <div  id="{{ block.id }}" class="testimonials__content">
+                    <div {% unless carousel %}id="{{- block.id -}}" {% endunless %}class="testimonials__content">
                       {%- if title != blank or description != blank -%}
                         <div class="testimonials__col">
                           {%- if title != blank -%}
diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid
index 2dbef5c..ae14711 100644
--- a/snippets/product-card.liquid
+++ b/snippets/product-card.liquid
@@ -20,7 +20,7 @@
 
 {%- assign color_palette = settings.card_color_palette -%}
 {%- assign excerpt       = "" -%}
-{%- assign id            = "" -%}
+{%- assign id            = item_id -%}
 {%- assign image         = "" -%}
 {%- assign image_bg      = settings.card_image_background -%}
 {%- assign image_fit     = settings.card_image_fit -%}
@@ -51,7 +51,6 @@
     {%- assign points = image.coordinates -%}
   {%- endif -%}
 
-  {%- assign id      = product.id -%}
   {%- assign url     = product.url -%}
   {%- assign name    = product.name -%}
   {%- assign excerpt = product.excerpt -%}
@@ -82,7 +81,7 @@
 {%- endcapture -%}
 {% comment %} CSS variables end {% endcomment %}
 
-<div id={{ block_id }} class="product-card{% if use_colors %} palette-{{ color_palette }}{%- endif -%}"{% if id != blank %} id="{{- id -}}"{% endif %} style="{{- card_variables | escape -}}">
+<div class="product-card{% if use_colors %} palette-{{ color_palette }}{%- endif -%}"{% if id != blank %} id="{{- 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 != blank %} no-image{%- endunless -%}">
     {%- if image.url != blank -%}
       {%- render 'image',

From d6c24870cd9f3825ed51228cdb97d0ecb3f31600 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Tue, 23 Dec 2025 18:38:54 +0200
Subject: [PATCH 2/4] Remove .tool-versions file

---
 .tool-versions | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
deleted file mode 100644
index c15dc81..0000000
--- a/.tool-versions
+++ /dev/null
@@ -1 +0,0 @@
-nodejs 22.18.0
\ No newline at end of file

From 9898761695199d23ced7abfb3f2521bb431a2685 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Tue, 23 Dec 2025 18:44:49 +0200
Subject: [PATCH 3/4] Fix double quotes in id attribute for images item

---
 sections/images.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/images.liquid b/sections/images.liquid
index f488c12..038f57e 100644
--- a/sections/images.liquid
+++ b/sections/images.liquid
@@ -335,7 +335,7 @@
             {% comment %} CSS variables end {% endcomment %}
 
 
-            <div class="images__item{% if carousel %} carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}{%- endif -%}" id="{{- block.id -}}" data-block-key="{{- block.id -}}" data-block-name="{{- block.name -}}" {% if carousel %}{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}"{%- endif -%}>
+            <div class="images__item{% if carousel %} carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}{%- endif -%}" id="{{- block.id -}}" data-block-key="{{- block.id -}}" data-block-name="{{- block.name -}}"{% if carousel %}{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}"{%- endif -%}>
               {%- if carousel -%}
                 <div class="carousel__inner">
               {%- endif -%}

From ac640c6c5766780662d413a5dd85c30e90432f26 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Wed, 24 Dec 2025 11:53:06 +0200
Subject: [PATCH 4/4] Add full width style for images items

---
 assets/critical.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/critical.css b/assets/critical.css
index 153c0bb..903a8f5 100644
--- a/assets/critical.css
+++ b/assets/critical.css
@@ -304,6 +304,10 @@ img {
   flex-direction: column;
 }
 
+.images__item {
+  width: 100%;
+}
+
 .images__text-area {
   flex: 1 1 auto;
   display: flex;