similarbuild 0.1.0

package/templates/memory/patterns.md

@@ -0,0 +1,681 @@
+# Validated patterns — bundled canon
+
+This file is the **bundled global canon** of section composition patterns for the SimilarBuild framework. It is read by `sb-build-wp` and `sb-build-shopify` via the cascade defined in Pattern #21:
+
+1. `<plugin>/memory/patterns.md` (this file — versioned, distributed by the installer)
+2. `~/.claude/similarbuild-memory/patterns.md` (per-user auto-learn — overrides/adds)
+3. `<skill>/references/*.md` (bundled fallback inside the skill itself — only when neither of the above exists)
+
+Each entry has both a **WP/Elementor variant** and a **Shopify/Liquid variant**, side by side. Markup is intentionally minimal — adapt class names and content to the inspected section. Defensive specificity (anti-pattern #5/#5b) and asset substitution rules (anti-patterns #2, #8, #16) apply uniformly.
+
+---
+
+## Entry shape
+
+Every pattern below has these fields, in this order:
+
+- **id** — stable identifier (`A`..`H`).
+- **name** — short human-readable title.
+- **applies-when** — section type or composition context where the pattern is the right fit.
+- **markup-wp** — HTML skeleton for `sb-build-wp` (no Liquid, scope class on the outermost element).
+- **css-wp** — scoped CSS for the WP variant (mobile-first, defensive specificity, `!important` only on the four font properties).
+- **markup-shopify** — Liquid skeleton for `sb-build-shopify` (settings-driven values via `{{ section.settings.X }}`, blocks where applicable).
+- **css-shopify** — scoped CSS inside `{% style %}` (Liquid interpolation allowed for setting-driven values).
+- **schema-shopify** — `{% schema %}` settings list (and `blocks` when the pattern repeats).
+- **notes** — failure modes to watch (cross-references to anti-patterns), behavioral details (JS, ARIA, etc).
+
+`{scope}` is a placeholder — pick a kebab-case name from `inspection.sectionType` + a content hint (e.g. `hero-mobile-shop`, `pdp-variant-card`, `sb-faq`). The `sb-` prefix on Shopify variants makes the class unmistakably ours and avoids collision with theme classes.
+
+---
+
+## Pattern A — Sticky Header (announcement bar + nav + mobile drawer)
+
+- **id:** A
+- **name:** Sticky Header
+- **applies-when:** site-wide header section with announcement bar above and primary navigation below; mobile drawer toggle.
+
+### markup-wp
+
+```html
+<header class="hdr">
+  <div class="hdr__bar">Free shipping over $50</div>
+  <nav class="hdr__nav" aria-label="Main">
+    <a href="/" class="hdr__logo"><img src="{logo localPath}" alt="Brand" width="120" height="32"></a>
+    <button class="hdr__menu-btn" type="button" aria-label="Open menu" aria-expanded="false">☰</button>
+    <ul class="hdr__menu" hidden>
+      <li><a href="/shop">Shop</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+### css-wp
+
+```css
+.hdr { position: sticky; top: 0; z-index: 100; }
+.hdr .hdr__bar { background: #000; color: #fff; text-align: center; padding: 8px 16px; font-size: 13px !important; }
+.hdr .hdr__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; }
+.hdr .hdr__menu[hidden] { display: none; }
+.hdr .hdr__menu:not([hidden]) { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
+@media (min-width: 1000px) {
+  .hdr .hdr__menu-btn { display: none; }
+  .hdr .hdr__menu { display: flex !important; flex-direction: row; gap: 24px; }
+}
+```
+
+### markup-shopify
+
+```liquid
+<header class="sb-hdr">
+  {% if section.settings.show_announcement %}
+    <div class="sb-hdr__bar">{{ section.settings.announcement_text }}</div>
+  {% endif %}
+  <nav class="sb-hdr__nav" aria-label="Main">
+    <a href="{{ section.settings.logo_link | default: '/' }}" class="sb-hdr__logo">
+      {% if section.settings.logo %}
+        <img src="{{ section.settings.logo | image_url: width: 200 }}" alt="{{ shop.name | escape }}" width="100" height="40">
+      {% endif %}
+    </a>
+    <button class="sb-hdr__menu-btn" type="button" aria-label="Open menu" aria-expanded="false">☰</button>
+  </nav>
+</header>
+```
+
+### css-shopify
+
+Same CSS as WP variant; replace scope class `.hdr` with `.sb-hdr` and wrap inside `{% style %}` instead of `<style>`.
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "header", "content": "Announcement" },
+    { "type": "checkbox", "id": "show_announcement", "label": "Show bar", "default": true },
+    { "type": "text", "id": "announcement_text", "label": "Bar text", "default": "Free shipping over $50" },
+    { "type": "header", "content": "Logo" },
+    { "type": "image_picker", "id": "logo", "label": "Logo" },
+    { "type": "url", "id": "logo_link", "label": "Logo link" }
+  ],
+  "presets": [{ "name": "Sticky header", "category": "Header" }]
+}
+```
+
+### notes
+
+JS toggle: ~10 lines vanilla — toggle `hidden` and `aria-expanded` on the button click. No library. Logo height capped via explicit `width`/`height` attributes to prevent CLS. Anti-pattern #16: logo `image_picker` MUST NOT have a `default` (Shopify); the `{% if %}` guard handles the empty case.
+
+---
+
+## Pattern B — Full-bleed Hero (aspect-ratio, background-image, escape container)
+
+- **id:** B
+- **name:** Full-bleed Hero
+- **applies-when:** above-the-fold hero with edge-to-edge background image, headline, CTA.
+
+### markup-wp
+
+```html
+<link rel="preload" as="image" href="{hero localPath}">
+<section class="hero">
+  <div class="hero__inner">
+    <h1 class="hero__title">Headline</h1>
+    <a class="hero__cta hero__cta" href="/shop">Shop now</a>
+  </div>
+</section>
+```
+
+### css-wp
+
+```css
+.hero {
+  width: 100vw; margin-left: calc(50% - 50vw);
+  aspect-ratio: 1 / 1.3; max-height: 700px;
+  background-image: url("{hero localPath}");
+  background-size: cover; background-position: center;
+  display: grid; place-items: end center; padding-bottom: 48px;
+}
+.hero .hero__title { font-family: 'Playfair', serif !important; font-size: 36px !important; font-weight: 700 !important; color: #fff !important; }
+.hero .hero__cta.hero__cta { appearance: none; background: #d8112a !important; color: #fff !important; font-family: inherit !important; font-weight: 700 !important; font-size: 16px !important; border: 0; padding: 14px 28px; border-radius: 999px; }
+@media (min-width: 1000px) {
+  .hero { aspect-ratio: 16 / 9; max-height: 720px; }
+  .hero .hero__title { font-size: 56px !important; }
+}
+```
+
+### markup-shopify
+
+```liquid
+<section class="sb-hero">
+  <div class="sb-hero__inner">
+    <h1 class="sb-hero__title">{{ section.settings.heading | escape }}</h1>
+    {% if section.settings.cta_label != blank %}
+      <a class="sb-hero__cta sb-hero__cta" href="{{ section.settings.cta_link | default: '/' }}">{{ section.settings.cta_label | escape }}</a>
+    {% endif %}
+  </div>
+</section>
+```
+
+### css-shopify
+
+```liquid
+{% style %}
+.sb-hero {
+  width: 100vw; margin-left: calc(50% - 50vw);
+  aspect-ratio: 1 / 1.3; max-height: 700px;
+  {% if section.settings.hero_image %}
+    background-image: url({{ section.settings.hero_image | image_url: width: 1600 }});
+  {% else %}
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTcwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPjxyZWN0IHdpZHRoPSIxMTcwIiBoZWlnaHQ9IjkwMCIgZmlsbD0iI2Q0ZDRkNCIvPjwvc3ZnPg==');
+  {% endif %}
+  background-size: cover; background-position: center;
+  display: grid; place-items: end center; padding-bottom: 48px;
+}
+.sb-hero .sb-hero__title { font-family: inherit !important; font-size: 36px !important; font-weight: 700 !important; color: #fff !important; }
+.sb-hero .sb-hero__cta.sb-hero__cta { appearance: none; background: {{ section.settings.cta_bg_color | default: '#000' }}; color: {{ section.settings.cta_text_color | default: '#fff' }}; font-family: inherit !important; font-weight: 700 !important; font-size: 16px !important; border: 0; padding: 14px 28px; border-radius: 999px; }
+@media (min-width: 1000px) {
+  .sb-hero { aspect-ratio: 16 / 9; max-height: 720px; }
+  .sb-hero .sb-hero__title { font-size: 56px !important; }
+}
+{% endstyle %}
+```
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "header", "content": "Content" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Welcome" },
+    { "type": "image_picker", "id": "hero_image", "label": "Hero image" },
+    { "type": "text", "id": "cta_label", "label": "CTA label", "default": "Shop now" },
+    { "type": "url", "id": "cta_link", "label": "CTA link" },
+    { "type": "header", "content": "Colors" },
+    { "type": "color", "id": "cta_bg_color", "label": "CTA background", "default": "#000000" },
+    { "type": "color", "id": "cta_text_color", "label": "CTA text", "default": "#ffffff" }
+  ],
+  "presets": [{ "name": "Hero — clone of source", "category": "Image" }]
+}
+```
+
+### notes
+
+Anti-patterns covered: #1 (no `100vh`), #2 (background-image not `<img height: 100%>`), #5 (chained scope + doubled CTA class), #11 (image_picker without `default`), #16 (base64 SVG fallback, no localPath leak). Shopify build emits **no** `<link rel="preload">` and **no** Google Fonts `<link>` — Shopify owns `<head>`, theme handles font loading and preloading.
+
+---
+
+## Pattern C — Carousel mobile / Grid desktop (scroll-snap → grid)
+
+- **id:** C
+- **name:** Carousel mobile / Grid desktop
+- **applies-when:** product grid, feature grid, testimonial row — repeating cards that scroll horizontally on mobile and tile on desktop.
+
+### markup-wp
+
+```html
+<div class="products">
+  <article class="products__item">
+    <img src="{p1 localPath}" alt="Product 1" loading="lazy" width="600" height="600">
+    <h3>Product 1</h3><p>$24</p>
+  </article>
+  <article class="products__item">
+    <img src="{p2 localPath}" alt="Product 2" loading="lazy" width="600" height="600">
+    <h3>Product 2</h3><p>$28</p>
+  </article>
+</div>
+```
+
+### css-wp
+
+```css
+.products { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 16px; -webkit-overflow-scrolling: touch; }
+.products .products__item { flex: 0 0 80vw; scroll-snap-align: start; }
+.products .products__item img { width: 100%; height: auto; }
+@media (min-width: 1000px) {
+  .products { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
+  .products .products__item { flex: none; }
+}
+```
+
+### markup-shopify
+
+```liquid
+<div class="sb-products">
+  {% for block in section.blocks %}
+    <article class="sb-products__item" {{ block.shopify_attributes }}>
+      {% if block.settings.image %}
+        <img src="{{ block.settings.image | image_url: width: 600 }}" alt="{{ block.settings.title | escape }}" loading="lazy" width="600" height="600">
+      {% endif %}
+      <h3>{{ block.settings.title }}</h3>
+      <p>{{ block.settings.price }}</p>
+      {% if block.settings.link != blank %}
+        <a href="{{ block.settings.link }}" class="sb-products__link">Shop</a>
+      {% endif %}
+    </article>
+  {% endfor %}
+</div>
+```
+
+### css-shopify
+
+Same CSS as WP variant inside `{% style %}`; replace `.products` with `.sb-products`.
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Section heading", "default": "Featured products" }
+  ],
+  "blocks": [
+    {
+      "type": "product",
+      "name": "Product card",
+      "settings": [
+        { "type": "image_picker", "id": "image", "label": "Image" },
+        { "type": "text", "id": "title", "label": "Title", "default": "Product" },
+        { "type": "text", "id": "price", "label": "Price", "default": "$24" },
+        { "type": "url", "id": "link", "label": "Link" }
+      ]
+    }
+  ],
+  "max_blocks": 12,
+  "presets": [{ "name": "Product grid", "category": "Image" }]
+}
+```
+
+### notes
+
+`{{ block.shopify_attributes }}` on the outer `<article>` is **mandatory** (anti-pattern #13) — without it, the merchant cannot click/move/reorder cards in the editor. `loading="lazy"` on every card image — only the hero (Pattern B) gets `loading="eager" fetchpriority="high"`.
+
+---
+
+## Pattern D — Image-with-text overlap (`::before` band on the section)
+
+- **id:** D
+- **name:** Image-with-text overlap
+- **applies-when:** section where an image overlaps a colored band, the band visually spans full bleed and the image floats in front.
+
+### markup-wp
+
+```html
+<section class="story">
+  <div class="story__copy">
+    <h2 class="story__title">Our story</h2>
+    <p class="story__body">...</p>
+  </div>
+  <img class="story__image" src="{story localPath}" alt="Our team" loading="lazy">
+</section>
+```
+
+### css-wp
+
+```css
+.story { position: relative; padding: 48px 16px; }
+.story::before { content: ""; position: absolute; inset: 30% 0 0 0; background: #f4eee8; z-index: -1; }
+.story .story__title { font-size: 28px !important; font-weight: 700 !important; }
+.story .story__image { width: 100%; height: auto; display: block; margin-top: 24px; }
+@media (min-width: 1000px) {
+  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 96px 48px; }
+  .story::before { inset: 0 50% 0 0; }
+}
+```
+
+### markup-shopify
+
+```liquid
+<section class="sb-story">
+  <div class="sb-story__copy">
+    <h2 class="sb-story__title">{{ section.settings.heading | escape }}</h2>
+    <div class="sb-story__body">{{ section.settings.body }}</div>
+  </div>
+  {% if section.settings.image %}
+    <img class="sb-story__image" src="{{ section.settings.image | image_url: width: 1200 }}" alt="{{ section.settings.image.alt | default: section.settings.heading | escape }}" loading="lazy" width="{{ section.settings.image.width }}" height="{{ section.settings.image.height }}">
+  {% endif %}
+</section>
+```
+
+### css-shopify
+
+Same CSS inside `{% style %}`; replace `.story` with `.sb-story`. The band color can be lifted to a `color` setting (`section.settings.band_color`) and interpolated.
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Our story" },
+    { "type": "richtext", "id": "body", "label": "Body", "default": "<p>...</p>" },
+    { "type": "image_picker", "id": "image", "label": "Image" },
+    { "type": "color", "id": "band_color", "label": "Band color", "default": "#f4eee8" }
+  ],
+  "presets": [{ "name": "Story with image overlap", "category": "Text" }]
+}
+```
+
+### notes
+
+The band is a `::before` on the SECTION, not a sibling box on the column wrapper (anti-pattern #6). The exact `inset` values come from `inspection.pseudoElements` — never eyeballed. `richtext` setting type for the body so the merchant can keep links/bold without HTML knowledge.
+
+---
+
+## Pattern E — Defensive button (chain class + appearance + `!important` on font props)
+
+- **id:** E
+- **name:** Defensive button
+- **applies-when:** any styled CTA / primary button / secondary button.
+
+### markup-wp
+
+```html
+<button class="cta" type="button">Shop now</button>
+```
+
+### css-wp
+
+```css
+.{scope} .cta.cta {
+  appearance: none;
+  background: #d8112a !important;
+  color: #fff !important;
+  font-family: inherit !important;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+  border: 0;
+  padding: 14px 28px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+```
+
+### markup-shopify
+
+```liquid
+<button class="sb-cta sb-cta" type="button">{{ section.settings.cta_label | escape }}</button>
+```
+
+### css-shopify
+
+```liquid
+{% style %}
+.{scope} .sb-cta.sb-cta {
+  appearance: none;
+  background: {{ section.settings.cta_bg_color | default: '#000' }};
+  color: {{ section.settings.cta_text_color | default: '#fff' }};
+  font-family: inherit !important;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+  border: 0;
+  padding: 14px 28px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+{% endstyle %}
+```
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "text", "id": "cta_label", "label": "Label", "default": "Shop now" },
+    { "type": "color", "id": "cta_bg_color", "label": "Background", "default": "#000000" },
+    { "type": "color", "id": "cta_text_color", "label": "Text", "default": "#ffffff" }
+  ]
+}
+```
+
+### notes
+
+The double-class chain (`.cta.cta`) raises specificity beyond `.elementor button` and `.shopify-section button`. `!important` on font properties only — never on background/color (anti-pattern #5b). Always `type="button"` to avoid accidental form submits in Elementor / Dawn pages with hidden forms. On Shopify, button colors live in `color` settings so the merchant can re-skin without touching code.
+
+---
+
+## Pattern F — FAQ collapsible (`<details>/<summary>`)
+
+- **id:** F
+- **name:** FAQ collapsible
+- **applies-when:** any list of expandable Q/A items.
+
+### markup-wp
+
+```html
+<div class="faq">
+  <details class="faq__item">
+    <summary class="faq__q">How do I return an order?</summary>
+    <div class="faq__a">Email us within 30 days...</div>
+  </details>
+  <details class="faq__item">
+    <summary class="faq__q">Do you ship internationally?</summary>
+    <div class="faq__a">Yes, we ship to ...</div>
+  </details>
+</div>
+```
+
+### css-wp
+
+```css
+.faq .faq__item { border-bottom: 1px solid #eee; }
+.faq .faq__item summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600 !important; font-size: 16px !important; }
+.faq .faq__item summary::-webkit-details-marker { display: none; }
+.faq .faq__item[open] summary { color: #d8112a !important; }
+.faq .faq__item .faq__a { padding: 0 0 16px 0; font-size: 14px !important; }
+```
+
+### markup-shopify
+
+```liquid
+<div class="sb-faq">
+  {% for block in section.blocks %}
+    <details class="sb-faq__item" {{ block.shopify_attributes }}>
+      <summary class="sb-faq__q">{{ block.settings.question }}</summary>
+      <div class="sb-faq__a">{{ block.settings.answer }}</div>
+    </details>
+  {% endfor %}
+</div>
+```
+
+### css-shopify
+
+Same CSS inside `{% style %}`; replace `.faq` with `.sb-faq`.
+
+### schema-shopify
+
+```json
+{
+  "blocks": [
+    {
+      "type": "qa",
+      "name": "Q&A",
+      "settings": [
+        { "type": "text", "id": "question", "label": "Question", "default": "Question?" },
+        { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>Answer.</p>" }
+      ]
+    }
+  ],
+  "max_blocks": 20,
+  "presets": [{ "name": "FAQ", "category": "Text" }]
+}
+```
+
+### notes
+
+Native `<details>/<summary>` — no JS, no library, accessible by default. The marker reset (`::-webkit-details-marker { display: none }`) is required because every theme styles it differently and the rendered triangle clashes with the design.
+
+---
+
+## Pattern G — Trust banner with modal (vanilla JS ~30 lines, native `<dialog>`)
+
+- **id:** G
+- **name:** Trust banner with modal
+- **applies-when:** trust strip / guarantee banner that opens a modal with details on click.
+
+### markup-wp
+
+```html
+<div class="trust">
+  <p class="trust__copy">100% money-back guarantee</p>
+  <button type="button" class="trust__more" data-open="trust-modal">Learn more</button>
+  <dialog id="trust-modal" class="trust__modal">
+    <button type="button" class="trust__close" data-close aria-label="Close">×</button>
+    <h2>Our guarantee</h2>
+    <p>Not happy? Email us within 30 days for a full refund.</p>
+  </dialog>
+</div>
+<script>
+  document.querySelectorAll('[data-open]').forEach(btn =>
+    btn.addEventListener('click', () => document.getElementById(btn.dataset.open).showModal())
+  );
+  document.querySelectorAll('[data-close]').forEach(btn =>
+    btn.addEventListener('click', () => btn.closest('dialog').close())
+  );
+</script>
+```
+
+### css-wp
+
+```css
+.trust { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 16px; }
+.trust .trust__more { background: none; border: 0; text-decoration: underline; cursor: pointer; }
+.trust__modal { padding: 32px; max-width: 480px; border: 0; border-radius: 8px; }
+.trust__modal::backdrop { background: rgba(0,0,0,0.5); }
+.trust__modal .trust__close { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 24px; cursor: pointer; }
+```
+
+### markup-shopify
+
+```liquid
+<div class="sb-trust">
+  <p class="sb-trust__copy">{{ section.settings.banner_copy | escape }}</p>
+  <button type="button" class="sb-trust__more" data-open="sb-trust-modal-{{ section.id }}">{{ section.settings.cta_label | default: 'Learn more' }}</button>
+  <dialog id="sb-trust-modal-{{ section.id }}" class="sb-trust__modal">
+    <button type="button" class="sb-trust__close" data-close aria-label="Close">×</button>
+    <h2>{{ section.settings.modal_heading | escape }}</h2>
+    <div>{{ section.settings.modal_body }}</div>
+  </dialog>
+</div>
+<script>
+  document.querySelectorAll('[data-open]').forEach(btn =>
+    btn.addEventListener('click', () => document.getElementById(btn.dataset.open).showModal())
+  );
+  document.querySelectorAll('[data-close]').forEach(btn =>
+    btn.addEventListener('click', () => btn.closest('dialog').close())
+  );
+</script>
+```
+
+### css-shopify
+
+Same CSS inside `{% style %}`; replace `.trust` with `.sb-trust`.
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "text", "id": "banner_copy", "label": "Banner copy", "default": "100% money-back guarantee" },
+    { "type": "text", "id": "cta_label", "label": "CTA label", "default": "Learn more" },
+    { "type": "text", "id": "modal_heading", "label": "Modal heading", "default": "Our guarantee" },
+    { "type": "richtext", "id": "modal_body", "label": "Modal body", "default": "<p>...</p>" }
+  ],
+  "presets": [{ "name": "Trust banner", "category": "Promotional" }]
+}
+```
+
+### notes
+
+Native `<dialog>` — `dialog.showModal()` opens with backdrop and traps focus; `dialog.close()` closes. No library, no custom backdrop logic. The Shopify variant suffixes the dialog `id` with `{{ section.id }}` so multiple instances on the same page don't collide. Anti-pattern web-modal-dialog: never use `<div role="dialog">` — always native `<dialog>`.
+
+---
+
+## Pattern H — Variant card e-commerce (radio + product photo)
+
+- **id:** H
+- **name:** Variant card
+- **applies-when:** variant picker on a PDP — sizes, colors, scents — radio inputs paired with real product photos.
+
+### markup-wp
+
+```html
+<fieldset class="variants">
+  <legend class="variants__title">Choose your size</legend>
+  <label class="variants__opt">
+    <input type="radio" name="size" value="30ml" checked>
+    <img src="{30ml localPath}" alt="30ml bottle" loading="lazy">
+    <span>30ml — $24</span>
+  </label>
+  <label class="variants__opt">
+    <input type="radio" name="size" value="100ml">
+    <img src="{100ml localPath}" alt="100ml bottle" loading="lazy">
+    <span>100ml — $54</span>
+  </label>
+</fieldset>
+```
+
+### css-wp
+
+```css
+.variants { border: 0; padding: 0; }
+.variants .variants__title { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 12px; }
+.variants .variants__opt { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 8px; cursor: pointer; }
+.variants .variants__opt:has(input:checked) { border-color: #d8112a; background: #fef2f3; }
+.variants .variants__opt input { display: none; }
+.variants .variants__opt img { width: 80px; height: 80px; object-fit: cover; }
+```
+
+### markup-shopify
+
+```liquid
+<fieldset class="sb-variants">
+  <legend class="sb-variants__title">{{ section.settings.heading | default: 'Choose option' | escape }}</legend>
+  {% for block in section.blocks %}
+    <label class="sb-variants__opt" {{ block.shopify_attributes }}>
+      <input type="radio" name="variant" value="{{ block.settings.value | escape }}" {% if forloop.first %}checked{% endif %}>
+      {% if block.settings.image %}
+        <img src="{{ block.settings.image | image_url: width: 160 }}" alt="{{ block.settings.label | escape }}" loading="lazy" width="80" height="80">
+      {% endif %}
+      <span>{{ block.settings.label }}</span>
+    </label>
+  {% endfor %}
+</fieldset>
+```
+
+### css-shopify
+
+Same CSS inside `{% style %}`; replace `.variants` with `.sb-variants`.
+
+### schema-shopify
+
+```json
+{
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Choose option" }
+  ],
+  "blocks": [
+    {
+      "type": "variant",
+      "name": "Variant",
+      "settings": [
+        { "type": "image_picker", "id": "image", "label": "Image" },
+        { "type": "text", "id": "label", "label": "Label", "default": "Variant" },
+        { "type": "text", "id": "value", "label": "Value", "default": "variant-1" }
+      ]
+    }
+  ],
+  "max_blocks": 8,
+  "presets": [{ "name": "Variant picker", "category": "Image" }]
+}
+```
+
+### notes
+
+Real product photos from `assetsMap[url].localPath` (WP) or `image_url` filter (Shopify) — never SVG illustrations (anti-pattern #8). `:has(input:checked)` for the active state — no JS, modern CSS. The hidden radio input is still focusable; for keyboard users, the focus ring on the `<label>` is what matters.
+
+---
+
+## Maintenance
+
+- New patterns get appended in alphabetical order (next: `I`, `J`, ...).
+- When a pattern needs a Shopify-specific tweak the WP version doesn't have (or vice versa), document it in the `notes` field rather than forking the entry.
+- When `<plugin>/memory/patterns.md` and per-user override file disagree, per-user wins; this file is the floor.