Lang selector

.cursor/references/article-layout-patterns.md

@@ -0,0 +1,8 @@
+# Article Layout Patterns
+
+## Mobile Share Placement
+- File: `sections/main-blog-post.liquid`
+- To place social share above the featured image on mobile, render `blog-article-share` directly after the article header and before the featured image block.
+- Keep desktop sticky share behavior unchanged by preserving existing desktop grid rules:
+  - `.blog-post-layout--has-share .blog-post-layout__main { display: contents; }`
+  - `.blog-post-layout--has-share .blog-article-share { grid-column: 3; grid-row: 1; }`

.cursor/references/blog-tag-filters.md

@@ -0,0 +1,41 @@
+# Blog Tag Filters Pattern
+
+Use this pattern in `sections/main-blog.liquid` to render tag-based filters above the blog posts grid.
+
+## Markup
+
+- Add a `<nav>` above `.blog-posts-container` with `aria-label="Filter blog posts by tag"`.
+- Render an `All` link to `{{ blog.url }}`.
+- Render each tag from `blog.all_tags` as links to `{{ blog.url }}/tagged/{{ tag | handle }}`.
+- Add active state classes:
+  - `All` is active when `current_tags == blank`
+  - A tag is active when `current_tags contains tag`
+
+## Styling
+
+- Use a horizontal row with a subtle bottom border.
+- Use uppercase, tightly spaced labels to match editorial navigation.
+- Add an underline indicator (`::after`) for hover and active states.
+- Keep mobile spacing/font-size slightly reduced for wrap behavior.
+
+## Blog Card Layout Sequence
+
+For editorial blog pages in `sections/main-blog.liquid`, use a deterministic card sequence:
+
+- **Post 1:** full-width hero (`col-span: 6`) with text overlay vertically centered on the image (`top: 50%`, `translateY(-50%)`), padded `clamp(2.5rem, 5vw, 4rem)` block / `clamp(2.5rem, 6vw, 4rem)` inline-start. Inner frame on image via `.blog-post-card__image-container::before`: `inset: 16px`, `border-radius: 16px`, `1px solid rgb(244 192 119 / 0.4)` (`#F4C077` at 40% opacity). Gradient overlay stays on `::after`.
+- **Posts 2-3:** standard two-column grid cards (`col-span: 3` each), image uses `blog-post-card__image--medium` (436px base height at `--blog-post-card-scale: 0.8`), grey `1px solid #d3d3d3` border.
+- **Posts 4+:** one row each (`col-span: 6`) using a compact list row:
+  - image first (264px wide, 3:2 aspect ratio)
+  - title in middle column
+  - excerpt in right column
+
+Implementation note:
+- Add a card variant class by index (`blog-post-item--hero`, `--grid`, `--list`) and style each variant in section-level CSS.
+- **Mobile (≤749px):** All cards use the same stacked layout — full-width image at `aspect-ratio: 3 / 2`, title, details, excerpt below. Hero overlay, inner frame, and list-row layout are disabled; list desktop image rules are explicitly reset so posts 4+ match posts 1–3.
+
+## Pagination
+
+- Wrap the posts grid in `{% paginate blog.articles by 12 %} … {% endpaginate %}`.
+- Render `{% render 'blog-pagination', paginate: paginate %}` below the grid.
+- `snippets/blog-pagination.liquid` uses the same circular arrow controls as featured collection carousels (`--color-primary-button-background`, arrow `::after` SVG).
+- Card layout index (`forloop.index == 1` hero, etc.) resets per page — first post on each page is the hero.

.cursor/references/border-override-mobile.md

@@ -0,0 +1,5 @@
+# Border override (mobile)
+
+- Snippet: `snippets/border-override.liquid` — optional settings emit `--border-*-mobile` custom properties only when set.
+- CSS: `assets/base.css` — `.border-style` at `max-width: 749px` uses `var(--*-mobile, var(--*))` so each property can override independently.
+- Add matching schema fields to a block/section (`border_width_mobile`, `border_mobile`, `border_opacity_mobile`, `border_radius_mobile`). No schema change is required for existing blocks until you want editor controls.

.cursor/references/button-patterns.md

@@ -0,0 +1,5 @@
+# Button Patterns
+
+- Primary buttons (`.button`, excluding `.button-secondary` and `.button-unstyled`) can use a shared trailing arrow icon via CSS pseudo-element for consistent CTA styling.
+- When applying global button icons, exclude buttons that already render inline SVG/icons using `:not(:has(.svg-wrapper, svg))` to avoid duplicate icons.
+- Use an inline SVG data URI for stable rendering without introducing a new asset request.

.cursor/references/cala-falco-way-block.md

@@ -0,0 +1,7 @@
+# Cala Falco Way (PDP block)
+
+- **Block type:** `cala-falco-way` (`blocks/cala-falco-way.liquid`), registered on `blocks/_product-details.liquid`.
+- **Settings:** Image picker, heading (plain text, default `THE CALA FALCÓ WAY`), rich text body, padding.
+- **Layout:** Mobile: image above copy, centered. Desktop: horizontal row, image left in a vertical oval frame (`border-radius: 50%`, `aspect-ratio: 3/4`), title uppercase with letter-spacing, body in `.rte` under the title, copy left-aligned on large screens.
+- **Output:** Renders only if at least one of image, heading, or non-empty body is set.
+- **Editor picker:** the block schema must include at least one **`presets`** entry so **Cala Falco Way** appears in Add block (Shopify theme block requirement).

.cursor/references/column-callouts.md

@@ -0,0 +1,17 @@
+# Column callouts section
+
+## Background behaviour
+
+- **Section** `background_image`: default full-bleed background (always visible when not hovering a column).
+- **Block** `background_image` (label: Hover background image): fades in over the default on column `:hover` / `:focus-within` (pointer devices only via `@media (hover: hover)`).
+- Stacked layers in `.column-callouts__backgrounds`: default `<img>` or placeholder (z-index 0), per-block hover divs with `background-image` (opacity 0 → 1).
+- Per-block rules generated in `{% style %}` using `:has([data-callout-id="…"])`.
+- Columns with a hover image get `tabindex="0"` for keyboard focus.
+- Hover timing: `--column-callouts-hover-duration` (0.45s) shared by background crossfade and `.column-callouts__item-text` `translateY` lift.
+- Extra space between `.column-callouts__item-heading` and text via `margin-block-start` on `.column-callouts__item-text`.
+
+## Pitfalls
+
+- Do not replace the section image on load—only reveal hover layers on interaction.
+- Block `icon` is type `html` (paste SVG/HTML); rendered inside `.column-callouts__icon` with `aria-hidden="true"`. Block `background_image` is the hover background image picker.
+- Icon hover fill cycles per column: `column-callouts__item--icon-color-1|2|3` (`#F4C077`, `#B87C69`, `#D2A087`) via `forloop.index0 | modulo: 3`. SVG shapes use `fill`/`stroke` on item `:hover` / `:focus-within` (0.45s, same as background).

.cursor/references/content-cards-section.md

@@ -0,0 +1,6 @@
+# Content Cards Section Pattern
+
+- Use a dedicated section (`sections/content-cards.liquid`) for numbered/icon cards with a centered heading and intro text.
+- Provide per-card visibility toggles (`show_number`, `show_icon`, `show_text`) so merchants can simplify cards without code changes.
+- Render uploaded icons at a fixed visual size (28x28) and use `object-fit: contain` so SVG uploads remain sharp and uncropped.
+- Alternate card backgrounds with subtle opacity tints to create rhythm while preserving color scheme context.

.cursor/references/featured-blog-posts-patterns.md

@@ -0,0 +1,35 @@
+# Featured Blog Posts Patterns
+
+## Filter by article tag
+
+- `sections/featured-blog-posts.liquid` setting **Filter by tag** (`filter_by_tag`): scans up to 50 articles from the selected blog, keeps only those where `article.tags contains filter_by_tag`, then applies `post_limit`.
+- Tag text must match the tag in Shopify admin **exactly** (case-sensitive).
+- Leave blank to show the latest posts (first `post_limit` articles, same as before).
+- When tag is set and **View all button link** is empty, View all points to `{{ blog.url }}/tagged/{{ tag | handle }}`.
+
+## Width Settings
+
+- `sections/featured-blog-posts.liquid` supports section width via `section.settings.section_width`.
+- Include `small` as an option alongside `page-width` and `full-width`.
+
+## Small Width Sizing
+
+- For consistent theme behavior, apply:
+  - `width: min(100%, calc(1280px + (var(--page-margin) * 2)));`
+  - `max-width: 100%;`
+  - `margin-inline: auto;`
+  - `padding-inline: var(--page-margin);`
+
+This matches the established small-width behavior used by other list-style sections.
+
+## Header row (title, description, View all)
+
+- `.featured-blog-posts-section__header` is a flex row with `align-items: flex-end` so the **View all** button sits on the same horizontal baseline area as the bottom of the text block (title + additional line).
+- Do not set `align-self: flex-start` on `.featured-blog-posts-section__view-all` — it overrides parent alignment.
+- Mobile (`≤749px`): column layout with `align-items: flex-start`.
+
+## Carousel arrow hover
+
+- Featured blog carousel arrows use primary button colors (`--color-primary-button-background` / `--color-primary-button-text`) with a custom `::after` arrow SVG (see section `{% stylesheet %}`).
+- Hover/focus fill matches primary CTAs via shared rules in `assets/base.css` (`.featured-blog-posts-section--carousel .resource-list__carousel slideshow-arrows .slideshow-control`): bottom-up `::before` scale fill, hover text color, and white arrow SVG on hover for the `::after` pseudo.
+- Do not add one-off opacity-only hovers here — keep in sync with `.resource-list__carousel` arrow rules in `base.css`.

.cursor/references/footer-policy-links-patterns.md

@@ -0,0 +1,52 @@
+# Footer Policy Links Patterns
+
+## Single-Section Footer Links
+
+Use `sections/footer.liquid` as the single source of truth for policy/menu links in the frame footer row.
+
+- Do not rely on a separate `footer-utilities` section.
+- Render links at the bottom of `.footer-shell__frame` inside a dedicated wrapper.
+
+## Footer Settings
+
+Add these settings on the footer section:
+
+- `footer_link_source` (`policies` | `menu`)
+- `footer_links_menu` (`link_list`) shown when source is `menu`
+- `footer_links_font_size`
+- `footer_links_case`
+
+## Rendering Rules
+
+- Render link row only when links exist:
+  - `policies`: `shop.policies.size > 0`
+  - `menu`: `footer_links_menu` is selected
+- For menu mode iterate `section.settings.footer_links_menu.links`.
+- For policy mode iterate `shop.policies`.
+- Optional footer language selector:
+  - Add section setting `footer_show_language_selector` (checkbox).
+  - Only render when the setting is on **and** `localization.available_languages.size > 1`.
+  - Render with `localization-form` using `show_country: false`, `show_language: true`, `localization_style: 'footer'`.
+  - Footer style (`localization_style: 'footer'`) should show full language names (for example `English`).
+  - Insert selector immediately before the first privacy link (`url contains 'privacy'`) in either policy or menu source.
+  - If no privacy link exists, append selector as the last item in the policy-links list.
+
+## Header Language Selector
+
+- Header language trigger should be icon-only (globe + caret), with no visible language code/label.
+- For language-only mode in header, clicking the icon should open a direct clickable language list (no nested select control).
+- Keep country/language combined behavior using existing localization form when country selection is enabled.
+
+## Layout Rules
+
+- Place links row after main `.footer-content` and inside `.footer-shell__frame`.
+- Add top divider and spacing (`.footer-shell__policy-links-wrap`).
+- Render links as always-visible inline/wrapping list (no hover popover interaction).
+- Link hover: `opacity: 0.65` with theme transition (policy row, menu column links, copyright links). Replaces underline-only hover.
+
+## Decorative footer glow (Ellipse 6 image)
+
+- Use the Shopify CDN asset `Ellipse_6.png` in `.footer-shell__glow` as the first child of `.footer-shell` (not inside the bordered frame).
+- Position with `left: calc(50% - 50vw)` so the image touches the viewport left edge even when the section is page-width.
+- `height: 100%` on the shell glow + image; `z-index: 0` behind `.footer-shell__frame` (`z-index: 1`) and content.
+- Do not use a CSS blur/ellipse pseudo-element for this effect.