diff --git a/.claude/skills/odoo-javascript/SKILL.md b/.claude/skills/odoo-javascript/SKILL.md
index 7afdccb..f9e8489 100644
--- a/.claude/skills/odoo-javascript/SKILL.md
+++ b/.claude/skills/odoo-javascript/SKILL.md
@@ -10,7 +10,7 @@ metadata:
 ## Style and conventions
 - ES6+ (`let`/`const`, arrow functions). Linting with ESLint (`.eslintrc.js` at root).
 - Odoo pattern: AMD modules (`odoo.define`).
-- **No business logic in JS (pricing rules, stock/availability decisions, permission checks)** — these belong in Python. JS handles only rendering, DOM events, and calling Python endpoints via `ajax.jsonRpc`.
+- **No business logic in JS, only UI and events.** Business logic lives in Python.
 - Comments to explain hacks or workarounds.
 
 ## Key patterns
diff --git a/.claude/skills/odoo-web-design/SKILL.md b/.claude/skills/odoo-web-design/SKILL.md
deleted file mode 100644
index 25d3c68..0000000
--- a/.claude/skills/odoo-web-design/SKILL.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-name: odoo-web-design
-description: Professional finish for the Odoo frontend of this repo — visual polish, responsive layout and WCAG accessibility across CSS, QWeb/HTML and JS. Use when styling or reviewing website/portal pages (website_sale_aplicoop), adding UI components, or fixing responsive/a11y/design-consistency issues.
-metadata:
-    type: reference
----
-
-# Web design & finish (Odoo 18 frontend)
-
-Covers the three layers together: `static/src/css/`, `static/src/js/`, and the QWeb templates in
-`views/*.xml`. For language-level conventions see `odoo-qweb-html`, `odoo-javascript`,
-`odoo-xml-views`; this skill is about the **finish**: does it look designed, does it work at 320 px,
-does it work without a mouse.
-
-## Inherited non-negotiables
-
-- No logic in QWeb — prepare everything in the controller.
-- No business logic in JS — UI and events only.
-- **No inline `style="..."`** in templates. A style needs a class, and the class needs a token.
-- Every user-visible string is translatable (see §4).
-
-## 1. Work order
-
-Never start by editing a component. Always:
-
-1. **Audit** with the commands in §7. Write down what is inconsistent before touching anything.
-2. **Tokens first** (`base/variables.css`). Every value a component needs must already exist as a token.
-3. **Component by component**, one file each, media queries co-located at the bottom of that file.
-4. **Accessibility pass** per template, top to bottom.
-5. **Verify** — lint, contrast, keyboard-only, 320 px, 200 % zoom.
-
-Doing 3 before 2 is how a codebase ends up with 61 `!important` and three shades of the same blue.
-
-## 2. Design tokens
-
-Odoo 18 ships Bootstrap 5.3 with `$variable-prefix: ''`
-(`/media/snt/data/odoo/ocb/addons/web/static/src/scss/bootstrap_overridden.scss:51`), so Bootstrap's
-root custom properties are emitted **unprefixed** into `web.assets_frontend` (via
-`import_bootstrap.scss` → `@import "root"`). Available in plain CSS, no SCSS needed:
-
-```
---primary --secondary --success --danger --warning --info --light --dark
---body-color --body-bg --emphasis-color --secondary-bg --tertiary-bg --border-color
---border-radius --border-radius-sm --border-radius-lg --border-radius-xl --border-radius-pill
---link-color --link-hover-color --focus-ring-color --focus-ring-width
---box-shadow --box-shadow-sm --box-shadow-lg --font-sans-serif --gray-100 … --gray-900
-```
-
-Rules:
-
-- **Alias, don't copy.** `--ac-color-primary: var(--primary, #007bff);` keeps the website theme
-  editor in control of the palette. A hardcoded brand hex breaks theming silently.
-- **Hex literals live only in `base/variables.css`.** A hex anywhere else is a defect.
-- **Prefix new tokens** (`--ac-…`, aplicoop). Bare names like `--primary-color` sit in Bootstrap's
-  unprefixed namespace and will collide as Odoo adds tokens.
-- **Never redefine a token inside a media query** to shrink it — use `clamp()` so it scales
-  continuously instead of jumping at one width.
-- Space and radius come from the scale, never from a typed-in number. If you need a value the scale
-  doesn't have, the scale is wrong — fix the scale.
-
-## 3. Responsive
-
-- **Mobile-first, `min-width` only.** Bootstrap 5 breakpoints exclusively: **576 / 768 / 992 / 1200 /
-  1400**. No 480/720/1600 one-offs — a private breakpoint is a design decision nobody else knows about.
-- **One range per rule.** Pairing `min-width` and `max-width` to carve a band is almost always a
-  symptom of desktop-first thinking leaking in.
-- **Media queries belong with their component**, at the bottom of its file. A central
-  `responsive.css` drifts out of sync with the components it overrides and forces `!important`.
-  Don't add to it; empty it as you touch each component.
-  If a rule in `responsive.css` spans multiple components or has no clear owner, move it to the
-  relevant layout partial (e.g. `layout/grid.css`) rather than duplicating it per component; note
-  any such moves in the audit output.
-- **Prefer intrinsic layout to breakpoints**: `repeat(auto-fill, minmax(min(100%, 16rem), 1fr))`,
-  `clamp()`, `flex-wrap`. Most grids need zero media queries.
-- `rem` for everything; `px` only for hairlines, borders and shadow offsets.
-- Touch targets: **24×24 px is the AA floor** (WCAG 2.2 §2.5.8); **44×44 px is §2.5.5, level AAA**,
-  and the size a thumb actually needs — apply it under `@media (pointer: coarse)`. Quantity steppers
-  and icon buttons are the usual offenders.
-- Must survive **320 px wide** and **200 % zoom** with no horizontal scroll.
-
-Details and recipes: `references/responsive.md`.
-
-## 4. Accessibility — WCAG 2.2 AA baseline
-
-- **Semantics before ARIA**: `<button>`, `<nav>`, `<ul>`, `<label for>`. ARIA only when no element
-  expresses the meaning. A `<div onclick>` is never acceptable.
-- **Contrast**: 4.5:1 body text, 3:1 for ≥24 px (or bold ≥19 px), 3:1 for form-control borders,
-  icon-only buttons and focus rings.
-- **Focus**: never `outline: none` without a replacement. Style `:focus-visible`, not `:focus` — the
-  latter also fires on mouse click and gets removed out of frustration.
-- Every input has a real `<label>`. A placeholder is not a label.
-- Icon-only control → translatable `aria-label`, or `.visually-hidden` text (Bootstrap ships the class).
-- Dynamic updates (cart total, quantity, result count) → `aria-live="polite"` region.
-- Images: meaningful `alt`, or `alt=""` when decorative. Never omit the attribute.
-- Status is never conveyed by colour alone — pair it with text or an icon.
-- Every animation you add needs a `@media (prefers-reduced-motion: reduce)` escape.
-
-**Translatable QWeb attributes** (auto-extracted, `odoo/tools/translate.py:163`), plus their
-`t-attf-` forms:
-
-```
-string  help  placeholder  alt  title  label  data-tooltip  confirm
-aria-label  aria-keyshortcuts  aria-placeholder  aria-roledescription  aria-valuetext
-```
-
-`aria-description` is **not** translated — use `aria-label` or visually-hidden text instead.
-Strings injected from JS go through `window.i18nManager.get(key)` (served by `/eskaera/i18n`), with
-the key added server-side — never a hardcoded literal, including in live-region announcements.
-
-Per-component patterns: `references/accessibility.md`.
-
-## 5. JS for finish (UI only)
-
-- **Delegated events** — content is lazy-loaded and infinite-scrolled, direct listeners die.
-- After injecting nodes: move or restore focus deliberately, announce the new count in the live
-  region, and set `aria-busy` on the container while fetching.
-- Check `matchMedia("(prefers-reduced-motion: reduce)")` before animating or smooth-scrolling.
-- Toggle **classes**, don't write `element.style.*` — inline styles from JS are the same defect as
-  inline styles in templates, just later.
-- Debounce search input ≥ 200 ms and announce "N results" politely.
-- Batch DOM reads and writes; never read `offsetHeight` inside a loop that also writes.
-
-## 6. Asset delivery
-
-`website_sale.css` pulls its 17 partials with `@import`. Odoo rewrites those to absolute URLs and
-hoists them to the top of the bundle (`odoo/addons/base/models/assetsbundle.py:909` and `:525`), so
-they ship as ~17 extra render-blocking requests **outside** the minified bundle. For a production
-finish, prefer listing each file in the manifest's `web.assets_frontend` (order: variables →
-utilities → layout → components → sections). Only rename them to `.scss` if the maintainer
-explicitly requests SCSS compilation so Odoo inlines the imports at compile time.
-
-## 7. Audit & verify
-
-If `/media/snt/data/addons-cm/website_sale_aplicoop` does not exist, run the audit commands from the
-repository root of the current workspace instead, and report which path was used.
-
-```bash
-cd /media/snt/data/addons-cm/website_sale_aplicoop
-
-# Breakpoint sprawl — should only ever list 576/768/992/1200/1400, all min-width
-grep -rho "@media[^{]*" static/src/css | sort | uniq -c | sort -rn
-
-# Hardcoded colours outside the token file (expect: none)
-grep -rn "#[0-9a-fA-F]\{3,8\}\b" static/src/css --include="*.css" | grep -v "base/variables.css"
-
-# Specificity debt
-grep -rc "!important" static/src/css/*/*.css | grep -v ':0'
-
-# Focus handling: :focus-visible should dominate, outline:none must be paired with a replacement
-grep -rn ":focus-visible\|outline: *none\|outline: *0" static/src/css
-
-# Motion safety (expect at least one per animating component)
-grep -rn "prefers-reduced-motion" static/src/css
-
-# Inline styles in templates (expect: none)
-grep -rn 'style="' views/*.xml
-
-# Images without alt
-grep -o "<img[^>]*" views/*.xml | grep -v "alt="
-
-# Interactive divs/spans (expect: none)
-grep -rn "<div[^>]*t-on-click\|<span[^>]*t-on-click\|<div[^>]*onclick" views/*.xml
-```
-
-Then, always:
-
-```bash
-pre-commit run --all-files          # prettier (width 100, indent 4) over css/js/xml + eslint
-docker-compose up -d                # http://localhost:8070 — check at 320/768/1280 and 200% zoom
-```
-
-Manual passes that no grep replaces: **Tab through the whole page** (visible focus everywhere, order
-matches visual order, no trap), and check contrast on the actual rendered colours.
-
-## 8. References
-
-- `references/accessibility.md` — WCAG AA patterns as QWeb snippets, per component.
-- `references/responsive.md` — breakpoints, intrinsic layout, images, test matrix.
-- `references/css-architecture.md` — file layout, naming, specificity, killing `!important`.
-- `references/finish-checklist.md` — the polish pass: states, rhythm, empty/loading/error.
-
-Repo docs: `docs/QWEB_BEST_PRACTICES.md`, `docs/LAZY_LOADING.md`.
diff --git a/.claude/skills/odoo-web-design/references/accessibility.md b/.claude/skills/odoo-web-design/references/accessibility.md
deleted file mode 100644
index e9af392..0000000
--- a/.claude/skills/odoo-web-design/references/accessibility.md
+++ /dev/null
@@ -1,245 +0,0 @@
-# Accessibility patterns (QWeb + CSS + JS)
-
-WCAG 2.2 AA. Snippets use this repo's conventions: 4-space indent, Bootstrap 5.3 utilities,
-translatable attributes, `window.i18nManager.get(key)` for JS strings.
-
-## Page skeleton
-
-```xml
-<t t-call="website.layout">
-    <a href="#eskaera-main" class="visually-hidden-focusable btn btn-primary m-2">
-        Skip to main content
-    </a>
-    <div id="wrap" class="eskaera-shop-page">
-        <main id="eskaera-main" tabindex="-1">
-            <h1 class="eskaera-page-title" t-esc="page_title"/>
-            ...
-        </main>
-    </div>
-</t>
-```
-
-- Exactly one `<h1>` per page; never skip heading levels to get a font size — that's what classes are for.
-- `<main>`, `<nav aria-label="...">`, `<aside>` instead of anonymous `<div>`s.
-- `tabindex="-1"` on the skip-link target so focus actually lands there.
-
-## Buttons vs links
-
-| Intent | Element |
-| --- | --- |
-| Navigates to a URL | `<a href="...">` |
-| Changes state on this page | `<button type="button">` |
-| Submits a form | `<button type="submit">` |
-
-Never `<div t-on-click>` / `<span onclick>` — no keyboard, no role, no focus.
-
-Icon-only:
-
-```xml
-<button type="button" class="btn btn-outline-secondary qty-decrease"
-        aria-label="Decrease quantity">
-    <i class="fa fa-minus" aria-hidden="true"/>
-</button>
-```
-
-`aria-label` is auto-translated; `aria-hidden` on the icon stops the screen reader announcing
-"minus icon" twice. Alternative when the label is long: visible `<span class="visually-hidden">`.
-
-## Quantity stepper (live-announced)
-
-```xml
-<div class="qty-control" role="group" aria-label="Quantity">
-    <button type="button" class="btn qty-decrease" aria-label="Decrease quantity">
-        <i class="fa fa-minus" aria-hidden="true"/>
-    </button>
-    <input type="number" class="form-control qty-input"
-           t-att-value="line.qty" min="0" step="1"
-           aria-label="Quantity" inputmode="numeric"/>
-    <button type="button" class="btn qty-increase" aria-label="Increase quantity">
-        <i class="fa fa-plus" aria-hidden="true"/>
-    </button>
-</div>
-<p class="visually-hidden" aria-live="polite" id="qty_status"/>
-```
-
-```js
-// after the server confirms the new qty
-const status = document.getElementById("qty_status");
-status.textContent = window.i18nManager.get("qty_updated_announcement");
-```
-
-Buttons must stay ≥ 24×24 px (WCAG 2.2 AA §2.5.8) everywhere, and ≥ 44×44 px under
-`@media (pointer: coarse)` — including at 320 px width.
-
-## Forms and errors
-
-```xml
-<div class="mb-3">
-    <label class="form-label" for="delivery_note">Delivery note</label>
-    <textarea id="delivery_note" name="delivery_note" class="form-control"
-              t-att-aria-invalid="'true' if errors.get('delivery_note') else None"
-              t-att-aria-describedby="'delivery_note_help delivery_note_error'
-                                      if errors.get('delivery_note')
-                                      else 'delivery_note_help'"/>
-    <small id="delivery_note_help" class="form-text">Optional, visible to the group manager.</small>
-    <p t-if="errors.get('delivery_note')" id="delivery_note_error"
-       class="invalid-feedback d-block" t-esc="errors['delivery_note']"/>
-</div>
-```
-
-- The `for`/`id` pair is mandatory; wrapping alone is not enough for every AT.
-- Error text is referenced by `aria-describedby`, and never colour-only — keep the message.
-- The error summary at the top of a failed form should be focused on submit
-  (`container.focus()` on a `tabindex="-1"` heading).
-- Required fields: `required` + a visible "(required)" or `*` with a legend explaining it.
-
-## Product card — one link, no duplicates
-
-```xml
-<article class="product-card">
-    <img class="product-card-img" t-att-src="product['image_url']"
-         t-att-alt="product['name']" loading="lazy" width="400" height="400"/>
-    <h3 class="product-card-title">
-        <a t-att-href="product['url']" class="stretched-link" t-esc="product['name']"/>
-    </h3>
-    <p class="product-card-price">
-        <span class="visually-hidden">Price</span>
-        <span t-esc="product['price_formatted']"/>
-    </p>
-</article>
-```
-
-- `stretched-link` makes the whole card clickable with a **single** link in the a11y tree — do not
-  also wrap the image in an `<a>`, that produces two identical stops.
-- `width`/`height` reserve space (no layout shift); CSS `object-fit: cover` handles the ratio.
-- Decorative product placeholder → `alt=""`.
-
-## Filters as toggle buttons
-
-```xml
-<div class="tag-filter" role="group" aria-label="Filter by category">
-    <button t-foreach="categories" t-as="cat" t-key="cat['id']"
-            type="button" class="tag-filter-badge"
-            t-att-aria-pressed="'true' if cat['active'] else 'false'"
-            t-att-data-category-id="cat['id']">
-        <span t-esc="cat['name']"/>
-    </button>
-</div>
-```
-
-JS flips `aria-pressed` together with the active class — the class alone announces nothing.
-If the filters are a true multi-select set, `<fieldset><legend>` + checkboxes is better still.
-
-## Search with results announcement
-
-```xml
-<label class="visually-hidden" for="product_search">Search products</label>
-<input id="product_search" type="search" class="form-control"
-       placeholder="Search products…" autocomplete="off"
-       aria-describedby="search_results_count"/>
-<p id="search_results_count" class="visually-hidden" aria-live="polite" aria-atomic="true"/>
-```
-
-Debounce ≥ 200 ms, then set the text once per settled query — announcing on every keystroke makes
-the page unusable with a screen reader.
-
-## Loading, infinite scroll, empty states
-
-```xml
-<div id="products_grid" class="products-grid" aria-busy="false">…</div>
-<p class="visually-hidden" aria-live="polite" id="load_status"/>
-<button type="button" id="load_more" class="btn btn-outline-primary">Load more products</button>
-```
-
-- Set `aria-busy="true"` on the grid while fetching, back to `false` when done.
-- Announce `"N more products loaded"` via `load_status`; don't move focus mid-scroll.
-- **Always keep a real "Load more" button** alongside scroll-triggered loading — infinite scroll
-  alone is unreachable by keyboard and traps users away from the footer.
-- Empty state is content, not a blank div: heading + explanation + the action that fixes it.
-
-## Modals
-
-Use Bootstrap's modal (focus trap, Esc, `aria-modal` come free) and give it a label:
-
-```xml
-<div class="modal fade" id="confirm_order_modal" tabindex="-1"
-     aria-labelledby="confirm_order_title" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2 class="modal-title fs-5" id="confirm_order_title">Confirm your order</h2>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
-            </div>
-            …
-        </div>
-    </div>
-</div>
-```
-
-Return focus to the trigger on close (Bootstrap does this if the trigger is a real button).
-
-## Order tables
-
-```xml
-<table class="table checkout-summary-table">
-    <caption class="visually-hidden">Order lines</caption>
-    <thead>
-        <tr>
-            <th scope="col">Product</th>
-            <th scope="col" class="text-end">Quantity</th>
-            <th scope="col" class="text-end">Subtotal</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr t-foreach="lines" t-as="line" t-key="line['id']">
-            <th scope="row" t-esc="line['name']"/>
-            <td class="text-end" t-esc="line['qty']"/>
-            <td class="text-end" t-esc="line['subtotal_formatted']"/>
-        </tr>
-    </tbody>
-</table>
-```
-
-Never use a table for layout, and never drop `<thead>`/`scope` when stacking to cards on mobile —
-restyle, don't restructure.
-
-## Focus and motion in CSS
-
-```css
-/* One ring, everywhere, on keyboard focus only. */
-.eskaera-page :focus-visible {
-    outline: 2px solid var(--ac-color-focus, var(--focus-ring-color, #0d6efd));
-    outline-offset: 2px;
-    border-radius: var(--ac-radius-sm);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-}
-```
-
-This is the one legitimate `!important` in the codebase — a user preference must beat every component.
-
-## Multilingual
-
-The addon runs es / eu / ca. `website.layout` sets `<html lang>`; when a string stays in another
-language inside a translated page (a supplier name, a product origin), mark it: `<span lang="eu">`.
-Never build a sentence by concatenating translated fragments — pass the whole string with `%s`
-placeholders so translators can reorder.
-
-## Verification
-
-1. **Keyboard only**: Tab through the page. Visible focus at every stop, order matches the visual
-   order, no trap, every action reachable, Esc closes overlays.
-2. **Zoom 200 %** and **320 px width**: no horizontal scroll, nothing clipped.
-3. **Contrast**: check rendered colours, including disabled states and placeholder text.
-4. **Screen reader** smoke test on the cart flow (Orca on Linux, NVDA on Windows).
-5. Lighthouse/axe in DevTools catches the mechanical half — it does not catch focus order,
-   announcement quality, or a label that lies.
diff --git a/.claude/skills/odoo-web-design/references/css-architecture.md b/.claude/skills/odoo-web-design/references/css-architecture.md
deleted file mode 100644
index 77b9a3d..0000000
--- a/.claude/skills/odoo-web-design/references/css-architecture.md
+++ /dev/null
@@ -1,163 +0,0 @@
-
-# CSS architecture
-
-## File layout
-
-```
-static/src/css/
-├── website_sale.css        # index only: @import list, no rules of its own
-├── base/
-│   ├── variables.css       # :root tokens — the ONLY file with hex literals
-│   └── utilities.css       # tiny single-purpose helpers, when Bootstrap lacks one
-├── layout/
-│   ├── pages.css           # page shells, containers, backgrounds
-│   └── header.css
-├── components/             # one file per reusable component
-│   ├── product-card.css
-│   ├── order-card.css
-│   ├── cart.css
-│   ├── buttons.css
-│   ├── quantity-control.css
-│   ├── forms.css
-│   ├── alerts.css
-│   └── tag-filter.css
-└── sections/               # page-specific composition only
-    ├── products-grid.css
-    ├── order-list.css
-    ├── checkout.css
-    └── info-cards.css
-```
-
-Rules of placement:
-
-- A rule that could appear on two pages is a **component**, never a section.
-- A **section** file may only position and space components — if it restyles a component's internals,
-  the component is missing a modifier.
-- Each component file owns its own media queries, at the bottom. There is no global responsive file
-  in a healthy tree; a legacy `layout/responsive.css` should shrink to zero as components are touched.
-- `website_sale.css` contains imports and comments only.
-
-## Naming
-
-Prefix everything with `eskaera-` (the product name already used for page-level classes). Unprefixed
-names like `.product-card`, `.cart-header`, `.qty-control` sit in the same namespace as Bootstrap,
-Odoo core and every other installed addon — that collision is what forces `!important` later.
-
-```
-.eskaera-product-card                 /* block */
-.eskaera-product-card__title          /* element */
-.eskaera-product-card--out-of-stock   /* modifier */
-.is-loading  .is-active  .has-error   /* state, always paired with a block class */
-```
-
-`js-` prefix for hooks JS queries, and never style a `js-` class — that way markup can be restyled
-without breaking behaviour, and behaviour can move without breaking styles.
-
-When renaming existing classes, do it component by component: template + CSS + JS selectors + tests
-in the same commit, then grep for the old name across `views/`, `static/src/`, and `README*`.
-
-## Specificity — how to stop writing `!important`
-
-Overriding Bootstrap globally (`.list-group-item { … }`, `.alert-warning { … }`) is a fight you win
-only with `!important`, and it leaks into every other addon. Scope the override under the page root
-instead: equal specificity plus one class always wins, no escape hatch needed.
-
-```css
-/* ❌ global override, needs !important to beat Bootstrap's own later rules */
-.list-group-item {
-    border-radius: 0 !important;
-}
-
-/* ✅ scoped: higher specificity, no !important, no leakage */
-.eskaera-checkout-page .list-group-item {
-    border-radius: 0;
-}
-```
-
-Other rules:
-
-- Max **3** levels of nesting in a selector. Deeper means the markup is doing the work the class
-  should do.
-- No ID selectors for styling; IDs are for anchors and `aria-*` references.
-- No element selectors outside `base/` (`div.product-card` locks the markup).
-- `!important` is allowed in exactly three places, each with a comment saying why: the
-  `prefers-reduced-motion` reset; a genuine **utility** that must beat whatever component it lands on
-  (`.hidden-product`, Bootstrap's own utility layer works this way); and a documented override of a
-  core rule you cannot scope. Anything else means the selector is wrong.
-
-## Ordering inside a file
-
-```css
-.eskaera-product-card {
-    /* 1. layout */
-    display: flex;
-    flex-direction: column;
-    /* 2. box */
-    padding: var(--ac-space-md);
-    border: 1px solid var(--ac-border-light);
-    border-radius: var(--ac-radius-lg);
-    /* 3. typography */
-    font-size: var(--ac-text-base);
-    color: var(--ac-text-primary);
-    /* 4. paint & motion */
-    background: var(--ac-surface);
-    box-shadow: var(--ac-shadow-sm);
-    transition: box-shadow var(--ac-transition-fast);
-}
-```
-
-Then, in order: `:hover` (inside `@media (hover: hover)`), `:focus-visible`, `:active`, `:disabled`,
-state classes, modifiers, media queries.
-
-## Tokens
-
-Full rules in `SKILL.md` §2. In short:
-
-```css
-:root {
-    /* alias Odoo/Bootstrap's unprefixed custom properties so theming still works */
-    --ac-color-primary: var(--primary, #007bff);
-    --ac-color-danger: var(--danger, #dc3545);
-    --ac-surface: var(--body-bg, #fff);
-    --ac-text-primary: var(--body-color, #1a202c);
-    --ac-border-light: var(--border-color, #e2e8f0);
-
-    /* own scales */
-    --ac-space-xs: 0.25rem;
-    --ac-space-sm: 0.5rem;
-    --ac-space-md: 1rem;
-    --ac-space-lg: 1.5rem;
-    --ac-space-xl: 2rem;
-
-    --ac-radius-sm: 0.25rem;
-    --ac-radius-md: 0.5rem;
-    --ac-radius-lg: 0.75rem;
-
-    --ac-shadow-sm: 0 2px 8px rgb(0 0 0 / 8%);
-    --ac-shadow-md: 0 4px 12px rgb(0 0 0 / 10%);
-
-    --ac-transition-fast: 200ms ease;
-}
-```
-
-Migrating a legacy token set: add the `--ac-` token aliased to the old name, move consumers file by
-file, delete the old token when `grep -rn "\-\-old-name" static/src/` is empty. Don't rename all at once.
-
-## Anti-patterns seen in Odoo addons
-
-| Smell | Fix |
-| --- | --- |
-| `!important` to beat Bootstrap | scope under the page root class |
-| Same colour as `#28a745` in six files | one token in `variables.css` |
-| `responsive.css` overriding twelve components | move each query into its component |
-| `style="margin-top:20px"` in QWeb | utility class or component spacing |
-| `.card .body .row .col span` | give the span a class |
-| `px` for font sizes | `rem`, so browser zoom and user font size work |
-| Colour hardcoded instead of `var(--primary)` | breaks the website theme editor silently |
-| Both `@import` chain **and** manifest entries | double download; pick one (see SKILL.md §6) |
-
-## Formatting
-
-Prettier handles `.css` via pre-commit: `printWidth: 100`, `tabWidth: 4`. Run
-`pre-commit run --all-files` (or `make format`) before committing; never hand-align properties, it
-will be reformatted.
diff --git a/.claude/skills/odoo-web-design/references/finish-checklist.md b/.claude/skills/odoo-web-design/references/finish-checklist.md
deleted file mode 100644
index 02ed81d..0000000
--- a/.claude/skills/odoo-web-design/references/finish-checklist.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# The finish pass
-
-What separates "it works" from "it looks designed". Go through this per screen, not per file.
-
-## 1. Every interactive element has all its states
-
-For each button, link, card, input, filter chip:
-
-| State | Must be | Common miss |
-| --- | --- | --- |
-| default | on the token scale | — |
-| `:hover` | inside `@media (hover: hover)` | sticks after tap on touch |
-| `:focus-visible` | visible ring, 3:1 contrast | removed via `outline: none` |
-| `:active` | perceptible press | missing entirely |
-| `:disabled` | dimmed **and** `cursor: not-allowed`, still 4.5:1 if it carries text | unreadable grey |
-| loading | spinner + `aria-busy`, size unchanged | layout jumps |
-
-The element must not resize between states — animate `box-shadow`, `background`, `transform`, never
-`padding`, `border-width` or `font-size`.
-
-## 2. Vertical rhythm and spacing
-
-- All spacing from `--ac-space-*`. A `margin: 13px` anywhere is a defect.
-- Space belongs to **one** side consistently (block-end margins, or `gap` — pick one per container).
-  Prefer `gap` in flex/grid; it doesn't collapse and doesn't need `:last-child` cleanups.
-- Related things sit closer than unrelated things. If the label is as far from its input as from the
-  previous field, the form reads as noise.
-- Cards in a grid must be equal height (`align-items: stretch` + the price pinned with `margin-top: auto`).
-
-## 3. Typography
-
-- One scale (`--ac-text-*`), max 3 weights, max 2 sizes per card.
-- Headings are structural (`h1`→`h2`→`h3`); size comes from a class, never from picking `h4` because
-  it looks right.
-- `max-width: 65ch` on paragraphs of real prose.
-- Numbers in tables: `font-variant-numeric: tabular-nums` and right-aligned so columns line up.
-- Long product names truncate predictably: `text-overflow: ellipsis` with `title` attribute, or
-  `-webkit-line-clamp: 2` with a fixed `min-height` so cards don't stagger.
-
-## 4. Colour
-
-- Semantic, not decorative: success/danger/warning always the same hue for the same meaning.
-- Status never colour-only — icon or text alongside (colour blindness, and grayscale printing).
-- Max ~2 accent colours per screen. Everything else is surface, border, text.
-- Check the rendered contrast, including: placeholder text, disabled buttons, badges on coloured
-  backgrounds, white text on `--warning` (this one almost always fails).
-
-## 5. The states people forget
-
-Every list, grid and total needs four designs, not one:
-
-1. **Loading** — skeletons matched to the real layout (not a centred spinner that collapses the page).
-2. **Empty** — heading, one sentence explaining why it's empty, and the button that fixes it.
-   "No products found" alone is a dead end; offer "Clear filters".
-3. **Error** — what failed, in the user's language, and what to do now. Never a raw traceback or code.
-4. **Partial / stale** — an order past its cutoff, an out-of-stock line, a price that changed. Say it
-   inline, next to the affected row, not only in a toast that disappears.
-
-## 6. Feedback and motion
-
-- Any action taken by the user gets a response within 100 ms — disable the button, show the spinner,
-  optimistic-update the quantity. Silence reads as "broken", and users double-submit.
-- Toasts: `aria-live="polite"`, dismissible, never the only place an error is shown.
-- Motion is 150–250 ms and eases out. Anything above 400 ms feels slow; anything that moves the page
-  under the cursor is a bug.
-- Everything animated respects `prefers-reduced-motion`.
-
-## 7. Content and copy
-
-- Sentence case for buttons and labels; imperative verbs ("Add to cart", not "Adding products").
-- Prices always formatted server-side with the currency and locale (`i18nManager.formatCurrency`),
-  never string-concatenated in the template.
-- Dates: locale-formatted, and relative only when the absolute date is also available (`title`).
-- Nothing user-visible is a hardcoded English literal — templates get translatable text, JS gets
-  `window.i18nManager.get(key)`.
-
-## 8. Cross-cutting checks before "done"
-
-```
-[ ] 320 px: no horizontal scroll on any page
-[ ] 200 % zoom: nothing clipped or overlapping
-[ ] Tab through the whole flow: visible focus, logical order, no trap
-[ ] All actions reachable without a mouse, Esc closes overlays
-[ ] No hex outside base/variables.css
-[ ] No inline style="" in views/*.xml
-[ ] No new !important (except the reduced-motion reset)
-[ ] Every <img> has alt and width/height
-[ ] Every icon-only control has aria-label
-[ ] Empty / loading / error states exist for each list
-[ ] es, eu and ca render without overflow (German-length strings break tight buttons)
-[ ] pre-commit run --all-files is clean
-[ ] Lighthouse a11y ≥ 95 on shop, cart, checkout
-```
-
-The last three matter as much as the rest: a layout tuned only against Spanish copy usually breaks in
-Basque, and a11y regressions land silently.
diff --git a/.claude/skills/odoo-web-design/references/responsive.md b/.claude/skills/odoo-web-design/references/responsive.md
deleted file mode 100644
index a15f609..0000000
--- a/.claude/skills/odoo-web-design/references/responsive.md
+++ /dev/null
@@ -1,191 +0,0 @@
-# Responsive layout
-
-## Breakpoints — Bootstrap 5, and only these
-
-| Name | `min-width` | Typical device |
-| --- | --- | --- |
-| (base) | — | phones, 320–575 px |
-| `sm` | 576px | large phones |
-| `md` | 768px | tablets |
-| `lg` | 992px | small laptops |
-| `xl` | 1200px | desktops |
-| `xxl` | 1400px | large desktops |
-
-Mobile-first, `min-width` only:
-
-```css
-/* ✅ base = mobile, enhance upwards */
-.products-grid {
-    display: grid;
-    gap: var(--ac-space-md);
-    grid-template-columns: 1fr;
-}
-
-@media (min-width: 768px) {
-    .products-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media (min-width: 1200px) {
-    .products-grid {
-        grid-template-columns: repeat(4, 1fr);
-    }
-}
-```
-
-```css
-/* ❌ desktop-first bands: overlapping ranges, unclear cascade, private breakpoints */
-@media (max-width: 1599px) and (min-width: 1400px) { … }
-@media (max-width: 720px) { … }
-```
-
-## Prefer intrinsic layout — most grids need no media query at all
-
-```css
-.products-grid {
-    display: grid;
-    gap: var(--ac-space-md);
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
-}
-```
-
-`min(100%, 16rem)` is what keeps it from overflowing at 320 px. Reach for a media query only when the
-layout must genuinely *change* (sidebar moves, table becomes cards), not merely resize.
-
-## Fluid type and space
-
-```css
-:root {
-    --ac-text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
-    --ac-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
-    --ac-text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
-    --ac-text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
-    --ac-space-md: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
-}
-```
-
-One continuous scale beats three step-changes at breakpoints. Never redefine a token inside a media
-query to make it smaller.
-
-Body copy: 1rem minimum, line-height ≥ 1.5, measure 45–75 characters (`max-width: 65ch`).
-
-## Touch targets and pointer
-
-WCAG 2.2 AA (§2.5.8 Target Size, Minimum) asks for **24×24 px**. The familiar **44×44 px** is §2.5.5,
-level **AAA** — treat it as the house rule for anything a thumb hits, applied by pointer type rather
-than by viewport width: a 1024 px tablet needs the big target, a 1024 px laptop doesn't.
-
-```css
-.qty-control .btn,
-.tag-filter-badge {
-    min-width: 2.25rem; /* 36px — comfortable with a mouse */
-    min-height: 2.25rem;
-}
-
-@media (pointer: coarse) {
-    .qty-control .btn,
-    .tag-filter-badge {
-        min-width: 2.75rem; /* 44px */
-        min-height: 2.75rem;
-    }
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .product-card:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--ac-shadow-md);
-    }
-}
-```
-
-Hover effects belong inside `@media (hover: hover)` — on touch they stick after a tap and look broken.
-
-## Tables → cards, without restructuring
-
-```css
-@media (max-width: 767.98px) {
-    .checkout-summary-table thead {
-        /* keep it in the a11y tree; hide visually only */
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip-path: inset(50%);
-    }
-    .checkout-summary-table tr {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        gap: var(--ac-space-xs);
-        padding: var(--ac-space-sm) 0;
-        border-bottom: 1px solid var(--ac-border-light);
-    }
-}
-```
-
-This is the one place a `max-width` query is honest: it's an override of the desktop table. Keep the
-markup semantic — never emit different HTML per viewport.
-
-## Sticky bars (cart / checkout actions on mobile)
-
-```css
-.checkout-actions {
-    position: sticky;
-    bottom: 0;
-    z-index: var(--ac-z-sticky);
-    padding: var(--ac-space-sm);
-    padding-bottom: calc(var(--ac-space-sm) + env(safe-area-inset-bottom, 0px));
-    background: var(--ac-surface, #fff);
-    box-shadow: 0 -2px 8px rgb(0 0 0 / 8%);
-}
-```
-
-`env(safe-area-inset-bottom)` keeps the button above the iOS home indicator. Sticky elements must not
-eat more than ~20 % of a 568 px-tall viewport.
-
-## Images
-
-```xml
-<img class="product-card-img" t-att-src="product['image_url']" t-att-alt="product['name']"
-     loading="lazy" decoding="async" width="400" height="400"/>
-```
-
-- `width`/`height` always — they reserve the box and prevent layout shift (CLS).
-- `loading="lazy"` for everything below the fold; **never** on the LCP image (first product row,
-  hero) — that delays the largest paint.
-- CSS: `max-width: 100%; height: auto;` plus `object-fit: cover` with a fixed `aspect-ratio` when
-  cards must align.
-- Odoo serves resized variants: `/web/image/product.product/<id>/image_256` etc. Ask for the size you
-  render, not `image_1920` scaled down in CSS.
-
-## Container and page rhythm
-
-```css
-.eskaera-page {
-    width: 100%;
-    max-width: 75rem;
-    margin-inline: auto;
-    padding-inline: clamp(1rem, 4vw, 2rem);
-}
-```
-
-Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) — Odoo auto-generates
-an RTL stylesheet, and logical properties survive the flip without a second rule.
-
-## Test matrix
-
-| Width | Why |
-| --- | --- |
-| 320 px | smallest supported; the one that breaks first |
-| 360 / 390 px | real Android / iPhone |
-| 768 px | tablet portrait, first breakpoint |
-| 1024 px | tablet landscape / small laptop |
-| 1280 / 1440 px | desktop |
-| 1280 px @ 200 % zoom | WCAG 1.4.4 reflow — equivalent to 640 px |
-
-Run the stack (`docker-compose up -d`, http://localhost:8070) and check, per viewport: no horizontal
-scroll, no clipped text, touch targets still ≥ 44 px on coarse pointers, sticky bars not covering
-content, images not stretched.
-
-DevTools device toolbar is enough for layout; check touch targets by actually tapping on a phone once
-before calling it done.
diff --git a/docs/OCA_DOCUMENTATION.md b/docs/OCA_DOCUMENTATION.md
index d5182a3..3dad8b6 100644
--- a/docs/OCA_DOCUMENTATION.md
+++ b/docs/OCA_DOCUMENTATION.md
@@ -40,6 +40,7 @@ Los siguientes addons custom han sido actualizados con la estructura OCA:
 Todos los addons incluyen correctamente:
 
 - **Autor**: Criptomart (en `__manifest__.py` y `README.rst`)
+- **Financiador**: Elika Bilbo (en `readme/CREDITS.rst`)
 
 ## Logo de CriptoMart
 
diff --git a/docs/TRANSLATIONS.md b/docs/TRANSLATIONS.md
index b9733c4..0902d88 100644
--- a/docs/TRANSLATIONS.md
+++ b/docs/TRANSLATIONS.md
@@ -106,51 +106,10 @@ PEDIR AL USUARIO QUE GENERE EL POT DESDE LA UI DE ODOO
 docker-compose cp odoo:/tmp/addon_name.pot ./addon_name/i18n/
 ```
 
-#### El `.pot` no es opcional: Odoo fusiona los `.po` contra él
-
-El `.pot` es un artefacto **generado** y está en `.gitignore` (`*.pot`), pero no es
-prescindible: al importar, Odoo fusiona cada `.po` contra el `.pot` del módulo antes
-de leerlo.
-
-```python
-# odoo/tools/translate.py, PoFileReader.__init__
-if pot_path:
-    self.pofile.merge(polib.pofile(pot_path))
-```
-
-`merge()` de polib **sustituye las ocurrencias de cada entrada por las del POT**, y
-marca como obsoletas las entradas que el POT no tiene (el lector se salta las
-obsoletas). Consecuencias prácticas:
-
-- Añadir una ocurrencia `model_terms:ir.ui.view,...` solo al `.po` **no sirve de
-  nada**: el merge la descarta y la traducción nunca llega a la vista.
-- Una cadena nueva que no esté en el POT se ignora entera, por muy traducida que
-  esté en los tres idiomas.
-- Por eso, tras mover una cadena a un atributo traducible o añadir una nueva, hay
-  que **regenerar el POT** antes de que la traducción surta efecto.
-
-⚠️ Al exportar contra una BD **con datos demo**, el POT se lleva los nombres de los
-registros demo (productos, impuestos, nombres de pedidos). Genera el POT contra una
-BD limpia.
-
 ### 2. Actualizar Archivos .po Existentes
 
 no usar msmerge, corrompe el po. Usa polib.
 
-Al crear entradas con polib hay dos detalles que fallan **en silencio**:
-
-```python
-entry = polib.POEntry(
-    msgid="products found",
-    msgstr="produktu aurkitu dira",
-    # 1. Sin `module:` el lector revienta; sin `odoo-python` la cadena se lee
-    #    del .po y se descarta acto seguido (ver Troubleshooting).
-    comment="module: website_sale_aplicoop\nodoo-python",
-    # 2. El número de línea es obligatorio en ocurrencias `code:`.
-    occurrences=[("code:addons/website_sale_aplicoop/models/js_translations.py", "0")],
-)
-```
-
 ### 3. Traducir Términos Nuevos
 
 Editar los archivos `.po` y completar las traducciones:
@@ -286,58 +245,6 @@ name = fields.Char(string="Name")
 4. **Usuario con idioma incorrecto**: Verificar preferencias de usuario
 5. **Cache**: Reiniciar Odoo: `docker-compose restart odoo`
 
-### La cadena SÍ está traducida en el .po y sigue saliendo en inglés
-
-Los tres casos siguientes fallan sin dar ningún error, ni en el log ni al importar.
-
-**a) El atributo no es traducible.** QWeb solo traduce los de esta lista
-(`odoo/tools/translate.py`, `TRANSLATED_ATTRS`), más sus variantes `t-attf-`:
-
-```text
-string  help  placeholder  alt  title  label  data-tooltip  confirm
-aria-label  aria-keyshortcuts  aria-placeholder  aria-roledescription  aria-valuetext
-```
-
-`data-bs-title` **no está**: un tooltip escrito ahí nunca se traduce. Usa `title`
-(Bootstrap lo respeta igual) o pasa el texto desde el endpoint i18n. Tampoco están
-`aria-description` ni `data-bs-*` en general.
-
-**b) Falta la referencia a la vista en el POT.** Para que una traducción se aplique
-a una vista, su entrada necesita una ocurrencia
-`model_terms:ir.ui.view,arch_db:modulo.xmlid` **en el POT** (ver el apartado del
-merge más arriba). Síntoma típico: dos botones contiguos, uno traducido y el otro
-no, con las dos cadenas presentes en el `.po`. Se comprueba así:
-
-```bash
-grep -B 4 '^msgid "Save Cart"$' addon/i18n/addon.pot   # ¿tiene model_terms?
-```
-
-**c) Falta el comentario `#. odoo-python`.** Las cadenas de `_()` se leen del `.po`
-directamente (no de la BD), y `CodeTranslations._load_python_translations` filtra
-por ese comentario:
-
-```python
-def filter_func(row):
-    return row.get('value') and PYTHON_TRANSLATION_COMMENT in row['comments']
-```
-
-Sin él la entrada se lee y se descarta. La entrada tiene que quedar así:
-
-```po
-#. module: website_sale_aplicoop
-#. odoo-python
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
-msgid "products found"
-msgstr "produktu aurkitu dira"
-```
-
-Y ojo con el `:0` final: el lector hace `int(line_number)` sobre las ocurrencias
-`code:`, así que una sin número de línea lanza `ValueError` y **tumba la carga del
-catálogo entero**, no solo la de esa entrada.
-
-Estas cadenas se cachean por proceso, así que después de tocarlas hay que
-reiniciar Odoo (`docker-compose restart odoo`), no basta con `-u`.
-
 ### Caracteres Especiales
 
 Usar escape correcto en .po:
diff --git a/website_sale_aplicoop/controllers/website_sale.py b/website_sale_aplicoop/controllers/website_sale.py
index 058472f..4925b6a 100644
--- a/website_sale_aplicoop/controllers/website_sale.py
+++ b/website_sale_aplicoop/controllers/website_sale.py
@@ -2249,9 +2249,6 @@ class AplicoopWebsiteSale(WebsiteSale):
                     "website_sale_aplicoop.eskaera_load_from_history",
                     {
                         "group_order_id": group_order_id,
-                        # This template renders a bare HTML document instead of
-                        # website.layout, so it has to declare its own language.
-                        "page_lang": (request.env.lang or "en_US").replace("_", "-"),
                         # sessionStorage keys stay keyed by id; the redirect at
                         # the end of the template needs the public URL instead.
                         "group_order_url": self._eskaera_url(group_order),
diff --git a/website_sale_aplicoop/controllers/website_sale_i18n.py b/website_sale_aplicoop/controllers/website_sale_i18n.py
index 21eeb05..e1bc924 100644
--- a/website_sale_aplicoop/controllers/website_sale_i18n.py
+++ b/website_sale_aplicoop/controllers/website_sale_i18n.py
@@ -129,11 +129,6 @@ def _get_translated_labels(self, lang=None, request_obj=None):
         "delivery_info_template": tr(
             "Delivery Information: Your order will be delivered at {pickup_day} {pickup_date}"
         ),
-        # Announced in the search results live region (realtime_search.js)
-        "no_results": tr("No products found"),
-        "products_found": tr("products found"),
-        # Accessible name of the notification dismiss button (website_sale.js)
-        "close": tr("Close"),
         "important": tr("Important"),
         "confirm_order_warning": tr(
             "Once you confirm this order, you will not be able to modify it. Please review carefully before confirming."
diff --git a/website_sale_aplicoop/i18n/README.md b/website_sale_aplicoop/i18n/README.md
index 89badb2..0afa148 100644
--- a/website_sale_aplicoop/i18n/README.md
+++ b/website_sale_aplicoop/i18n/README.md
@@ -12,7 +12,7 @@ This module has complete translation support for **3 languages**:
 
 ## Translated Content
 
-Each `.po` file contains **388 translations** for:
+Each `.po` file contains **378 translations** for:
 
 - **Selection Field Options** (Days of week, Recurrence periods)
   - Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
@@ -41,26 +41,11 @@ When users switch their Odoo interface language to any of the supported language
 
 To add or update translations:
 
-1. Edit the corresponding `.po` file **with `polib`** (never `msgmerge`, it corrupts them)
+1. Edit the corresponding `.po` file
 2. Update the `msgstr` values (keep `msgid` unchanged)
 3. Save and reload the module in Odoo
 4. Translations apply immediately
 
-### Adding a *new* string is not just a `.po` edit
-
-`website_sale_aplicoop.pot` is generated by Odoo and is gitignored, but it is not
-optional: Odoo merges every `.po` against it before importing, and polib's `merge()`
-drops entries the POT does not have and replaces their occurrences with the POT's.
-A brand new string, or an existing one that just became a view term, needs the POT
-regenerated (from the Odoo UI, against a database **without demo data**) before its
-translation applies anywhere.
-
-Three failure modes that produce no error at all — an untranslatable attribute
-(`data-bs-title` is not on QWeb's list, `title` is), a missing
-`model_terms:ir.ui.view` reference in the POT, and a missing `#. odoo-python`
-comment on `_()` strings — are written up in
-[`docs/TRANSLATIONS.md`](../../docs/TRANSLATIONS.md), under *Troubleshooting*.
-
 Example entry in a `.po` file:
 ```po
 #. module: website_sale_aplicoop
@@ -72,7 +57,7 @@ msgstr "Pedido de Grupo"  # Spanish translation
 
 - All `.po` files were generated and tested: **40/40 tests passing**
 - Translation coverage: **100%** for all supported languages
-- Last updated: August 16, 2026
+- Last updated: August 13, 2026
 
 ---
 
diff --git a/website_sale_aplicoop/i18n/ca.po b/website_sale_aplicoop/i18n/ca.po
index 8938572..9177a82 100644
--- a/website_sale_aplicoop/i18n/ca.po
+++ b/website_sale_aplicoop/i18n/ca.po
@@ -288,7 +288,6 @@ msgstr "Nombre de productes disponibles"
 #. module: website_sale_aplicoop
 #. odoo-python
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout
 msgid "Back to Cart"
 msgstr "Torna al carret"
 
@@ -417,9 +416,7 @@ msgid "Clear search"
 msgstr "Neteja la cerca"
 
 #. module: website_sale_aplicoop
-#. odoo-python
 #: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.view_group_order_form
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
 msgid "Close"
 msgstr "Tanca"
 
@@ -1902,7 +1899,6 @@ msgstr "Dissabte"
 #. module: website_sale_aplicoop
 #. odoo-python
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
 msgid "Save Cart"
 msgstr "Desa el Carret"
 
@@ -2302,63 +2298,3 @@ msgstr "Desa l'Esborrany"
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
 msgid "Save order as draft"
 msgstr "Desa la comanda com a esborrany"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
-msgid "Search products"
-msgstr "Cerca productes"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout_summary
-msgid "Order summary"
-msgstr "Resum de la comanda"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout_summary
-msgid "Products in this order, with quantity, price and subtotal"
-msgstr "Productes d'aquesta comanda, amb quantitat, preu i subtotal"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "Loading your order…"
-msgstr "Carregant la teva comanda…"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "This page needs JavaScript to load the order into your cart."
-msgstr ""
-"Aquesta pàgina necessita JavaScript per carregar la comanda al teu carret."
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "Continue to the group order"
-msgstr "Continua a la comanda de grup"
-
-#. module: website_sale_aplicoop
-#. odoo-python
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
-msgid "products found"
-msgstr "productes trobats"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
-msgid "<i class=\"fa fa-download me-2\" aria-hidden=\"true\"/>Load More Products"
-msgstr "<i class=\"fa fa-download me-2\" aria-hidden=\"true\"/>Carregar més productes"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_order_card_meta
-msgid ""
-"<span class=\"badge special-order-badge\"><i class=\"fa fa-star\" aria-"
-"hidden=\"true\"/> Special Order</span>"
-msgstr ""
-"<span class=\"badge special-order-badge\"><i class=\"fa fa-star\" aria-"
-"hidden=\"true\"/> Comanda especial</span>"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_order_card_meta
-msgid ""
-"<span class=\"badge text-bg-success\"><i class=\"fa fa-truck\" aria-"
-"hidden=\"true\"/> Home Delivery</span>"
-msgstr ""
-"<span class=\"badge text-bg-success\"><i class=\"fa fa-truck\" aria-"
-"hidden=\"true\"/> Lliurament a domicili</span>"
diff --git a/website_sale_aplicoop/i18n/es.po b/website_sale_aplicoop/i18n/es.po
index c102d72..e904244 100644
--- a/website_sale_aplicoop/i18n/es.po
+++ b/website_sale_aplicoop/i18n/es.po
@@ -290,7 +290,6 @@ msgstr "Cantidad de Productos Disponibles"
 #. module: website_sale_aplicoop
 #. odoo-python
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout
 msgid "Back to Cart"
 msgstr "Volver al Carrito"
 
@@ -419,9 +418,7 @@ msgid "Clear search"
 msgstr "Limpiar búsqueda"
 
 #. module: website_sale_aplicoop
-#. odoo-python
 #: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.view_group_order_form
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
 msgid "Close"
 msgstr "Cerrar"
 
@@ -1902,7 +1899,6 @@ msgstr "Sábado"
 #. module: website_sale_aplicoop
 #. odoo-python
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
 msgid "Save Cart"
 msgstr "Guardar Carrito"
 
@@ -2299,62 +2295,3 @@ msgstr "Grabar pedido"
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
 msgid "Save order as draft"
 msgstr "Grabar pedido"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
-msgid "Search products"
-msgstr "Buscar productos"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout_summary
-msgid "Order summary"
-msgstr "Resumen del pedido"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout_summary
-msgid "Products in this order, with quantity, price and subtotal"
-msgstr "Productos de este pedido, con cantidad, precio y subtotal"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "Loading your order…"
-msgstr "Cargando tu pedido…"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "This page needs JavaScript to load the order into your cart."
-msgstr "Esta página necesita JavaScript para cargar el pedido en tu carrito."
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "Continue to the group order"
-msgstr "Continuar al pedido de grupo"
-
-#. module: website_sale_aplicoop
-#. odoo-python
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
-msgid "products found"
-msgstr "productos encontrados"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
-msgid "<i class=\"fa fa-download me-2\" aria-hidden=\"true\"/>Load More Products"
-msgstr "<i class=\"fa fa-download me-2\" aria-hidden=\"true\"/>Cargar más productos"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_order_card_meta
-msgid ""
-"<span class=\"badge special-order-badge\"><i class=\"fa fa-star\" aria-"
-"hidden=\"true\"/> Special Order</span>"
-msgstr ""
-"<span class=\"badge special-order-badge\"><i class=\"fa fa-star\" aria-"
-"hidden=\"true\"/> Pedido Especial</span>"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_order_card_meta
-msgid ""
-"<span class=\"badge text-bg-success\"><i class=\"fa fa-truck\" aria-"
-"hidden=\"true\"/> Home Delivery</span>"
-msgstr ""
-"<span class=\"badge text-bg-success\"><i class=\"fa fa-truck\" aria-"
-"hidden=\"true\"/> Entrega a Casa</span>"
diff --git a/website_sale_aplicoop/i18n/eu.po b/website_sale_aplicoop/i18n/eu.po
index e0cec95..bda4097 100644
--- a/website_sale_aplicoop/i18n/eu.po
+++ b/website_sale_aplicoop/i18n/eu.po
@@ -291,7 +291,6 @@ msgstr "Eskuragarri Dauden Produktuen Kopurua"
 #. module: website_sale_aplicoop
 #. odoo-python
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout
 msgid "Back to Cart"
 msgstr "Sarera Itzuli"
 
@@ -420,9 +419,7 @@ msgid "Clear search"
 msgstr "Bilaketa garbitu"
 
 #. module: website_sale_aplicoop
-#. odoo-python
 #: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.view_group_order_form
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
 msgid "Close"
 msgstr "Itxi"
 
@@ -1898,7 +1895,6 @@ msgstr "Larunbata"
 #. module: website_sale_aplicoop
 #. odoo-python
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
 msgid "Save Cart"
 msgstr "Saskia Gorde"
 
@@ -2297,64 +2293,3 @@ msgstr "Eskaera gorde"
 #: code:addons/website_sale_aplicoop/models/js_translations.py:0
 msgid "Save order as draft"
 msgstr "Eskaera gorde"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
-msgid "Search products"
-msgstr "Produktuak bilatu"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout_summary
-msgid "Order summary"
-msgstr "Eskaera laburpena"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_checkout_summary
-msgid "Products in this order, with quantity, price and subtotal"
-msgstr "Eskaera honetako produktuak, kantitatea, prezioa eta azpitotala"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "Loading your order…"
-msgstr "Zure eskaera kargatzen…"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "This page needs JavaScript to load the order into your cart."
-msgstr "Orri honek JavaScript behar du eskaera zure saskira kargatzeko."
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_load_from_history
-msgid "Continue to the group order"
-msgstr "Jarraitu taldeko eskaerara"
-
-#. module: website_sale_aplicoop
-#. odoo-python
-#: code:addons/website_sale_aplicoop/models/js_translations.py:0
-msgid "products found"
-msgstr "produktu aurkitu dira"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_shop
-msgid "<i class=\"fa fa-download me-2\" aria-hidden=\"true\"/>Load More Products"
-msgstr ""
-"<i class=\"fa fa-download me-2\" aria-hidden=\"true\"/>Produktu Gehiago "
-"Kargatu"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_order_card_meta
-msgid ""
-"<span class=\"badge special-order-badge\"><i class=\"fa fa-star\" aria-"
-"hidden=\"true\"/> Special Order</span>"
-msgstr ""
-"<span class=\"badge special-order-badge\"><i class=\"fa fa-star\" aria-"
-"hidden=\"true\"/> Eskaera Berezia</span>"
-
-#. module: website_sale_aplicoop
-#: model_terms:ir.ui.view,arch_db:website_sale_aplicoop.eskaera_order_card_meta
-msgid ""
-"<span class=\"badge text-bg-success\"><i class=\"fa fa-truck\" aria-"
-"hidden=\"true\"/> Home Delivery</span>"
-msgstr ""
-"<span class=\"badge text-bg-success\"><i class=\"fa fa-truck\" aria-"
-"hidden=\"true\"/> Etxerako Entrega</span>"
diff --git a/website_sale_aplicoop/models/js_translations.py b/website_sale_aplicoop/models/js_translations.py
index 681f96b..83d0058 100644
--- a/website_sale_aplicoop/models/js_translations.py
+++ b/website_sale_aplicoop/models/js_translations.py
@@ -140,17 +140,9 @@ def _register_translations():
     _("Search")
     _("Search products...")
     _("No products found")
-    # Announced with a count in the search results live region, e.g. "7 products found"
-    _("products found")
     _("Categories")
     _("All categories")
 
-    # ========================
-    # Accessible Names
-    # ========================
-    # Dismiss button of the floating notification (website_sale.js)
-    _("Close")
-
     # ========================
     # Category Labels
     # ========================
diff --git a/website_sale_aplicoop/static/src/css/README.md b/website_sale_aplicoop/static/src/css/README.md
index e2625bf..938b4a0 100644
--- a/website_sale_aplicoop/static/src/css/README.md
+++ b/website_sale_aplicoop/static/src/css/README.md
@@ -16,7 +16,7 @@ website_sale_aplicoop/static/src/css/
 │
 ├── base/
 │   ├── variables.css                ← Variables CSS globales (colores, tipografía, espaciados)
-│   └── utilities.css                ← Clases utilitarias (.text-muted, .word-wrap-break, etc)
+│   └── utilities.css                ← Clases utilitarias (.sr-only, .text-muted, etc)
 │
 ├── layout/
 │   ├── pages.css                    ← Fondos y layouts de páginas (eskaera-page, etc)
@@ -62,8 +62,7 @@ website_sale_aplicoop/static/src/css/
 - **variables.css** (~80 líneas)
   Colores, tipografía, espaciados, sombras, transiciones, z-index
 - **utilities.css** (~15 líneas)
-  Clases utilitarias reutilizables (.text-muted, .word-wrap-break, etc).
-  Para texto solo-lector-de-pantalla usa `.visually-hidden` de Bootstrap.
+  Clases utilitarias reutilizables (.sr-only, .text-muted, etc)
 
 ### **layout/** - Estructura Global
 - **pages.css** (~70 líneas)
diff --git a/website_sale_aplicoop/static/src/css/base/utilities.css b/website_sale_aplicoop/static/src/css/base/utilities.css
index 4417aee..20613a4 100644
--- a/website_sale_aplicoop/static/src/css/base/utilities.css
+++ b/website_sale_aplicoop/static/src/css/base/utilities.css
@@ -1,26 +1,34 @@
 /* filepath: website_sale_aplicoop/static/src/css/base/utilities.css */
 
 /**
- * Utility classes
- *
- * Screen-reader-only text: use Bootstrap's own `.visually-hidden` /
- * `.visually-hidden-focusable`, shipped in web.assets_frontend. The local
- * `.sr-only` copy (the Bootstrap 4 name, dropped in 5.x) is gone, as are
- * `.word-wrap-break` and `.text-xs`, which no template ever used.
+ * Utility classes used throughout the project
  */
 
-/* Scoped to the addon's pages: unscoped this redefined Bootstrap's .text-muted
-   for the whole frontend, and needed !important to do it. Two classes beat
-   Bootstrap's one, so the flag is no longer necessary. */
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page) .text-muted {
-    color: var(--ac-text-secondary);
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+.text-muted {
+    color: var(--text-secondary) !important;
+}
+
+.word-wrap-break {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.text-xs {
+    font-size: 0.85rem;
 }
 
-/* Set by realtime_search.js to filter the grid. A utility has to beat the
-   component it lands on — .product-card declares display:flex at the same
-   specificity and loads later — so this is the one place the flag is the
-   mechanism rather than a workaround. Bootstrap's own utility layer does the
-   same for every one of its classes. */
 .hidden-product {
     display: none !important;
 }
diff --git a/website_sale_aplicoop/static/src/css/base/variables.css b/website_sale_aplicoop/static/src/css/base/variables.css
index 4073997..9152e76 100644
--- a/website_sale_aplicoop/static/src/css/base/variables.css
+++ b/website_sale_aplicoop/static/src/css/base/variables.css
@@ -1,228 +1,72 @@
 /* filepath: website_sale_aplicoop/static/src/css/base/variables.css */
 
 /**
- * Design tokens (CSS custom properties)
- *
- * The ONLY file in this addon allowed to contain colour literals.
- *
- * Odoo 18 ships Bootstrap 5.3 with `$variable-prefix: ''`
- * (web/static/src/scss/bootstrap_overridden.scss), so Bootstrap's root custom
- * properties are exposed UNPREFIXED: --primary, --body-bg, --border-color, …
- * Brand tokens alias them so the website theme editor keeps control of the palette;
- * the literal is only the fallback when the bundle is loaded outside a themed page.
- *
- * Contrast ratios noted below are against --ac-surface (#fff) and are the reason
- * a given literal was chosen. Do not "tidy" them without re-checking WCAG AA.
+ * CSS Custom Properties (Variables)
+ * Colores, tipografía, espaciados centralizados
  */
 
 :root {
-    /* ========== BRAND ========== */
-    --ac-color-primary: var(--primary, #007bff);
-    /* White text on --ac-color-primary is only 3.98:1 (fails AA for body text).
-       Use -strong whenever text sits ON the colour: 7.04:1. */
-    --ac-color-primary-strong: #0056b3;
-    --ac-color-secondary: var(--secondary, #6c757d);
-    --ac-color-accent: #7c3aed; /* white on it: 5.70:1 */
-    --ac-color-accent-strong: #6d28d9; /* white on it: 7.10:1 */
-
-    /* Order cards carry their own indigo accent, and special orders an amber one. */
-    --ac-color-order: #5a67d8; /* white on it: 4.81:1 */
-    --ac-color-order-strong: #4c57bd; /* 6.17:1 */
-    --ac-color-order-deep: #3d4898; /* 8.14:1 */
-    --ac-color-order-border: rgb(90 103 216 / 12%);
-    --ac-color-order-border-hover: rgb(90 103 216 / 25%);
-    --ac-surface-order: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
-    --ac-surface-order-hover: linear-gradient(180deg, #fff 0%, #f7faff 100%);
-
-    --ac-color-special: #f59e0b;
-    --ac-color-special-strong: #d97706;
-    --ac-color-special-border: rgb(245 158 11 / 35%);
-    --ac-color-special-border-hover: rgb(245 158 11 / 50%);
-    --ac-surface-special: linear-gradient(180deg, #fffdf0 0%, #fffbea 100%);
-    --ac-surface-special-hover: linear-gradient(180deg, #fffdf0 0%, #fff8db 100%);
-    /* White on amber is 2.15:1. Amber always takes dark text: 7.60:1. */
-    --ac-text-on-special: #1a202c;
-
-    /* ========== FEEDBACK ========== */
-    --ac-color-success: var(--success, #28a745);
-    /* #28a745 is only 3.13:1 on white — fine as a fill, not as text. */
-    --ac-color-success-strong: #1e7e34; /* 5.14:1 */
-    --ac-color-success-deep: #1a6e2e; /* hover/active on -strong */
-
-    /* Warning alert: amber surface with its own readable foreground (6.30:1). */
-    --ac-surface-warning: #fef3c7;
-    --ac-border-warning: #fcd34d;
-    --ac-text-warning: #92400e;
-    --ac-color-danger: var(--danger, #dc3545);
-    --ac-color-warning: var(--warning, #ffc107);
-    --ac-color-info: var(--info, #17a2b8);
-
-    /* ========== SURFACES ========== */
-    --ac-surface: var(--body-bg, #fff);
-    --ac-surface-sunken: var(--light, #f8f9fa);
-    --ac-surface-muted: #f3f3f3;
-    --ac-surface-tint: rgb(0 123 255 / 6%);
-    --ac-surface-tint-hover: rgb(108 117 125 / 10%);
-
-    /* ========== TEXT (all ≥ 4.5:1 on --ac-surface) ========== */
-    --ac-text-primary: var(--body-color, #1a202c); /* 16.32:1 */
-    --ac-text-secondary: #4a5568; /* 7.53:1 */
-    --ac-text-muted: #6b7280; /* 4.83:1 */
-    --ac-text-on-fill: #fff;
-
-    /* ========== BORDERS ========== */
-    /* Decorative separators and card outlines. */
-    --ac-border: var(--border-color, #e2e8f0);
-    --ac-border-subtle: #e0e0e0;
-    /* Boundaries of interactive controls (inputs, steppers): WCAG 1.4.11 needs
-       ≥ 3:1 against the adjacent surface. #8a919a is 3.18:1. */
-    --ac-border-strong: #8a919a;
-
-    /* ========== FOCUS RING ========== */
-    --ac-focus-ring-color: var(--primary, #007bff); /* 3.98:1 — ok for a focus indicator */
-    --ac-focus-ring-width: 2px;
-    --ac-focus-ring-offset: 2px;
-
-    /* ========== TYPOGRAPHY ========== */
-    --ac-font-family: var(
-        --font-sans-serif,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        "Helvetica Neue",
-        Arial,
-        sans-serif
-    );
-
-    /* Fluid scale: one continuous ramp instead of per-breakpoint overrides.
-       Always rem + vw, never pure vw, so browser zoom keeps working. */
-    --ac-text-2xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
-    --ac-text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
-    --ac-text-sm: clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);
-    --ac-text-base: clamp(0.875rem, 0.85rem + 0.18vw, 1rem);
-    --ac-text-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
-    --ac-text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.375rem);
-    --ac-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
-    --ac-text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
-
-    --ac-leading-tight: 1.2;
-    --ac-leading-snug: 1.35;
-    --ac-leading-normal: 1.5;
-
-    --ac-weight-normal: 400;
-    --ac-weight-medium: 500;
-    --ac-weight-semibold: 600;
-    --ac-weight-bold: 700;
-
-    /* ========== SPACING ========== */
-    --ac-space-3xs: 0.125rem;
-    --ac-space-2xs: 0.25rem;
-    --ac-space-xs: 0.375rem;
-    --ac-space-sm: 0.5rem;
-    --ac-space-md: 1rem;
-    --ac-space-lg: 1.5rem;
-    --ac-space-xl: 2rem;
-    --ac-space-2xl: 3rem;
-
-    /* ========== RADIUS ========== */
-    --ac-radius-sm: 0.25rem;
-    --ac-radius-md: 0.5rem;
-    --ac-radius-lg: 0.75rem;
-    --ac-radius-xl: 1rem;
-    --ac-radius-pill: 50rem;
-
-    /* ========== ELEVATION ========== */
-    --ac-shadow-sm: 0 2px 8px rgb(0 0 0 / 8%);
-    --ac-shadow-md: 0 4px 12px rgb(0 0 0 / 10%);
-    --ac-shadow-lg: 0 10px 25px rgb(0 0 0 / 12%);
-
-    /* ========== MOTION ========== */
-    --ac-transition-fast: 150ms ease-out;
-    --ac-transition-normal: 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
-    --ac-transition-slow: 400ms ease;
-
-    /* ========== CONTROLS ========== */
-    /* Fluid control size: replaces six per-breakpoint width/height overrides. */
-    --ac-control-size: clamp(2.25rem, 2.05rem + 0.7vw, 2.5rem);
-    /* 44px. WCAG 2.2 AA (2.5.8) only requires 24px, but 44px is the AAA figure
-       (2.5.5) and the practical minimum for touch. Applied on coarse pointers. */
-    --ac-touch-target: 2.75rem;
-    --ac-control-border-width: 1px;
-
-    /* ========== 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;
-    --ac-z-sticky: 1020;
-    --ac-z-fixed: 1030;
-    --ac-z-modal: 1040;
-    --ac-z-popover: 1050;
-    --ac-z-tooltip: 1060;
-    --ac-z-notification: 9999;
-
-    /* ==========================================================================
-       LEGACY ALIASES — do not use in new code.
-       Kept so the not-yet-migrated partials keep rendering. Delete each one once
-       `grep -rn "var(--<name>)" static/src/` comes back empty.
-       ========================================================================== */
-    --primary-color: var(--ac-color-primary);
-    /* Was `var(--primary-dark, #0056b3)`: a custom property cannot reference
-       itself — that made the declaration invalid at computed-value time, so the
-       five consumers in buttons.css / order-card.css silently rendered with no
-       colour at all. */
-    --primary-dark: var(--ac-color-primary-strong);
-    --secondary-color: var(--ac-color-secondary);
-    --success-color: var(--ac-color-success);
-    --danger-color: var(--ac-color-danger);
-    --warning-color: var(--ac-color-warning);
-    --info-color: var(--ac-color-info);
-    --light-color: var(--ac-surface-sunken);
+    /* ========== COLORS ========== */
+    --primary-color: var(--primary, #007bff);
+    --primary-dark: var(--primary-dark, #0056b3);
+    --secondary-color: var(--secondary, #6c757d);
+    --success-color: var(--success, #28a745);
+    --danger-color: #dc3545;
+    --warning-color: #ffc107;
+    --info-color: #17a2b8;
+    --light-color: #f8f9fa;
     --dark-color: #2d3748;
 
-    --text-primary: var(--ac-text-primary);
-    --text-secondary: var(--ac-text-secondary);
-    --text-muted: var(--ac-text-muted);
+    /* Text colors */
+    --text-primary: #1a202c;
+    --text-secondary: #4a5568;
+    --text-muted: #6b7280;
 
-    --border-light: var(--ac-border);
+    /* Border colors */
+    --border-light: #e2e8f0;
     --border-medium: #cbd5e0;
     --border-dark: #718096;
 
-    --font-family-base: var(--ac-font-family);
+    /* ========== TYPOGRAPHY ========== */
+    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
     --font-weight-light: 300;
-    --font-weight-normal: var(--ac-weight-normal);
-    --font-weight-medium: var(--ac-weight-medium);
-    --font-weight-semibold: var(--ac-weight-semibold);
-    --font-weight-bold: var(--ac-weight-bold);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --font-weight-extrabold: 800;
 
-    --spacing-xs: var(--ac-space-2xs);
-    --spacing-sm: var(--ac-space-sm);
-    --spacing-md: var(--ac-space-md);
-    --spacing-lg: var(--ac-space-lg);
-    --spacing-xl: var(--ac-space-xl);
-    --spacing-2xl: var(--ac-space-2xl);
+    /* ========== SPACING ========== */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
 
-    --radius-sm: var(--ac-radius-sm);
-    --radius-md: var(--ac-radius-md);
-    --radius-lg: var(--ac-radius-lg);
-    --radius-xl: var(--ac-radius-xl);
+    /* ========== BORDER RADIUS ========== */
+    --radius-sm: 0.25rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
 
-    --shadow-sm: var(--ac-shadow-sm);
-    --shadow-md: var(--ac-shadow-md);
-    --shadow-lg: var(--ac-shadow-lg);
+    /* ========== SHADOWS ========== */
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
 
+    /* ========== TRANSITIONS ========== */
     --transition-fast: 200ms ease;
-    --transition-normal: var(--ac-transition-normal);
+    --transition-normal: 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
     --transition-slow: 500ms ease;
 
-    --z-dropdown: var(--ac-z-dropdown);
-    --z-sticky: var(--ac-z-sticky);
-    --z-fixed: var(--ac-z-fixed);
-    --z-modal: var(--ac-z-modal);
-    --z-popover: var(--ac-z-popover);
-    --z-tooltip: var(--ac-z-tooltip);
-    --z-notification: var(--ac-z-notification);
+    /* ========== Z-INDEX ========== */
+    --z-dropdown: 1000;
+    --z-sticky: 1020;
+    --z-fixed: 1030;
+    --z-modal: 1040;
+    --z-popover: 1050;
+    --z-tooltip: 1060;
+    --z-notification: 9999;
 }
diff --git a/website_sale_aplicoop/static/src/css/components/alerts.css b/website_sale_aplicoop/static/src/css/components/alerts.css
index bb11925..11f4812 100644
--- a/website_sale_aplicoop/static/src/css/components/alerts.css
+++ b/website_sale_aplicoop/static/src/css/components/alerts.css
@@ -1,68 +1,77 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/alerts.css */
 
 /**
- * Alerts, toasts and notifications
- *
- * `.alert-warning` is scoped to the addon's pages: unscoped it redefined
- * Bootstrap's own alert for the whole frontend. `.group-order-alert` and its
- * .info/.warning variants were dead — no template emits them.
+ * Alert and notification component styles
  */
 
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    .alert-warning {
-    --alert-bg: var(--ac-surface-warning);
-    --alert-border-color: var(--ac-border-warning);
-    --alert-color: var(--ac-text-warning);
-    margin-bottom: var(--ac-space-xl);
-    padding: var(--ac-space-md);
-    border-radius: var(--ac-radius-md);
+.group-order-alert {
+    background-color: #e7f3ff;
+    border-left: 4px solid var(--primary-color);
+    color: #004085;
+    padding: 1rem;
+    border-radius: 0.375rem;
 }
 
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    .alert-warning
-    i {
-    margin-right: var(--ac-space-xs);
-    font-size: var(--ac-text-md);
+.group-order-alert.info {
+    background-color: #d1ecf1;
+    border-left-color: #17a2b8;
+    color: #0c5460;
 }
 
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    .alert-warning
-    strong {
-    font-weight: var(--ac-weight-bold);
+.group-order-alert.warning {
+    background-color: #fff3cd;
+    border-left-color: #ffc107;
+    color: #856404;
 }
 
-.eskaera-delivery-notice {
-    margin-top: var(--ac-space-md);
-    border-left: 4px solid var(--ac-color-info);
+.alert-warning {
+    background-color: #fef3c7;
+    border-color: #fcd34d;
+    color: #92400e;
+    margin-bottom: 2rem;
+    border-radius: 0.5rem;
+    padding: 1.25rem;
 }
 
-.eskaera-delivery-notice .fa-truck {
-    margin-right: var(--ac-space-sm);
-    color: var(--ac-color-info);
+.alert-warning i {
+    margin-right: 0.75rem;
+    font-size: 1.1rem;
 }
 
-/* ---------- Toast (added to cart) ---------- */
+.alert-warning strong {
+    font-weight: 700;
+}
 
+#delivery-info-alert {
+    margin-top: 1rem;
+    border-left: 4px solid #0dcaf0;
+}
+
+#delivery-info-alert .fa-truck {
+    margin-right: 0.5rem;
+    color: #0dcaf0;
+}
+
+/* Toast Notification Animation */
 .toast-notification {
     position: fixed;
-    inset: auto var(--ac-space-lg) var(--ac-space-lg) auto;
-    z-index: var(--ac-z-notification);
+    bottom: 30px;
+    right: 30px;
+    background-color: #28a745;
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     display: flex;
     align-items: center;
-    gap: var(--ac-space-xs);
-    max-width: 25rem;
-    padding: var(--ac-space-md) var(--ac-space-lg);
-    padding-bottom: calc(var(--ac-space-md) + env(safe-area-inset-bottom, 0px));
-    border-radius: var(--ac-radius-sm);
-    /* White on --ac-color-success is 3.13:1; the strong tone is 5.14:1. */
-    background-color: var(--ac-color-success-strong);
-    color: var(--ac-text-on-fill);
-    box-shadow: var(--ac-shadow-lg);
-    font-weight: var(--ac-weight-medium);
-    word-break: break-word;
+    gap: 0.75rem;
+    font-weight: 500;
+    z-index: 9999;
     opacity: 0;
     transform: translateY(20px);
-    transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    max-width: 400px;
+    word-break: break-word;
 }
 
 .toast-notification.show {
@@ -71,41 +80,6 @@
 }
 
 .toast-notification i {
-    min-width: 1.25rem;
-    font-size: var(--ac-text-md);
-}
-
-/* ---------- Floating notification (_showNotification) ---------- */
-
-/* Was a 200-character inline style written from JS on every call. */
-.eskaera-notification {
-    position: fixed;
-    top: 5rem;
-    right: var(--ac-space-md);
-    z-index: var(--ac-z-notification);
-    min-width: 18.75rem;
-    max-width: 31.25rem;
-    padding: var(--ac-space-lg);
-    font-size: var(--ac-text-md);
-    box-shadow: var(--ac-shadow-lg);
-    transition: opacity var(--ac-transition-normal);
-}
-
-@media (max-width: 576px) {
-    .eskaera-notification {
-        left: var(--ac-space-md);
-        right: var(--ac-space-md);
-        min-width: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .toast-notification,
-    .eskaera-notification {
-        transition: none;
-    }
-
-    .toast-notification {
-        transform: none;
-    }
+    font-size: 1.2rem;
+    min-width: 20px;
 }
diff --git a/website_sale_aplicoop/static/src/css/components/buttons.css b/website_sale_aplicoop/static/src/css/components/buttons.css
index 130f629..c593f29 100644
--- a/website_sale_aplicoop/static/src/css/components/buttons.css
+++ b/website_sale_aplicoop/static/src/css/components/buttons.css
@@ -1,102 +1,103 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/buttons.css */
 
 /**
- * Buttons
- *
- * Colours are set through Bootstrap 5.3's own --btn-* custom properties, which
- * Odoo exposes unprefixed. That wins on the cascade without !important and
- * keeps every state (hover, active, disabled) consistent, instead of
- * overriding background-color and leaving the others behind.
- *
- * `.btn-add-to-cart` and `.btn-checkout` used to live here; no template or
- * script emits either name — the real ones are `.add-to-cart-btn` (see
- * components/quantity-control.css) and `.checkout-btn-lg`.
+ * Button and action component styles
  */
 
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    :is(.btn-primary, .btn-success) {
-    font-weight: var(--ac-weight-semibold);
+.btn-add-to-cart {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
 }
 
-/* ---------- Checkout actions ---------- */
+.btn-add-to-cart:focus {
+    outline: 3px solid var(--primary-color);
+    outline-offset: 2px;
+}
 
+.btn-add-to-cart:hover {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+}
+
+.btn-checkout {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    border: none;
+    color: white;
+    font-weight: 600;
+}
+
+.btn-checkout:focus {
+    outline: 3px solid #667eea;
+    outline-offset: 2px;
+}
+
+.btn-checkout:hover {
+    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-dark) 100%);
+    color: white;
+}
+
+.btn-primary,
+.btn-success {
+    font-weight: 600;
+}
+
+.btn-primary:disabled,
+.btn-success:disabled {
+    opacity: 0.65;
+}
+
+/* Checkout action buttons */
 .checkout-actions {
-    margin-top: var(--ac-space-xl);
+    margin-top: 2rem;
 }
 
 .checkout-actions .btn {
-    --btn-border-radius: var(--ac-radius-md);
-    --btn-font-size: var(--ac-text-md);
-    --btn-font-weight: var(--ac-weight-semibold);
-    --btn-padding-y: var(--ac-space-xs);
-    --btn-padding-x: var(--ac-space-lg);
+    font-size: 1.1rem;
+    font-weight: 600;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    transition: background-color var(--ac-transition-fast), border-color var(--ac-transition-fast),
-        box-shadow var(--ac-transition-fast), transform var(--ac-transition-fast);
-}
-
-.checkout-actions .btn i {
-    margin-right: var(--ac-space-sm);
+    letter-spacing: 0.5px;
 }
 
 .checkout-actions .btn-success {
-    --btn-bg: var(--ac-color-success-strong);
-    --btn-border-color: var(--ac-color-success-strong);
-    --btn-color: var(--ac-text-on-fill);
-    --btn-hover-bg: var(--ac-color-success-deep);
-    --btn-hover-border-color: var(--ac-color-success-deep);
-    --btn-hover-color: var(--ac-text-on-fill);
+    background-color: var(--success-color);
+    border-color: var(--success-color);
+}
+
+.checkout-actions .btn-success:hover {
+    background-color: #218838;
+    border-color: #218838;
+    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+    transform: translateY(-2px);
 }
 
-/* "Back to cart". The previous #ebeef0 text sat at 1.17:1 on the white
-   checkout card — the label was invisible until hover. */
 .checkout-actions .btn-outline-secondary {
-    --btn-color: var(--ac-text-secondary);
-    --btn-border-color: var(--ac-border-strong);
-    --btn-hover-color: var(--ac-text-on-fill);
-    --btn-hover-bg: var(--ac-color-secondary);
-    --btn-hover-border-color: var(--ac-color-secondary);
+    color: #ebeef0;
+    border-color: #cad2d8;
 }
 
-/* ---------- Long-label buttons ---------- */
+.checkout-actions .btn-outline-secondary:hover {
+    color: white;
+    background-color: #6c757d;
+    border-color: #6c757d;
+    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
+}
+
+.checkout-actions .btn i {
+    margin-right: 0.5rem;
+}
 
 .save-order-btn,
+.save-order-btn-styled,
 .checkout-btn-lg {
-    padding: var(--ac-space-sm) var(--ac-space-md);
-    font-size: var(--ac-text-md);
     white-space: nowrap;
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
 }
 
-/* ---------- States ---------- */
-
-@media (hover: hover) and (pointer: fine) {
-    .checkout-actions .btn-success:hover,
-    .checkout-actions .btn-outline-secondary:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--ac-shadow-md);
-    }
-}
-
-.checkout-actions .btn:focus-visible,
-.save-order-btn:focus-visible,
-.checkout-btn-lg:focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-}
-
-@media (pointer: coarse) {
-    .checkout-actions .btn,
-    .save-order-btn,
-    .checkout-btn-lg {
-        min-height: var(--ac-touch-target);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .checkout-actions .btn,
-    .checkout-actions .btn:hover {
-        transform: none;
-        transition: none;
-    }
+.save-icon-size {
+    font-size: 1.2rem;
 }
diff --git a/website_sale_aplicoop/static/src/css/components/cart.css b/website_sale_aplicoop/static/src/css/components/cart.css
index 2d208f1..7ddab7e 100644
--- a/website_sale_aplicoop/static/src/css/components/cart.css
+++ b/website_sale_aplicoop/static/src/css/components/cart.css
@@ -1,177 +1,236 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/cart.css */
 
 /**
- * Cart sidebar
- *
- * Markup (eskaera_shop):
- *   .card.sticky-top.cart-sticky-position
- *     ├ .card-header   → #cart-title + .btn-group.cart-btn-group (4 icon buttons)
- *     ├ .card-body.eskaera-cart-items[aria-live=polite]
- *     │    └ injected by website_sale.js: .list-group > .list-group-item, .cart-total
- *     └ .card-footer   → clear cart + checkout
- *
- * The .list-group-item rules are scoped to the container: unscoped, they hit
- * every Bootstrap list group on the site, which is what forced three rounds of
- * re-declaration in layout/responsive.css.
+ * Shopping cart component styles
  */
 
-.cart-sticky-position {
-    top: var(--ac-space-md);
+.sticky-cart {
+    top: 20px;
 }
 
-/* Cap the scroll area against the viewport, not a fixed pixel height, so it
-   still fits when text is enlarged. */
-.cart-items,
-.eskaera-cart-items {
-    max-height: min(60vh, 25rem);
+.cart-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 0.25rem;
+    border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.cart-header h5 {
+    color: white;
+    margin: 0;
+}
+
+.cart-header .btn {
+    color: white;
+}
+
+.cart-items {
+    max-height: 400px;
     overflow-y: auto;
 }
 
-.eskaera-cart-items {
-    padding: var(--ac-space-2xs) var(--ac-space-xs);
-    font-size: var(--ac-text-base);
+#cart-items-container {
+    padding: 0.2rem 0.4rem;
 }
 
-.eskaera-cart-items .list-group {
+#cart-items-container .list-group {
     margin-bottom: 0;
 }
 
-.eskaera-cart-items p.text-muted {
-    margin: var(--ac-space-2xs) 0;
+#cart-items-container p.text-muted {
+    margin: 0.4rem 0;
 }
 
-.cart-empty-message {
-    font-size: var(--ac-text-base);
+.list-group-item {
+    padding: 0.4rem 0.6rem;
+    border-bottom: 1px solid #e0e0e0;
 }
 
-/* ---------- Cart lines ---------- */
-
-.eskaera-cart-items .list-group-item {
-    display: flex;
+.list-group-item.d-flex {
+    gap: 0.5rem;
     flex-direction: column;
-    gap: var(--ac-space-2xs);
-    padding: var(--ac-space-xs) var(--ac-space-sm);
-    border-bottom: 1px solid var(--ac-border);
-    font-size: var(--ac-text-base);
 }
 
-.eskaera-cart-items .list-group-item h6 {
-    margin: 0 0 var(--ac-space-3xs);
-    font-size: var(--ac-text-base);
-    font-weight: var(--ac-weight-semibold);
-    line-height: var(--ac-leading-snug);
-    overflow-wrap: break-word;
+.list-group-item h6 {
+    margin: 0;
+    margin-bottom: 0.2rem;
+    font-weight: 600;
     word-break: break-word;
+    font-size: 0.875rem;
+    line-height: 1.3;
 }
 
-.eskaera-cart-items .list-group-item small {
+.list-group-item small {
     display: block;
-    font-size: var(--ac-text-xs);
-    color: var(--ac-text-muted);
+    font-size: 0.75rem;
+    color: #6c757d;
 }
 
-.eskaera-cart-items .list-group-item .d-flex {
+.list-group-item .d-flex {
+    min-width: auto;
     justify-content: space-between;
     align-items: center;
-    gap: var(--ac-space-sm);
+    gap: 0.5rem;
     flex-wrap: wrap;
 }
 
-/* Line subtotal. The previous #667eea was 3.42:1 at this size — under AA. */
-.eskaera-cart-items .list-group-item strong {
-    min-width: 3.75rem;
-    font-size: var(--ac-text-base);
-    text-align: right;
-    white-space: nowrap;
-    color: var(--ac-color-primary-strong);
-}
-
-.eskaera-cart-items .list-group-item > div:first-child {
-    flex: 1 1 auto;
-    min-width: 0;
-}
-
-/* Colours come from Bootstrap's .btn-danger, already on the element. */
-.remove-from-cart {
+.list-group-item .remove-from-cart {
+    flex-shrink: 0;
+    min-width: 24px;
+    min-height: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
-    /* 24px is the WCAG 2.2 AA floor (2.5.8); touch gets the full target below. */
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    padding: var(--ac-space-3xs) var(--ac-space-2xs);
-    font-size: var(--ac-text-2xs);
+    padding: 0.15rem 0.25rem;
+    font-size: 0.7rem;
     cursor: pointer;
-    transition: background-color var(--ac-transition-fast), transform var(--ac-transition-fast);
+    background-color: #dc3545;
+    color: #ffffff;
+    border: 1px solid #dc3545;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+}
+
+.list-group-item .remove-from-cart:hover {
+    background-color: #bb2d3b;
+    border-color: #bb2d3b;
+    transform: scale(1.05);
+}
+
+.list-group-item .remove-from-cart i {
+    font-size: 0.85rem;
+    color: #ffffff;
+}
+
+.list-group-item strong {
+    min-width: 60px;
+    text-align: right;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    color: #667eea;
+}
+
+.list-group-item.d-flex > div:first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.list-group-item.d-flex > div:first-child h6 {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
 }
 
 .cart-total {
-    padding: var(--ac-space-md);
-    border-top: 2px solid var(--ac-color-primary);
-    background-color: var(--ac-surface-sunken);
-    font-size: var(--ac-text-lg);
-    font-weight: var(--ac-weight-bold);
+    padding: 1rem;
+    background-color: #f8f9fa;
+    font-size: 1.5rem;
+    font-weight: 700;
+    border-top: 2px solid var(--primary-color);
     text-align: right;
-    color: var(--ac-color-primary-strong);
+    color: var(--primary-color);
 }
 
-/* ---------- Header actions ---------- */
+.cart-item-remove {
+    cursor: pointer;
+    color: #dc3545;
+    font-size: 0.7rem;
+}
 
-.card-header .btn-group,
-.cart-btn-group {
+.cart-item-remove:hover {
+    text-decoration: underline;
+}
+
+/* Cart header buttons styling */
+#save-cart-btn,
+#reload-cart-btn {
+    font-weight: 600;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.375rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-right: 0.25rem;
+    color: white;
+}
+
+#save-cart-btn {
+    background-color: #007bff;
+    border-color: #0056b3;
+}
+
+#save-cart-btn:hover {
+    background-color: #0056b3;
+    border-color: #004085;
+    box-shadow: 0 4px 8px rgba(0, 86, 179, 0.3);
+}
+
+#save-cart-btn:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 4px rgba(0, 86, 179, 0.3);
+}
+
+#reload-cart-btn {
+    background-color: #17a2b8;
+    border-color: #117a8b;
+}
+
+#reload-cart-btn:hover {
+    background-color: #117a8b;
+    border-color: #0c5460;
+    box-shadow: 0 4px 8px rgba(17, 122, 139, 0.3);
+}
+
+#reload-cart-btn:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 4px rgba(17, 122, 139, 0.3);
+}
+
+.card-header .btn-group {
     flex-shrink: 0;
+}
+
+#cart-title {
+    font-size: 1.2rem;
+}
+
+.cart-btn-group-nowrap,
+.cart-btn-group {
     flex-wrap: nowrap;
 }
 
-/* These four icon buttons were 0.5rem type with 0.1rem padding — roughly an
-   18px target, under the 24px AA minimum, for the cart's primary actions. */
-.cart-btn-compact {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 2rem;
-    min-height: 2rem;
-    padding: var(--ac-space-2xs);
-    line-height: 1;
+.cart-header-btn {
+    padding: 0.25rem;
 }
 
 .cart-icon-size {
-    font-size: var(--ac-text-base);
+    font-size: 0.9rem;
+}
+
+.cart-body-text {
+    font-size: 1.1rem;
+}
+
+.cart-body-lg {
+    font-size: 1.1rem;
+}
+
+.cart-title-lg {
+    font-size: 1.5rem;
 }
 
 .cart-title-sm {
-    font-size: var(--ac-text-md);
+    font-size: 1.1rem;
 }
 
-/* ---------- States ---------- */
-
-@media (hover: hover) and (pointer: fine) {
-    .remove-from-cart:hover {
-        transform: scale(1.05);
-    }
+.cart-btn-compact {
+    padding: 0.1rem;
+    min-width: auto;
+    font-size: 0.5rem;
+    line-height: 0.5;
+    height: auto;
 }
 
-.remove-from-cart:focus-visible,
-.cart-btn-compact:focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-    position: relative;
-    z-index: 1;
-}
-
-@media (pointer: coarse) {
-    .cart-btn-compact,
-    .remove-from-cart {
-        min-width: var(--ac-touch-target);
-        min-height: var(--ac-touch-target);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .remove-from-cart,
-    .remove-from-cart:hover {
-        transform: none;
-        transition: none;
-    }
+.cart-sticky-position {
+    top: 20px;
 }
diff --git a/website_sale_aplicoop/static/src/css/components/forms.css b/website_sale_aplicoop/static/src/css/components/forms.css
index 156f327..17635bc 100644
--- a/website_sale_aplicoop/static/src/css/components/forms.css
+++ b/website_sale_aplicoop/static/src/css/components/forms.css
@@ -1,129 +1,99 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/forms.css */
 
 /**
- * Form controls
- *
- * Everything here is scoped to an Eskaera page root. The previous version
- * styled bare `label`, `input[type="text"]`, `input[type="number"]` and
- * `select`, which reaches every form in web.assets_frontend — the website
- * login, the contact form, any other module's frontend widgets — not just this
- * addon's pages.
+ * Form and input component styles
  */
 
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page) label {
-    font-weight: var(--ac-weight-semibold);
-    color: var(--ac-text-secondary);
+label {
+    font-weight: 600;
+    color: #2d3748;
 }
 
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    :is(.form-control, .form-select, input[type="text"], input[type="number"], select) {
-    /* WCAG 1.4.11: an input's border is what identifies it, so ≥ 3:1. */
-    border: 1px solid var(--ac-border-strong);
-    font-size: var(--ac-text-base);
-    color: var(--ac-text-primary);
-    background-color: var(--ac-surface);
+.form-control,
+.form-select {
+    border-color: #cbd5e0;
+    font-size: 1rem;
 }
 
-/* One focus treatment for every control on these pages, keyboard only. */
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    :is(.form-control, .form-select, .form-check-input, input, select, textarea):focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-    border-color: var(--ac-color-primary);
+.form-control:focus,
+.form-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
-/* Bootstrap draws its own ring through a box-shadow on :focus; keep it in
-   token colours so mouse focus still reads, without a second outline. */
-:is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-    :is(.form-control, .form-select):focus {
-    border-color: var(--ac-color-primary);
-    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 20%);
+input[type="number"],
+input[type="text"],
+select {
+    background-color: #ffffff;
+    color: #212529;
+    border: 1px solid #ced4da;
 }
 
-/* ---------- Search and category filter ---------- */
-
-.eskaera-filters :is(.form-control, .form-select) {
-    height: auto;
-    padding: var(--ac-space-xs) var(--ac-space-sm);
-    font-size: var(--ac-text-base);
+input[type="number"]:focus,
+input[type="text"]:focus,
+select:focus {
+    outline: 2px solid #667eea;
+    outline-offset: 0;
+    border-color: var(--primary-color);
 }
 
-/* The clear-search button sits inside the input; give it a real target. */
-.search-clear-btn {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: var(--ac-space-2xs);
-    transform: translateY(-50%);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    border: none;
-    background: none;
-    font-size: var(--ac-text-lg);
-    line-height: 1;
-    color: var(--ac-text-secondary);
-    text-decoration: none;
-}
-
-.search-clear-btn.is-visible {
-    display: flex;
-}
-
-.search-input-wrapper {
-    position: relative;
-}
-
-.search-input-wrapper .form-control {
-    padding-inline-end: 2.5rem;
-}
-
-/* ---------- Home delivery checkbox ---------- */
-
-.eskaera-delivery-check {
+.form-check {
     display: flex;
     align-items: center;
-    gap: var(--ac-space-sm);
-    padding: var(--ac-space-md);
+    padding: 1rem 1.25rem;
+    margin-left: 0;
 }
 
-.eskaera-delivery-check .form-check-input {
+.form-check-input {
+    margin-right: 0.75rem;
     flex-shrink: 0;
+}
+
+/* Compact search and filter inputs */
+#realtime-search-input,
+#realtime-category-select {
+    font-size: 0.95rem;
+    padding: 0.375rem 0.75rem;
+    height: auto;
+}
+
+#realtimeSearch-filters .form-control,
+#realtimeSearch-filters .form-select {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.95rem;
+}
+
+.form-check-label {
+    margin: 0;
+}
+
+#home-delivery-checkbox {
     width: 1.5rem;
     height: 1.5rem;
-    margin: 0;
-    border: 2px solid var(--ac-color-primary);
-    border-radius: var(--ac-radius-sm);
     cursor: pointer;
+    border: 2px solid #0d6efd;
+    border-radius: 0.25rem;
+    margin-right: 0.75rem;
 }
 
-.eskaera-delivery-check .form-check-input:checked {
-    border-color: var(--ac-color-primary);
-    background-color: var(--ac-color-primary);
+#home-delivery-checkbox:checked {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
 }
 
-.eskaera-delivery-check .form-check-label {
+#home-delivery-checkbox:focus {
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.form-check-label[for="home-delivery-checkbox"] {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #212529;
+    cursor: pointer;
     display: flex;
     align-items: center;
-    margin: 0;
-    font-size: var(--ac-text-md);
-    font-weight: var(--ac-weight-semibold);
-    color: var(--ac-text-primary);
-    cursor: pointer;
 }
 
-/* ---------- Touch ---------- */
-
-@media (pointer: coarse) {
-    :is(.eskaera-page, .eskaera-shop-page, .eskaera-generic-page, .eskaera-checkout-page)
-        :is(.form-control, .form-select) {
-        min-height: var(--ac-touch-target);
-    }
-
-    .search-clear-btn {
-        width: var(--ac-touch-target);
-        height: var(--ac-touch-target);
-    }
+.help-text-sm {
+    font-size: 0.85rem;
 }
diff --git a/website_sale_aplicoop/static/src/css/components/order-card.css b/website_sale_aplicoop/static/src/css/components/order-card.css
index e9a3633..72e51c7 100644
--- a/website_sale_aplicoop/static/src/css/components/order-card.css
+++ b/website_sale_aplicoop/static/src/css/components/order-card.css
@@ -1,43 +1,30 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/order-card.css */
 
 /**
- * Order card (Eskaera)
- *
- * Markup (eskaera_page):
- *   .eskaera-order-card-wrapper
- *     └ .eskaera-order-card[.eskaera-order-card--special]
- *         └ .card-body
- *             ├ .order-badge-position   (product count)
- *             ├ a.eskaera-order-card-link  → .card-header-top (image, title, description)
- *             ├ .card-meta-compact > .meta-grid   (dates, badges)
- *             └ a.btn  (Browse products)
- *
- * Note the link only wraps the header, so the whole card is NOT clickable —
- * the hover/focus treatment below is applied to the card while the pointer is
- * anywhere over it, but `cursor: pointer` is left to the two real links.
+ * Order card (Eskaera) component styles
  */
 
 .eskaera-order-card-link {
+    text-decoration: none;
+    color: inherit;
     display: block;
     width: 100%;
-    color: inherit;
-    text-decoration: none;
 }
 
 .eskaera-order-card {
     position: relative;
+    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+    border: 1px solid rgba(90, 103, 216, 0.12);
+    border-radius: 0.75rem;
+    box-shadow: 0 6px 18px rgba(28, 37, 80, 0.06);
+    transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 320ms, border-color 320ms,
+        background 320ms;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
-    /* min-height in rem, not px: at 200% zoom a px floor clips the content. */
-    min-height: 18rem;
+    min-height: 290px;
     height: 100%;
-    border: 1px solid var(--ac-color-order-border);
-    border-radius: var(--ac-radius-lg);
-    background: var(--ac-surface-order);
-    box-shadow: var(--ac-shadow-md);
-    overflow: hidden;
-    transition: transform var(--ac-transition-normal), box-shadow var(--ac-transition-normal),
-        border-color var(--ac-transition-normal), background var(--ac-transition-normal);
+    cursor: pointer;
     animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
@@ -46,281 +33,371 @@
         opacity: 0;
         transform: translateY(30px);
     }
-
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
-/* Accent bar along the top edge. */
 .eskaera-order-card::before {
     content: "";
     position: absolute;
-    inset: 0 0 auto;
+    left: 0;
+    right: 0;
+    top: 0;
     height: 6px;
-    background: linear-gradient(90deg, var(--ac-color-order), var(--ac-color-order-strong));
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
 }
 
-/* ---------- Header ---------- */
+.eskaera-order-card-link:hover .eskaera-order-card {
+    transform: translateY(-8px) scale(1.01);
+    box-shadow: 0 20px 50px rgba(90, 103, 216, 0.15), 0 0 30px rgba(90, 103, 216, 0.1);
+    border: 1px solid rgba(90, 103, 216, 0.25);
+    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
+}
+
+.eskaera-order-card-link:hover .eskaera-order-card::before {
+    animation: shimmer 0.6s ease-in-out;
+}
+
+@keyframes shimmer {
+    0% {
+        left: 0;
+    }
+    50% {
+        left: 100%;
+    }
+    100% {
+        left: 0;
+    }
+}
+
+.eskaera-order-card .card-body {
+    padding: 0.6rem 0.8rem 0 0.8rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+.eskaera-order-card .card-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #1f2937;
+    margin: 0;
+    line-height: 1.15;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.order-desc-text {
+    font-size: 0.8rem;
+    color: #6b7280;
+    margin: 0;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.order-desc-sm {
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+.order-desc-md {
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.eskaera-order-card .btn {
+    margin-top: auto;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 0.6rem;
+    padding: 0.6rem 1.2rem;
+    font-weight: 600;
+    border-radius: 6px;
+    border: none !important;
+    font-size: 0.85rem;
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, #5a67d8, #4c57bd) !important;
+    color: white !important;
+    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.2) !important;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none !important;
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    width: auto;
+}
+
+.eskaera-order-card .btn::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.5s, height 0.5s;
+}
+
+.eskaera-order-card .btn:active::before {
+    width: 300px;
+    height: 300px;
+}
+
+.eskaera-order-card .btn:hover {
+    box-shadow: 0 8px 24px rgba(90, 103, 216, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
+    transform: translateY(-3px) scale(1.03);
+    background: linear-gradient(135deg, #4c57bd, #3d4898) !important;
+}
+
+/* Center button within card body */
+.eskaera-order-card .card-body > .btn {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Order card header spacing */
+.order-card-header-spacing {
+    margin-top: 0.9rem;
+}
+
+/* Order thumbnail small */
+.order-thumbnail-sm {
+    width: 90px;
+    height: 90px;
+    border-radius: 8px;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 2px solid rgba(90, 103, 216, 0.1);
+}
+
+/* Order thumbnail medium */
+.order-thumbnail-md {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 8px;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Order thumbnail checkout */
+.order-thumbnail-checkout,
+.checkout-thumbnail {
+    width: 90px;
+    height: 90px;
+    object-fit: cover;
+    border-radius: 6px;
+    flex-shrink: 0;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
 
 .card-header-top {
     display: flex;
-    gap: var(--ac-space-sm);
+    gap: 0.6rem;
     align-items: flex-start;
-    margin-bottom: var(--ac-space-2xs);
+    margin-bottom: 0.3rem;
+    height: 100px;
+    overflow: hidden;
 }
 
 .card-header-top > div:last-child {
-    flex: 1;
     text-align: left;
+    flex: 1;
 }
 
 .card-header-top .card-title {
     margin: 0;
 }
 
-.eskaera-order-card .card-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: var(--ac-space-2xs);
-    padding: var(--ac-space-sm) var(--ac-space-sm) 0;
-}
-
-.eskaera-order-card .card-title {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    margin: 0;
-    overflow: hidden;
-    font-size: var(--ac-text-base);
-    font-weight: var(--ac-weight-bold);
-    line-height: var(--ac-leading-tight);
-    color: var(--ac-text-primary);
-    text-overflow: ellipsis;
-}
-
-.order-desc-text {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    margin: 0;
-    overflow: hidden;
-    font-size: var(--ac-text-xs);
-    line-height: var(--ac-leading-snug);
-    color: var(--ac-text-muted);
-    text-overflow: ellipsis;
-}
-
-/* ---------- Thumbnails ---------- */
-
-.order-thumbnail-sm {
-    flex-shrink: 0;
-    width: 5.625rem;
-    height: 5.625rem;
-    border: 2px solid var(--ac-color-order-border);
-    border-radius: var(--ac-radius-md);
-    object-fit: cover;
-}
-
-.order-thumbnail-md {
-    flex-shrink: 0;
-    width: 7.5rem;
-    height: 7.5rem;
-    border-radius: var(--ac-radius-md);
-    box-shadow: var(--ac-shadow-sm);
-    object-fit: cover;
-}
-
-/* ---------- Product-count badge ---------- */
-
-.order-badge-position {
-    position: absolute;
-    top: var(--ac-space-md);
-    right: var(--ac-space-md);
-    z-index: 1;
-    display: flex;
-}
-
-.order-badge-custom {
-    display: flex;
+.card-badges .badge {
+    display: inline-flex;
     align-items: center;
-    gap: var(--ac-space-sm);
-    padding: var(--ac-space-sm) var(--ac-space-xs);
-    border-radius: var(--ac-radius-sm);
-    font-size: var(--ac-text-sm);
-    font-weight: var(--ac-weight-bold);
-    box-shadow: var(--ac-shadow-md);
+    gap: 0.2rem;
 }
 
-/* ---------- Meta block ---------- */
-
 .card-meta-compact {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 0;
+    margin: 0.2rem auto 0 auto;
+    padding: 0.6rem 0.8rem;
+    border-top: 1px solid rgba(90, 103, 216, 0.08);
+    background: rgba(245, 247, 255, 0.4);
+    border-radius: 0 0 0.75rem 0.75rem;
     width: 100%;
-    margin: var(--ac-space-2xs) auto 0;
-    padding: var(--ac-space-sm);
-    border-top: 1px solid var(--ac-color-order-border);
-    border-radius: 0 0 var(--ac-radius-lg) var(--ac-radius-lg);
-    background: var(--ac-surface-sunken);
 }
 
+.card-meta-compact .card-meta-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+/* Meta table styles for clean date display */
+.meta-table {
+    width: auto;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+    margin: 0 auto;
+    text-align: left;
+    min-height: 160px;
+    display: table;
+}
+
+.meta-table tbody {
+    display: table-row-group;
+}
+
+.meta-row {
+    display: table-row;
+    font-size: 0.8rem;
+    margin-bottom: 0;
+}
+
+.meta-label-cell {
+    display: table-cell;
+    padding: 0.25rem 0.6rem 0.25rem 0;
+    font-weight: 600;
+    color: #374151;
+    text-align: right;
+    vertical-align: top;
+    white-space: nowrap;
+}
+
+.meta-label-cell span {
+    display: inline-block;
+}
+
+.meta-value-cell {
+    display: table-cell;
+    padding: 0.25rem 0;
+    color: #6b7280;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.meta-value-cell .badge {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 0.7rem;
+    padding: 0.2rem 0.5rem;
+}
+
+.meta-label {
+    font-weight: 600;
+    color: #374151;
+    min-width: 85px;
+}
+
+.meta-value {
+    color: #6b7280;
+    flex: 1;
+}
+
+.order-badge-position {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    z-index: 10;
+    display: flex;
+}
+
+.order-badge-custom {
+    font-weight: 700;
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.3);
+    display: flex !important;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Meta grid - compact horizontal layout for order card metadata */
 .meta-grid {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--ac-space-sm) var(--ac-space-md);
-    align-items: center;
+    gap: 0.5rem 1rem;
     justify-content: center;
+    align-items: center;
 }
 
 .meta-grid .meta-item {
     display: flex;
     align-items: center;
-    gap: var(--ac-space-2xs);
-    font-size: var(--ac-text-xs);
+    gap: 0.35rem;
+    font-size: 0.8rem;
 }
 
 .meta-grid .meta-label {
+    font-weight: 600;
+    color: #374151;
     min-width: auto;
-    font-weight: var(--ac-weight-semibold);
-    color: var(--ac-text-secondary);
 }
 
 .meta-grid .meta-value {
-    color: var(--ac-text-muted);
+    color: #6b7280;
 }
 
 .meta-grid .badge {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
     display: inline-flex;
     align-items: center;
-    gap: var(--ac-space-2xs);
-    padding: var(--ac-space-2xs) var(--ac-space-xs);
-    font-size: var(--ac-text-2xs);
+    gap: 0.25rem;
+}
+
+.meta-grid .badge i {
+    font-size: 0.7rem;
+}
+
+/* Special order card */
+.eskaera-order-card--special {
+    background: linear-gradient(180deg, #fffdf0 0%, #fffbea 100%);
+    border: 1px solid rgba(245, 158, 11, 0.35);
+    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.12);
+}
+
+.eskaera-order-card--special::before {
+    background: linear-gradient(90deg, #f59e0b, #d97706);
+}
+
+.eskaera-order-card-link:hover .eskaera-order-card--special {
+    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.2), 0 0 30px rgba(245, 158, 11, 0.12);
+    border-color: rgba(245, 158, 11, 0.5);
+    background: linear-gradient(180deg, #fffdf0 0%, #fff8db 100%);
+}
+
+.special-order-badge {
+    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
+    color: #fff !important;
+    font-size: 0.75rem;
+    padding: 0.25rem 0.6rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    border-radius: 4px;
+    font-weight: 600;
+    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
 }
 
 .meta-item--full {
     width: 100%;
     justify-content: center;
 }
-
-/* Home delivery: its own row, badge then date, centred as a pair — so it stays
-   centred whether or not the date is there. */
-.meta-grid .meta-item--delivery {
-    width: 100%;
-    justify-content: center;
-    gap: var(--ac-space-sm);
-}
-
-/* ---------- Call to action ---------- */
-
-/* Bootstrap 5.3 drives .btn from unprefixed custom properties, so the card's
-   own colours are set by redefining those instead of piling up !important. */
-.eskaera-order-card .btn {
-    --btn-color: var(--ac-text-on-fill);
-    --btn-bg: var(--ac-color-order);
-    --btn-border-color: transparent;
-    --btn-hover-color: var(--ac-text-on-fill);
-    --btn-hover-bg: var(--ac-color-order-strong);
-    --btn-hover-border-color: transparent;
-    --btn-active-color: var(--ac-text-on-fill);
-    --btn-active-bg: var(--ac-color-order-deep);
-    --btn-active-border-color: transparent;
-    --btn-border-radius: var(--ac-radius-sm);
-    --btn-font-size: var(--ac-text-sm);
-    --btn-font-weight: var(--ac-weight-semibold);
-    --btn-padding-y: var(--ac-space-sm);
-    --btn-padding-x: var(--ac-space-md);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ac-space-sm);
-    margin: auto auto var(--ac-space-sm);
-    box-shadow: var(--ac-shadow-sm);
-    text-align: center;
-    text-decoration: none;
-    transition: background-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast),
-        transform var(--ac-transition-fast);
-}
-
-/* ---------- Special orders ---------- */
-
-.eskaera-order-card--special {
-    border-color: var(--ac-color-special-border);
-    background: var(--ac-surface-special);
-}
-
-.eskaera-order-card--special::before {
-    background: linear-gradient(90deg, var(--ac-color-special), var(--ac-color-special-strong));
-}
-
-.special-order-badge {
-    /* Amber needs dark text — white on it is 2.15:1. */
-    --badge-color: var(--ac-text-on-special);
-    --badge-font-size: var(--ac-text-2xs);
-    --badge-border-radius: var(--ac-radius-sm);
-    --badge-padding-x: var(--ac-space-xs);
-    --badge-padding-y: var(--ac-space-2xs);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ac-space-2xs);
-    background: linear-gradient(135deg, var(--ac-color-special), var(--ac-color-special-strong));
-    font-weight: var(--ac-weight-semibold);
-    box-shadow: var(--ac-shadow-sm);
-}
-
-/* ---------- States ---------- */
-
-@media (hover: hover) and (pointer: fine) {
-    .eskaera-order-card:hover {
-        transform: translateY(-8px);
-        border-color: var(--ac-color-order-border-hover);
-        background: var(--ac-surface-order-hover);
-        box-shadow: var(--ac-shadow-lg);
-    }
-
-    .eskaera-order-card--special:hover {
-        border-color: var(--ac-color-special-border-hover);
-        background: var(--ac-surface-special-hover);
-    }
-
-    .eskaera-order-card .btn:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--ac-shadow-md);
-    }
-}
-
-/* Keyboard users get the same emphasis as a hover, plus a ring on the card
-   that holds the focused link. */
-.eskaera-order-card:focus-within {
-    border-color: var(--ac-color-order-border-hover);
-    background: var(--ac-surface-order-hover);
-    box-shadow: var(--ac-shadow-lg);
-}
-
-.eskaera-order-card-link:focus-visible,
-.eskaera-order-card .btn:focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-    border-radius: var(--ac-radius-sm);
-}
-
-/* The entry animation is decorative; motion sensitivity outranks it, and the
-   hover lift has to stop moving too. */
-@media (prefers-reduced-motion: reduce) {
-    .eskaera-order-card {
-        animation: none;
-        transition: none;
-    }
-
-    .eskaera-order-card:hover,
-    .eskaera-order-card .btn,
-    .eskaera-order-card .btn:hover {
-        transform: none;
-        transition: none;
-    }
-}
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 ca0ff82..d3d6671 100644
--- a/website_sale_aplicoop/static/src/css/components/product-card.css
+++ b/website_sale_aplicoop/static/src/css/components/product-card.css
@@ -1,204 +1,238 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/product-card.css */
 
 /**
- * Product card
- *
- * Markup (eskaera_shop_products):
- *   .product-card-wrapper.product-card
- *     └ .card
- *         ├ img.product-img-cover | .product-img-placeholder
- *         ├ .card-body  (title, tags, supplier, origin, 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.
+ * Product card component styles
  */
 
 .product-card {
+    background-color: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.3s, transform 0.2s;
     display: flex;
     flex-direction: column;
+    padding: 0.5rem;
     height: 100%;
-    padding: var(--ac-space-2xs);
-    border: 1px solid var(--ac-border-subtle);
-    border-radius: var(--ac-radius-lg);
-    background-color: var(--ac-surface);
-    box-shadow: var(--ac-shadow-sm);
     overflow: hidden;
-    transition: box-shadow var(--ac-transition-normal), transform var(--ac-transition-normal);
+    outline: none;
 }
 
-/* Bootstrap 5.3 drives .card through unprefixed custom properties, so the inner
-   card can be flattened without !important and without touching the markup. */
-.product-card > .card {
-    --card-bg: transparent;
-    --card-border-width: 0;
-    --card-border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+.product-card:hover,
+.product-card:focus-within {
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
+    outline: 2px solid var(--primary-color, #007bff);
+    outline-offset: 2px;
 }
 
-/* ---------- Media ---------- */
+.product-card .product-image {
+    height: 120px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+    background: #f3f3f3;
+    display: block;
+}
 
-.product-card .product-image,
-.product-img-cover,
-.product-img-fixed,
-.product-img-placeholder {
+.product-img-cover {
+    height: 120px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+    box-shadow: 0 2px 8px rgba(40, 39, 39, 0.09);
+    background: #f3f3f3;
     display: block;
     flex-shrink: 0;
-    width: 100%;
-    height: var(--ac-card-media-height);
-    border-radius: var(--ac-radius-md) var(--ac-radius-md) 0 0;
-    object-fit: cover;
-    background-color: var(--ac-surface-muted);
 }
 
-.product-img-placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--ac-text-muted);
-}
-
-/* ---------- Body ---------- */
-
 .product-card .card-body {
     display: flex;
     flex-direction: column;
-    /* Sized to its own content, not stretched: the add-to-cart form below is
-       what aligns across the row (see quantity-control.css), so the text/price
-       block stays compact instead of ballooning to match a taller sibling. */
-    gap: var(--ac-space-3xs);
-    padding: var(--ac-space-2xs) var(--ac-space-xs) var(--ac-space-2xs);
-    background: linear-gradient(135deg, var(--ac-surface-tint) 0%, transparent 100%);
-    transition: background var(--ac-transition-normal);
+    height: 100%;
+    flex-grow: 1;
+    padding: 0.4rem 0.55rem 0.5rem;
+    position: relative;
+    background: linear-gradient(135deg, rgba(0, 123, 255, 0.07) 0%, rgba(0, 123, 255, 0.04) 100%);
+    transition: background 0.3s;
+}
+
+.product-card:hover .card-body,
+.product-card:focus-within .card-body {
+    background: linear-gradient(
+        135deg,
+        rgba(108, 117, 125, 0.13) 0%,
+        rgba(108, 117, 125, 0.09) 100%
+    );
 }
 
 .product-card .card-title {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    /* Reserve both lines so single-line titles don't stagger the grid. */
-    min-height: calc(2em * var(--ac-leading-tight));
-    margin: 0;
-    overflow: hidden;
+    flex-grow: 1;
+    margin: 0 0 0.1rem 0;
+    min-height: auto;
+    display: block;
+    word-wrap: break-word;
     overflow-wrap: break-word;
-    font-size: var(--ac-text-base);
-    font-weight: var(--ac-weight-semibold);
-    line-height: var(--ac-leading-tight);
-    letter-spacing: 0.01em;
+    font-size: 1rem !important;
+    line-height: 1.15;
     text-align: center;
-    color: var(--ac-text-primary);
+    font-weight: 600;
+    color: #1a202c;
+    letter-spacing: 0.01em;
 }
 
 .product-card .card-text {
-    margin-bottom: 0;
-    font-size: var(--ac-text-sm);
+    margin-bottom: 0.08rem;
     text-align: center;
+    font-size: 0.95rem;
 }
 
-/* ---------- Tags ---------- */
+.product-card .card-text strong {
+    display: block;
+    margin-bottom: 0.1rem;
+    font-size: 1.15rem;
+    color: #3b82f6;
+}
+
+.product-card .product-supplier {
+    text-align: center;
+    color: #4a5568;
+    font-weight: 400;
+    margin-bottom: 0.08rem;
+    font-size: 0.85rem !important;
+}
 
 .product-tags {
+    text-align: center;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--ac-space-3xs);
+    gap: 0.12rem;
     justify-content: center;
-    margin: 0;
+    font-weight: 400;
+    font-size: 1rem !important;
+    margin: 0 0 0.08rem 0;
     padding: 0;
 }
 
-/* The per-tag colour is a record value, so it arrives as the --ac-tag-color
-   custom property set inline on the element (see eskaera_shop_products). */
 .badge-km {
-    --badge-padding-x: var(--ac-space-2xs);
-    --badge-padding-y: var(--ac-space-3xs);
-    --badge-font-size: var(--ac-text-2xs);
-    --badge-font-weight: var(--ac-weight-semibold);
-    --badge-color: var(--ac-text-on-fill);
-    --badge-border-radius: var(--ac-radius-sm);
-    border: 1px solid var(--ac-tag-color, var(--ac-color-primary-strong));
-    background-color: var(--ac-tag-color, var(--ac-color-primary-strong));
+    background-color: var(--primary-color, #007bff) !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    padding: 0.18rem 0.32rem !important;
+    font-size: 0.68rem !important;
+    border-radius: 0.22rem;
+    display: inline-block;
+    border: 1px solid #007bff;
     white-space: nowrap;
+    margin-right: 0.08rem;
+    margin-bottom: 0.08rem;
 }
 
-/* ---------- Supplier & origin ---------- */
-
-.product-card .product-supplier,
-.product-card .product-origin {
-    margin: 0;
-    font-size: var(--ac-text-xs);
-    font-weight: var(--ac-weight-normal);
+.card-body p.card-text {
     text-align: center;
-    color: var(--ac-text-secondary);
-}
-
-.product-card .product-origin .fa {
-    margin-right: var(--ac-space-3xs);
-}
-
-/* ---------- Price ---------- */
-
-.product-card .product-price-display {
+    margin-bottom: 0.35rem;
+    min-height: 1.5rem;
     display: flex;
-    align-items: baseline;
+    align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
-    gap: var(--ac-space-2xs);
-    margin: 0;
+    background-color: var(--primary-color, #007bff);
+    color: #fff;
+    border-radius: 0.18rem;
+    font-size: 0.98rem;
 }
 
-.product-card .product-price-main {
-    font-size: var(--ac-text-lg);
-    font-weight: var(--ac-weight-bold);
-    line-height: var(--ac-leading-tight);
+.card-body p.card-text strong {
+    display: inline;
+    font-size: 1.18rem !important;
+    color: var(--primary-color, #007bff);
+    margin-bottom: 0;
     white-space: nowrap;
-    color: var(--ac-color-primary-strong);
 }
 
-.product-card .product-unit-price {
-    margin: 0;
-    font-size: var(--ac-text-xs);
-    text-align: center;
-    color: var(--ac-text-secondary);
+.product-img-fixed {
+    object-fit: cover;
+    height: 120px;
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    background: #f3f3f3;
+    display: block;
 }
 
-/* ---------- States ---------- */
+.product-img-placeholder {
+    height: 120px;
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    background: #f3f3f3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #ccc;
+}
 
-/* Hover effects only where a pointer can actually hover — on touch they stick
-   after a tap and read as a stuck selection. */
-@media (hover: hover) and (pointer: fine) {
-    .product-card:hover {
-        transform: translateY(-4px);
-        box-shadow: var(--ac-shadow-lg);
+/* Responsive: tablet (≤768px) — compresión moderada */
+@media (max-width: 768px) {
+    .product-card .product-image,
+    .product-img-cover,
+    .product-img-fixed,
+    .product-img-placeholder {
+        height: 90px;
     }
-
-    .product-card:hover .card-body {
-        background: linear-gradient(135deg, var(--ac-surface-tint-hover) 0%, transparent 100%);
-    }
-}
-
-/* Keyboard focus only: a ring, and no transform — moving the card under the
-   caret while tabbing is disorienting. */
-.product-card:focus-visible,
-.product-card:focus-within {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-}
-
-.product-card:focus-within .card-body {
-    background: linear-gradient(135deg, var(--ac-surface-tint-hover) 0%, transparent 100%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .product-card,
     .product-card .card-body {
-        transition: none;
+        padding: 0.35rem 0.45rem 0.4rem;
     }
-
-    .product-card:hover {
-        transform: none;
+    .card-body p.card-text {
+        margin-bottom: 0.25rem;
+        min-height: 1.4rem;
     }
 }
+
+/* Responsive: móvil (≤480px) — compresión máxima */
+@media (max-width: 480px) {
+    .product-card {
+        padding: 0.15rem;
+        border-radius: 6px;
+    }
+    .product-card .product-image,
+    .product-img-cover,
+    .product-img-fixed,
+    .product-img-placeholder {
+        height: 60px;
+        border-radius: 5px 5px 0 0;
+    }
+    .product-card .card-body {
+        padding: 0.25rem 0.3rem 0.3rem;
+    }
+    .product-card .card-title {
+        font-size: 0.82rem !important;
+        line-height: 1.15;
+        margin-bottom: 0.05rem;
+    }
+    .product-card .card-text {
+        font-size: 0.8rem;
+    }
+    .badge-km {
+        font-size: 0.55rem !important;
+        padding: 0.1rem 0.18rem !important;
+    }
+    .product-tags {
+        font-size: 0.82rem !important;
+        gap: 0.08rem;
+        margin-bottom: 0.05rem;
+    }
+    .card-body p.card-text {
+        min-height: 1rem;
+        font-size: 0.85rem;
+        margin-bottom: 0.2rem;
+    }
+    .product-card .product-supplier {
+        font-size: 0.72rem !important;
+        margin-bottom: 0.05rem;
+    }
+}
+
+/* Accesibilidad: focus visible */
+.product-card:focus-visible {
+    outline: 2.5px solid var(--primary-color, #007bff);
+    outline-offset: 2px;
+}
diff --git a/website_sale_aplicoop/static/src/css/components/quantity-control.css b/website_sale_aplicoop/static/src/css/components/quantity-control.css
index ef8806c..64a0087 100644
--- a/website_sale_aplicoop/static/src/css/components/quantity-control.css
+++ b/website_sale_aplicoop/static/src/css/components/quantity-control.css
@@ -1,220 +1,405 @@
 /* filepath: website_sale_aplicoop/static/src/css/components/quantity-control.css */
 
 /**
- * Quantity control — stepper (− input +) plus the add-to-cart button.
- *
- * Markup (eskaera_shop_products):
- *   form.add-to-cart-form
- *     └ .qty-control
- *         ├ label.visually-hidden
- *         ├ button.qty-decrease
- *         ├ input.product-qty
- *         ├ button.qty-increase
- *         └ button.add-to-cart-btn
- *
- * Sizing is fluid (--ac-control-size), which replaces the six per-breakpoint
- * bands this component used to carry. The only query left is a pointer query:
- * what actually changes between a phone and a desktop is the input device, not
- * the viewport width.
+ * Quantity control (+ - input) component styles
  */
 
-/* margin-top: auto pins this to the bottom of .product-card > .card (which is
-   stretched to the grid row's tallest sibling) so every card's button ends up
-   at the same height, without ballooning the text/price block above it — see
-   .product-card .card-body in product-card.css. */
+/* Formulario agregar al carrito */
 .add-to-cart-form {
-    display: flex;
-    justify-content: center;
     width: 100%;
-    margin-top: auto;
-    padding: var(--ac-space-3xs);
-    border: 1px solid var(--ac-border);
-    border-radius: var(--ac-radius-sm);
-    background-color: var(--ac-surface-sunken);
+    gap: 0;
+    padding: 0.5rem;
+    margin-top: 0.25rem;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    display: flex;
+    border: 1px solid #e9ecef;
+    align-content: center;
+    justify-content: center;
 }
 
-/* A grid, not a wrapping flex row: four 44px controls never fit across a card
-   that is ~150px wide, so the row used to wrap and drop "+" onto its own line
-   next to the cart button. Two deliberate rows instead — the stepper across the
-   top, the primary action full width underneath, where it is easier to hit. */
-.qty-control {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    align-items: center;
+.add-to-cart-form .input-group {
     width: 100%;
-}
-
-/* ---------- Stepper ---------- */
-
-.qty-control .qty-decrease,
-.qty-control .qty-increase {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: var(--ac-control-size);
-    height: var(--ac-control-size);
+    gap: 0;
     padding: 0;
-    /* WCAG 1.4.11: the boundary is what identifies the control, so it needs
-       ≥ 3:1 against the surface behind it. */
-    border: var(--ac-control-border-width) solid var(--ac-border-strong);
-    font-size: var(--ac-text-sm);
-    color: var(--ac-text-secondary);
-    background-color: var(--ac-surface);
-    cursor: pointer;
-    transition: color var(--ac-transition-fast), border-color var(--ac-transition-fast),
-        background-color var(--ac-transition-fast);
-}
-
-.qty-control .qty-decrease {
-    border-start-start-radius: var(--ac-radius-sm);
-    border-end-start-radius: var(--ac-radius-sm);
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-}
-
-.qty-control .qty-increase {
-    border-start-end-radius: var(--ac-radius-sm);
-    border-end-end-radius: var(--ac-radius-sm);
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
 }
 
 .add-to-cart-form .product-qty {
-    /* Fills the middle grid column; min-width 0 lets it shrink on a narrow card
-       instead of pushing the "+" button out of the row. */
-    width: 100%;
-    min-width: 0;
-    height: var(--ac-control-size);
-    padding: 0 var(--ac-space-2xs);
-    /* Collapse the shared edge with the two stepper buttons. */
-    border: var(--ac-control-border-width) solid var(--ac-border-strong);
-    border-inline-width: 0;
-    border-radius: 0;
-    font-size: var(--ac-text-base);
-    font-weight: var(--ac-weight-bold);
+    flex: 1 1 auto;
     text-align: center;
-    color: var(--ac-text-primary);
-    background-color: var(--ac-surface);
-    appearance: textfield;
+    font-weight: 700;
+    font-size: 1rem;
+    padding: 0.3rem;
+    min-width: 32px;
+    max-width: 70px;
+    border: 2px solid #dee2e6;
+    border-radius: 0;
+    background-color: #ffffff;
+    transition: all 0.2s ease;
     -moz-appearance: textfield;
-    transition: border-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+    height: 36px;
+    line-height: 30px;
 }
 
 .add-to-cart-form .product-qty::-webkit-outer-spin-button,
 .add-to-cart-form .product-qty::-webkit-inner-spin-button {
-    margin: 0;
     -webkit-appearance: none;
+    margin: 0;
 }
 
-/* ---------- Add to cart ---------- */
+.add-to-cart-form .product-qty:focus {
+    outline: none;
+    border-color: var(--primary-color, #007bff);
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    background-color: #ffffff;
+}
 
-.add-to-cart-form .add-to-cart-btn {
-    /* Full width on its own row, under the stepper. */
-    grid-column: 1 / -1;
+/* Contenedor de control de cantidad */
+.qty-control {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    height: var(--ac-control-size);
-    margin-top: var(--ac-space-3xs);
+    gap: 0;
     padding: 0;
-    border: none;
-    border-radius: var(--ac-radius-sm);
-    font-size: var(--ac-text-sm);
-    color: var(--ac-text-on-fill);
-    background-color: var(--ac-color-accent);
+    width: 100%;
+    height: 44px;
+}
+
+/* Botones de cantidad + y - */
+.qty-control .qty-decrease,
+.qty-control .qty-increase {
+    min-width: 36px;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    gap: 0;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #dee2e6;
+    background-color: #ffffff;
+    color: #495057;
+    transition: all 0.2s ease;
     cursor: pointer;
-    transition: background-color var(--ac-transition-fast), transform var(--ac-transition-fast);
+    flex-shrink: 0;
 }
 
-.add-to-cart-form .add-to-cart-btn .fa {
-    font-size: var(--ac-text-md);
-}
-
-/* Out of stock stays focusable and clickable on purpose: the handler answers
-   with an explanation instead of the control silently doing nothing. It is
-   marked aria-disabled in the template, so the styling has to read as
-   unavailable without relying on colour alone (the icon changes to fa-ban). */
-.add-to-cart-form .add-to-cart-btn[data-out-of-stock="true"] {
-    color: var(--ac-text-secondary);
-    background-color: var(--ac-surface-muted);
-    cursor: not-allowed;
-}
-
-/* ---------- States ---------- */
-
-@media (hover: hover) and (pointer: fine) {
-    .qty-control .qty-decrease:hover,
-    .qty-control .qty-increase:hover {
-        border-color: var(--ac-color-primary);
-        color: var(--ac-color-primary-strong);
-        background-color: var(--ac-surface-sunken);
-    }
-
-    .add-to-cart-form .add-to-cart-btn:hover {
-        background-color: var(--ac-color-accent-strong);
-        transform: scale(1.05);
-    }
-
-    .add-to-cart-form .add-to-cart-btn[data-out-of-stock="true"]:hover {
-        background-color: var(--ac-surface-muted);
-        transform: none;
-    }
+.qty-control .qty-decrease:hover,
+.qty-control .qty-increase:hover {
+    border-color: var(--primary-color, #007bff);
+    color: var(--primary-color, #007bff);
+    background-color: #f8f9fa;
 }
 
 .qty-control .qty-decrease:active,
 .qty-control .qty-increase:active {
-    background-color: var(--ac-surface-sunken);
+    background-color: #e9ecef;
+}
+
+.add-to-cart-form .add-to-cart-btn {
+    white-space: nowrap;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    margin: 0;
+    font-size: 0.8rem;
+    height: 36px;
+    width: 36px;
+    min-width: 36px;
+    max-width: 36px;
+    min-height: 36px;
+    max-height: 36px;
+    flex-shrink: 0;
+    border: none;
+    background-color: #7c3aed !important;
+    color: #ffffff !important;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.add-to-cart-form .add-to-cart-btn:hover {
+    background-color: #6d28d9 !important;
+    transform: scale(1.05);
 }
 
 .add-to-cart-form .add-to-cart-btn:active {
-    background-color: var(--ac-color-accent-strong);
+    background-color: #5b21b6 !important;
     transform: scale(0.98);
 }
 
-.qty-control .qty-decrease:focus-visible,
-.qty-control .qty-increase:focus-visible,
-.add-to-cart-form .add-to-cart-btn:focus-visible,
-.add-to-cart-form .product-qty:focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-    /* Raise the focused control so the ring is not clipped by its neighbours. */
-    position: relative;
-    z-index: 1;
+.add-to-cart-form .add-to-cart-btn i {
+    font-size: 1rem;
 }
 
-.add-to-cart-form .product-qty:focus-visible {
-    border-color: var(--ac-color-primary);
-}
+/* Pantallas muy grandes: 1600px+ (6 columnas) */
+@media (min-width: 1600px) {
+    .add-to-cart-form {
+        padding: 0.35rem;
+        gap: 0.08rem;
+    }
 
-/* ---------- Input device ---------- */
+    .add-to-cart-form .input-group {
+        height: 32px;
+        gap: 0.06rem;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 1rem;
+        min-width: 28px;
+        max-width: 60px;
+        height: 32px;
+        padding: 0.2rem;
+    }
 
-/* Touch: grow every target to 44px. WCAG 2.2 AA (2.5.8) only asks for 24px,
-   but 44px is the AAA figure (2.5.5) and what a thumb actually needs. */
-@media (pointer: coarse) {
     .qty-control .qty-decrease,
     .qty-control .qty-increase {
-        width: var(--ac-touch-target);
-        height: var(--ac-touch-target);
+        width: 32px;
+        height: 32px;
+        font-size: 0.9rem;
     }
 
-    .add-to-cart-form .product-qty,
     .add-to-cart-form .add-to-cart-btn {
-        height: var(--ac-touch-target);
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        max-width: 32px;
+        font-size: 0.75rem;
     }
 }
 
-@media (prefers-reduced-motion: reduce) {
+/* Pantallas grandes: 1400-1599px (5 columnas) */
+@media (max-width: 1599px) and (min-width: 1400px) {
+    .add-to-cart-form {
+        padding: 0.36rem;
+        gap: 0.07rem;
+    }
+
+    .add-to-cart-form .input-group {
+        height: 32px;
+        gap: 0.05rem;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 1rem;
+        min-width: 28px;
+        max-width: 62px;
+        height: 32px;
+        padding: 0.2rem;
+    }
+
     .qty-control .qty-decrease,
-    .qty-control .qty-increase,
-    .add-to-cart-form .product-qty,
-    .add-to-cart-form .add-to-cart-btn {
-        transition: none;
+    .qty-control .qty-increase {
+        width: 32px;
+        height: 32px;
+        font-size: 0.9rem;
     }
 
-    .add-to-cart-form .add-to-cart-btn:hover,
-    .add-to-cart-form .add-to-cart-btn:active {
-        transform: none;
+    .add-to-cart-form .add-to-cart-btn {
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        font-size: 0.75rem;
+    }
+}
+
+/* Pantallas medianas: 1200-1399px (4 columnas) */
+@media (max-width: 1399px) and (min-width: 1200px) {
+    .add-to-cart-form {
+        padding: 0.34rem;
+        gap: 0.06rem;
+    }
+
+    .add-to-cart-form .input-group {
+        height: 32px;
+        gap: 0.05rem;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 0.95rem;
+        min-width: 28px;
+        max-width: 60px;
+        height: 32px;
+        padding: 0.2rem;
+    }
+
+    .qty-control .qty-decrease,
+    .qty-control .qty-increase {
+        width: 32px;
+        height: 32px;
+        font-size: 0.88rem;
+    }
+
+    .add-to-cart-form .add-to-cart-btn {
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        font-size: 0.74rem;
+    }
+}
+
+/* Pantallas tablet grandes: 992-1199px (3 columnas) */
+@media (max-width: 1199px) and (min-width: 992px) {
+    .add-to-cart-form {
+        padding: 0.32rem;
+        gap: 0.04rem;
+    }
+
+    .add-to-cart-form .input-group {
+        height: 32px;
+        gap: 0.04rem;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 0.9rem;
+        min-width: 28px;
+        max-width: 58px;
+        height: 32px;
+        padding: 0.2rem;
+    }
+
+    .qty-control .qty-decrease,
+    .qty-control .qty-increase {
+        width: 32px;
+        height: 32px;
+        font-size: 0.85rem;
+        border-width: 1px;
+    }
+
+    .add-to-cart-form .add-to-cart-btn {
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        font-size: 0.72rem;
+    }
+}
+
+/* Pantallas tablet: 768-991px (2-3 columnas) */
+@media (max-width: 991px) and (min-width: 768px) {
+    .add-to-cart-form {
+        padding: 0.42rem;
+        gap: 0.03rem;
+    }
+
+    .add-to-cart-form .input-group {
+        height: 36px;
+        gap: 0.04rem;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 1rem;
+        min-width: 32px;
+        max-width: 68px;
+        height: 36px;
+        padding: 0.3rem;
+    }
+
+    .qty-control .qty-decrease,
+    .qty-control .qty-increase {
+        width: 36px;
+        height: 36px;
+        font-size: 0.95rem;
+        border-width: 1px;
+    }
+
+    .add-to-cart-form .add-to-cart-btn {
+        height: 36px;
+        width: 36px;
+        min-width: 36px;
+        font-size: 0.82rem;
+    }
+}
+
+/* Móvil grande: 576-767px (2 columnas) */
+@media (max-width: 767px) and (min-width: 576px) {
+    .add-to-cart-form {
+        padding: 0.35rem;
+        gap: 0.1rem;
+    }
+
+    .add-to-cart-form .input-group {
+        height: 34px;
+        gap: 0.08rem;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 0.9rem;
+        min-width: 30px;
+        max-width: 64px;
+        height: 34px;
+        padding: 0.25rem;
+    }
+
+    .qty-control .qty-decrease,
+    .qty-control .qty-increase {
+        width: 34px;
+        height: 34px;
+        font-size: 0.9rem;
+        border-width: 1px;
+    }
+
+    .add-to-cart-form .add-to-cart-btn {
+        height: 34px;
+        width: 34px;
+        min-width: 34px;
+        font-size: 0.8rem;
+    }
+}
+
+/* Móvil pequeño: < 576px (1 columna) */
+@media (max-width: 575px) {
+    .add-to-cart-form {
+        padding: 0.3rem;
+        gap: 0.08rem;
+        flex-wrap: wrap;
+        width: 100%;
+    }
+
+    .add-to-cart-form .input-group {
+        height: 32px;
+        gap: 0.06rem;
+        flex: 1 1 100%;
+    }
+
+    .add-to-cart-form .product-qty {
+        font-size: 0.8rem;
+        min-width: 28px;
+        max-width: 60px;
+        height: 32px;
+        padding: 0.2rem;
+        line-height: 28px;
+    }
+
+    .qty-control .qty-decrease,
+    .qty-control .qty-increase {
+        width: 32px;
+        height: 32px;
+        font-size: 0.8rem;
+        border-width: 1px;
+        min-width: 32px;
+    }
+
+    .qty-control {
+        width: auto;
+        gap: 0;
+    }
+
+    .add-to-cart-form .add-to-cart-btn {
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        max-width: 32px;
+        font-size: 0.75rem;
+        flex: 0 0 auto;
+    }
+
+    .add-to-cart-form .add-to-cart-btn i {
+        font-size: 0.8rem;
     }
 }
diff --git a/website_sale_aplicoop/static/src/css/components/tag-filter.css b/website_sale_aplicoop/static/src/css/components/tag-filter.css
index 839200b..45022d5 100644
--- a/website_sale_aplicoop/static/src/css/components/tag-filter.css
+++ b/website_sale_aplicoop/static/src/css/components/tag-filter.css
@@ -4,103 +4,70 @@
  */
 
 /**
- * Tag filter badges
+ * Tag Filter Badges Component
  *
- * Toggle buttons above the product grid. Three states:
- *   (default)     nothing selected — each badge wears its own tag colour
- *   .is-selected  this tag is filtering
- *   .is-dimmed    another tag is filtering, this one is not
- *
- * realtime_search.js used to paint all three by writing nine
- * style.setProperty(..., "important") calls per click. It now only toggles
- * these classes and aria-pressed; the appearance lives here.
- *
- * The per-tag colour arrives as --ac-tag-color, set inline from the record.
+ * Styles for interactive tag filter badges in the product search/filter bar.
+ * Badges toggle between secondary (unselected) and primary (selected) states.
  */
 
+/* Container for all tag filter badges */
 .tag-filter-badges {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
     justify-content: center;
-    gap: var(--ac-space-sm);
-    padding: var(--ac-space-xs) 0;
-}
-
-.tag-filter-badge {
-    display: inline-flex;
     align-items: center;
-    /* 24px is the AA floor (WCAG 2.2 §2.5.8); coarse pointers get 44 below. */
-    min-height: 1.5rem;
-    padding: var(--ac-space-sm) var(--ac-space-xs);
-    border: 1px solid var(--ac-tag-color, var(--ac-color-secondary));
-    border-radius: var(--ac-radius-sm);
-    background-color: var(--ac-tag-color, var(--ac-color-secondary));
-    font-size: var(--ac-text-sm);
-    font-weight: var(--ac-weight-medium);
-    color: var(--ac-text-on-fill);
-    white-space: nowrap;
+    gap: 0.5rem;
+    padding: 0.75rem 0;
+}
+
+/* Individual tag filter badge button */
+.tag-filter-badge {
     cursor: pointer;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all 0.2s ease-in-out;
     user-select: none;
-    transition: background-color var(--ac-transition-fast), border-color var(--ac-transition-fast),
-        box-shadow var(--ac-transition-fast), transform var(--ac-transition-fast);
+    display: inline-block;
+    border: 1px solid;
+    color: #ffffff !important;
 }
 
-/* Tags with no colour of their own fall back to the theme's secondary. The old
-   var(--bs-secondary) never resolved: Odoo emits Bootstrap's custom properties
-   unprefixed, so that lookup always landed on its hardcoded fallback. */
-.tag-filter-badge.tag-use-theme-color,
+/* Tags sin color definido en Odoo: usar color secundario del tema */
+.tag-filter-badge.tag-use-theme-color {
+    background-color: var(--bs-secondary, #6c757d);
+    border-color: var(--bs-secondary, #6c757d);
+}
+
+/* Product card tags (badge-km) sin color definido: usar color del tema */
 .badge-km.tag-use-theme-color {
-    border-color: var(--ac-color-secondary);
-    background-color: var(--ac-color-secondary);
-    color: var(--ac-text-on-fill);
+    background-color: var(--bs-secondary, #6c757d);
+    border-color: var(--bs-secondary, #6c757d);
+    color: #ffffff !important;
 }
 
-/* Active filter: the strong primary, which also carries white text at 7.04:1. */
-.tag-filter-badge.is-selected {
-    border-color: var(--ac-color-primary-strong);
-    background-color: var(--ac-color-primary-strong);
-    box-shadow: var(--ac-shadow-sm);
-}
-
-/* Not part of the current filter while others are. */
-.tag-filter-badge.is-dimmed {
-    border-color: var(--ac-color-secondary);
-    background-color: var(--ac-color-secondary);
+.tag-filter-badge:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    filter: brightness(0.9);
 }
 
+/* Counter text inside badge */
 .tag-filter-badge .tag-count {
-    margin-left: var(--ac-space-2xs);
-    font-weight: var(--ac-weight-semibold);
-    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    margin-left: 0.25rem;
 }
 
-/* ---------- States ---------- */
-
-@media (hover: hover) and (pointer: fine) {
-    .tag-filter-badge:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--ac-shadow-md);
-        filter: brightness(0.9);
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .tag-filter-badges {
+        gap: 0.375rem;
     }
-}
 
-.tag-filter-badge:focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
-}
-
-@media (pointer: coarse) {
     .tag-filter-badge {
-        min-height: var(--ac-touch-target);
-        padding-inline: var(--ac-space-md);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .tag-filter-badge,
-    .tag-filter-badge:hover {
-        transform: none;
-        transition: none;
+        padding: 0.375rem 0.625rem;
+        font-size: 0.8125rem;
     }
 }
diff --git a/website_sale_aplicoop/static/src/css/layout/header.css b/website_sale_aplicoop/static/src/css/layout/header.css
index 69a47ff..e4980c6 100644
--- a/website_sale_aplicoop/static/src/css/layout/header.css
+++ b/website_sale_aplicoop/static/src/css/layout/header.css
@@ -7,142 +7,83 @@
 /* Unified header for both shop and checkout pages */
 .eskaera-order-header,
 .checkout-header {
-    padding: clamp(var(--ac-space-md), 2vw, var(--ac-space-xl));
-    border: 1px solid var(--ac-border-subtle);
-    border-radius: var(--ac-radius-md);
-    background: var(--ac-surface);
-    box-shadow: var(--ac-shadow-sm);
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .eskaera-order-header h1,
 .checkout-header h1 {
-    margin-bottom: var(--ac-space-md);
-    padding-bottom: var(--ac-space-md);
-    border-bottom: 3px solid var(--ac-color-primary);
-    font-size: var(--ac-text-2xl);
-    font-weight: var(--ac-weight-bold);
-    color: var(--ac-text-primary);
+    color: #2d3748;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    border-bottom: 3px solid var(--primary-color, #007bff);
+    padding-bottom: 1rem;
 }
 
-.checkout-title {
-    margin-bottom: var(--ac-space-md);
-    font-size: var(--ac-text-2xl);
-    font-weight: var(--ac-weight-bold);
-    color: var(--ac-text-primary);
-}
-
-.checkout-order-name {
-    font-size: var(--ac-text-lg);
-    font-weight: var(--ac-weight-semibold);
-    color: var(--ac-text-secondary);
-}
-
-/* ==========================================================================
-   Order info: label / value pairs
-   Rendered as <dl><dt class="info-label"><dd class="info-value">.
-   Column count follows the viewport: 4 (label, value, label, value) on
-   desktop, 2 (one pair per row) from sm, stacked below that. Cells carry the
-   rules themselves and column-gap stays 0, so each row reads as one
-   uninterrupted line instead of a dashed one.
-   ========================================================================== */
-
 .order-info-grid {
     display: grid;
-    grid-template-columns: 1fr;
-    align-items: baseline;
-    margin: 0;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
 }
 
-.order-info-grid > .info-label {
-    padding-block: var(--ac-space-sm) 0;
-    /* Small, muted and spaced out, so the label never competes with its value.
-       --ac-text-secondary keeps it at 7.53:1 despite the smaller size. */
-    font-size: var(--ac-text-xs);
-    font-weight: var(--ac-weight-semibold);
-    line-height: var(--ac-leading-snug);
+.info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.info-item:last-child {
+    margin-bottom: 0;
+}
+
+.info-label {
+    font-weight: 700;
+    color: #2d3748;
+    font-size: 1.05rem;
+    margin-bottom: 0.5rem;
     text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--ac-text-secondary);
+    letter-spacing: 0.5px;
 }
 
-.order-info-grid > .info-value {
-    margin: 0;
-    padding-block: var(--ac-space-2xs) var(--ac-space-sm);
-    border-bottom: 1px solid var(--ac-border);
-    font-size: var(--ac-text-md);
-    font-weight: var(--ac-weight-semibold);
-    line-height: var(--ac-leading-snug);
-    color: var(--ac-text-primary);
-    overflow-wrap: break-word;
+.info-value,
+.info-date {
+    font-size: 1.35rem;
+    color: #1a202c;
+    font-weight: 600;
 }
 
-/* Multi-line values (pickup slots) keep their own rhythm. */
-.order-info-grid .info-value-line + .info-value-line {
-    margin-top: var(--ac-space-2xs);
-}
-
-/* Two columns: label and value side by side, one pair per row. */
-@media (min-width: 576px) {
-    .order-info-grid {
-        grid-template-columns: auto 1fr;
-    }
-
-    .order-info-grid > .info-label {
-        padding-block: var(--ac-space-sm);
-        padding-inline-end: var(--ac-space-md);
-        border-bottom: 1px solid var(--ac-border);
-    }
-
-    .order-info-grid > .info-value {
-        padding-block: var(--ac-space-sm);
-        padding-inline-end: var(--ac-space-md);
-    }
-}
-
-/* Four columns: two pairs per row, split by a vertical rule. The second pair
-   always starts on an even <dt>, because grid places the cells in source
-   order. */
-@media (min-width: 992px) {
-    .order-info-grid {
-        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
-    }
-
-    .order-info-grid > .info-label:nth-of-type(even) {
-        padding-inline-start: var(--ac-space-lg);
-        border-inline-start: 1px solid var(--ac-border);
-    }
-}
-
-/* Single label/value pair, used in the checkout info row where each pair sits in
-   its own Bootstrap column. */
-.info-pair {
-    margin: 0;
-}
-
-.info-pair > .info-label {
-    margin-bottom: var(--ac-space-3xs);
-    font-size: var(--ac-text-xs);
-    font-weight: var(--ac-weight-semibold);
-    line-height: var(--ac-leading-snug);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--ac-text-secondary);
-}
-
-.info-pair > .info-value {
-    margin: 0;
-    font-size: var(--ac-text-md);
-    font-weight: var(--ac-weight-semibold);
-    line-height: var(--ac-leading-snug);
-    color: var(--ac-text-primary);
-    overflow-wrap: break-word;
-}
-
-/* Standalone date line used by the checkout header. */
 .info-date {
     display: block;
-    margin-top: var(--ac-space-2xs);
-    font-size: var(--ac-text-base);
-    font-weight: var(--ac-weight-medium);
-    color: var(--ac-text-secondary);
+    font-size: 1.25rem;
+    color: #2d3748;
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+/* Title styling for both pages */
+.checkout-title,
+.eskaera-order-header h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1a202c;
+    margin-bottom: 1rem;
+}
+
+.checkout-order-name {
+    font-size: 1.5rem;
+    color: #2d3748;
+    font-weight: 600;
+}
+
+/* Info value styling */
+.info-value {
+    font-size: 1.1rem;
+}
+
+.info-date {
+    font-size: 1rem;
 }
diff --git a/website_sale_aplicoop/static/src/css/layout/pages.css b/website_sale_aplicoop/static/src/css/layout/pages.css
index 2216bd2..267e560 100644
--- a/website_sale_aplicoop/static/src/css/layout/pages.css
+++ b/website_sale_aplicoop/static/src/css/layout/pages.css
@@ -1,94 +1,77 @@
 /* filepath: website_sale_aplicoop/static/src/css/layout/pages.css */
 
 /**
- * Page shells: backgrounds and the container stacking above them.
- *
- * These styles used to reach far outside the addon:
- *   - `html, body { background: transparent !important }` stripped the
- *     background from EVERY page of the website, addon or not.
- *   - `body.website_published { … !important }` was meant to put it back, but
- *     no page carries that class — checked against the rendered HTML of the
- *     orders, shop and checkout pages, whose <body> has no class at all. Both
- *     rules were therefore dead weight on top of a site-wide side effect.
- *   - `#wrap { padding: 2rem 0 }` styled Odoo's own page wrapper everywhere.
- *     On these pages #wrap *is* the Eskaera root, so the padding moved onto the
- *     root classes and the ID selector is gone.
- *
- * The body reset now applies only to pages that actually contain an Eskaera
- * root, which is enough specificity to win without !important.
+ * Page backgrounds and main layout structures
  */
 
-body:has(.eskaera-page),
-body:has(.eskaera-shop-page),
-body:has(.eskaera-generic-page),
-body:has(.eskaera-checkout-page) {
-    background: transparent;
+html,
+body {
+    background-color: transparent !important;
+    background: transparent !important;
 }
 
+body.website_published {
+    background: linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--primary-color) 30%, white),
+        color-mix(in srgb, var(--primary-color) 60%, black)
+    ) !important;
+}
+
+body.website_published .eskaera-shop-page,
+body.website_published .eskaera-checkout-page {
+    background: transparent !important;
+}
+
+/* Generic page background mixin */
 .eskaera-page,
 .eskaera-shop-page,
 .eskaera-generic-page,
 .eskaera-checkout-page {
-    position: relative;
-    /* dvh tracks the mobile browser chrome; vh stays as the fallback. */
     min-height: 100vh;
-    min-height: 100dvh;
-    padding: var(--ac-space-xl) 0;
+    position: relative;
 }
 
 .eskaera-page,
 .eskaera-generic-page {
     background: linear-gradient(
         180deg,
-        color-mix(in srgb, var(--ac-color-primary) 10%, white),
-        color-mix(in srgb, var(--ac-color-primary) 70%, black)
-    );
+        color-mix(in srgb, var(--primary-color) 10%, white),
+        color-mix(in srgb, var(--primary-color) 70%, black)
+    ) !important;
 }
 
 .eskaera-shop-page {
     background: linear-gradient(
         135deg,
-        color-mix(in srgb, var(--ac-color-primary) 10%, white),
-        color-mix(in srgb, var(--ac-color-primary) 10%, rgb(135, 135, 135))
-    );
+        color-mix(in srgb, var(--primary-color) 10%, white),
+        color-mix(in srgb, var(--primary-color) 10%, rgb(135, 135, 135))
+    ) !important;
 }
 
 .eskaera-checkout-page {
     background: linear-gradient(
         -135deg,
-        white,
-        color-mix(in srgb, var(--ac-color-primary) 60%, black)
-    );
-}
-
-/* ---------- Decorative glow overlay ---------- */
-
-.eskaera-page::before,
-.eskaera-shop-page::before,
-.eskaera-generic-page::before,
-.eskaera-checkout-page::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    pointer-events: none;
+        color-mix(in srgb, var(--primary-color) 0%, white),
+        color-mix(in srgb, var(--primary-color) 60%, black)
+    ) !important;
 }
 
 .eskaera-page::before,
 .eskaera-generic-page::before {
     background-image: radial-gradient(
             circle at 20% 50%,
-            color-mix(in srgb, var(--ac-color-primary) 20%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color, white) 20%, transparent) 0%,
             transparent 50%
         ),
         radial-gradient(
             circle at 80% 80%,
-            color-mix(in srgb, var(--ac-color-primary) 25%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color) 25%, transparent) 0%,
             transparent 50%
         ),
         radial-gradient(
             circle at 40% 20%,
-            color-mix(in srgb, var(--ac-color-primary) 15%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color, white) 15%, transparent) 0%,
             transparent 50%
         );
 }
@@ -96,12 +79,12 @@ body:has(.eskaera-checkout-page) {
 .eskaera-shop-page::before {
     background-image: radial-gradient(
             circle at 15% 30%,
-            color-mix(in srgb, var(--ac-color-primary) 18%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color, white) 18%, transparent) 0%,
             transparent 50%
         ),
         radial-gradient(
             circle at 85% 70%,
-            color-mix(in srgb, var(--ac-color-primary) 22%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color) 22%, transparent) 0%,
             transparent 50%
         );
 }
@@ -109,21 +92,44 @@ body:has(.eskaera-checkout-page) {
 .eskaera-checkout-page::before {
     background-image: radial-gradient(
             circle at 20% 50%,
-            color-mix(in srgb, var(--ac-color-primary) 20%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color, white) 20%, transparent) 0%,
             transparent 50%
         ),
         radial-gradient(
             circle at 80% 80%,
-            color-mix(in srgb, var(--ac-color-primary) 25%, transparent) 0%,
+            color-mix(in srgb, var(--primary-color) 25%, transparent) 0%,
             transparent 50%
         );
 }
 
-/* Content sits above the overlay. */
+.eskaera-page::before,
+.eskaera-shop-page::before,
+.eskaera-generic-page::before,
+.eskaera-checkout-page::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 0;
+}
+
 .eskaera-page > .container,
 .eskaera-shop-page > .container,
 .eskaera-generic-page > div,
 .eskaera-checkout-page > .container {
     position: relative;
     z-index: 1;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+#wrap {
+    padding: 2rem 0;
+}
+
+.group-order-shop {
+    background-color: transparent;
 }
diff --git a/website_sale_aplicoop/static/src/css/layout/responsive.css b/website_sale_aplicoop/static/src/css/layout/responsive.css
index a47213d..1e62b6e 100644
--- a/website_sale_aplicoop/static/src/css/layout/responsive.css
+++ b/website_sale_aplicoop/static/src/css/layout/responsive.css
@@ -1,21 +1,103 @@
 /* filepath: website_sale_aplicoop/static/src/css/layout/responsive.css */
 
 /**
- * Responsive adjustments — do not add to it.
- *
- * Centralising every media query here was the original plan; in practice this
- * file drifted out of sync with the components it overrode and needed
- * !important to win — twenty of them at its peak. Each component now owns its
- * queries at the bottom of its own file, and most need none at all once sizing
- * is fluid. What is left here is thumbnail geometry and table density, which
- * belong to no single component.
+ * Responsive design breakpoints and adjustments
+ * All media queries centralized here for easier maintenance
+ * NOTE: products-grid.css has its own breakpoints and should NOT be overridden here
  */
 
+@media (max-width: 992px) {
+    /* Cart sidebar */
+    .sticky-cart {
+        position: static !important;
+        margin-top: 2rem;
+        width: 100%;
+    }
+
+    .cart-items {
+        max-height: 400px;
+    }
+
+    #cart-items-container {
+        width: 100%;
+        padding: 0.75rem;
+    }
+
+    .list-group-item {
+        padding: 0.75rem;
+    }
+
+    .list-group-item h6 {
+        font-size: 0.95rem;
+    }
+
+    .list-group-item strong {
+        min-width: 70px;
+    }
+
+    .cart-header {
+        padding: 1rem;
+        width: 100%;
+    }
+
+    .cart-header h5 {
+        font-size: 1.25rem;
+    }
+
+    .cart-title-lg {
+        font-size: 1.25rem;
+    }
+
+    #save-cart-btn,
+    #reload-cart-btn {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+        margin-right: 0.25rem;
+    }
+
+    .card-header .btn-group {
+        gap: 0.5rem !important;
+    }
+
+    /* Order list grid */
+    .eskaera-orders,
+    .eskaera-orders-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.5rem;
+    }
+}
+
 @media (max-width: 768px) {
-    /* Header type and the info grid scale from layout/header.css; the title row
-       stacks through Bootstrap's flex-column/flex-md-row utilities. Order cards,
-       order list, product card and quantity control all size themselves from
-       their own files. */
+    /* Header (shared between eskaera and checkout) */
+    .eskaera-order-header,
+    .checkout-header {
+        padding: 1rem;
+    }
+
+    .eskaera-order-header h1,
+    .checkout-header h1 {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+
+    .checkout-title,
+    .eskaera-order-header h1 {
+        font-size: 1.5rem;
+    }
+
+    .checkout-order-name {
+        font-size: 1.2rem;
+    }
+
+    /* Fix header flex layout for mobile */
+    .eskaera-order-header .d-flex,
+    .checkout-header .d-flex {
+        flex-direction: column !important;
+        gap: 1rem !important;
+        align-items: flex-start !important;
+    }
 
     .order-thumbnail-md {
         max-width: 100%;
@@ -23,54 +105,413 @@
         height: auto;
     }
 
+    /* Order info grid */
+    .order-info-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    /* Eskaera page headings */
+    .eskaera-page h1 {
+        font-size: 2rem;
+    }
+
+    .eskaera-page > .container > .row:first-child p {
+        font-size: 1.1rem !important;
+    }
+
+    /* Order cards */
+    .eskaera-order-card {
+        min-height: 250px;
+    }
+
+    .eskaera-order-card .card-body {
+        padding: 0.5rem 0.6rem 0 0.6rem;
+        gap: 0.15rem;
+    }
+
+    .eskaera-order-card .card-title {
+        font-size: 0.9rem;
+        -webkit-line-clamp: 3;
+    }
+
+    .order-desc-text {
+        font-size: 0.75rem;
+        -webkit-line-clamp: 2;
+    }
+
+    .eskaera-order-card .btn {
+        padding: 0.5rem 1rem;
+        font-size: 0.8rem;
+        margin-bottom: 0.5rem;
+    }
+
     .order-thumbnail-sm {
-        width: 4.375rem;
-        height: 4.375rem;
+        width: 70px;
+        height: 70px;
+    }
+
+    .order-thumbnail-md {
+        width: 100px;
+        height: 100px;
+    }
+
+    /* Header with image and text */
+    .eskaera-order-card .d-flex {
+        gap: 0.75rem !important;
+    }
+
+    .eskaera-order-card .card-footer {
+        padding: 0.75rem 1rem;
+    }
+
+    /* Order list */
+    .eskaera-orders,
+    .eskaera-orders-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1.25rem;
+    }
+
+    /* Product grid */
+    .card-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* Product quantity controls */
+    .add-to-cart-form .product-qty {
+        font-size: 1rem;
+        min-width: 50px;
+        height: 32px;
+        padding: 0.25rem 0.35rem;
+    }
+
+    .qty-control .qty-decrease,
+    .qty-control .qty-increase {
+        height: 32px;
+        width: 32px;
+        font-size: 0.9rem;
+    }
+
+    .add-to-cart-form .add-to-cart-btn {
+        height: 36px;
+        min-height: 36px;
+        padding: 0.35rem 0.5rem;
+        font-size: 1rem;
+        min-width: 44px;
+    }
+
+    .add-to-cart-form .input-group {
+        gap: 0.25rem;
+    }
+
+    /* Checkout summary */
+    .checkout-summary-container {
+        padding: 1rem;
+        overflow-x: auto;
+    }
+
+    .checkout-summary-table {
+        font-size: 0.95rem;
+        min-width: 500px; /* Prevent table collapse */
+    }
+
+    .checkout-summary-table thead th {
+        padding: 0.75rem 0.5rem;
+        font-size: 0.85rem;
+    }
+
+    .checkout-summary-table tbody td {
+        padding: 0.75rem 0.5rem;
+    }
+
+    .total-amount {
+        font-size: 1.5rem;
+    }
+
+    .summary-heading {
+        font-size: 1.5rem;
+    }
+
+    .checkout-actions .btn {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
     }
 
     .group-order-header {
-        padding: var(--ac-space-md) 0;
-        margin-bottom: var(--ac-space-md);
+        padding: 1rem 0;
+        margin-bottom: 1rem;
+    }
+
+    .product-card {
+        margin-bottom: 1rem;
+    }
+
+    .product-card .product-image {
+        height: 150px;
+    }
+
+    .checkout-container {
+        padding: 1rem;
     }
 }
 
 @media (max-width: 576px) {
-    /* Checkout type scales fluidly from sections/checkout.css; only the table's
-       density genuinely changes here, and the container's padding with it. */
+    /* Cart items */
+    .list-group-item.d-flex {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .list-group-item h6 {
+        font-size: 0.85rem;
+        word-break: break-word;
+    }
+
+    .list-group-item small {
+        font-size: 0.75rem;
+    }
+
+    .list-group-item .d-flex {
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .list-group-item strong {
+        min-width: auto;
+        font-size: 0.95rem;
+    }
+
+    .list-group-item .remove-from-cart {
+        min-width: 28px;
+        min-height: 28px;
+    }
+
+    .cart-items {
+        max-height: 250px;
+    }
+
+    .sticky-cart {
+        margin-top: 1.5rem;
+    }
 
     .toast-notification {
-        inset: auto var(--ac-space-md) var(--ac-space-md);
+        bottom: 20px;
+        right: 20px;
+        left: 20px;
         max-width: none;
     }
 
+    #save-cart-btn,
+    #reload-cart-btn {
+        padding: 0.3rem 0.4rem;
+        font-size: 0.8rem;
+    }
+
     .card-header .d-flex {
         flex-wrap: wrap;
+        gap: 0.5rem !important;
+    }
+
+    .card-header .btn-group {
+        gap: 0.25rem !important;
+    }
+
+    .card-header .btn-group .btn {
+        padding: 0.3rem 0.4rem;
+        font-size: 0.8rem;
+    }
+
+    .form-check {
+        padding: 1rem 1.5rem !important;
+        margin-left: 0 !important;
+    }
+
+    .form-check-input {
+        margin-left: 0 !important;
+        margin-right: 1rem !important;
+        flex-shrink: 0;
+    }
+
+    .form-check-label[for="home-delivery-checkbox"] {
+        font-size: 1rem !important;
+        margin-left: 0 !important;
+    }
+
+    /* Header */
+    .eskaera-order-header,
+    .checkout-header {
+        padding: 0.75rem;
+    }
+
+    .eskaera-order-header h1,
+    .checkout-header h1 {
+        font-size: 1.25rem;
+        padding-bottom: 0.5rem;
+    }
+
+    .checkout-title,
+    .eskaera-order-header h1 {
+        font-size: 1.25rem;
+    }
+
+    .checkout-order-name {
+        font-size: 1rem;
+    }
+
+    .info-label {
+        font-size: 0.9rem;
+    }
+
+    /* Eskaera page */
+    .eskaera-page h1 {
+        font-size: 1.5rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .eskaera-page > .container > .row:first-child {
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+    }
+
+    .eskaera-page > .container > .row:first-child p {
+        font-size: 1rem !important;
+    }
+
+    /* Order cards */
+    .eskaera-order-card {
+        min-height: 220px;
+    }
+
+    .eskaera-order-card .card-body {
+        padding: 0.4rem 0.5rem 0 0.5rem;
+    }
+
+    .eskaera-order-card .card-title {
+        font-size: 0.85rem;
+    }
+
+    .order-desc-text {
+        font-size: 0.7rem;
+    }
+
+    .eskaera-order-card .btn {
+        padding: 0.45rem 0.85rem;
+        font-size: 0.75rem;
+        margin-bottom: 0.4rem;
     }
 
     .order-thumbnail-sm {
-        width: 3.75rem;
-        height: 3.75rem;
+        width: 60px;
+        height: 60px;
     }
 
     .order-thumbnail-md {
-        width: 5rem;
-        height: 5rem;
+        width: 80px;
+        height: 80px;
+    }
+
+    /* Order list */
+    .eskaera-orders,
+    .eskaera-orders-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1rem;
     }
 
     .eskaera-empty-state {
-        padding: var(--ac-space-xl) var(--ac-space-sm);
+        padding: 2rem 0.5rem;
     }
 
+    .eskaera-empty-state .alert {
+        font-size: 0.95rem;
+        padding: 1rem;
+    }
+
+    /* Checkout */
     .checkout-summary-container {
-        padding: var(--ac-space-sm);
+        padding: 0.75rem;
     }
 
     .checkout-summary-table {
-        min-width: 28rem;
+        font-size: 0.85rem;
+        min-width: 450px;
+    }
+
+    .checkout-summary-table thead th {
+        padding: 0.5rem 0.35rem;
+        font-size: 0.75rem;
     }
 
-    .checkout-summary-table thead th,
     .checkout-summary-table tbody td {
-        padding: var(--ac-space-sm) var(--ac-space-2xs);
+        padding: 0.5rem 0.35rem;
+        font-size: 0.85rem;
+    }
+
+    .total-amount {
+        font-size: 1.3rem;
+    }
+
+    .total-label {
+        font-size: 1rem;
+    }
+
+    .currency {
+        font-size: 1rem;
+    }
+
+    .summary-heading {
+        font-size: 1.25rem;
+        padding-left: 0.75rem;
+    }
+
+    .checkout-actions .btn {
+        font-size: 0.9rem;
+        padding: 0.6rem 1rem;
+    }
+}
+
+/* Product card typography responsive scaling */
+@media screen and (min-width: 1600px) {
+    .product-tags {
+        font-size: 1.1rem !important;
+    }
+
+    /* Scale down quantity input for 6-column layout */
+    .add-to-cart-form .product-qty {
+        font-size: 0.85rem;
+        max-width: 55px;
+    }
+
+    .add-to-cart-form .qty-decrease,
+    .add-to-cart-form .qty-increase {
+        font-size: 0.75rem;
+        min-width: 28px;
+        min-height: 28px;
+    }
+}
+
+@media screen and (min-width: 1400px) and (max-width: 1599px) {
+    .product-tags {
+        font-size: 1.25rem !important;
+    }
+
+    /* Scale down quantity input for 5-column layout */
+    .add-to-cart-form .product-qty {
+        font-size: 0.9rem;
+        max-width: 60px;
+    }
+
+    .add-to-cart-form .qty-decrease,
+    .add-to-cart-form .qty-increase {
+        font-size: 0.8rem;
+        min-width: 30px;
+        min-height: 30px;
+    }
+}
+
+@media (max-width: 720px) {
+    .card-grid {
+        grid-template-columns: 1fr;
     }
 }
diff --git a/website_sale_aplicoop/static/src/css/sections/checkout.css b/website_sale_aplicoop/static/src/css/sections/checkout.css
index 724ecb6..7418215 100644
--- a/website_sale_aplicoop/static/src/css/sections/checkout.css
+++ b/website_sale_aplicoop/static/src/css/sections/checkout.css
@@ -1,67 +1,64 @@
 /* filepath: website_sale_aplicoop/static/src/css/sections/checkout.css */
 
 /**
- * Checkout page
- *
- * The summary table keeps a min-width and scrolls inside its own container
- * rather than reflowing into cards: the four columns (product, qty, price,
- * subtotal) are read across, and stacking them loses that. The container is
- * focusable so the scroll is reachable without a pointer.
+ * Checkout page section styles
  */
 
+.checkout-container {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
 .checkout-summary {
-    margin-bottom: var(--ac-space-xl);
-    padding: var(--ac-space-lg);
-    border-radius: var(--ac-radius-md);
-    background-color: var(--ac-surface-sunken);
+    background-color: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    margin-bottom: 2rem;
 }
 
 .checkout-summary-container {
-    margin-bottom: var(--ac-space-xl);
-    padding: var(--ac-space-lg);
-    border-radius: var(--ac-radius-lg);
-    background: var(--ac-surface);
-    box-shadow: var(--ac-shadow-sm);
-    overflow-x: auto;
-}
-
-.checkout-summary-container:focus-visible {
-    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
-    outline-offset: var(--ac-focus-ring-offset);
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    padding: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .checkout-summary-table {
     margin-bottom: 0;
-    min-width: 30rem;
-    font-size: var(--ac-text-md);
+    font-size: 1.15rem;
+}
+
+.checkout-summary-table thead {
+    background-color: #2d3748;
+    color: white;
 }
 
 .checkout-summary-table thead th {
-    padding: var(--ac-space-md) var(--ac-space-xs);
-    border: none;
-    font-size: var(--ac-text-base);
-    font-weight: var(--ac-weight-bold);
+    font-weight: 700;
+    padding: 1rem 0.75rem;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+    border: none;
 }
 
 .checkout-summary-table tbody tr {
-    border-bottom: 1px solid var(--ac-border);
-    transition: background-color var(--ac-transition-fast);
+    border-bottom: 1px solid #e2e8f0;
+    transition: background-color 0.2s ease;
+}
+
+.checkout-summary-table tbody tr:hover {
+    background-color: #f7fafc;
 }
 
 .checkout-summary-table tbody td {
-    padding: var(--ac-space-md) var(--ac-space-xs);
+    padding: 1rem 0.75rem;
     vertical-align: middle;
 }
 
-/* Figures line up column-wise instead of drifting with glyph widths. */
-.checkout-summary-table .col-price,
-.checkout-summary-table .col-subtotal,
-.checkout-summary-table td.text-end {
-    font-variant-numeric: tabular-nums;
-}
-
 .checkout-summary-table .col-name {
     width: 50%;
 }
@@ -79,68 +76,52 @@
 }
 
 .checkout-summary-table .empty-message {
-    background-color: var(--ac-surface-sunken);
+    background-color: #f7fafc;
 }
 
-/* ---------- Total ---------- */
-
 .checkout-total-section {
-    margin-top: var(--ac-space-md);
-    padding-top: var(--ac-space-lg);
-    border-top: 2px solid var(--ac-border);
+    border-top: 2px solid #e2e8f0;
+    padding-top: 1.5rem;
+    margin-top: 1rem;
 }
 
 .total-row {
     display: flex;
     justify-content: flex-end;
-    align-items: baseline;
-    gap: var(--ac-space-sm);
+    align-items: center;
+    gap: 1rem;
 }
 
 .total-label {
-    font-size: var(--ac-text-md);
-    font-weight: var(--ac-weight-bold);
-    color: var(--ac-text-primary);
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: #1a202c;
 }
 
 .total-amount {
-    min-width: 7.5rem;
-    font-size: var(--ac-text-2xl);
-    font-weight: var(--ac-weight-bold);
-    font-variant-numeric: tabular-nums;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--success-color);
+    min-width: 120px;
     text-align: right;
-    /* --ac-color-success is 3.13:1 on white: fine for the 2xl total, but the
-       darker tone keeps it readable if the type scale ever shrinks. */
-    color: var(--ac-color-success-strong);
 }
 
 .currency {
-    font-size: var(--ac-text-md);
-    font-weight: var(--ac-weight-semibold);
-    color: var(--ac-text-secondary);
+    font-size: 1.2rem;
+    color: #2d3748;
+    font-weight: 600;
 }
 
 .summary-heading {
-    padding-left: var(--ac-space-md);
-    border-left: 4px solid var(--ac-color-success-strong);
-    font-size: var(--ac-text-xl);
-    font-weight: var(--ac-weight-bold);
-    color: var(--ac-text-primary);
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #1a202c;
+    border-left: 4px solid var(--success-color);
+    padding-left: 1rem;
 }
 
 .checkout-order-desc {
-    color: var(--ac-text-secondary);
+    word-wrap: break-word;
     overflow-wrap: break-word;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .checkout-summary-table tbody tr:hover {
-        background-color: var(--ac-surface-sunken);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .checkout-summary-table tbody tr {
-        transition: none;
-    }
+    color: #666;
 }
diff --git a/website_sale_aplicoop/static/src/css/sections/info-cards.css b/website_sale_aplicoop/static/src/css/sections/info-cards.css
index c9cb1f4..92927d2 100644
--- a/website_sale_aplicoop/static/src/css/sections/info-cards.css
+++ b/website_sale_aplicoop/static/src/css/sections/info-cards.css
@@ -1,21 +1,63 @@
 /* filepath: website_sale_aplicoop/static/src/css/sections/info-cards.css */
 
 /**
- * Info cards
- *
- * The meta block that used to be duplicated here now lives with its component
- * (components/order-card.css): `.card-meta-compact`, `.meta-label` and
- * `.meta-value` were declared in both files, and this one — loading last — won,
- * silently overriding the component. `.card-grid`, `.card-col`, `.card-meta-list`
- * and `.meta-row` were dead: no template ever emitted them.
+ * Info cards and grid section styles
  */
 
 .order-info-card {
-    border-radius: var(--ac-radius-lg);
-    background: var(--ac-surface);
-    box-shadow: var(--ac-shadow-sm);
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .order-info-card .card-body {
-    padding: var(--ac-space-md);
+    padding: 1rem;
+}
+
+.card-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+    align-items: start;
+    margin-top: 0.5rem;
+}
+
+.card-meta-compact {
+    padding: 0.5rem 0;
+}
+
+.card-meta-compact .card-meta-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.meta-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+}
+
+.meta-label {
+    font-weight: 700;
+    color: #2d3748;
+    min-width: fit-content;
+    flex-shrink: 0;
+}
+
+.meta-value {
+    font-weight: 400;
+    color: #27292c;
+    word-break: break-word;
+    flex-grow: 1;
+}
+
+.card-col {
+    min-width: 0;
+}
+
+.card-col .card-text strong {
+    font-weight: 700;
+    color: #111827;
 }
diff --git a/website_sale_aplicoop/static/src/css/sections/order-list.css b/website_sale_aplicoop/static/src/css/sections/order-list.css
index 8ed3004..69515b1 100644
--- a/website_sale_aplicoop/static/src/css/sections/order-list.css
+++ b/website_sale_aplicoop/static/src/css/sections/order-list.css
@@ -1,54 +1,48 @@
 /* filepath: website_sale_aplicoop/static/src/css/sections/order-list.css */
 
 /**
- * Order list (Eskaera index page)
- *
- * The grid derived its column count from three breakpoints (3 / 2 / 1) that
- * each had to out-specify the previous one — the mobile rule needed
- * !important. Deriving it from the available width removes all three.
+ * Order list and Eskaera page section styles
  */
 
 .eskaera-page h1 {
-    margin-bottom: var(--ac-space-sm);
-    font-size: var(--ac-text-2xl);
-    font-weight: var(--ac-weight-bold);
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #2d3748;
+    margin-bottom: 0.5rem;
     text-align: center;
-    color: var(--ac-text-primary);
 }
 
 .eskaera-page > .container > .row:first-child {
-    margin-bottom: var(--ac-space-xl);
-    padding-bottom: var(--ac-space-lg);
-    border-bottom: 2px solid var(--ac-border);
+    margin-bottom: 2rem;
+    border-bottom: 2px solid #e2e8f0;
+    padding-bottom: 1.5rem;
 }
 
 .eskaera-page > .container > .row:first-child p {
-    margin: 0;
-    font-size: var(--ac-text-md);
-    font-weight: var(--ac-weight-medium);
+    font-size: 1.3rem !important;
+    color: #4a5568;
     text-align: center;
-    color: var(--ac-text-secondary);
+    margin: 0;
+    font-weight: 500;
 }
 
 .eskaera-orders,
 .eskaera-orders-grid {
     display: grid;
-    /* 20rem keeps three across a full-width container and drops to one on a
-       phone, without any breakpoint doing the counting. */
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
-    gap: var(--ac-space-lg);
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
     margin: 0 auto;
     max-width: 100%;
 }
 
 .eskaera-empty-state {
-    padding: var(--ac-space-2xl) var(--ac-space-md);
     text-align: center;
+    padding: 3rem 1rem;
 }
 
 .eskaera-empty-state .alert {
-    max-width: 31.25rem;
+    max-width: 500px;
     margin: 0 auto;
-    border-radius: var(--ac-radius-md);
-    font-size: var(--ac-text-base);
+    font-size: 1.05rem;
+    border-radius: 0.5rem;
 }
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..be646d3 100644
--- a/website_sale_aplicoop/static/src/css/sections/products-grid.css
+++ b/website_sale_aplicoop/static/src/css/sections/products-grid.css
@@ -1,29 +1,14 @@
 /* filepath: website_sale_aplicoop/static/src/css/sections/products-grid.css */
 
 /**
- * Products grid
- *
- * 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.
- *
- * 9rem is the card's minimum width; at the widest container (1320px minus the
- * category sidebar) it still resolves to six columns, as before.
+ * Products grid section styles
  */
 
 .products-grid {
     display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--ac-space-md);
-    margin-bottom: var(--ac-space-xl);
-}
-
-@media (min-width: 576px) {
-    .products-grid {
-        grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
-    }
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 1.2rem;
+    margin-bottom: 2rem;
 }
 
 .product-card-wrapper {
@@ -32,7 +17,62 @@
 }
 
 .product-search-highlight {
-    padding: var(--ac-space-sm);
-    border: 2px solid var(--ac-color-primary);
-    border-radius: var(--ac-radius-md);
+    border: 2px solid #007bff;
+    padding: 10px;
+}
+
+/* Pantallas muy grandes: 1600px+ (6 columnas) */
+@media screen and (min-width: 1600px) {
+    .products-grid {
+        grid-template-columns: repeat(6, 1fr);
+        gap: 1.2rem;
+    }
+}
+
+/* Pantallas grandes: 1400px-1599px (5 columnas) */
+@media screen and (min-width: 1400px) and (max-width: 1599px) {
+    .products-grid {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 1.15rem;
+    }
+}
+
+/* Pantallas medianas: 1200px-1399px (4 columnas) */
+@media screen and (min-width: 1200px) and (max-width: 1399px) {
+    .products-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 1.1rem;
+    }
+}
+
+/* Pantallas tablet grandes: 992px-1199px (3 columnas) */
+@media screen and (min-width: 992px) and (max-width: 1199px) {
+    .products-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+    }
+}
+
+/* Pantallas tablet: 768px-991px (3 columnas en tablet grande, 2 en tablet pequeña) */
+@media screen and (min-width: 768px) and (max-width: 991px) {
+    .products-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.95rem;
+    }
+}
+
+/* Pantallas móvil grande: 576px-767px (2 columnas) */
+@media screen and (min-width: 576px) and (max-width: 767px) {
+    .products-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.8rem;
+    }
+}
+
+/* Pantallas móvil pequeño: 1 columna */
+@media (max-width: 575px) {
+    .products-grid {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
 }
diff --git a/website_sale_aplicoop/static/src/js/checkout_labels.js b/website_sale_aplicoop/static/src/js/checkout_labels.js
index 3971e74..b2537db 100644
--- a/website_sale_aplicoop/static/src/js/checkout_labels.js
+++ b/website_sale_aplicoop/static/src/js/checkout_labels.js
@@ -194,10 +194,10 @@
                 '<th scope="col" class="col-qty text-center">' +
                 escapeHtml(labels.quantity) +
                 "</th>" +
-                '<th scope="col" class="col-price text-end">' +
+                '<th scope="col" class="col-price text-right">' +
                 escapeHtml(labels.price) +
                 "</th>" +
-                '<th scope="col" class="col-subtotal text-end">' +
+                '<th scope="col" class="col-subtotal text-right">' +
                 escapeHtml(labels.subtotal) +
                 "</th>" +
                 '</tr></thead><tbody id="checkout-summary-tbody"></tbody></table>' +
@@ -280,10 +280,10 @@
                     '<td class="text-center">' +
                     qty.toFixed(2).replace(/\.?0+$/, "") +
                     "</td>" +
-                    '<td class="text-end">€' +
+                    '<td class="text-right">€' +
                     price.toFixed(2) +
                     "</td>" +
-                    '<td class="text-end">€' +
+                    '<td class="text-right">€' +
                     subtotal.toFixed(2) +
                     "</td>";
                 tbody.appendChild(row);
@@ -307,10 +307,10 @@
                     '<td class="text-center">' +
                     qty.toFixed(2).replace(/\.?0+$/, "") +
                     "</td>" +
-                    '<td class="text-end">€' +
+                    '<td class="text-right">€' +
                     price.toFixed(2) +
                     "</td>" +
-                    '<td class="text-end">€' +
+                    '<td class="text-right">€' +
                     subtotal.toFixed(2) +
                     "</td>";
                 tbody.appendChild(row);
diff --git a/website_sale_aplicoop/static/src/js/infinite_scroll.js b/website_sale_aplicoop/static/src/js/infinite_scroll.js
index 61735fc..966d1d0 100644
--- a/website_sale_aplicoop/static/src/js/infinite_scroll.js
+++ b/website_sale_aplicoop/static/src/js/infinite_scroll.js
@@ -459,9 +459,8 @@ console.log("[INFINITE_SCROLL] Script loaded!");
                         // Show fallback button
                         var btn = document.getElementById("load-more-btn");
                         if (btn) {
-                            // d-none is the only thing hiding it; the button no longer
-                            // carries an inline display:none to clear.
                             btn.classList.remove("d-none");
+                            btn.style.display = "";
                         }
                     });
             },
diff --git a/website_sale_aplicoop/static/src/js/realtime_search.js b/website_sale_aplicoop/static/src/js/realtime_search.js
index a6bb805..2eef78c 100644
--- a/website_sale_aplicoop/static/src/js/realtime_search.js
+++ b/website_sale_aplicoop/static/src/js/realtime_search.js
@@ -141,6 +141,9 @@
             // Initialize available tags from DOM
             self._initializeAvailableTags();
 
+            // Store original colors for each tag badge
+            self.originalTagColors = {}; // Maps tag ID to original color
+
             // Store last values at instance level so polling can access them
             // Initialize to current values to avoid triggering reset on first poll
             self.lastSearchValue = self.searchInput.value.trim();
@@ -162,9 +165,9 @@
                 // This listener is separate from the filtering listener
                 self.searchInput.addEventListener("input", function () {
                     if (self.searchInput.value.trim().length > 0) {
-                        self.clearSearchBtn.classList.add("is-visible");
+                        self.clearSearchBtn.style.display = "block";
                     } else {
-                        self.clearSearchBtn.classList.remove("is-visible");
+                        self.clearSearchBtn.style.display = "none";
                     }
                 });
 
@@ -176,7 +179,7 @@
 
                     // Clear the input
                     self.searchInput.value = "";
-                    self.clearSearchBtn.classList.remove("is-visible");
+                    self.clearSearchBtn.style.display = "none";
 
                     // Update last stored value to prevent polling from detecting "change"
                     self.lastSearchValue = "";
@@ -201,7 +204,7 @@
 
                 // Initial check - don't show if empty
                 if (self.searchInput.value.trim().length > 0) {
-                    self.clearSearchBtn.classList.add("is-visible");
+                    self.clearSearchBtn.style.display = "block";
                 }
             }
 
@@ -280,21 +283,114 @@
             var tagBadges = document.querySelectorAll('[data-toggle="tag-filter"]');
             console.log("[realtimeSearch] Found " + tagBadges.length + " tag filter badges");
 
+            // Get theme colors from CSS variables
+            var rootStyles = getComputedStyle(document.documentElement);
+            var primaryColor =
+                rootStyles.getPropertyValue("--bs-primary").trim() ||
+                rootStyles.getPropertyValue("--primary").trim() ||
+                "#0d6efd";
+            var secondaryColor =
+                rootStyles.getPropertyValue("--bs-secondary").trim() ||
+                rootStyles.getPropertyValue("--secondary").trim() ||
+                "#6c757d";
+
+            console.log(
+                "[realtimeSearch] Theme colors - Primary:",
+                primaryColor,
+                "Secondary:",
+                secondaryColor
+            );
+
+            // Store original colors for each badge BEFORE adding event listeners
+            tagBadges.forEach(function (badge) {
+                var tagId = parseInt(badge.getAttribute("data-tag-id"), 10);
+                var tagColor = badge.getAttribute("data-tag-color");
+
+                // Store the original color (either from data-tag-color or use secondary for tags without color)
+                if (tagColor) {
+                    self.originalTagColors[tagId] = tagColor;
+                    console.log(
+                        "[realtimeSearch] Stored original color for tag " + tagId + ": " + tagColor
+                    );
+                } else {
+                    self.originalTagColors[tagId] = "var(--bs-secondary, " + secondaryColor + ")";
+                    console.log("[realtimeSearch] Tag " + tagId + " has no color, using secondary");
+                }
+            });
+
             tagBadges.forEach(function (badge) {
                 badge.addEventListener("click", function (e) {
                     e.preventDefault();
                     var tagId = parseInt(badge.getAttribute("data-tag-id"), 10);
+                    var originalColor = self.originalTagColors[tagId];
+                    console.log(
+                        "[realtimeSearch] Tag badge clicked: " +
+                            tagId +
+                            " (original color: " +
+                            originalColor +
+                            ")"
+                    );
 
                     // Toggle tag selection
                     if (self.selectedTags.has(tagId)) {
+                        // Deselect
                         self.selectedTags.delete(tagId);
                         console.log("[realtimeSearch] Tag " + tagId + " deselected");
                     } else {
+                        // Select
                         self.selectedTags.add(tagId);
                         console.log("[realtimeSearch] Tag " + tagId + " selected");
                     }
 
-                    self._syncTagBadgeStates(tagBadges);
+                    // Update colors for ALL badges based on selection state
+                    tagBadges.forEach(function (badge) {
+                        var id = parseInt(badge.getAttribute("data-tag-id"), 10);
+
+                        if (self.selectedTags.size === 0) {
+                            // No tags selected: restore all to original colors
+                            var originalColor = self.originalTagColors[id];
+                            badge.style.setProperty("background-color", originalColor, "important");
+                            badge.style.setProperty("border-color", originalColor, "important");
+                            badge.style.setProperty("color", "#ffffff", "important");
+                            console.log(
+                                "[realtimeSearch] Badge " +
+                                    id +
+                                    " reset to original color (no selection)"
+                            );
+                        } else if (self.selectedTags.has(id)) {
+                            // Selected: primary color
+                            badge.style.setProperty(
+                                "background-color",
+                                "var(--bs-primary, " + primaryColor + ")",
+                                "important"
+                            );
+                            badge.style.setProperty(
+                                "border-color",
+                                "var(--bs-primary, " + primaryColor + ")",
+                                "important"
+                            );
+                            badge.style.setProperty("color", "#ffffff", "important");
+                            console.log(
+                                "[realtimeSearch] Badge " + id + " set to primary (selected)"
+                            );
+                        } else {
+                            // Not selected but others are: secondary color
+                            badge.style.setProperty(
+                                "background-color",
+                                "var(--bs-secondary, " + secondaryColor + ")",
+                                "important"
+                            );
+                            badge.style.setProperty(
+                                "border-color",
+                                "var(--bs-secondary, " + secondaryColor + ")",
+                                "important"
+                            );
+                            badge.style.setProperty("color", "#ffffff", "important");
+                            console.log(
+                                "[realtimeSearch] Badge " + id + " set to secondary (not selected)"
+                            );
+                        }
+                    });
 
                     // Filter products (independent of search/category state)
                     // Skip during initialization
@@ -551,10 +647,6 @@
                         ")"
                 );
 
-                // Announce the outcome to screen readers, which otherwise get no
-                // signal that the grid changed under them.
-                self._announceResults(visibleCount);
-
                 // Auto-load more products if too few are visible
                 self._autoLoadMoreIfNeeded(visibleCount);
             } catch (error) {
@@ -563,49 +655,6 @@
             }
         },
 
-        /**
-         * Reflect the current selection on every tag badge: aria-pressed for
-         * assistive tech, two state classes for the eye. Colours belong to
-         * components/tag-filter.css — this only says which state each badge is in.
-         *
-         * @param {NodeList} tagBadges - All badges in the filter bar
-         */
-        _syncTagBadgeStates: function (tagBadges) {
-            var self = this;
-            var hasSelection = self.selectedTags.size > 0;
-
-            tagBadges.forEach(function (badge) {
-                var id = parseInt(badge.getAttribute("data-tag-id"), 10);
-                var isSelected = self.selectedTags.has(id);
-
-                badge.classList.toggle("is-selected", isSelected);
-                badge.classList.toggle("is-dimmed", hasSelection && !isSelected);
-                badge.setAttribute("aria-pressed", isSelected ? "true" : "false");
-            });
-        },
-
-        /**
-         * Write the result count into the polite live region next to the search
-         * box. Labels come from i18nManager, never from a hardcoded literal.
-         *
-         * @param {number} visibleCount - Number of currently visible products
-         */
-        _announceResults: function (visibleCount) {
-            var status = document.getElementById("realtime-search-status");
-            if (!status) {
-                return;
-            }
-            var i18n = window.i18nManager;
-            var message;
-            if (visibleCount === 0) {
-                message = (i18n && i18n.get("no_results")) || "No products found";
-            } else {
-                message =
-                    visibleCount + " " + ((i18n && i18n.get("products_found")) || "products found");
-            }
-            status.textContent = message;
-        },
-
         _autoLoadMoreIfNeeded: function (visibleCount) {
             /**
              * Automatically load more products if there are too few visible on screen.
diff --git a/website_sale_aplicoop/static/src/js/website_sale.js b/website_sale_aplicoop/static/src/js/website_sale.js
index 4edee32..1cc0cee 100644
--- a/website_sale_aplicoop/static/src/js/website_sale.js
+++ b/website_sale_aplicoop/static/src/js/website_sale.js
@@ -691,16 +691,12 @@
 
             var notification = document.createElement("div");
             notification.className =
-                "alert alert-" + type + " alert-dismissible fade show eskaera-notification";
-            // Announce it: errors and warnings are the whole point of this helper,
-            // and without a live role a screen reader never hears them.
-            notification.setAttribute("role", type === "error" ? "alert" : "status");
-            notification.setAttribute("aria-live", type === "error" ? "assertive" : "polite");
+                "alert alert-" + type + " alert-dismissible fade show position-fixed";
+            notification.style.cssText =
+                "top: 80px; right: 20px; z-index: 9999; min-width: 300px; max-width: 500px; font-size: 18px; padding: 1.5rem; transition: opacity 0.3s ease-out;";
             notification.innerHTML =
                 message +
-                '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="' +
-                ((window.i18nManager && window.i18nManager.get("close")) || "Close") +
-                '"></button>';
+                '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
 
             document.body.appendChild(notification);
 
@@ -1257,17 +1253,13 @@
             // Create toast element
             var toast = document.createElement("div");
             toast.className = "toast-notification";
-            toast.setAttribute("role", "status");
 
             // Get translated "added to cart" label from server
             var labels = this._getLabels();
             var addedMsg = labels.added_to_cart || "added to cart";
 
             toast.innerHTML =
-                '<i class="fa fa-check" aria-hidden="true"></i> <strong>' +
-                this.escapeHtml(productName) +
-                "</strong> " +
-                addedMsg;
+                '<i class="fa fa-check"></i> <strong>' + productName + "</strong> " + addedMsg;
 
             document.body.appendChild(toast);
 
@@ -1559,7 +1551,7 @@
                         // Simple approach: if response is very short, assume no more products
                         if (html.trim().length < 100) {
                             console.log("[LAZY_LOADING] No more products, hiding load-more button");
-                            btn.classList.add("d-none");
+                            btn.style.display = "none";
                         } else {
                             // Re-enable button for next page
                             btn.disabled = false;
@@ -1603,7 +1595,7 @@
 
             if (Object.keys(this.cart).length === 0) {
                 cartContainer.innerHTML =
-                    '<p class="text-muted cart-empty-message">' +
+                    '<p class="text-muted" style="font-size: 1.1rem;">' +
                     (labels.empty_cart || "This order's cart is empty.") +
                     "</p>";
                 return;
@@ -1620,20 +1612,20 @@
                 total += subtotal;
 
                 html +=
-                    '<div class="list-group-item">' +
+                    '<div class="list-group-item" style="font-size: 1.05rem;">' +
                     '<div class="mb-2">' +
-                    '<h6 class="mb-0">' +
+                    '<h6 class="mb-0" style="font-size: 1.1rem;">' +
                     self.escapeHtml(item.name) +
                     "</h6>" +
                     "</div>" +
                     '<div class="d-flex justify-content-between align-items-center">' +
-                    '<small class="text-muted">' +
+                    '<small class="text-muted" style="font-size: 1rem;">' +
                     parseFloat(item.qty).toFixed(1) +
                     " x €" +
                     item.price.toFixed(2) +
                     "</small>" +
                     '<div class="d-flex align-items-center gap-2">' +
-                    "<strong>€" +
+                    '<strong style="font-size: 1.1rem;">€' +
                     subtotal.toFixed(2) +
                     "</strong>" +
                     '<button class="btn btn-sm btn-danger remove-from-cart" ' +
@@ -1652,7 +1644,11 @@
             });
 
             html += "</div>";
-            html += '<div class="cart-total mt-3 pt-3">' + "Total: €" + total.toFixed(2) + "</div>";
+            html +=
+                '<div class="cart-total mt-3 pt-3" style="font-size: 1.2rem; font-weight: bold;">' +
+                "Total: €" +
+                total.toFixed(2) +
+                "</div>";
 
             cartContainer.innerHTML = html;
 
diff --git a/website_sale_aplicoop/views/load_from_history_templates.xml b/website_sale_aplicoop/views/load_from_history_templates.xml
index 1888d1c..833b818 100644
--- a/website_sale_aplicoop/views/load_from_history_templates.xml
+++ b/website_sale_aplicoop/views/load_from_history_templates.xml
@@ -3,45 +3,12 @@
     <data>
         <!-- Template to load items from history and redirect to group order -->
         <template id="eskaera_load_from_history" name="Load Order from History">
-            <html t-att-lang="page_lang or 'en-US'">
+            <html>
                 <head>
                     <meta charset="utf-8"/>
-                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                     <title>Loading Order...</title>
-                    <!-- Standalone document: it does not go through website.layout, so
-                         web.assets_frontend is not loaded and there is no design token to
-                         reach for. Hence the local style block. -->
-                    <style>
-                        .eskaera-redirect-page {
-                            display: flex;
-                            flex-direction: column;
-                            align-items: center;
-                            justify-content: center;
-                            min-height: 60vh;
-                            padding: 2rem 1rem;
-                            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-                                "Helvetica Neue", Arial, sans-serif;
-                            text-align: center;
-                            color: #1a202c;
-                        }
-                        .eskaera-redirect-message {
-                            font-size: 1.125rem;
-                        }
-                    </style>
                 </head>
                 <body>
-                    <!-- This page only stages the cart in sessionStorage and redirects, but it is
-                         still a page a person can land on: give it something to read while that
-                         happens, announced politely, and a way out if the script never runs. -->
-                    <main class="eskaera-redirect-page">
-                        <p class="eskaera-redirect-message" role="status">Loading your order…</p>
-                        <noscript>
-                            <p>This page needs JavaScript to load the order into your cart.</p>
-                            <p>
-                                <a t-att-href="group_order_url">Continue to the group order</a>
-                            </p>
-                        </noscript>
-                    </main>
                     <script type="text/javascript">
                         // Items are embedded directly in the script (pre-serialized JSON from controller)
                         var itemsJson = <t t-raw="items_json"/>;  // This is a JSON array/string
diff --git a/website_sale_aplicoop/views/portal_templates.xml b/website_sale_aplicoop/views/portal_templates.xml
index fcbea5f..c40b24f 100644
--- a/website_sale_aplicoop/views/portal_templates.xml
+++ b/website_sale_aplicoop/views/portal_templates.xml
@@ -3,13 +3,11 @@
     <data>
         <!-- Extend portal_my_orders to add group order name and pickup day columns -->
         <template id="portal_my_orders_extend" inherit_id="sale.portal_my_orders" name="My Orders - Add Group Order Info">
-            <!-- Add column headers for new info.
-                 There is no "Actions" header here: the matching <td> below is
-                 commented out, so declaring it left every row one cell short of
-                 its header row and pushed the columns out of alignment. -->
+            <!-- Add column headers for new info -->
             <xpath expr="//tr[hasclass('active')]//th[last()]" position="after">
-                <th scope="col">Group Order</th>
-                <th scope="col">Pickup Day</th>
+                <th>Group Order</th>
+                <th>Pickup Day</th>
+                <th class="text-center">Actions</th>
             </xpath>
 
             <!-- Add data cells for each order row -->
@@ -77,30 +75,25 @@
                         <!-- Group Order Info -->
                         <div class="col-lg-12">
                             <div class="card">
-                                <!-- text-bg-primary, not bg-primary: a badge's default white on
-                                     the primary blue is 3.98:1, under AA. The utility picks a
-                                     contrasting foreground for whatever the theme colour is.
-                                     d-block on the notes so their mt-2 actually applies — margins
-                                     do nothing on an inline span. -->
                                 <div class="card-header bg-light">
                                     <strong><t t-esc="sale_order.group_order_id.name"/></strong>
                                     <t t-if="sale_order.home_delivery">
-                                        <span class="badge text-bg-primary">
+                                        <span class="badge bg-primary">
                                             <t t-set="day_idx" t-value="(int(sale_order.group_order_id.pickup_day) + 1) % 7 if sale_order.group_order_id.pickup_day else 0"/>
                                             <t t-esc="day_names[day_idx] if day_names else ''"/>,
                                             <t t-esc="sale_order.group_order_id.delivery_date.strftime('%d/%m/%Y') if sale_order.group_order_id.delivery_date else ''"/>
                                         </span>
-                                        <span class="d-block mt-2 text-muted small">
+                                        <span class="mt-2 text-muted small">
                                             <t t-esc="sale_order.group_order_id.delivery_notice"/>
                                         </span>
                                     </t>
                                     <t t-else="">
-                                        <span class="badge text-bg-primary">
+                                        <span class="badge bg-primary">
                                             <t t-set="day_idx" t-value="int(sale_order.group_order_id.pickup_day) % 7 if sale_order.group_order_id.pickup_day else 0"/>
                                             <t t-esc="day_names[day_idx] if day_names else ''"/>,
                                             <t t-esc="sale_order.pickup_date.strftime('%d/%m/%Y')"/>
                                         </span>
-                                        <span class="d-block mt-2 small">
+                                        <span class="mt-2 small">
                                             <t t-foreach="sale_order.group_order_id.group_ids" t-as="group">
                                                 <t t-esc="group.name"/>
                                                 <t t-if="group.street">
diff --git a/website_sale_aplicoop/views/website_templates.xml b/website_sale_aplicoop/views/website_templates.xml
index 274a896..c1b7478 100644
--- a/website_sale_aplicoop/views/website_templates.xml
+++ b/website_sale_aplicoop/views/website_templates.xml
@@ -21,8 +21,8 @@
                                                 <div t-attf-class="eskaera-order-card{{ ' eskaera-order-card--special' if order.type == 'special' else '' }}">
                                                     <div class="card-body">
                                                         <div class="position-absolute order-badge-position">
-                                                            <span class="badge text-bg-primary d-flex align-items-center gap-2 order-badge-custom">
-                                                                <i class="fa fa-shopping-bag" aria-hidden="true" />
+                                                            <span class="badge bg-primary d-flex align-items-center gap-2 order-badge-custom">
+                                                                <i class="fa fa-shopping-bag" />
                                                                 <strong>
                                                                     <t t-esc="order.available_products_count" />
                                                                 </strong>
@@ -147,24 +147,22 @@
                             </span>
                         </div>
                     </t>
+                    <t t-if="order.home_delivery and order.delivery_date">
+                        <div class="meta-item">
+                            <span class="meta-label">Delivery</span>
+                            <span class="meta-value">
+                                <t t-esc="day_names[order.delivery_date.weekday()]" /> <t t-esc="order.delivery_date.strftime('%d/%m')" />
+                            </span>
+                        </div>
+                    </t>
                     <t t-if="order.home_delivery">
-                        <!-- Badge first, then the date, centred as a pair. Source order
-                             matches reading order, so no CSS reordering is involved.
-                             No "Delivery" label: the badge already names the thing.
-                             text-bg-* instead of bg-*: Bootstrap picks a contrasting
-                             foreground. A badge's default white on green is 3.13:1. -->
-                        <div class="meta-item meta-item--delivery">
-                            <span class="badge text-bg-success"><i class="fa fa-truck" aria-hidden="true" /> Home Delivery</span>
-                            <t t-if="order.delivery_date">
-                                <span class="meta-value">
-                                    <t t-esc="day_names[order.delivery_date.weekday()]" /> <t t-esc="order.delivery_date.strftime('%d/%m')" />
-                                </span>
-                            </t>
+                        <div class="meta-item">
+                            <span class="badge bg-success"><i class="fa fa-truck" /> Home Delivery</span>
                         </div>
                     </t>
                     <t t-if="order.type == 'special'">
                         <div class="meta-item meta-item--full">
-                            <span class="badge special-order-badge"><i class="fa fa-star" aria-hidden="true" /> Special Order</span>
+                            <span class="badge special-order-badge"><i class="fa fa-star" /> Special Order</span>
                         </div>
                         <t t-if="order.start_date">
                             <div class="meta-item">
@@ -184,10 +182,7 @@
         </template>
         <template id="order_header" name="Order Header">
             <div t-att-class="header_class or 'eskaera-order-header'">
-                <!-- Responsive Bootstrap utilities rather than a CSS override: the
-                     spacing/alignment utilities are !important, so fighting them from
-                     a stylesheet would need !important too. -->
-                <div class="d-flex flex-column flex-md-row gap-3 gap-md-5 align-items-start align-items-md-center mb-4">
+                <div class="d-flex gap-5 align-items-center mb-4">
                     <t t-set="image_to_show" t-value="group_order.image or (group_order.group_ids[0].image_1920 if group_order.group_ids else False)" />
                     <t t-if="image_to_show">
                         <img t-att-src="image_data_uri(image_to_show)" alt="Order image" class="order-thumbnail-md" />
@@ -215,70 +210,79 @@
                                     <t t-set="header_class" t-value="'eskaera-order-header'" />
                                 </t>
                                 <div class="eskaera-order-header">
-                                    <!-- Name/value pairs: a description list, so assistive tech
-                                         announces each value with its label. The 4 → 2 → 1 column
-                                         layout lives in layout/header.css. -->
-                                    <dl class="order-info-grid">
-                                        <dt class="info-label">Consumer Groups</dt>
-                                        <dd class="info-value">
-                                            <t t-esc="', '.join(group_order.group_ids.mapped('name'))" />
-                                        </dd>
+                                    <div class="order-info-grid">
+                                        <div class="info-item">
+                                            <span t-att-class="'info-label'">Consumer Groups</span>
+                                            <span class="info-value">
+                                                <t t-esc="', '.join(group_order.group_ids.mapped('name'))" />
+                                            </span>
+                                        </div>
                                         <t t-if="group_order.cutoff_day">
-                                            <dt class="info-label">Cutoff Day</dt>
-                                            <dd class="info-value">
-                                                <t t-esc="day_names[int(group_order.cutoff_day) % 7]" /> (<t t-esc="group_order.cutoff_date.strftime('%d/%m/%Y')" />)</dd>
+                                            <div class="info-item">
+                                                <span t-att-class="'info-label'">Cutoff Day</span>
+                                                <span class="info-value">
+                                                    <t t-esc="day_names[int(group_order.cutoff_day) % 7]" /> (<t t-esc="group_order.cutoff_date.strftime('%d/%m/%Y')" />)</span>
+                                            </div>
                                         </t>
                                         <t t-if="group_order.pickup_slot_ids">
-                                            <dt class="info-label">Store Pickup Slots</dt>
-                                            <dd class="info-value">
-                                                <t t-foreach="group_order.pickup_slot_ids" t-as="slot">
-                                                    <div class="info-value-line">
-                                                        <t t-esc="day_names[int(slot.weekday) % 7]" />
-                                                        &#160;
-                                                        <t t-esc="('%02d:%02d–%02d:%02d' % (int(slot.start_hour or 0), int(((slot.start_hour or 0) % 1) * 60), int(slot.end_hour or 0), int(((slot.end_hour or 0) % 1) * 60)))" />
-                                                        <t t-if="slot.label">&#160;(<t t-esc="slot.label" />)</t>
-                                                    </div>
-                                                </t>
-                                            </dd>
+                                            <div class="info-item">
+                                                <span t-att-class="'info-label'">Store Pickup Slots</span>
+                                                <span class="info-value">
+                                                    <t t-foreach="group_order.pickup_slot_ids" t-as="slot">
+                                                        <div>
+                                                            <t t-esc="day_names[int(slot.weekday) % 7]" />
+                                                            &#160;
+                                                            <t t-esc="('%02d:%02d–%02d:%02d' % (int(slot.start_hour or 0), int(((slot.start_hour or 0) % 1) * 60), int(slot.end_hour or 0), int(((slot.end_hour or 0) % 1) * 60)))" />
+                                                            <t t-if="slot.label">&#160;(<t t-esc="slot.label" />)</t>
+                                                        </div>
+                                                    </t>
+                                                </span>
+                                            </div>
                                         </t>
                                         <t t-elif="group_order.pickup_day">
-                                            <dt class="info-label">Store Pickup Day</dt>
-                                            <dd class="info-value">
-                                                <t t-esc="day_names[int(group_order.pickup_day) % 7]" /> (<t t-esc="group_order.pickup_date.strftime('%d/%m/%Y')" />)
-                                            </dd>
+                                            <div class="info-item">
+                                                <span t-att-class="'info-label'">Store Pickup Day</span>
+                                                <span class="info-value">
+                                                    <t t-esc="day_names[int(group_order.pickup_day) % 7]" /> (<t t-esc="group_order.pickup_date.strftime('%d/%m/%Y')" />)
+                                                </span>
+                                            </div>
                                         </t>
                                         <t t-if="group_order.delivery_date and group_order.home_delivery">
-                                            <dt class="info-label">Home Delivery Day</dt>
-                                            <dd class="info-value">
-                                                <t t-esc="day_names[group_order.delivery_date.weekday()]" /> (<t t-esc="group_order.delivery_date.strftime('%d/%m/%Y')" />)</dd>
+                                            <div class="info-item">
+                                                <span t-att-class="'info-label'">Home Delivery Day</span>
+                                                <span class="info-value">
+                                                    <t t-esc="day_names[group_order.delivery_date.weekday()]" /> (<t t-esc="group_order.delivery_date.strftime('%d/%m/%Y')" />)</span>
+                                            </div>
                                         </t>
                                         <t t-if="group_order.start_date">
-                                            <dt class="info-label">Open From</dt>
-                                            <dd class="info-value">
-                                                <t t-esc="group_order.start_date.strftime('%d/%m/%Y')" />
-                                            </dd>
+                                            <div class="info-item">
+                                                <span t-att-class="'info-label'">Open From</span>
+                                                <span class="info-value">
+                                                    <t t-esc="group_order.start_date.strftime('%d/%m/%Y')" />
+                                                </span>
+                                            </div>
                                         </t>
                                         <t t-if="group_order.end_date">
-                                            <dt class="info-label">Open Until</dt>
-                                            <dd class="info-value">
-                                                <t t-esc="group_order.end_date.strftime('%d/%m/%Y')" />
-                                            </dd>
+                                            <div class="info-item">
+                                                <span t-att-class="'info-label'">Open Until</span>
+                                                <span class="info-value">
+                                                    <t t-esc="group_order.end_date.strftime('%d/%m/%Y')" />
+                                                </span>
+                                            </div>
                                         </t>
-                                    </dl>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="mb-3 eskaera-filters" id="realtimeSearch-filters">
+                        <div class="mb-3" 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 style="position: relative;">
+                                        <input type="text" id="realtime-search-input" class="form-control realtime-search-box search-input-styled" placeholder="Search products..." autocomplete="off" style="padding-right: 40px;" />
+                                        <button type="button" id="clear-search-btn" class="btn btn-link" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; width: 30px; height: 30px; display: none; color: #6c757d; text-decoration: none; font-size: 1.5rem; line-height: 1;" 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">
@@ -295,18 +299,13 @@
                                     <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">
+                                                    <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="background-color: {{ tag['color'] }} !important; border-color: {{ tag['color'] }} !important; color: #ffffff !important;" data-toggle="tag-filter">
                                                         <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">
+                                                    <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">
                                                         <span t-esc="tag['name']" /> (<span class="tag-count" t-esc="tag['count']" />)
                                                     </button>
                                                 </t>
@@ -322,32 +321,30 @@
                                     <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>
                                         <div class="btn-group cart-btn-group gap-0" role="group">
-                                            <!-- data-bs-title feeds the tooltip, it is not an
-                                                 accessible name: this icon-only button had none. -->
-                                            <button type="button" class="btn btn-primary cart-btn-compact" id="save-cart-btn" t-attf-data-order-id="{{ group_order.id }}" aria-label="Save Cart" title="Save Cart" data-bs-toggle="tooltip">
-                                                <i class="fa fa-save cart-icon-size" aria-hidden="true" />
+                                            <button type="button" class="btn btn-primary cart-btn-compact" id="save-cart-btn" t-attf-data-order-id="{{ group_order.id }}" data-bs-title="Save Cart" data-bs-toggle="tooltip">
+                                                <i class="fa fa-save cart-icon-size" />
                                             </button>
                                             <t t-if="group_order.home_delivery and delivery_product_id">
                                                     <button type="button" class="btn btn-outline-warning cart-btn-compact" id="home-delivery-btn" t-att-aria-label="labels.get('toggle_home_delivery', 'Toggle home delivery')" t-att-data-bs-title="labels.get('home_delivery', 'Home Delivery')" data-bs-toggle="tooltip">
                                                     <i class="fa fa-truck cart-icon-size" aria-hidden="true" />
                                                 </button>
                                             </t>
-                                            <a t-attf-href="/eskaera/{{ group_order.slug }}/checkout" class="btn btn-success cart-btn-compact" aria-label="Proceed to Checkout" title="Proceed to Checkout" data-bs-toggle="tooltip">
+                                            <a t-attf-href="/eskaera/{{ group_order.slug }}/checkout" class="btn btn-success cart-btn-compact" aria-label="Proceed to checkout" data-bs-title="Proceed to Checkout" data-bs-toggle="tooltip">
                                                 <i class="fa fa-check cart-icon-size" aria-hidden="true" />
                                             </a>
-                                            <button type="button" class="btn btn-outline-danger cart-btn-compact" id="clear-cart-btn" t-attf-data-order-id="{{ group_order.id }}" title="Clear Cart" data-bs-toggle="tooltip" aria-label="Clear Cart">
+                                            <button type="button" class="btn btn-outline-danger cart-btn-compact" id="clear-cart-btn" t-attf-data-order-id="{{ group_order.id }}" data-bs-title="Clear Cart" data-bs-toggle="tooltip" aria-label="Clear Cart">
                                                 <i class="fa fa-trash cart-icon-size" aria-hidden="true" />
                                             </button>
                                         </div>
                                     </div>
-                                    <div class="card-body eskaera-cart-items" id="cart-items-container" t-attf-data-order-id="{{ group_order.id }}" t-attf-data-build-version="{{ module_version }}" aria-labelledby="cart-title" aria-live="polite" aria-relevant="additions removals">
+                                    <div class="card-body cart-body-lg" id="cart-items-container" t-attf-data-order-id="{{ group_order.id }}" t-attf-data-build-version="{{ module_version }}" aria-labelledby="cart-title" aria-live="polite" aria-relevant="additions removals">
                                         <p class="text-muted">This order's cart is empty</p>
                                     </div>
                                     <div class="card-footer bg-white d-flex justify-content-between align-items-center gap-2">
-                                        <button type="button" class="btn btn-outline-danger btn-sm" id="clear-cart-btn-footer" t-attf-data-order-id="{{ group_order.id }}" title="Clear Cart" data-bs-toggle="tooltip" aria-label="Clear Cart">
+                                        <button type="button" class="btn btn-outline-danger btn-sm" id="clear-cart-btn-footer" t-attf-data-order-id="{{ group_order.id }}" data-bs-title="Clear Cart" data-bs-toggle="tooltip" aria-label="Clear Cart">
                                             <i class="fa fa-trash me-1" aria-hidden="true" />Clear Cart
                                         </button>
-                                        <a t-attf-href="/eskaera/{{ group_order.slug }}/checkout" class="btn btn-success checkout-btn-lg" title="Proceed to Checkout" data-bs-toggle="tooltip">
+                                        <a t-attf-href="/eskaera/{{ group_order.slug }}/checkout" class="btn btn-success checkout-btn-lg" data-bs-title="Proceed to Checkout" data-bs-toggle="tooltip">
                                             Proceed to Checkout
                                         </a>
                                     </div>
@@ -364,14 +361,14 @@
                                     <t t-if="lazy_loading_enabled and has_next">
                                         <div id="infinite-scroll-container" class="row mt-4">
                                             <div class="col-12 text-center">
-                                                <div id="loading-spinner" class="d-none p-4">
+                                                <div id="loading-spinner" class="d-none" style="padding: 20px;">
                                                     <div class="spinner-border text-primary" role="status">
                                                         <span class="visually-hidden">Loading...</span>
                                                     </div>
                                                     <p class="mt-2">Loading more products...</p>
                                                 </div>
-                                                <button id="load-more-btn" class="btn btn-primary btn-lg d-none" t-attf-data-page="{{ current_page + 1 }}" t-attf-data-order-id="{{ group_order.id }}" t-attf-data-search="{{ search_query }}" t-attf-data-category="{{ selected_category }}" t-attf-data-per-page="{{ per_page }}" aria-label="Load more products">
-                                                    <i class="fa fa-download me-2" aria-hidden="true" />Load More Products
+                                                <button id="load-more-btn" class="btn btn-primary btn-lg d-none" t-attf-data-page="{{ current_page + 1 }}" t-attf-data-order-id="{{ group_order.id }}" t-attf-data-search="{{ search_query }}" t-attf-data-category="{{ selected_category }}" t-attf-data-per-page="{{ per_page }}" aria-label="Load more products" style="display: none;">
+                                                    <i class="fa fa-download me-2" />Load More Products
                                             </button>
                                             </div>
                                         </div>
@@ -399,13 +396,14 @@
 
                             var successCount = 0;
                             tooltipElements.forEach(function(element) {
-                                // Static labels now live in the title attribute, which QWeb
-                                // translates; data-bs-title (which it does not translate) is
-                                // only left where the text comes from the i18n endpoint.
                                 var title = element.getAttribute('data-bs-title');
                                 if (title) {
+                                    // Set native title attribute for browser-native tooltip
                                     element.setAttribute('title', title);
                                     successCount++;
+                                    console.log('[TOOLTIP] ✅ Set title for', element.id || element.className, ':', title);
+                                } else {
+                                    console.warn('[TOOLTIP] ⚠️ No data-bs-title found for element:', element.id || element.className);
                                 }
                             });
                             console.log('[TOOLTIP] Tooltip initialization complete:', successCount, 'elements updated');
@@ -423,23 +421,20 @@
             </t>
         </template>
         <template id="eskaera_checkout_summary" name="Checkout Order Summary">
-            <!-- The table keeps its width and scrolls inside this container; tabindex
-                 makes that scroll reachable from the keyboard (WCAG 2.1.1). -->
-            <div class="checkout-summary-container" role="region" tabindex="0" aria-label="Order summary">
+            <div class="checkout-summary-container">
                 <table class="table table-hover checkout-summary-table" id="checkout-summary-table">
-                    <caption class="visually-hidden">Products in this order, with quantity, price and subtotal</caption>
                     <thead class="table-dark">
                         <tr>
-                            <th scope="col" class="col-name">Product</th>
-                            <th scope="col" class="col-qty text-center">Quantity</th>
-                            <th scope="col" class="col-price text-end">Price</th>
-                            <th scope="col" class="col-subtotal text-end">Subtotal</th>
+                            <th class="col-name">Product</th>
+                            <th class="col-qty text-center">Quantity</th>
+                            <th class="col-price text-right">Price</th>
+                            <th class="col-subtotal text-right">Subtotal</th>
                         </tr>
                     </thead>
                     <tbody id="checkout-summary-tbody">
                         <tr id="checkout-empty-row" class="empty-message">
                             <td colspan="4" class="text-center text-muted py-4">
-                                <i class="fa fa-inbox fa-2x mb-2" aria-hidden="true" />
+                                <i class="fa fa-inbox fa-2x mb-2" />
                                 <p>This order's cart is empty</p>
                             </td>
                         </tr>
@@ -469,60 +464,55 @@
                                 </div>
                                 <div class="order-info-card card border-0 shadow-sm mb-4">
                                     <div class="card-body">
-                                        <!-- Name/value pairs, same treatment as the shop header:
-                                             a <label> without a form control to point at labels
-                                             nothing, while <dt>/<dd> ties value to name. -->
                                         <div class="row mb-4">
                                             <div class="col-md-4">
-                                                <dl class="info-pair">
-                                                    <dt class="info-label">Cutoff Day</dt>
+                                                <div class="info-item">
+                                                    <label t-att-class="'info-label'">Cutoff Day</label>
                                                     <t t-if="group_order.cutoff_day and group_order.cutoff_date">
-                                                        <dd class="info-value">
+                                                        <span class="info-value">
                                                             <t t-esc="day_names[int(group_order.cutoff_day) % 7]" />
                                                             <span class="info-date">(<t t-esc="group_order.cutoff_date.strftime('%d/%m/%Y')" />)</span>
-                                                        </dd>
+                                                        </span>
                                                     </t>
                                                     <t t-else="">
-                                                        <dd class="info-value text-muted small">Not configured</dd>
+                                                        <span t-att-class="'text-muted small'">Not configured</span>
                                                     </t>
-                                                </dl>
+                                                </div>
                                             </div>
                                             <div class="col-md-4">
-                                                <t t-if="group_order.pickup_slot_ids">
-                                                    <dl class="info-pair">
-                                                        <dt class="info-label">Store Pickup Slots</dt>
-                                                        <dd class="info-value">
+                                                <div class="info-item">
+                                                    <t t-if="group_order.pickup_slot_ids">
+                                                        <label t-att-class="'info-label'">Store Pickup Slots</label>
+                                                        <span class="info-value">
                                                             <t t-foreach="group_order.pickup_slot_ids" t-as="slot">
-                                                                <div class="info-value-line">
+                                                                <div>
                                                                     <t t-esc="day_names[int(slot.weekday) % 7]" />
                                                                     &#160;
                                                                     <t t-esc="('%02d:%02d–%02d:%02d' % (int(slot.start_hour or 0), int(((slot.start_hour or 0) % 1) * 60), int(slot.end_hour or 0), int(((slot.end_hour or 0) % 1) * 60)))" />
                                                                     <t t-if="slot.label">&#160;(<t t-esc="slot.label" />)</t>
                                                                 </div>
                                                             </t>
-                                                        </dd>
-                                                    </dl>
-                                                </t>
-                                                <t t-elif="group_order.pickup_day and group_order.pickup_date">
-                                                    <dl class="info-pair">
-                                                        <dt class="info-label">Store Pickup Day</dt>
-                                                        <dd class="info-value" t-attf-data-pickup-date="{{ group_order.pickup_date }}">
+                                                        </span>
+                                                    </t>
+                                                    <t t-elif="group_order.pickup_day and group_order.pickup_date">
+                                                        <label t-att-class="'info-label'">Store Pickup Day</label>
+                                                        <span class="info-value" t-attf-data-pickup-date="{{ group_order.pickup_date }}">
                                                             <t t-esc="day_names[int(group_order.pickup_day) % 7]" />
                                                             <span class="info-date">(<t t-esc="group_order.pickup_date.strftime('%d/%m/%Y')" />)</span>
-                                                        </dd>
-                                                    </dl>
-                                                </t>
+                                                        </span>
+                                                    </t>
+                                                </div>
                                             </div>
                                             <div class="col-md-4">
-                                                <t t-if="group_order.delivery_date and group_order.home_delivery">
-                                                    <dl class="info-pair">
-                                                        <dt class="info-label">Home Delivery Day</dt>
-                                                        <dd class="info-value">
+                                                <div class="info-item">
+                                                    <t t-if="group_order.delivery_date and group_order.home_delivery">
+                                                        <label t-att-class="'info-label'">Home Delivery Day</label>
+                                                        <span class="info-value">
                                                             <t t-esc="day_names[group_order.delivery_date.weekday()]" />
                                                             <span class="info-date">(<t t-esc="group_order.delivery_date.strftime('%d/%m/%Y')" />)</span>
-                                                        </dd>
-                                                    </dl>
-                                                </t>
+                                                        </span>
+                                                    </t>
+                                                </div>
                                             </div>
                                         </div>
                                         <hr class="my-2" />
@@ -539,11 +529,11 @@
                                 <t t-if="group_order.home_delivery">
                                 <div class="card border-0 shadow-sm mb-4">
                                     <div class="card-body">
-                                        <div class="form-check eskaera-delivery-check">
+                                        <div class="form-check">
                                             <input type="checkbox" class="form-check-input" id="home-delivery-checkbox" name="home_delivery" />
                                             <label class="form-check-label fw-bold" for="home-delivery-checkbox">Home Delivery</label>
                                         </div>
-                                        <div id="delivery-info-alert" class="alert alert-info mt-3 d-none eskaera-delivery-notice">
+                                        <div id="delivery-info-alert" class="alert alert-info mt-3 d-none">
                                             <p class="mb-2">
                                                 <i class="fa fa-truck" aria-hidden="true" t-translation="off" />
                                                 <t t-if="group_order.delivery_date">
@@ -565,7 +555,7 @@
                                         <i class="fa fa-save" aria-hidden="true" t-translation="off" />
                                         <span t-esc="labels.get('save_draft', 'Save Draft')" />
                                     </button>
-                                    <a t-attf-href="/eskaera/{{ group_order.slug }}" class="btn btn-outline-secondary btn-lg" aria-label="Back to cart page" title="Back to Cart" data-bs-toggle="tooltip">
+                                    <a t-attf-href="/eskaera/{{ group_order.slug }}" class="btn btn-outline-secondary btn-lg" aria-label="Back to cart page" data-bs-title="Back to Cart" data-bs-toggle="tooltip">
                                         <i class="fa fa-arrow-left" aria-hidden="true" t-translation="off" />
                                         <span>Back to Cart</span>
                                     </a>
@@ -645,7 +635,7 @@
                         </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" />
+                                <i class="fa fa-image fa-3x text-muted" />
                             </div>
                         </t>
                         <t t-if="product.dynamic_ribbon_id">
@@ -659,12 +649,10 @@
                         <div class="card-body d-flex flex-column">
                             <h6 class="card-title" t-esc="product.name" />
                             <t t-if="product.product_tag_ids">
-                                <div class="product-tags">
+                                <div class="product-tags mb-2">
                                     <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" />
+                                            <span class="badge badge-km" t-attf-style="background-color: {{ tag.color }} !important; border-color: {{ tag.color }} !important; color: #ffffff !important;" t-esc="tag.name" />
                                         </t>
                                         <t t-else="">
                                             <span class="badge badge-km tag-use-theme-color" t-esc="tag.name" />
@@ -673,14 +661,14 @@
                                 </div>
                             </t>
                             <t t-if="product_supplier_info.get(product.id)">
-                                <p class="product-supplier">
+                                <p class="product-supplier mb-2">
                                     <small>
                                         <t t-esc="product_supplier_info[product.id]" />
                                     </small>
                                 </p>
                             </t>
                             <t t-if="product.origin_text">
-                                <p class="product-origin">
+                                <p class="product-origin mb-2">
                                     <small>
                                         <i class="fa fa-map-marker" aria-hidden="true" />
                                         <t t-out="product.origin_text" />
@@ -707,7 +695,7 @@
                             </h6>
                             <t t-set="tax_incl_base_unit_price" t-value="product_display_info.get(product.id, {}).get('base_unit_price', 0.0)" />
                             <t t-if="tax_incl_base_unit_price and product.base_unit_name">
-                                <p class="product-unit-price text-muted">
+                                <p class="product-unit-price text-muted" style="font-size: 0.85rem; margin-top: 0.25rem; margin-bottom: 0;">
                                     <t t-esc="'%.2f' % tax_incl_base_unit_price" /> € / <t t-esc="product.base_unit_name" />
                                 </p>
                             </t>
@@ -728,24 +716,19 @@
                             t-att-data-out-of-stock="'true' if product.is_out_of_stock else 'false'"
                         >
                             <div class="qty-control">
-                                <label t-attf-for="qty_{{ product.id }}" class="visually-hidden">Quantity of <t t-esc="product.name" />
+                                <label t-attf-for="qty_{{ product.id }}" class="sr-only">Quantity of <t t-esc="product.name" />
                                 </label>
                                 <button class="qty-decrease" type="button" t-attf-data-product-id="{{ product.id }}" aria-label="Decrease quantity">
-                                    <i class="fa fa-minus" aria-hidden="true" />
+                                    <i class="fa fa-minus" />
                                 </button>
                                 <input type="number" t-attf-id="qty_{{ product.id }}" class="product-qty" name="quantity" t-attf-value="1" t-attf-min="{{ quantity_step }}" t-attf-step="{{ quantity_step }}" t-att-max="product_max_qty.get(product.id) if product_max_qty else None" t-att-data-max-qty="product_max_qty.get(product.id) if product_max_qty else None" />
                                 <button class="qty-increase" type="button" t-attf-data-product-id="{{ product.id }}" aria-label="Increase quantity">
-                                    <i class="fa fa-plus" aria-hidden="true" />
+                                    <i class="fa fa-plus" />
                                 </button>
-                                <!-- Out of stock stays focusable and clickable on purpose: the handler
-                                     explains why instead of the button silently doing nothing.
-                                     aria-disabled announces the state without removing it from the
-                                     tab order (a real `disabled` would suppress the click event). -->
                                 <button
                                     class="add-to-cart-btn"
                                     type="button"
                                     t-att-data-out-of-stock="'true' if product.is_out_of_stock else 'false'"
-                                    t-att-aria-disabled="'true' if product.is_out_of_stock else None"
                                     t-att-aria-label="out_of_stock_label if product.is_out_of_stock else add_to_cart_label"
                                     t-att-title="out_of_stock_label if product.is_out_of_stock else add_to_cart_label"
                                 >