diff --git a/website_sale_aplicoop/controllers/website_sale.py b/website_sale_aplicoop/controllers/website_sale.py
index 5254423..f0a55a6 100644
--- a/website_sale_aplicoop/controllers/website_sale.py
+++ b/website_sale_aplicoop/controllers/website_sale.py
@@ -890,13 +890,6 @@ class AplicoopWebsiteSale(WebsiteSale):
             product_display_info,
             filtered_products_dict,
         ) = self._prepare_products_maps(products, pricelist)
-        # Whether the tags row needs to be reserved on every card: if nothing in
-        # this batch has a published tag, the row is skipped entirely instead of
-        # leaving an empty aria-hidden gap on every product (see product-card.css).
-        any_product_has_tags = any(
-            v["published_tags"] for v in filtered_products_dict.values()
-        )
-
         # Inject draft sale demand context so ribbons/is_out_of_stock use forecasted net qty
         products, product_max_qty = self._prepare_draft_stock_data(products)
 
@@ -941,7 +934,6 @@ class AplicoopWebsiteSale(WebsiteSale):
                 "placed_order_url": placed_order_url,
                 "products": products,
                 "filtered_product_tags": filtered_products_dict,
-                "any_product_has_tags": any_product_has_tags,
                 "cart": cart,
                 "available_categories": available_categories,
                 "category_hierarchy": category_hierarchy,
@@ -1053,11 +1045,6 @@ class AplicoopWebsiteSale(WebsiteSale):
                 "product": product,
                 "published_tags": published_tags,
             }
-        # See eskaera_shop for why this decides whether to reserve the tags row.
-        any_product_has_tags = any(
-            v["published_tags"] for v in filtered_products_dict.values()
-        )
-
         product_display_info = {}
         for product in products_page:
             product_display_info[product.id] = self._prepare_product_display_info(
@@ -1075,7 +1062,6 @@ class AplicoopWebsiteSale(WebsiteSale):
                 "group_order": group_order,
                 "products": products_page,
                 "filtered_product_tags": filtered_products_dict,
-                "any_product_has_tags": any_product_has_tags,
                 "product_supplier_info": product_supplier_info,
                 "product_price_info": product_price_info,
                 "product_display_info": product_display_info,
@@ -1185,11 +1171,6 @@ class AplicoopWebsiteSale(WebsiteSale):
             }
             for product in products_page
         }
-        # See eskaera_shop for why this decides whether to reserve the tags row.
-        any_product_has_tags = any(
-            v["published_tags"] for v in filtered_products_dict.values()
-        )
-
         # Inject draft demand context for ribbons/stock flags
         products_page, product_max_qty = self._prepare_draft_stock_data(products_page)
 
@@ -1203,7 +1184,6 @@ class AplicoopWebsiteSale(WebsiteSale):
                     "group_order": group_order,
                     "products": products_page,
                     "filtered_product_tags": filtered_products_dict,
-                    "any_product_has_tags": any_product_has_tags,
                     "product_supplier_info": product_supplier_info,
                     "product_price_info": product_price_info,
                     "product_display_info": product_display_info,
diff --git a/website_sale_aplicoop/static/src/css/base/variables.css b/website_sale_aplicoop/static/src/css/base/variables.css
index 4073997..009f0ce 100644
--- a/website_sale_aplicoop/static/src/css/base/variables.css
+++ b/website_sale_aplicoop/static/src/css/base/variables.css
@@ -152,7 +152,6 @@
 
     /* ========== PRODUCT CARD MEDIA ========== */
     --ac-card-media-ratio: 4 / 3;
-    --ac-card-media-height: clamp(5rem, 4rem + 6vw, 8.5rem);
 
     /* ========== Z-INDEX ========== */
     --ac-z-dropdown: 1000;
diff --git a/website_sale_aplicoop/static/src/css/components/product-card.css b/website_sale_aplicoop/static/src/css/components/product-card.css
index 852270b..6c648aa 100644
--- a/website_sale_aplicoop/static/src/css/components/product-card.css
+++ b/website_sale_aplicoop/static/src/css/components/product-card.css
@@ -6,13 +6,23 @@
  * Markup (eskaera_shop_products):
  *   .product-card-wrapper.product-card
  *     └ .card
- *         ├ img.product-img-cover | .product-img-placeholder
- *         ├ .card-body  (title, tags, supplier, origin, price)
+ *         ├ .product-media
+ *         │    ├ img.product-img-cover | .product-img-placeholder
+ *         │    └ button.product-info-toggle  (only when the product has a
+ *         │         tag, a supplier or an origin to show)
+ *         ├ .card-body  (title, .product-info-panel, price)
  *         └ form.add-to-cart-form  → components/quantity-control.css
  *
  * The wrapper carries the chrome (border, radius, elevation); the inner
  * Bootstrap .card is neutralised through its own custom properties so the two
  * boxes stop drawing a double frame.
+ *
+ * Tags/supplier/origin used to sit unconditionally in the card body so every
+ * card's price row lined up regardless of which fields a product had. The
+ * compact grid has no room for that: they now live in .product-info-panel,
+ * collapsed by default and revealed by .product-info-toggle (see
+ * website_sale.js for the click handler, delegated on #products-grid same as
+ * the quantity stepper).
  */
 
 .product-card {
@@ -41,14 +51,23 @@
 
 /* ---------- Media ---------- */
 
+.product-media {
+    position: relative;
+    flex-shrink: 0;
+}
+
 .product-card .product-image,
 .product-img-cover,
 .product-img-fixed,
 .product-img-placeholder {
     display: block;
-    flex-shrink: 0;
     width: 100%;
-    height: var(--ac-card-media-height);
+    /* 4:3, not square: a square photo ate too much vertical space on a
+       two-up mobile grid. aspect-ratio keeps it fluid across card widths
+       instead of a fixed height that over- or under-crops depending on how
+       many columns fit. */
+    aspect-ratio: var(--ac-card-media-ratio);
+    height: auto;
     border-radius: var(--ac-radius-md) var(--ac-radius-md) 0 0;
     object-fit: cover;
     background-color: var(--ac-surface-muted);
@@ -61,6 +80,68 @@
     color: var(--ac-text-muted);
 }
 
+/* ---------- Info toggle & panel ---------- */
+
+.product-info-toggle {
+    position: absolute;
+    top: var(--ac-space-2xs);
+    right: var(--ac-space-2xs);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.375rem;
+    height: 1.375rem;
+    padding: 0;
+    border: 1px solid var(--ac-border-strong);
+    border-radius: var(--ac-radius-pill);
+    font-size: var(--ac-text-2xs);
+    color: var(--ac-text-secondary);
+    background-color: rgb(255 255 255 / 90%);
+    cursor: pointer;
+    transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);
+}
+
+.product-info-toggle[aria-expanded="true"] {
+    color: var(--ac-text-on-fill);
+    background-color: var(--ac-color-primary-strong);
+    border-color: var(--ac-color-primary-strong);
+}
+
+.product-info-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ac-space-3xs);
+    margin-bottom: var(--ac-space-3xs);
+    padding: var(--ac-space-2xs);
+    border: 1px solid var(--ac-border);
+    border-radius: var(--ac-radius-sm);
+    background-color: var(--ac-surface-sunken);
+}
+
+.product-info-panel[hidden] {
+    display: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .product-info-toggle:hover {
+        color: var(--ac-text-on-fill);
+        background-color: var(--ac-color-primary);
+        border-color: var(--ac-color-primary);
+    }
+}
+
+.product-info-toggle:focus-visible {
+    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
+    outline-offset: var(--ac-focus-ring-offset);
+}
+
+@media (pointer: coarse) {
+    .product-info-toggle {
+        width: var(--ac-touch-target);
+        height: var(--ac-touch-target);
+    }
+}
+
 /* ---------- Body ---------- */
 
 .product-card .card-body {
@@ -107,10 +188,6 @@
     align-content: center;
     gap: var(--ac-space-3xs);
     justify-content: center;
-    /* Reserved even when a product has no tags (rendered empty, aria-hidden —
-       see eskaera_shop_products), so the supplier/origin/price rows below line
-       up across every card in the grid row. Matches one row of .badge-km. */
-    min-height: calc(var(--ac-text-2xs) * var(--ac-leading-tight) + 2 * var(--ac-space-3xs) + 2px);
     margin: 0;
     padding: 0;
 }
@@ -131,14 +208,12 @@
 
 /* ---------- Supplier & origin ---------- */
 
-/* Both rows are reserved even when empty (rendered aria-hidden — see
-   eskaera_shop_products) and clamped to a fixed line count, so the price row
-   below lines up across every card in the grid row regardless of which
-   products actually have a supplier name or an origin. */
+/* Only ever rendered inside .product-info-panel now (see
+   eskaera_shop_products), so there is no longer a cross-card alignment to
+   protect — no reserved space, no forced line clamp. */
 .product-card .product-supplier,
 .product-card .product-origin {
     margin: 0;
-    overflow: hidden;
     font-size: var(--ac-text-xs);
     font-weight: var(--ac-weight-normal);
     text-align: center;
@@ -146,17 +221,11 @@
 }
 
 .product-card .product-supplier {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    min-height: calc(2em * var(--ac-leading-tight));
     overflow-wrap: break-word;
 }
 
 .product-card .product-origin {
-    min-height: calc(1em * var(--ac-leading-tight));
-    white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
 }
 
diff --git a/website_sale_aplicoop/static/src/css/sections/products-grid.css b/website_sale_aplicoop/static/src/css/sections/products-grid.css
index 5151ca3..d994649 100644
--- a/website_sale_aplicoop/static/src/css/sections/products-grid.css
+++ b/website_sale_aplicoop/static/src/css/sections/products-grid.css
@@ -5,17 +5,18 @@
  *
  * The grid used to pin an exact column count at seven breakpoints (1 → 6). It
  * now derives the count from the space available, which keeps the card width
- * stable no matter how wide the sidebar or the container is. The single query
- * left is the deliberate design decision: one card per row on phones, where a
- * two-up grid would shrink names and controls below comfortable size.
+ * stable no matter how wide the sidebar or the container is.
  *
- * 9rem is the card's minimum width; at the widest container (1320px minus the
- * category sidebar) it still resolves to six columns, as before.
+ * Two columns from the smallest phones: with the compact "cromo" card (4:3
+ * photo, no inline tags/supplier/origin — see product-card.css) a single
+ * full-width column read as a tall row rather than a browsable grid. 9rem is
+ * the card's minimum width from 576px up; at the widest container (1320px
+ * minus the category sidebar) it still resolves to six columns, as before.
  */
 
 .products-grid {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
     gap: var(--ac-space-md);
     margin-bottom: var(--ac-space-xl);
 }
diff --git a/website_sale_aplicoop/static/src/js/website_sale.js b/website_sale_aplicoop/static/src/js/website_sale.js
index 6926f18..10eb073 100644
--- a/website_sale_aplicoop/static/src/js/website_sale.js
+++ b/website_sale_aplicoop/static/src/js/website_sale.js
@@ -1246,6 +1246,23 @@
                 }
             });
 
+            // Product info toggle: shows/hides the origin/supplier/tags panel
+            // that the compact card no longer displays inline (via event
+            // delegation, same reasoning as the stepper above).
+            productsGrid.addEventListener("click", function (e) {
+                var infoBtn = e.target.closest(".product-info-toggle");
+                if (!infoBtn) return;
+
+                e.preventDefault();
+                var panelId = infoBtn.getAttribute("aria-controls");
+                var panel = panelId ? document.getElementById(panelId) : null;
+                if (!panel) return;
+
+                var isOpen = infoBtn.getAttribute("aria-expanded") === "true";
+                infoBtn.setAttribute("aria-expanded", isOpen ? "false" : "true");
+                panel.hidden = isOpen;
+            });
+
             // Add to cart button (via event delegation on grid)
             productsGrid.addEventListener("click", handleAddToCart);
 
diff --git a/website_sale_aplicoop/views/website_templates.xml b/website_sale_aplicoop/views/website_templates.xml
index e92e9de..0b89f4a 100644
--- a/website_sale_aplicoop/views/website_templates.xml
+++ b/website_sale_aplicoop/views/website_templates.xml
@@ -274,56 +274,15 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="mb-3 eskaera-filters" id="realtimeSearch-filters">
-                            <div class="row g-2">
-                                <div class="col-md-7">
-                                    <div class="search-input-wrapper">
-                                        <label class="visually-hidden" for="realtime-search-input">Search products</label>
-                                        <input type="search" id="realtime-search-input" class="form-control eskaera-search-input" placeholder="Search products..." autocomplete="off" aria-describedby="realtime-search-status" />
-                                        <button type="button" id="clear-search-btn" class="search-clear-btn" aria-label="Clear search" title="Clear search">
-                                            ×
-                                        </button>
-                                    </div>
-                                    <p id="realtime-search-status" class="visually-hidden" aria-live="polite" aria-atomic="true" />
-                                </div>
-                                <div class="col-md-5">
-                                    <select name="category" id="realtime-category-select" class="form-select">
-                                        <option value="">Browse Product Categories</option>
-                                        <t t-call="website_sale_aplicoop.category_hierarchy_options">
-                                            <t t-set="categories" t-value="category_hierarchy" />
-                                            <t t-set="depth" t-value="0" />
-                                        </t>
-                                    </select>
-                                </div>
-                            </div>
-                            <t t-if="available_tags">
-                                <div class="row mt-3">
-                                    <div class="col-12">
-                                        <div id="tag-filter-container" class="tag-filter-badges">
-                                            <t t-foreach="available_tags" t-as="tag">
-                                                <!-- Toggle buttons: aria-pressed carries the filter
-                                                     state, which realtime_search.js keeps in sync
-                                                     with the .is-selected / .is-dimmed classes.
-                                                     The record colour rides in a custom property so
-                                                     the stylesheet keeps owning the badge. -->
-                                                <t t-if="tag['color']">
-                                                    <button type="button" class="badge tag-filter-badge" t-att-data-tag-id="tag['id']" t-att-data-tag-name="tag['name']" t-att-data-tag-color="tag['color']" t-attf-style="--ac-tag-color: {{ tag['color'] }};" data-toggle="tag-filter" aria-pressed="false">
-                                                        <span t-esc="tag['name']" /> (<span class="tag-count" t-esc="tag['count']" />)
-                                                    </button>
-                                                </t>
-                                                <t t-else="">
-                                                    <button type="button" class="badge tag-filter-badge tag-use-theme-color" t-att-data-tag-id="tag['id']" t-att-data-tag-name="tag['name']" data-tag-color="" data-toggle="tag-filter" aria-pressed="false">
-                                                        <span t-esc="tag['name']" /> (<span class="tag-count" t-esc="tag['count']" />)
-                                                    </button>
-                                                </t>
-                                            </t>
-                                        </div>
-                                    </div>
-                                </div>
-                            </t>
-                        </div>
-                        <div class="row g-2">
-                            <div class="col-lg-3 mb-4 mb-lg-0">
+                        <!-- One flex row for cart/tags/category/search/products: Bootstrap's
+                             order utilities need every reordered item to be a sibling of the
+                             same flex container, so the four blocks that used to live in two
+                             separate rows (filters above, cart+products below) are now columns
+                             here. Unprefixed order-* puts the cart first on mobile (right below
+                             the header, above the filters); order-lg-* restores the desktop
+                             layout: search+category as one row, then tags, then cart+products. -->
+                        <div class="row g-2 eskaera-filters" id="realtimeSearch-filters">
+                            <div class="col-12 col-lg-3 order-1 order-lg-4 mb-4 mb-lg-0">
                                 <div class="card sticky-top cart-sticky-position" aria-label="Cart Summary">
                                     <div class="card-header d-flex justify-content-between align-items-center gap-1">
                                         <h6 class="mb-0 cart-title-sm" id="cart-title">My Cart</h6>
@@ -362,7 +321,49 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-lg-9">
+                            <t t-if="available_tags">
+                                <div class="col-12 order-2 order-lg-3">
+                                    <div id="tag-filter-container" class="tag-filter-badges">
+                                        <t t-foreach="available_tags" t-as="tag">
+                                            <!-- Toggle buttons: aria-pressed carries the filter
+                                                 state, which realtime_search.js keeps in sync
+                                                 with the .is-selected / .is-dimmed classes.
+                                                 The record colour rides in a custom property so
+                                                 the stylesheet keeps owning the badge. -->
+                                            <t t-if="tag['color']">
+                                                <button type="button" class="badge tag-filter-badge" t-att-data-tag-id="tag['id']" t-att-data-tag-name="tag['name']" t-att-data-tag-color="tag['color']" t-attf-style="--ac-tag-color: {{ tag['color'] }};" data-toggle="tag-filter" aria-pressed="false">
+                                                    <span t-esc="tag['name']" /> (<span class="tag-count" t-esc="tag['count']" />)
+                                                </button>
+                                            </t>
+                                            <t t-else="">
+                                                <button type="button" class="badge tag-filter-badge tag-use-theme-color" t-att-data-tag-id="tag['id']" t-att-data-tag-name="tag['name']" data-tag-color="" data-toggle="tag-filter" aria-pressed="false">
+                                                    <span t-esc="tag['name']" /> (<span class="tag-count" t-esc="tag['count']" />)
+                                                </button>
+                                            </t>
+                                        </t>
+                                    </div>
+                                </div>
+                            </t>
+                            <div class="col-12 col-lg-5 order-3 order-lg-2">
+                                <select name="category" id="realtime-category-select" class="form-select">
+                                    <option value="">Browse Product Categories</option>
+                                    <t t-call="website_sale_aplicoop.category_hierarchy_options">
+                                        <t t-set="categories" t-value="category_hierarchy" />
+                                        <t t-set="depth" t-value="0" />
+                                    </t>
+                                </select>
+                            </div>
+                            <div class="col-12 col-lg-7 order-4 order-lg-1">
+                                <div class="search-input-wrapper">
+                                    <label class="visually-hidden" for="realtime-search-input">Search products</label>
+                                    <input type="search" id="realtime-search-input" class="form-control eskaera-search-input" placeholder="Search products..." autocomplete="off" aria-describedby="realtime-search-status" />
+                                    <button type="button" id="clear-search-btn" class="search-clear-btn" aria-label="Clear search" title="Clear search">
+                                        ×
+                                    </button>
+                                </div>
+                                <p id="realtime-search-status" class="visually-hidden" aria-live="polite" aria-atomic="true" />
+                            </div>
+                            <div class="col-12 col-lg-9 order-5 order-lg-5">
                                 <div class="oe_structure oe_empty" data-name="Before Products Filter" />
                                 <t t-if="products">
                                     <div class="products-grid" id="products-grid">
@@ -763,16 +764,31 @@
         </template>
         <template id="eskaera_shop_products" name="Eskaera Shop Products">
             <t t-foreach="products" t-as="product">
+                <t t-set="has_tags" t-value="bool(product.product_tag_ids)" />
+                <t t-set="supplier_text" t-value="product_supplier_info.get(product.id)" />
+                <t t-set="has_origin" t-value="bool(product.origin_text)" />
+                <t t-set="has_info" t-value="has_tags or bool(supplier_text) or has_origin" />
                 <div class="product-card-wrapper product-card" t-attf-data-product-name="{{ product.name }}" t-attf-data-category-id="{{ product.categ_id.id if product.categ_id else '' }}" t-attf-data-product-tags="{{ ','.join(str(t.id) for t in product.product_tag_ids) if product.product_tag_ids else '' }}">
                     <div class="card h-100">
-                        <t t-if="product.image_128">
-                            <img t-attf-src="data:image/png;base64,{{ product.image_128.decode() }}" class="card-img-top product-img-cover" t-attf-alt="{{ product.name }}" />
-                        </t>
-                        <t t-else="">
-                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center product-img-placeholder">
-                                <i class="fa fa-image fa-3x text-muted" aria-hidden="true" />
-                            </div>
-                        </t>
+                        <div class="product-media">
+                            <t t-if="product.image_128">
+                                <img t-attf-src="data:image/png;base64,{{ product.image_128.decode() }}" class="card-img-top product-img-cover" t-attf-alt="{{ product.name }}" />
+                            </t>
+                            <t t-else="">
+                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center product-img-placeholder">
+                                    <i class="fa fa-image fa-3x text-muted" aria-hidden="true" />
+                                </div>
+                            </t>
+                            <t t-if="has_info">
+                                <!-- Origin/supplier/tags used to sit unconditionally in the card
+                                     body; on the compact "cromo" tile there is no room to show
+                                     them inline, so they move behind this toggle (see
+                                     .product-info-panel below). -->
+                                <button type="button" class="product-info-toggle" aria-expanded="false" t-attf-aria-controls="product-info-{{ product.id }}" aria-label="Show origin, supplier and tags" title="Origin, supplier and tags">
+                                    <i class="fa fa-info" aria-hidden="true" t-translation="off" />
+                                </button>
+                            </t>
+                        </div>
                         <t t-if="product.dynamic_ribbon_id">
                             <t t-set="ribbon" t-value="product.dynamic_ribbon_id" />
                             <span t-attf-class="o_ribbon {{ ribbon._get_position_class() }} z-1" t-attf-style="color: {{ ribbon.text_color }}; background-color: {{ ribbon.bg_color }};" t-esc="ribbon.name" />
@@ -783,53 +799,36 @@
                         </t>
                         <div class="card-body d-flex flex-column">
                             <h6 class="card-title" t-esc="product.name" />
-                            <!-- Tags/supplier/origin always occupy their slot (empty and
-                                 aria-hidden when the product has no value) so that the price
-                                 row below lines up across every card in the grid row,
-                                 regardless of which optional fields a given product has. The
-                                 tags row itself is only reserved when at least one product in
-                                 this batch actually has a tag (any_product_has_tags, computed
-                                 controller-side) — otherwise it would add a permanent empty
-                                 gap to every card for a feature nobody in the list uses. -->
-                            <t t-if="any_product_has_tags">
-                                <t t-if="product.product_tag_ids">
-                                    <div class="product-tags">
-                                        <t t-foreach="filtered_product_tags.get(product.id, {}).get('published_tags', product.product_tag_ids)" t-as="tag">
-                                            <t t-if="tag.color">
-                                                <!-- Per-record colour: passed as a custom property so the
-                                                     stylesheet keeps owning the badge, no !important needed. -->
-                                                <span class="badge badge-km" t-attf-style="--ac-tag-color: {{ tag.color }};" t-esc="tag.name" />
+                            <t t-if="has_info">
+                                <div t-attf-id="product-info-{{ product.id }}" class="product-info-panel" hidden="hidden">
+                                    <t t-if="has_tags">
+                                        <div class="product-tags">
+                                            <t t-foreach="filtered_product_tags.get(product.id, {}).get('published_tags', product.product_tag_ids)" t-as="tag">
+                                                <t t-if="tag.color">
+                                                    <!-- Per-record colour: passed as a custom property so the
+                                                         stylesheet keeps owning the badge, no !important needed. -->
+                                                    <span class="badge badge-km" t-attf-style="--ac-tag-color: {{ tag.color }};" t-esc="tag.name" />
+                                                </t>
+                                                <t t-else="">
+                                                    <span class="badge badge-km tag-use-theme-color" t-esc="tag.name" />
+                                                </t>
                                             </t>
-                                            <t t-else="">
-                                                <span class="badge badge-km tag-use-theme-color" t-esc="tag.name" />
-                                            </t>
-                                        </t>
-                                    </div>
-                                </t>
-                                <t t-else="">
-                                    <div class="product-tags" aria-hidden="true" />
-                                </t>
-                            </t>
-                            <t t-if="product_supplier_info.get(product.id)">
-                                <p class="product-supplier">
-                                    <small>
-                                        <t t-esc="product_supplier_info[product.id]" />
-                                    </small>
-                                </p>
-                            </t>
-                            <t t-else="">
-                                <p class="product-supplier" aria-hidden="true" />
-                            </t>
-                            <t t-if="product.origin_text">
-                                <p class="product-origin">
-                                    <small>
-                                        <i class="fa fa-map-marker" aria-hidden="true" />
-                                        <t t-out="product.origin_text" />
-                                    </small>
-                                </p>
-                            </t>
-                            <t t-else="">
-                                <p class="product-origin" aria-hidden="true" />
+                                        </div>
+                                    </t>
+                                    <t t-if="supplier_text">
+                                        <p class="product-supplier">
+                                            <small t-esc="supplier_text" />
+                                        </p>
+                                    </t>
+                                    <t t-if="has_origin">
+                                        <p class="product-origin">
+                                            <small>
+                                                <i class="fa fa-map-marker" aria-hidden="true" />
+                                                <t t-out="product.origin_text" />
+                                            </small>
+                                        </p>
+                                    </t>
+                                </div>
                             </t>
                             <t t-set="price_info" t-value="product_price_info.get(product.id, {})" />
                             <t t-set="display_price" t-value="product_display_info.get(product.id, {}).get('display_price', 0.0)" />