[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-shopify-liquid-theme-standards":3,"mdc--lyesar-key":37,"related-org-shopify-liquid-theme-standards":6085,"related-repo-shopify-liquid-theme-standards":6236},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"liquid-theme-standards","implement Shopify Liquid theme standards","CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS\u002FJS\u002FHTML in .liquid files or theme asset files.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"shopify","Shopify","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fshopify.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"HTML","html","tag",{"name":17,"slug":18,"type":15},"JavaScript","javascript",{"name":20,"slug":21,"type":15},"CSS","css",{"name":23,"slug":24,"type":15},"Themes","themes",{"name":9,"slug":8,"type":15},21,"https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid-skills","2026-07-16T05:59:32.23091",null,4,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"Liquid language support plugin for Claude Code","https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fliquid-skills\u002Fskills\u002Fliquid-theme-standards","---\nname: liquid-theme-standards\ndescription: \"CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS\u002FJS\u002FHTML in .liquid files or theme asset files.\"\n---\n\n# CSS, JS & HTML Standards for Shopify Liquid Themes\n\n## Core Principles\n\n1. **Progressive enhancement** — semantic HTML first, CSS second, JS third\n2. **No external dependencies** — native browser APIs only for JavaScript\n3. **Design tokens** — never hardcode colors, spacing, or fonts\n4. **BEM naming** — consistent class naming throughout\n5. **Defensive CSS** — handle edge cases gracefully\n\n## CSS in Liquid Themes\n\n### Where CSS Lives\n\n| Location | Liquid? | Use For |\n|----------|---------|---------|\n| `{% stylesheet %}` | No | Component-scoped styles (one per file) |\n| `{% style %}` | Yes | Dynamic values needing Liquid (e.g., color settings) |\n| `assets\u002F*.css` | No | Shared\u002Fglobal styles |\n\n**Critical:** `{% stylesheet %}` does NOT process Liquid. Use inline `style` attributes for dynamic values:\n\n```liquid\n{%- comment -%} Do: inline variables {%- endcomment -%}\n\u003Cdiv\n  class=\"hero\"\n  style=\"--bg-color: {{ section.settings.bg_color }}; --padding: {{ section.settings.padding }}px;\"\n>\n\n{%- comment -%} Don't: Liquid inside stylesheet {%- endcomment -%}\n{% stylesheet %}\n  .hero { background: {{ section.settings.bg_color }}; } \u002F* Won't work *\u002F\n{% endstylesheet %}\n```\n\n### BEM Naming Convention\n\n```\n.block                      → Component root: .product-card\n.block__element             → Child: .product-card__title\n.block--modifier            → Variant: .product-card--featured\n.block__element--modifier   → Element variant: .product-card__title--large\n```\n\n**Rules:**\n- Hyphens separate words: `.product-card`, not `.productCard`\n- Single element level only: `.block__element`, never `.block__el1__el2`\n- Modifier always paired with base class: `class=\"btn btn--primary\"`, never `class=\"btn--primary\"` alone\n- Start new BEM scope when a child could be standalone\n\n```html\n\u003C!-- Good: single element level -->\n\u003Cdiv class=\"product-card\">\n  \u003Ch3 class=\"product-card__title\">{{ product.title }}\u003C\u002Fh3>\n  \u003Cspan class=\"product-card__button-label\">{{ 'add_to_cart' | t }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Good: new BEM scope for standalone component -->\n\u003Cdiv class=\"product-card\">\n  \u003Cbutton class=\"button button--primary\">\n    \u003Cspan class=\"button__label\">{{ 'add_to_cart' | t }}\u003C\u002Fspan>\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n### Specificity\n\n- Target `0 1 0` (single class) wherever possible\n- Maximum `0 4 0` for complex parent-child cases\n- **Never** use IDs as selectors\n- **Never** use `!important` (comment why if absolutely forced to)\n- Avoid element selectors — use classes\n\n### CSS Nesting\n\n```css\n\u002F* Do: media queries inside selectors *\u002F\n.header {\n  width: 100%;\n\n  @media screen and (min-width: 750px) {\n    width: auto;\n  }\n}\n\n\u002F* Do: state modifiers with & *\u002F\n.button {\n  background: var(--color-primary);\n\n  &:hover { background: var(--color-primary-hover); }\n  &:focus-visible { outline: 2px solid var(--color-focus); }\n  &[disabled] { opacity: 0.5; }\n}\n\n\u002F* Do: parent modifier affecting children (single level) *\u002F\n.card--featured {\n  .card__title { font-size: var(--font-size-xl); }\n}\n\n\u002F* Don't: nested beyond first level *\u002F\n.parent {\n  .child {\n    .grandchild { } \u002F* Too deep *\u002F\n  }\n}\n```\n\n### Design Tokens\n\nUse CSS custom properties for all values — never hardcode colors, spacing, or fonts. Define a consistent scale and reference it everywhere.\n\n**Example scale** (adapt to your theme's needs):\n\n```css\n:root {\n  \u002F* Spacing — use a consistent scale *\u002F\n  --space-2xs: 0.5rem;    --space-xs: 0.75rem;   --space-sm: 1rem;\n  --space-md: 1.5rem;     --space-lg: 2rem;       --space-xl: 3rem;\n\n  \u002F* Typography — relative units *\u002F\n  --font-size-sm: 0.875rem;  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;  --font-size-xl: 1.25rem;  --font-size-2xl: 1.5rem;\n}\n```\n\n**Key principles:**\n- Use `rem` for spacing and typography (respects user font size preferences)\n- Name tokens semantically: `--space-sm` not `--space-16`\n- Define in `:root` for global tokens, on component root for scoped tokens\n\n### CSS Variable Scoping\n\n**Global** — in `:root` for theme-wide values\n**Component-scoped** — on component root, namespaced:\n\n```css\n\u002F* Do: namespaced *\u002F\n.facets {\n  --facets-padding: var(--space-md);\n  --facets-z-index: 3;\n}\n\n\u002F* Don't: generic names that collide *\u002F\n.facets {\n  --padding: var(--space-md);\n  --z-index: 3;\n}\n```\n\n**Override via inline style** for section\u002Fblock settings:\n\n```liquid\n\u003Csection\n  class=\"hero\"\n  style=\"\n    --hero-bg: {{ section.settings.bg_color }};\n    --hero-padding: {{ section.settings.padding }}px;\n  \"\n>\n```\n\n### CSS Property Order\n\n1. **Layout** — `position`, `display`, `flex-direction`, `grid-template-columns`\n2. **Box model** — `width`, `margin`, `padding`, `border`\n3. **Typography** — `font-family`, `font-size`, `line-height`, `color`\n4. **Visual** — `background`, `opacity`, `border-radius`\n5. **Animation** — `transition`, `animation`\n\n### Logical Properties (RTL Support)\n\n```css\n\u002F* Do: logical properties *\u002F\npadding-inline: 2rem;\npadding-block: 1rem;\nmargin-inline: auto;\nborder-inline-end: 1px solid var(--color-border);\ntext-align: start;\ninset: 0;\n\n\u002F* Don't: physical properties *\u002F\npadding-left: 2rem;\ntext-align: left;\ntop: 0; right: 0; bottom: 0; left: 0;\n```\n\n### Defensive CSS\n\n```css\n.component {\n  overflow-wrap: break-word;        \u002F* Prevent text overflow *\u002F\n  min-width: 0;                     \u002F* Allow flex items to shrink *\u002F\n  max-width: 100%;                  \u002F* Constrain images\u002Fmedia *\u002F\n  isolation: isolate;               \u002F* Create stacking context *\u002F\n}\n\n.image-container {\n  aspect-ratio: 4 \u002F 3;             \u002F* Prevent layout shift *\u002F\n  background: var(--color-surface); \u002F* Fallback for missing images *\u002F\n}\n```\n\n### Modern CSS Features\n\n```css\n\u002F* Container queries for responsive components *\u002F\n.product-grid { container-type: inline-size; }\n@container (min-width: 400px) {\n  .product-card { grid-template-columns: 1fr 1fr; }\n}\n\n\u002F* Fluid spacing *\u002F\n.section { padding: clamp(1rem, 4vw, 3rem); }\n\n\u002F* Intrinsic sizing *\u002F\n.content { width: min(100%, 800px); }\n```\n\n### Performance\n\n- Animate only `transform` and `opacity` (never layout properties)\n- Use `will-change` sparingly — remove after animation\n- Use `contain: content` for isolated rendering\n- Use `dvh` instead of `vh` on mobile\n\n### Reduced Motion\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n## JavaScript in Liquid Themes\n\n### Where JS Lives\n\n| Location | Liquid? | Use For |\n|----------|---------|---------|\n| `{% javascript %}` | No | Component-specific scripts (one per file) |\n| `assets\u002F*.js` | No | Shared utilities, Web Components |\n\n### Web Component Pattern\n\n```javascript\nclass ProductCard extends HTMLElement {\n  connectedCallback() {\n    this.button = this.querySelector('[data-add-to-cart]');\n    this.button?.addEventListener('click', this.#handleClick.bind(this));\n  }\n\n  disconnectedCallback() {\n    \u002F\u002F Clean up event listeners, abort controllers\n  }\n\n  async #handleClick(event) {\n    event.preventDefault();\n    this.button.disabled = true;\n\n    try {\n      const formData = new FormData();\n      formData.append('id', this.dataset.variantId);\n      formData.append('quantity', '1');\n\n      const response = await fetch('\u002Fcart\u002Fadd.js', {\n        method: 'POST',\n        body: formData\n      });\n\n      if (!response.ok) throw new Error('Failed');\n\n      this.dispatchEvent(new CustomEvent('cart:item-added', {\n        detail: await response.json(),\n        bubbles: true\n      }));\n    } catch (error) {\n      console.error('Add to cart error:', error);\n    } finally {\n      this.button.disabled = false;\n    }\n  }\n}\n\ncustomElements.define('product-card', ProductCard);\n```\n\n```liquid\n\u003Cproduct-card data-variant-id=\"{{ product.selected_or_first_available_variant.id }}\">\n  \u003Cbutton data-add-to-cart>{{ 'products.add_to_cart' | t }}\u003C\u002Fbutton>\n\u003C\u002Fproduct-card>\n```\n\n### JavaScript Rules\n\n| Rule | Do | Don't |\n|------|-----|-------|\n| Loops | `for (const item of items)` | `items.forEach()` |\n| Async | `async`\u002F`await` | `.then()` chains |\n| Variables | `const` by default | `let` unless reassigning |\n| Conditionals | Early returns | Nested `if\u002Felse` |\n| URLs | `new URL()` + `URLSearchParams` | String concatenation |\n| Dependencies | Native browser APIs | External libraries |\n| Private methods | `#methodName()` | `_methodName()` |\n| Types | JSDoc `@typedef`, `@param`, `@returns` | Untyped |\n\n### AbortController for Fetch\n\n```javascript\nclass DataLoader extends HTMLElement {\n  #controller = null;\n\n  async load(url) {\n    this.#controller?.abort();\n    this.#controller = new AbortController();\n\n    try {\n      const response = await fetch(url, { signal: this.#controller.signal });\n      if (!response.ok) throw new Error(`HTTP ${response.status}`);\n      return await response.json();\n    } catch (error) {\n      if (error.name !== 'AbortError') throw error;\n      return null;\n    }\n  }\n\n  disconnectedCallback() {\n    this.#controller?.abort();\n  }\n}\n```\n\n### Component Communication\n\n**Parent → Child:** Call public methods\n```javascript\nthis.querySelector('child-component')?.publicMethod(data);\n```\n\n**Child → Parent:** Dispatch custom events\n```javascript\nthis.dispatchEvent(new CustomEvent('child:action', {\n  detail: { value },\n  bubbles: true\n}));\n```\n\n## HTML Standards\n\n### Native Elements First\n\n| Need | Use | Not |\n|------|-----|-----|\n| Expandable | `\u003Cdetails>\u002F\u003Csummary>` | Custom accordion with JS |\n| Dialog\u002Fmodal | `\u003Cdialog>` | Custom overlay div |\n| Tooltip\u002Fpopup | `popover` attribute | Custom positioned div |\n| Search form | `\u003Csearch>` | `\u003Cdiv class=\"search\">` |\n| Form results | `\u003Coutput>` | `\u003Cspan class=\"result\">` |\n\n### Progressive Enhancement\n\n```liquid\n{%- comment -%} Works without JS {%- endcomment -%}\n\u003Cdetails class=\"accordion\">\n  \u003Csummary>{{ block.settings.heading }}\u003C\u002Fsummary>\n  \u003Cdiv class=\"accordion__content\">\n    {{ block.settings.content }}\n  \u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n{%- comment -%} Enhanced with JS {%- endcomment -%}\n{% javascript %}\n  \u002F\u002F Optional: smooth animation, analytics tracking\n{% endjavascript %}\n```\n\n### Images\n\n```liquid\n{{ image | image_url: width: 800 | image_tag:\n  loading: 'lazy',\n  alt: image.alt | escape,\n  width: image.width,\n  height: image.height\n}}\n```\n\n- `loading=\"lazy\"` on all below-fold images\n- Always set `width` and `height` to prevent layout shift\n- Descriptive `alt` text; empty `alt=\"\"` for decorative images\n\n## JSON Template & Config Files\n\nTheme templates (`templates\u002F*.json`), section groups (`sections\u002F*.json`), and config files (`config\u002Fsettings_data.json`) are all JSON. Use `jq` via the `bash` tool to make surgical edits — it's safer and more reliable than string-based find-and-replace for structured data.\n\n### Common patterns\n\n```bash\n# Add a section to a template\njq '.sections.new_section = {\"type\": \"hero\", \"settings\": {\"heading\": \"Welcome\"}}' templates\u002Findex.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout templates\u002Findex.json\n\n# Update a setting value\njq '.current.sections.header.settings.logo_width = 200' config\u002Fsettings_data.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout config\u002Fsettings_data.json\n\n# Reorder sections\njq '.order += [\"new_section\"]' templates\u002Findex.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout templates\u002Findex.json\n\n# Remove a section\njq 'del(.sections.old_banner) | .order -= [\"old_banner\"]' templates\u002Findex.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout templates\u002Findex.json\n\n# Read a nested value\njq '.sections.header.settings' templates\u002Findex.json\n```\n\n**Prefer `jq` over `edit`** for any `.json` file modification — it validates structure, handles escaping, and avoids whitespace\u002Fformatting issues.\n\n## References\n\n- [CSS patterns and examples](references\u002Fcss-patterns.md)\n- [JavaScript patterns and examples](references\u002Fjavascript-patterns.md)\n",{"data":38,"body":39},{"name":4,"description":6},{"type":40,"children":41},"root",[42,51,58,114,120,127,226,252,355,361,371,379,446,806,812,873,879,1401,1407,1412,1422,1682,1690,1738,1744,1768,1941,1951,2012,2018,2181,2187,2322,2327,2559,2565,2837,2843,2910,2916,3121,3127,3133,3199,3205,4254,4285,4291,4546,4552,5086,5092,5102,5160,5170,5282,5288,5294,5441,5447,5549,5555,5610,5664,5670,5715,5721,6021,6052,6058,6080],{"type":43,"tag":44,"props":45,"children":47},"element","h1",{"id":46},"css-js-html-standards-for-shopify-liquid-themes",[48],{"type":49,"value":50},"text","CSS, JS & HTML Standards for Shopify Liquid Themes",{"type":43,"tag":52,"props":53,"children":55},"h2",{"id":54},"core-principles",[56],{"type":49,"value":57},"Core Principles",{"type":43,"tag":59,"props":60,"children":61},"ol",{},[62,74,84,94,104],{"type":43,"tag":63,"props":64,"children":65},"li",{},[66,72],{"type":43,"tag":67,"props":68,"children":69},"strong",{},[70],{"type":49,"value":71},"Progressive enhancement",{"type":49,"value":73}," — semantic HTML first, CSS second, JS third",{"type":43,"tag":63,"props":75,"children":76},{},[77,82],{"type":43,"tag":67,"props":78,"children":79},{},[80],{"type":49,"value":81},"No external dependencies",{"type":49,"value":83}," — native browser APIs only for JavaScript",{"type":43,"tag":63,"props":85,"children":86},{},[87,92],{"type":43,"tag":67,"props":88,"children":89},{},[90],{"type":49,"value":91},"Design tokens",{"type":49,"value":93}," — never hardcode colors, spacing, or fonts",{"type":43,"tag":63,"props":95,"children":96},{},[97,102],{"type":43,"tag":67,"props":98,"children":99},{},[100],{"type":49,"value":101},"BEM naming",{"type":49,"value":103}," — consistent class naming throughout",{"type":43,"tag":63,"props":105,"children":106},{},[107,112],{"type":43,"tag":67,"props":108,"children":109},{},[110],{"type":49,"value":111},"Defensive CSS",{"type":49,"value":113}," — handle edge cases gracefully",{"type":43,"tag":52,"props":115,"children":117},{"id":116},"css-in-liquid-themes",[118],{"type":49,"value":119},"CSS in Liquid Themes",{"type":43,"tag":121,"props":122,"children":124},"h3",{"id":123},"where-css-lives",[125],{"type":49,"value":126},"Where CSS Lives",{"type":43,"tag":128,"props":129,"children":130},"table",{},[131,155],{"type":43,"tag":132,"props":133,"children":134},"thead",{},[135],{"type":43,"tag":136,"props":137,"children":138},"tr",{},[139,145,150],{"type":43,"tag":140,"props":141,"children":142},"th",{},[143],{"type":49,"value":144},"Location",{"type":43,"tag":140,"props":146,"children":147},{},[148],{"type":49,"value":149},"Liquid?",{"type":43,"tag":140,"props":151,"children":152},{},[153],{"type":49,"value":154},"Use For",{"type":43,"tag":156,"props":157,"children":158},"tbody",{},[159,183,205],{"type":43,"tag":136,"props":160,"children":161},{},[162,173,178],{"type":43,"tag":163,"props":164,"children":165},"td",{},[166],{"type":43,"tag":167,"props":168,"children":170},"code",{"className":169},[],[171],{"type":49,"value":172},"{% stylesheet %}",{"type":43,"tag":163,"props":174,"children":175},{},[176],{"type":49,"value":177},"No",{"type":43,"tag":163,"props":179,"children":180},{},[181],{"type":49,"value":182},"Component-scoped styles (one per file)",{"type":43,"tag":136,"props":184,"children":185},{},[186,195,200],{"type":43,"tag":163,"props":187,"children":188},{},[189],{"type":43,"tag":167,"props":190,"children":192},{"className":191},[],[193],{"type":49,"value":194},"{% style %}",{"type":43,"tag":163,"props":196,"children":197},{},[198],{"type":49,"value":199},"Yes",{"type":43,"tag":163,"props":201,"children":202},{},[203],{"type":49,"value":204},"Dynamic values needing Liquid (e.g., color settings)",{"type":43,"tag":136,"props":206,"children":207},{},[208,217,221],{"type":43,"tag":163,"props":209,"children":210},{},[211],{"type":43,"tag":167,"props":212,"children":214},{"className":213},[],[215],{"type":49,"value":216},"assets\u002F*.css",{"type":43,"tag":163,"props":218,"children":219},{},[220],{"type":49,"value":177},{"type":43,"tag":163,"props":222,"children":223},{},[224],{"type":49,"value":225},"Shared\u002Fglobal styles",{"type":43,"tag":227,"props":228,"children":229},"p",{},[230,235,237,242,244,250],{"type":43,"tag":67,"props":231,"children":232},{},[233],{"type":49,"value":234},"Critical:",{"type":49,"value":236}," ",{"type":43,"tag":167,"props":238,"children":240},{"className":239},[],[241],{"type":49,"value":172},{"type":49,"value":243}," does NOT process Liquid. Use inline ",{"type":43,"tag":167,"props":245,"children":247},{"className":246},[],[248],{"type":49,"value":249},"style",{"type":49,"value":251}," attributes for dynamic values:",{"type":43,"tag":253,"props":254,"children":259},"pre",{"className":255,"code":256,"language":257,"meta":258,"style":258},"language-liquid shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{%- comment -%} Do: inline variables {%- endcomment -%}\n\u003Cdiv\n  class=\"hero\"\n  style=\"--bg-color: {{ section.settings.bg_color }}; --padding: {{ section.settings.padding }}px;\"\n>\n\n{%- comment -%} Don't: Liquid inside stylesheet {%- endcomment -%}\n{% stylesheet %}\n  .hero { background: {{ section.settings.bg_color }}; } \u002F* Won't work *\u002F\n{% endstylesheet %}\n","liquid","",[260],{"type":43,"tag":167,"props":261,"children":262},{"__ignoreMap":258},[263,274,283,292,300,309,319,328,337,346],{"type":43,"tag":264,"props":265,"children":268},"span",{"class":266,"line":267},"line",1,[269],{"type":43,"tag":264,"props":270,"children":271},{},[272],{"type":49,"value":273},"{%- comment -%} Do: inline variables {%- endcomment -%}\n",{"type":43,"tag":264,"props":275,"children":277},{"class":266,"line":276},2,[278],{"type":43,"tag":264,"props":279,"children":280},{},[281],{"type":49,"value":282},"\u003Cdiv\n",{"type":43,"tag":264,"props":284,"children":286},{"class":266,"line":285},3,[287],{"type":43,"tag":264,"props":288,"children":289},{},[290],{"type":49,"value":291},"  class=\"hero\"\n",{"type":43,"tag":264,"props":293,"children":294},{"class":266,"line":30},[295],{"type":43,"tag":264,"props":296,"children":297},{},[298],{"type":49,"value":299},"  style=\"--bg-color: {{ section.settings.bg_color }}; --padding: {{ section.settings.padding }}px;\"\n",{"type":43,"tag":264,"props":301,"children":303},{"class":266,"line":302},5,[304],{"type":43,"tag":264,"props":305,"children":306},{},[307],{"type":49,"value":308},">\n",{"type":43,"tag":264,"props":310,"children":312},{"class":266,"line":311},6,[313],{"type":43,"tag":264,"props":314,"children":316},{"emptyLinePlaceholder":315},true,[317],{"type":49,"value":318},"\n",{"type":43,"tag":264,"props":320,"children":322},{"class":266,"line":321},7,[323],{"type":43,"tag":264,"props":324,"children":325},{},[326],{"type":49,"value":327},"{%- comment -%} Don't: Liquid inside stylesheet {%- endcomment -%}\n",{"type":43,"tag":264,"props":329,"children":331},{"class":266,"line":330},8,[332],{"type":43,"tag":264,"props":333,"children":334},{},[335],{"type":49,"value":336},"{% stylesheet %}\n",{"type":43,"tag":264,"props":338,"children":340},{"class":266,"line":339},9,[341],{"type":43,"tag":264,"props":342,"children":343},{},[344],{"type":49,"value":345},"  .hero { background: {{ section.settings.bg_color }}; } \u002F* Won't work *\u002F\n",{"type":43,"tag":264,"props":347,"children":349},{"class":266,"line":348},10,[350],{"type":43,"tag":264,"props":351,"children":352},{},[353],{"type":49,"value":354},"{% endstylesheet %}\n",{"type":43,"tag":121,"props":356,"children":358},{"id":357},"bem-naming-convention",[359],{"type":49,"value":360},"BEM Naming Convention",{"type":43,"tag":253,"props":362,"children":366},{"className":363,"code":365,"language":49},[364],"language-text",".block                      → Component root: .product-card\n.block__element             → Child: .product-card__title\n.block--modifier            → Variant: .product-card--featured\n.block__element--modifier   → Element variant: .product-card__title--large\n",[367],{"type":43,"tag":167,"props":368,"children":369},{"__ignoreMap":258},[370],{"type":49,"value":365},{"type":43,"tag":227,"props":372,"children":373},{},[374],{"type":43,"tag":67,"props":375,"children":376},{},[377],{"type":49,"value":378},"Rules:",{"type":43,"tag":380,"props":381,"children":382},"ul",{},[383,402,421,441],{"type":43,"tag":63,"props":384,"children":385},{},[386,388,394,396],{"type":49,"value":387},"Hyphens separate words: ",{"type":43,"tag":167,"props":389,"children":391},{"className":390},[],[392],{"type":49,"value":393},".product-card",{"type":49,"value":395},", not ",{"type":43,"tag":167,"props":397,"children":399},{"className":398},[],[400],{"type":49,"value":401},".productCard",{"type":43,"tag":63,"props":403,"children":404},{},[405,407,413,415],{"type":49,"value":406},"Single element level only: ",{"type":43,"tag":167,"props":408,"children":410},{"className":409},[],[411],{"type":49,"value":412},".block__element",{"type":49,"value":414},", never ",{"type":43,"tag":167,"props":416,"children":418},{"className":417},[],[419],{"type":49,"value":420},".block__el1__el2",{"type":43,"tag":63,"props":422,"children":423},{},[424,426,432,433,439],{"type":49,"value":425},"Modifier always paired with base class: ",{"type":43,"tag":167,"props":427,"children":429},{"className":428},[],[430],{"type":49,"value":431},"class=\"btn btn--primary\"",{"type":49,"value":414},{"type":43,"tag":167,"props":434,"children":436},{"className":435},[],[437],{"type":49,"value":438},"class=\"btn--primary\"",{"type":49,"value":440}," alone",{"type":43,"tag":63,"props":442,"children":443},{},[444],{"type":49,"value":445},"Start new BEM scope when a child could be standalone",{"type":43,"tag":253,"props":447,"children":450},{"className":448,"code":449,"language":14,"meta":258,"style":258},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Good: single element level -->\n\u003Cdiv class=\"product-card\">\n  \u003Ch3 class=\"product-card__title\">{{ product.title }}\u003C\u002Fh3>\n  \u003Cspan class=\"product-card__button-label\">{{ 'add_to_cart' | t }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Good: new BEM scope for standalone component -->\n\u003Cdiv class=\"product-card\">\n  \u003Cbutton class=\"button button--primary\">\n    \u003Cspan class=\"button__label\">{{ 'add_to_cart' | t }}\u003C\u002Fspan>\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[451],{"type":43,"tag":167,"props":452,"children":453},{"__ignoreMap":258},[454,463,508,565,618,633,640,648,683,720,773,790],{"type":43,"tag":264,"props":455,"children":456},{"class":266,"line":267},[457],{"type":43,"tag":264,"props":458,"children":460},{"style":459},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[461],{"type":49,"value":462},"\u003C!-- Good: single element level -->\n",{"type":43,"tag":264,"props":464,"children":465},{"class":266,"line":276},[466,472,478,484,489,494,500,504],{"type":43,"tag":264,"props":467,"children":469},{"style":468},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[470],{"type":49,"value":471},"\u003C",{"type":43,"tag":264,"props":473,"children":475},{"style":474},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[476],{"type":49,"value":477},"div",{"type":43,"tag":264,"props":479,"children":481},{"style":480},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[482],{"type":49,"value":483}," class",{"type":43,"tag":264,"props":485,"children":486},{"style":468},[487],{"type":49,"value":488},"=",{"type":43,"tag":264,"props":490,"children":491},{"style":468},[492],{"type":49,"value":493},"\"",{"type":43,"tag":264,"props":495,"children":497},{"style":496},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[498],{"type":49,"value":499},"product-card",{"type":43,"tag":264,"props":501,"children":502},{"style":468},[503],{"type":49,"value":493},{"type":43,"tag":264,"props":505,"children":506},{"style":468},[507],{"type":49,"value":308},{"type":43,"tag":264,"props":509,"children":510},{"class":266,"line":285},[511,516,520,524,528,532,537,541,546,552,557,561],{"type":43,"tag":264,"props":512,"children":513},{"style":468},[514],{"type":49,"value":515},"  \u003C",{"type":43,"tag":264,"props":517,"children":518},{"style":474},[519],{"type":49,"value":121},{"type":43,"tag":264,"props":521,"children":522},{"style":480},[523],{"type":49,"value":483},{"type":43,"tag":264,"props":525,"children":526},{"style":468},[527],{"type":49,"value":488},{"type":43,"tag":264,"props":529,"children":530},{"style":468},[531],{"type":49,"value":493},{"type":43,"tag":264,"props":533,"children":534},{"style":496},[535],{"type":49,"value":536},"product-card__title",{"type":43,"tag":264,"props":538,"children":539},{"style":468},[540],{"type":49,"value":493},{"type":43,"tag":264,"props":542,"children":543},{"style":468},[544],{"type":49,"value":545},">",{"type":43,"tag":264,"props":547,"children":549},{"style":548},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[550],{"type":49,"value":551},"{{ product.title }}",{"type":43,"tag":264,"props":553,"children":554},{"style":468},[555],{"type":49,"value":556},"\u003C\u002F",{"type":43,"tag":264,"props":558,"children":559},{"style":474},[560],{"type":49,"value":121},{"type":43,"tag":264,"props":562,"children":563},{"style":468},[564],{"type":49,"value":308},{"type":43,"tag":264,"props":566,"children":567},{"class":266,"line":30},[568,572,576,580,584,588,593,597,601,606,610,614],{"type":43,"tag":264,"props":569,"children":570},{"style":468},[571],{"type":49,"value":515},{"type":43,"tag":264,"props":573,"children":574},{"style":474},[575],{"type":49,"value":264},{"type":43,"tag":264,"props":577,"children":578},{"style":480},[579],{"type":49,"value":483},{"type":43,"tag":264,"props":581,"children":582},{"style":468},[583],{"type":49,"value":488},{"type":43,"tag":264,"props":585,"children":586},{"style":468},[587],{"type":49,"value":493},{"type":43,"tag":264,"props":589,"children":590},{"style":496},[591],{"type":49,"value":592},"product-card__button-label",{"type":43,"tag":264,"props":594,"children":595},{"style":468},[596],{"type":49,"value":493},{"type":43,"tag":264,"props":598,"children":599},{"style":468},[600],{"type":49,"value":545},{"type":43,"tag":264,"props":602,"children":603},{"style":548},[604],{"type":49,"value":605},"{{ 'add_to_cart' | t }}",{"type":43,"tag":264,"props":607,"children":608},{"style":468},[609],{"type":49,"value":556},{"type":43,"tag":264,"props":611,"children":612},{"style":474},[613],{"type":49,"value":264},{"type":43,"tag":264,"props":615,"children":616},{"style":468},[617],{"type":49,"value":308},{"type":43,"tag":264,"props":619,"children":620},{"class":266,"line":302},[621,625,629],{"type":43,"tag":264,"props":622,"children":623},{"style":468},[624],{"type":49,"value":556},{"type":43,"tag":264,"props":626,"children":627},{"style":474},[628],{"type":49,"value":477},{"type":43,"tag":264,"props":630,"children":631},{"style":468},[632],{"type":49,"value":308},{"type":43,"tag":264,"props":634,"children":635},{"class":266,"line":311},[636],{"type":43,"tag":264,"props":637,"children":638},{"emptyLinePlaceholder":315},[639],{"type":49,"value":318},{"type":43,"tag":264,"props":641,"children":642},{"class":266,"line":321},[643],{"type":43,"tag":264,"props":644,"children":645},{"style":459},[646],{"type":49,"value":647},"\u003C!-- Good: new BEM scope for standalone component -->\n",{"type":43,"tag":264,"props":649,"children":650},{"class":266,"line":330},[651,655,659,663,667,671,675,679],{"type":43,"tag":264,"props":652,"children":653},{"style":468},[654],{"type":49,"value":471},{"type":43,"tag":264,"props":656,"children":657},{"style":474},[658],{"type":49,"value":477},{"type":43,"tag":264,"props":660,"children":661},{"style":480},[662],{"type":49,"value":483},{"type":43,"tag":264,"props":664,"children":665},{"style":468},[666],{"type":49,"value":488},{"type":43,"tag":264,"props":668,"children":669},{"style":468},[670],{"type":49,"value":493},{"type":43,"tag":264,"props":672,"children":673},{"style":496},[674],{"type":49,"value":499},{"type":43,"tag":264,"props":676,"children":677},{"style":468},[678],{"type":49,"value":493},{"type":43,"tag":264,"props":680,"children":681},{"style":468},[682],{"type":49,"value":308},{"type":43,"tag":264,"props":684,"children":685},{"class":266,"line":339},[686,690,695,699,703,707,712,716],{"type":43,"tag":264,"props":687,"children":688},{"style":468},[689],{"type":49,"value":515},{"type":43,"tag":264,"props":691,"children":692},{"style":474},[693],{"type":49,"value":694},"button",{"type":43,"tag":264,"props":696,"children":697},{"style":480},[698],{"type":49,"value":483},{"type":43,"tag":264,"props":700,"children":701},{"style":468},[702],{"type":49,"value":488},{"type":43,"tag":264,"props":704,"children":705},{"style":468},[706],{"type":49,"value":493},{"type":43,"tag":264,"props":708,"children":709},{"style":496},[710],{"type":49,"value":711},"button button--primary",{"type":43,"tag":264,"props":713,"children":714},{"style":468},[715],{"type":49,"value":493},{"type":43,"tag":264,"props":717,"children":718},{"style":468},[719],{"type":49,"value":308},{"type":43,"tag":264,"props":721,"children":722},{"class":266,"line":348},[723,728,732,736,740,744,749,753,757,761,765,769],{"type":43,"tag":264,"props":724,"children":725},{"style":468},[726],{"type":49,"value":727},"    \u003C",{"type":43,"tag":264,"props":729,"children":730},{"style":474},[731],{"type":49,"value":264},{"type":43,"tag":264,"props":733,"children":734},{"style":480},[735],{"type":49,"value":483},{"type":43,"tag":264,"props":737,"children":738},{"style":468},[739],{"type":49,"value":488},{"type":43,"tag":264,"props":741,"children":742},{"style":468},[743],{"type":49,"value":493},{"type":43,"tag":264,"props":745,"children":746},{"style":496},[747],{"type":49,"value":748},"button__label",{"type":43,"tag":264,"props":750,"children":751},{"style":468},[752],{"type":49,"value":493},{"type":43,"tag":264,"props":754,"children":755},{"style":468},[756],{"type":49,"value":545},{"type":43,"tag":264,"props":758,"children":759},{"style":548},[760],{"type":49,"value":605},{"type":43,"tag":264,"props":762,"children":763},{"style":468},[764],{"type":49,"value":556},{"type":43,"tag":264,"props":766,"children":767},{"style":474},[768],{"type":49,"value":264},{"type":43,"tag":264,"props":770,"children":771},{"style":468},[772],{"type":49,"value":308},{"type":43,"tag":264,"props":774,"children":776},{"class":266,"line":775},11,[777,782,786],{"type":43,"tag":264,"props":778,"children":779},{"style":468},[780],{"type":49,"value":781},"  \u003C\u002F",{"type":43,"tag":264,"props":783,"children":784},{"style":474},[785],{"type":49,"value":694},{"type":43,"tag":264,"props":787,"children":788},{"style":468},[789],{"type":49,"value":308},{"type":43,"tag":264,"props":791,"children":793},{"class":266,"line":792},12,[794,798,802],{"type":43,"tag":264,"props":795,"children":796},{"style":468},[797],{"type":49,"value":556},{"type":43,"tag":264,"props":799,"children":800},{"style":474},[801],{"type":49,"value":477},{"type":43,"tag":264,"props":803,"children":804},{"style":468},[805],{"type":49,"value":308},{"type":43,"tag":121,"props":807,"children":809},{"id":808},"specificity",[810],{"type":49,"value":811},"Specificity",{"type":43,"tag":380,"props":813,"children":814},{},[815,828,841,851,868],{"type":43,"tag":63,"props":816,"children":817},{},[818,820,826],{"type":49,"value":819},"Target ",{"type":43,"tag":167,"props":821,"children":823},{"className":822},[],[824],{"type":49,"value":825},"0 1 0",{"type":49,"value":827}," (single class) wherever possible",{"type":43,"tag":63,"props":829,"children":830},{},[831,833,839],{"type":49,"value":832},"Maximum ",{"type":43,"tag":167,"props":834,"children":836},{"className":835},[],[837],{"type":49,"value":838},"0 4 0",{"type":49,"value":840}," for complex parent-child cases",{"type":43,"tag":63,"props":842,"children":843},{},[844,849],{"type":43,"tag":67,"props":845,"children":846},{},[847],{"type":49,"value":848},"Never",{"type":49,"value":850}," use IDs as selectors",{"type":43,"tag":63,"props":852,"children":853},{},[854,858,860,866],{"type":43,"tag":67,"props":855,"children":856},{},[857],{"type":49,"value":848},{"type":49,"value":859}," use ",{"type":43,"tag":167,"props":861,"children":863},{"className":862},[],[864],{"type":49,"value":865},"!important",{"type":49,"value":867}," (comment why if absolutely forced to)",{"type":43,"tag":63,"props":869,"children":870},{},[871],{"type":49,"value":872},"Avoid element selectors — use classes",{"type":43,"tag":121,"props":874,"children":876},{"id":875},"css-nesting",[877],{"type":49,"value":878},"CSS Nesting",{"type":43,"tag":253,"props":880,"children":883},{"className":881,"code":882,"language":21,"meta":258,"style":258},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Do: media queries inside selectors *\u002F\n.header {\n  width: 100%;\n\n  @media screen and (min-width: 750px) {\n    width: auto;\n  }\n}\n\n\u002F* Do: state modifiers with & *\u002F\n.button {\n  background: var(--color-primary);\n\n  &:hover { background: var(--color-primary-hover); }\n  &:focus-visible { outline: 2px solid var(--color-focus); }\n  &[disabled] { opacity: 0.5; }\n}\n\n\u002F* Do: parent modifier affecting children (single level) *\u002F\n.card--featured {\n  .card__title { font-size: var(--font-size-xl); }\n}\n\n\u002F* Don't: nested beyond first level *\u002F\n.parent {\n  .child {\n    .grandchild { } \u002F* Too deep *\u002F\n  }\n}\n",[884],{"type":43,"tag":167,"props":885,"children":886},{"__ignoreMap":258},[887,895,914,939,946,973,994,1002,1010,1017,1025,1040,1073,1081,1123,1185,1235,1243,1251,1260,1277,1315,1323,1331,1340,1357,1366,1385,1393],{"type":43,"tag":264,"props":888,"children":889},{"class":266,"line":267},[890],{"type":43,"tag":264,"props":891,"children":892},{"style":459},[893],{"type":49,"value":894},"\u002F* Do: media queries inside selectors *\u002F\n",{"type":43,"tag":264,"props":896,"children":897},{"class":266,"line":276},[898,903,909],{"type":43,"tag":264,"props":899,"children":900},{"style":468},[901],{"type":49,"value":902},".",{"type":43,"tag":264,"props":904,"children":906},{"style":905},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[907],{"type":49,"value":908},"header",{"type":43,"tag":264,"props":910,"children":911},{"style":468},[912],{"type":49,"value":913}," {\n",{"type":43,"tag":264,"props":915,"children":916},{"class":266,"line":285},[917,923,928,934],{"type":43,"tag":264,"props":918,"children":920},{"style":919},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[921],{"type":49,"value":922},"  width",{"type":43,"tag":264,"props":924,"children":925},{"style":468},[926],{"type":49,"value":927},":",{"type":43,"tag":264,"props":929,"children":931},{"style":930},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[932],{"type":49,"value":933}," 100%",{"type":43,"tag":264,"props":935,"children":936},{"style":468},[937],{"type":49,"value":938},";\n",{"type":43,"tag":264,"props":940,"children":941},{"class":266,"line":30},[942],{"type":43,"tag":264,"props":943,"children":944},{"emptyLinePlaceholder":315},[945],{"type":49,"value":318},{"type":43,"tag":264,"props":947,"children":948},{"class":266,"line":302},[949,954,959,963,968],{"type":43,"tag":264,"props":950,"children":951},{"style":548},[952],{"type":49,"value":953},"  @media screen and (",{"type":43,"tag":264,"props":955,"children":956},{"style":919},[957],{"type":49,"value":958},"min-width",{"type":43,"tag":264,"props":960,"children":961},{"style":468},[962],{"type":49,"value":927},{"type":43,"tag":264,"props":964,"children":965},{"style":930},[966],{"type":49,"value":967}," 750px",{"type":43,"tag":264,"props":969,"children":970},{"style":548},[971],{"type":49,"value":972},") {\n",{"type":43,"tag":264,"props":974,"children":975},{"class":266,"line":311},[976,981,985,990],{"type":43,"tag":264,"props":977,"children":978},{"style":919},[979],{"type":49,"value":980},"    width",{"type":43,"tag":264,"props":982,"children":983},{"style":468},[984],{"type":49,"value":927},{"type":43,"tag":264,"props":986,"children":987},{"style":548},[988],{"type":49,"value":989}," auto",{"type":43,"tag":264,"props":991,"children":992},{"style":468},[993],{"type":49,"value":938},{"type":43,"tag":264,"props":995,"children":996},{"class":266,"line":321},[997],{"type":43,"tag":264,"props":998,"children":999},{"style":468},[1000],{"type":49,"value":1001},"  }\n",{"type":43,"tag":264,"props":1003,"children":1004},{"class":266,"line":330},[1005],{"type":43,"tag":264,"props":1006,"children":1007},{"style":548},[1008],{"type":49,"value":1009},"}\n",{"type":43,"tag":264,"props":1011,"children":1012},{"class":266,"line":339},[1013],{"type":43,"tag":264,"props":1014,"children":1015},{"emptyLinePlaceholder":315},[1016],{"type":49,"value":318},{"type":43,"tag":264,"props":1018,"children":1019},{"class":266,"line":348},[1020],{"type":43,"tag":264,"props":1021,"children":1022},{"style":459},[1023],{"type":49,"value":1024},"\u002F* Do: state modifiers with & *\u002F\n",{"type":43,"tag":264,"props":1026,"children":1027},{"class":266,"line":775},[1028,1032,1036],{"type":43,"tag":264,"props":1029,"children":1030},{"style":468},[1031],{"type":49,"value":902},{"type":43,"tag":264,"props":1033,"children":1034},{"style":905},[1035],{"type":49,"value":694},{"type":43,"tag":264,"props":1037,"children":1038},{"style":468},[1039],{"type":49,"value":913},{"type":43,"tag":264,"props":1041,"children":1042},{"class":266,"line":792},[1043,1048,1052,1058,1063,1068],{"type":43,"tag":264,"props":1044,"children":1045},{"style":919},[1046],{"type":49,"value":1047},"  background",{"type":43,"tag":264,"props":1049,"children":1050},{"style":468},[1051],{"type":49,"value":927},{"type":43,"tag":264,"props":1053,"children":1055},{"style":1054},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1056],{"type":49,"value":1057}," var",{"type":43,"tag":264,"props":1059,"children":1060},{"style":468},[1061],{"type":49,"value":1062},"(",{"type":43,"tag":264,"props":1064,"children":1065},{"style":548},[1066],{"type":49,"value":1067},"--color-primary",{"type":43,"tag":264,"props":1069,"children":1070},{"style":468},[1071],{"type":49,"value":1072},");\n",{"type":43,"tag":264,"props":1074,"children":1076},{"class":266,"line":1075},13,[1077],{"type":43,"tag":264,"props":1078,"children":1079},{"emptyLinePlaceholder":315},[1080],{"type":49,"value":318},{"type":43,"tag":264,"props":1082,"children":1084},{"class":266,"line":1083},14,[1085,1090,1094,1099,1104,1108,1113,1118],{"type":43,"tag":264,"props":1086,"children":1087},{"style":548},[1088],{"type":49,"value":1089},"  &",{"type":43,"tag":264,"props":1091,"children":1092},{"style":468},[1093],{"type":49,"value":927},{"type":43,"tag":264,"props":1095,"children":1096},{"style":548},[1097],{"type":49,"value":1098},"hover { background: ",{"type":43,"tag":264,"props":1100,"children":1101},{"style":1054},[1102],{"type":49,"value":1103},"var",{"type":43,"tag":264,"props":1105,"children":1106},{"style":468},[1107],{"type":49,"value":1062},{"type":43,"tag":264,"props":1109,"children":1110},{"style":548},[1111],{"type":49,"value":1112},"--color-primary-hover",{"type":43,"tag":264,"props":1114,"children":1115},{"style":468},[1116],{"type":49,"value":1117},");",{"type":43,"tag":264,"props":1119,"children":1120},{"style":468},[1121],{"type":49,"value":1122}," }\n",{"type":43,"tag":264,"props":1124,"children":1126},{"class":266,"line":1125},15,[1127,1131,1135,1140,1145,1150,1154,1159,1164,1168,1172,1177,1181],{"type":43,"tag":264,"props":1128,"children":1129},{"style":548},[1130],{"type":49,"value":1089},{"type":43,"tag":264,"props":1132,"children":1133},{"style":468},[1134],{"type":49,"value":927},{"type":43,"tag":264,"props":1136,"children":1137},{"style":480},[1138],{"type":49,"value":1139},"focus-visible",{"type":43,"tag":264,"props":1141,"children":1142},{"style":468},[1143],{"type":49,"value":1144}," {",{"type":43,"tag":264,"props":1146,"children":1147},{"style":919},[1148],{"type":49,"value":1149}," outline",{"type":43,"tag":264,"props":1151,"children":1152},{"style":468},[1153],{"type":49,"value":927},{"type":43,"tag":264,"props":1155,"children":1156},{"style":930},[1157],{"type":49,"value":1158}," 2px",{"type":43,"tag":264,"props":1160,"children":1161},{"style":548},[1162],{"type":49,"value":1163}," solid ",{"type":43,"tag":264,"props":1165,"children":1166},{"style":1054},[1167],{"type":49,"value":1103},{"type":43,"tag":264,"props":1169,"children":1170},{"style":468},[1171],{"type":49,"value":1062},{"type":43,"tag":264,"props":1173,"children":1174},{"style":548},[1175],{"type":49,"value":1176},"--color-focus",{"type":43,"tag":264,"props":1178,"children":1179},{"style":468},[1180],{"type":49,"value":1117},{"type":43,"tag":264,"props":1182,"children":1183},{"style":468},[1184],{"type":49,"value":1122},{"type":43,"tag":264,"props":1186,"children":1188},{"class":266,"line":1187},16,[1189,1193,1198,1203,1208,1212,1217,1221,1226,1231],{"type":43,"tag":264,"props":1190,"children":1191},{"style":548},[1192],{"type":49,"value":1089},{"type":43,"tag":264,"props":1194,"children":1195},{"style":468},[1196],{"type":49,"value":1197},"[",{"type":43,"tag":264,"props":1199,"children":1200},{"style":480},[1201],{"type":49,"value":1202},"disabled",{"type":43,"tag":264,"props":1204,"children":1205},{"style":468},[1206],{"type":49,"value":1207},"]",{"type":43,"tag":264,"props":1209,"children":1210},{"style":468},[1211],{"type":49,"value":1144},{"type":43,"tag":264,"props":1213,"children":1214},{"style":919},[1215],{"type":49,"value":1216}," opacity",{"type":43,"tag":264,"props":1218,"children":1219},{"style":468},[1220],{"type":49,"value":927},{"type":43,"tag":264,"props":1222,"children":1223},{"style":930},[1224],{"type":49,"value":1225}," 0.5",{"type":43,"tag":264,"props":1227,"children":1228},{"style":468},[1229],{"type":49,"value":1230},";",{"type":43,"tag":264,"props":1232,"children":1233},{"style":468},[1234],{"type":49,"value":1122},{"type":43,"tag":264,"props":1236,"children":1238},{"class":266,"line":1237},17,[1239],{"type":43,"tag":264,"props":1240,"children":1241},{"style":548},[1242],{"type":49,"value":1009},{"type":43,"tag":264,"props":1244,"children":1246},{"class":266,"line":1245},18,[1247],{"type":43,"tag":264,"props":1248,"children":1249},{"emptyLinePlaceholder":315},[1250],{"type":49,"value":318},{"type":43,"tag":264,"props":1252,"children":1254},{"class":266,"line":1253},19,[1255],{"type":43,"tag":264,"props":1256,"children":1257},{"style":459},[1258],{"type":49,"value":1259},"\u002F* Do: parent modifier affecting children (single level) *\u002F\n",{"type":43,"tag":264,"props":1261,"children":1263},{"class":266,"line":1262},20,[1264,1268,1273],{"type":43,"tag":264,"props":1265,"children":1266},{"style":468},[1267],{"type":49,"value":902},{"type":43,"tag":264,"props":1269,"children":1270},{"style":905},[1271],{"type":49,"value":1272},"card--featured",{"type":43,"tag":264,"props":1274,"children":1275},{"style":468},[1276],{"type":49,"value":913},{"type":43,"tag":264,"props":1278,"children":1279},{"class":266,"line":26},[1280,1285,1290,1294,1298,1302,1307,1311],{"type":43,"tag":264,"props":1281,"children":1282},{"style":548},[1283],{"type":49,"value":1284},"  .card__title { ",{"type":43,"tag":264,"props":1286,"children":1287},{"style":919},[1288],{"type":49,"value":1289},"font-size",{"type":43,"tag":264,"props":1291,"children":1292},{"style":468},[1293],{"type":49,"value":927},{"type":43,"tag":264,"props":1295,"children":1296},{"style":1054},[1297],{"type":49,"value":1057},{"type":43,"tag":264,"props":1299,"children":1300},{"style":468},[1301],{"type":49,"value":1062},{"type":43,"tag":264,"props":1303,"children":1304},{"style":548},[1305],{"type":49,"value":1306},"--font-size-xl",{"type":43,"tag":264,"props":1308,"children":1309},{"style":468},[1310],{"type":49,"value":1117},{"type":43,"tag":264,"props":1312,"children":1313},{"style":468},[1314],{"type":49,"value":1122},{"type":43,"tag":264,"props":1316,"children":1318},{"class":266,"line":1317},22,[1319],{"type":43,"tag":264,"props":1320,"children":1321},{"style":548},[1322],{"type":49,"value":1009},{"type":43,"tag":264,"props":1324,"children":1326},{"class":266,"line":1325},23,[1327],{"type":43,"tag":264,"props":1328,"children":1329},{"emptyLinePlaceholder":315},[1330],{"type":49,"value":318},{"type":43,"tag":264,"props":1332,"children":1334},{"class":266,"line":1333},24,[1335],{"type":43,"tag":264,"props":1336,"children":1337},{"style":459},[1338],{"type":49,"value":1339},"\u002F* Don't: nested beyond first level *\u002F\n",{"type":43,"tag":264,"props":1341,"children":1343},{"class":266,"line":1342},25,[1344,1348,1353],{"type":43,"tag":264,"props":1345,"children":1346},{"style":468},[1347],{"type":49,"value":902},{"type":43,"tag":264,"props":1349,"children":1350},{"style":905},[1351],{"type":49,"value":1352},"parent",{"type":43,"tag":264,"props":1354,"children":1355},{"style":468},[1356],{"type":49,"value":913},{"type":43,"tag":264,"props":1358,"children":1360},{"class":266,"line":1359},26,[1361],{"type":43,"tag":264,"props":1362,"children":1363},{"style":548},[1364],{"type":49,"value":1365},"  .child {\n",{"type":43,"tag":264,"props":1367,"children":1369},{"class":266,"line":1368},27,[1370,1375,1380],{"type":43,"tag":264,"props":1371,"children":1372},{"style":548},[1373],{"type":49,"value":1374},"    .grandchild { ",{"type":43,"tag":264,"props":1376,"children":1377},{"style":468},[1378],{"type":49,"value":1379},"}",{"type":43,"tag":264,"props":1381,"children":1382},{"style":459},[1383],{"type":49,"value":1384}," \u002F* Too deep *\u002F\n",{"type":43,"tag":264,"props":1386,"children":1388},{"class":266,"line":1387},28,[1389],{"type":43,"tag":264,"props":1390,"children":1391},{"style":548},[1392],{"type":49,"value":1001},{"type":43,"tag":264,"props":1394,"children":1396},{"class":266,"line":1395},29,[1397],{"type":43,"tag":264,"props":1398,"children":1399},{"style":548},[1400],{"type":49,"value":1009},{"type":43,"tag":121,"props":1402,"children":1404},{"id":1403},"design-tokens",[1405],{"type":49,"value":1406},"Design Tokens",{"type":43,"tag":227,"props":1408,"children":1409},{},[1410],{"type":49,"value":1411},"Use CSS custom properties for all values — never hardcode colors, spacing, or fonts. Define a consistent scale and reference it everywhere.",{"type":43,"tag":227,"props":1413,"children":1414},{},[1415,1420],{"type":43,"tag":67,"props":1416,"children":1417},{},[1418],{"type":49,"value":1419},"Example scale",{"type":49,"value":1421}," (adapt to your theme's needs):",{"type":43,"tag":253,"props":1423,"children":1425},{"className":881,"code":1424,"language":21,"meta":258,"style":258},":root {\n  \u002F* Spacing — use a consistent scale *\u002F\n  --space-2xs: 0.5rem;    --space-xs: 0.75rem;   --space-sm: 1rem;\n  --space-md: 1.5rem;     --space-lg: 2rem;       --space-xl: 3rem;\n\n  \u002F* Typography — relative units *\u002F\n  --font-size-sm: 0.875rem;  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;  --font-size-xl: 1.25rem;  --font-size-2xl: 1.5rem;\n}\n",[1426],{"type":43,"tag":167,"props":1427,"children":1428},{"__ignoreMap":258},[1429,1444,1452,1509,1566,1573,1581,1619,1675],{"type":43,"tag":264,"props":1430,"children":1431},{"class":266,"line":267},[1432,1436,1440],{"type":43,"tag":264,"props":1433,"children":1434},{"style":468},[1435],{"type":49,"value":927},{"type":43,"tag":264,"props":1437,"children":1438},{"style":480},[1439],{"type":49,"value":40},{"type":43,"tag":264,"props":1441,"children":1442},{"style":468},[1443],{"type":49,"value":913},{"type":43,"tag":264,"props":1445,"children":1446},{"class":266,"line":276},[1447],{"type":43,"tag":264,"props":1448,"children":1449},{"style":459},[1450],{"type":49,"value":1451},"  \u002F* Spacing — use a consistent scale *\u002F\n",{"type":43,"tag":264,"props":1453,"children":1454},{"class":266,"line":285},[1455,1460,1464,1469,1473,1478,1482,1487,1491,1496,1500,1505],{"type":43,"tag":264,"props":1456,"children":1457},{"style":548},[1458],{"type":49,"value":1459},"  --space-2xs",{"type":43,"tag":264,"props":1461,"children":1462},{"style":468},[1463],{"type":49,"value":927},{"type":43,"tag":264,"props":1465,"children":1466},{"style":930},[1467],{"type":49,"value":1468}," 0.5rem",{"type":43,"tag":264,"props":1470,"children":1471},{"style":468},[1472],{"type":49,"value":1230},{"type":43,"tag":264,"props":1474,"children":1475},{"style":548},[1476],{"type":49,"value":1477},"    --space-xs",{"type":43,"tag":264,"props":1479,"children":1480},{"style":468},[1481],{"type":49,"value":927},{"type":43,"tag":264,"props":1483,"children":1484},{"style":930},[1485],{"type":49,"value":1486}," 0.75rem",{"type":43,"tag":264,"props":1488,"children":1489},{"style":468},[1490],{"type":49,"value":1230},{"type":43,"tag":264,"props":1492,"children":1493},{"style":548},[1494],{"type":49,"value":1495},"   --space-sm",{"type":43,"tag":264,"props":1497,"children":1498},{"style":468},[1499],{"type":49,"value":927},{"type":43,"tag":264,"props":1501,"children":1502},{"style":930},[1503],{"type":49,"value":1504}," 1rem",{"type":43,"tag":264,"props":1506,"children":1507},{"style":468},[1508],{"type":49,"value":938},{"type":43,"tag":264,"props":1510,"children":1511},{"class":266,"line":30},[1512,1517,1521,1526,1530,1535,1539,1544,1548,1553,1557,1562],{"type":43,"tag":264,"props":1513,"children":1514},{"style":548},[1515],{"type":49,"value":1516},"  --space-md",{"type":43,"tag":264,"props":1518,"children":1519},{"style":468},[1520],{"type":49,"value":927},{"type":43,"tag":264,"props":1522,"children":1523},{"style":930},[1524],{"type":49,"value":1525}," 1.5rem",{"type":43,"tag":264,"props":1527,"children":1528},{"style":468},[1529],{"type":49,"value":1230},{"type":43,"tag":264,"props":1531,"children":1532},{"style":548},[1533],{"type":49,"value":1534},"     --space-lg",{"type":43,"tag":264,"props":1536,"children":1537},{"style":468},[1538],{"type":49,"value":927},{"type":43,"tag":264,"props":1540,"children":1541},{"style":930},[1542],{"type":49,"value":1543}," 2rem",{"type":43,"tag":264,"props":1545,"children":1546},{"style":468},[1547],{"type":49,"value":1230},{"type":43,"tag":264,"props":1549,"children":1550},{"style":548},[1551],{"type":49,"value":1552},"       --space-xl",{"type":43,"tag":264,"props":1554,"children":1555},{"style":468},[1556],{"type":49,"value":927},{"type":43,"tag":264,"props":1558,"children":1559},{"style":930},[1560],{"type":49,"value":1561}," 3rem",{"type":43,"tag":264,"props":1563,"children":1564},{"style":468},[1565],{"type":49,"value":938},{"type":43,"tag":264,"props":1567,"children":1568},{"class":266,"line":302},[1569],{"type":43,"tag":264,"props":1570,"children":1571},{"emptyLinePlaceholder":315},[1572],{"type":49,"value":318},{"type":43,"tag":264,"props":1574,"children":1575},{"class":266,"line":311},[1576],{"type":43,"tag":264,"props":1577,"children":1578},{"style":459},[1579],{"type":49,"value":1580},"  \u002F* Typography — relative units *\u002F\n",{"type":43,"tag":264,"props":1582,"children":1583},{"class":266,"line":321},[1584,1589,1593,1598,1602,1607,1611,1615],{"type":43,"tag":264,"props":1585,"children":1586},{"style":548},[1587],{"type":49,"value":1588},"  --font-size-sm",{"type":43,"tag":264,"props":1590,"children":1591},{"style":468},[1592],{"type":49,"value":927},{"type":43,"tag":264,"props":1594,"children":1595},{"style":930},[1596],{"type":49,"value":1597}," 0.875rem",{"type":43,"tag":264,"props":1599,"children":1600},{"style":468},[1601],{"type":49,"value":1230},{"type":43,"tag":264,"props":1603,"children":1604},{"style":548},[1605],{"type":49,"value":1606},"  --font-size-base",{"type":43,"tag":264,"props":1608,"children":1609},{"style":468},[1610],{"type":49,"value":927},{"type":43,"tag":264,"props":1612,"children":1613},{"style":930},[1614],{"type":49,"value":1504},{"type":43,"tag":264,"props":1616,"children":1617},{"style":468},[1618],{"type":49,"value":938},{"type":43,"tag":264,"props":1620,"children":1621},{"class":266,"line":330},[1622,1627,1631,1636,1640,1645,1649,1654,1658,1663,1667,1671],{"type":43,"tag":264,"props":1623,"children":1624},{"style":548},[1625],{"type":49,"value":1626},"  --font-size-lg",{"type":43,"tag":264,"props":1628,"children":1629},{"style":468},[1630],{"type":49,"value":927},{"type":43,"tag":264,"props":1632,"children":1633},{"style":930},[1634],{"type":49,"value":1635}," 1.125rem",{"type":43,"tag":264,"props":1637,"children":1638},{"style":468},[1639],{"type":49,"value":1230},{"type":43,"tag":264,"props":1641,"children":1642},{"style":548},[1643],{"type":49,"value":1644},"  --font-size-xl",{"type":43,"tag":264,"props":1646,"children":1647},{"style":468},[1648],{"type":49,"value":927},{"type":43,"tag":264,"props":1650,"children":1651},{"style":930},[1652],{"type":49,"value":1653}," 1.25rem",{"type":43,"tag":264,"props":1655,"children":1656},{"style":468},[1657],{"type":49,"value":1230},{"type":43,"tag":264,"props":1659,"children":1660},{"style":548},[1661],{"type":49,"value":1662},"  --font-size-2xl",{"type":43,"tag":264,"props":1664,"children":1665},{"style":468},[1666],{"type":49,"value":927},{"type":43,"tag":264,"props":1668,"children":1669},{"style":930},[1670],{"type":49,"value":1525},{"type":43,"tag":264,"props":1672,"children":1673},{"style":468},[1674],{"type":49,"value":938},{"type":43,"tag":264,"props":1676,"children":1677},{"class":266,"line":339},[1678],{"type":43,"tag":264,"props":1679,"children":1680},{"style":468},[1681],{"type":49,"value":1009},{"type":43,"tag":227,"props":1683,"children":1684},{},[1685],{"type":43,"tag":67,"props":1686,"children":1687},{},[1688],{"type":49,"value":1689},"Key principles:",{"type":43,"tag":380,"props":1691,"children":1692},{},[1693,1706,1725],{"type":43,"tag":63,"props":1694,"children":1695},{},[1696,1698,1704],{"type":49,"value":1697},"Use ",{"type":43,"tag":167,"props":1699,"children":1701},{"className":1700},[],[1702],{"type":49,"value":1703},"rem",{"type":49,"value":1705}," for spacing and typography (respects user font size preferences)",{"type":43,"tag":63,"props":1707,"children":1708},{},[1709,1711,1717,1719],{"type":49,"value":1710},"Name tokens semantically: ",{"type":43,"tag":167,"props":1712,"children":1714},{"className":1713},[],[1715],{"type":49,"value":1716},"--space-sm",{"type":49,"value":1718}," not ",{"type":43,"tag":167,"props":1720,"children":1722},{"className":1721},[],[1723],{"type":49,"value":1724},"--space-16",{"type":43,"tag":63,"props":1726,"children":1727},{},[1728,1730,1736],{"type":49,"value":1729},"Define in ",{"type":43,"tag":167,"props":1731,"children":1733},{"className":1732},[],[1734],{"type":49,"value":1735},":root",{"type":49,"value":1737}," for global tokens, on component root for scoped tokens",{"type":43,"tag":121,"props":1739,"children":1741},{"id":1740},"css-variable-scoping",[1742],{"type":49,"value":1743},"CSS Variable Scoping",{"type":43,"tag":227,"props":1745,"children":1746},{},[1747,1752,1754,1759,1761,1766],{"type":43,"tag":67,"props":1748,"children":1749},{},[1750],{"type":49,"value":1751},"Global",{"type":49,"value":1753}," — in ",{"type":43,"tag":167,"props":1755,"children":1757},{"className":1756},[],[1758],{"type":49,"value":1735},{"type":49,"value":1760}," for theme-wide values\n",{"type":43,"tag":67,"props":1762,"children":1763},{},[1764],{"type":49,"value":1765},"Component-scoped",{"type":49,"value":1767}," — on component root, namespaced:",{"type":43,"tag":253,"props":1769,"children":1771},{"className":881,"code":1770,"language":21,"meta":258,"style":258},"\u002F* Do: namespaced *\u002F\n.facets {\n  --facets-padding: var(--space-md);\n  --facets-z-index: 3;\n}\n\n\u002F* Don't: generic names that collide *\u002F\n.facets {\n  --padding: var(--space-md);\n  --z-index: 3;\n}\n",[1772],{"type":43,"tag":167,"props":1773,"children":1774},{"__ignoreMap":258},[1775,1783,1799,1828,1849,1856,1863,1871,1886,1914,1934],{"type":43,"tag":264,"props":1776,"children":1777},{"class":266,"line":267},[1778],{"type":43,"tag":264,"props":1779,"children":1780},{"style":459},[1781],{"type":49,"value":1782},"\u002F* Do: namespaced *\u002F\n",{"type":43,"tag":264,"props":1784,"children":1785},{"class":266,"line":276},[1786,1790,1795],{"type":43,"tag":264,"props":1787,"children":1788},{"style":468},[1789],{"type":49,"value":902},{"type":43,"tag":264,"props":1791,"children":1792},{"style":905},[1793],{"type":49,"value":1794},"facets",{"type":43,"tag":264,"props":1796,"children":1797},{"style":468},[1798],{"type":49,"value":913},{"type":43,"tag":264,"props":1800,"children":1801},{"class":266,"line":285},[1802,1807,1811,1815,1819,1824],{"type":43,"tag":264,"props":1803,"children":1804},{"style":548},[1805],{"type":49,"value":1806},"  --facets-padding",{"type":43,"tag":264,"props":1808,"children":1809},{"style":468},[1810],{"type":49,"value":927},{"type":43,"tag":264,"props":1812,"children":1813},{"style":1054},[1814],{"type":49,"value":1057},{"type":43,"tag":264,"props":1816,"children":1817},{"style":468},[1818],{"type":49,"value":1062},{"type":43,"tag":264,"props":1820,"children":1821},{"style":548},[1822],{"type":49,"value":1823},"--space-md",{"type":43,"tag":264,"props":1825,"children":1826},{"style":468},[1827],{"type":49,"value":1072},{"type":43,"tag":264,"props":1829,"children":1830},{"class":266,"line":30},[1831,1836,1840,1845],{"type":43,"tag":264,"props":1832,"children":1833},{"style":548},[1834],{"type":49,"value":1835},"  --facets-z-index",{"type":43,"tag":264,"props":1837,"children":1838},{"style":468},[1839],{"type":49,"value":927},{"type":43,"tag":264,"props":1841,"children":1842},{"style":930},[1843],{"type":49,"value":1844}," 3",{"type":43,"tag":264,"props":1846,"children":1847},{"style":468},[1848],{"type":49,"value":938},{"type":43,"tag":264,"props":1850,"children":1851},{"class":266,"line":302},[1852],{"type":43,"tag":264,"props":1853,"children":1854},{"style":468},[1855],{"type":49,"value":1009},{"type":43,"tag":264,"props":1857,"children":1858},{"class":266,"line":311},[1859],{"type":43,"tag":264,"props":1860,"children":1861},{"emptyLinePlaceholder":315},[1862],{"type":49,"value":318},{"type":43,"tag":264,"props":1864,"children":1865},{"class":266,"line":321},[1866],{"type":43,"tag":264,"props":1867,"children":1868},{"style":459},[1869],{"type":49,"value":1870},"\u002F* Don't: generic names that collide *\u002F\n",{"type":43,"tag":264,"props":1872,"children":1873},{"class":266,"line":330},[1874,1878,1882],{"type":43,"tag":264,"props":1875,"children":1876},{"style":468},[1877],{"type":49,"value":902},{"type":43,"tag":264,"props":1879,"children":1880},{"style":905},[1881],{"type":49,"value":1794},{"type":43,"tag":264,"props":1883,"children":1884},{"style":468},[1885],{"type":49,"value":913},{"type":43,"tag":264,"props":1887,"children":1888},{"class":266,"line":339},[1889,1894,1898,1902,1906,1910],{"type":43,"tag":264,"props":1890,"children":1891},{"style":548},[1892],{"type":49,"value":1893},"  --padding",{"type":43,"tag":264,"props":1895,"children":1896},{"style":468},[1897],{"type":49,"value":927},{"type":43,"tag":264,"props":1899,"children":1900},{"style":1054},[1901],{"type":49,"value":1057},{"type":43,"tag":264,"props":1903,"children":1904},{"style":468},[1905],{"type":49,"value":1062},{"type":43,"tag":264,"props":1907,"children":1908},{"style":548},[1909],{"type":49,"value":1823},{"type":43,"tag":264,"props":1911,"children":1912},{"style":468},[1913],{"type":49,"value":1072},{"type":43,"tag":264,"props":1915,"children":1916},{"class":266,"line":348},[1917,1922,1926,1930],{"type":43,"tag":264,"props":1918,"children":1919},{"style":548},[1920],{"type":49,"value":1921},"  --z-index",{"type":43,"tag":264,"props":1923,"children":1924},{"style":468},[1925],{"type":49,"value":927},{"type":43,"tag":264,"props":1927,"children":1928},{"style":930},[1929],{"type":49,"value":1844},{"type":43,"tag":264,"props":1931,"children":1932},{"style":468},[1933],{"type":49,"value":938},{"type":43,"tag":264,"props":1935,"children":1936},{"class":266,"line":775},[1937],{"type":43,"tag":264,"props":1938,"children":1939},{"style":468},[1940],{"type":49,"value":1009},{"type":43,"tag":227,"props":1942,"children":1943},{},[1944,1949],{"type":43,"tag":67,"props":1945,"children":1946},{},[1947],{"type":49,"value":1948},"Override via inline style",{"type":49,"value":1950}," for section\u002Fblock settings:",{"type":43,"tag":253,"props":1952,"children":1954},{"className":255,"code":1953,"language":257,"meta":258,"style":258},"\u003Csection\n  class=\"hero\"\n  style=\"\n    --hero-bg: {{ section.settings.bg_color }};\n    --hero-padding: {{ section.settings.padding }}px;\n  \"\n>\n",[1955],{"type":43,"tag":167,"props":1956,"children":1957},{"__ignoreMap":258},[1958,1966,1973,1981,1989,1997,2005],{"type":43,"tag":264,"props":1959,"children":1960},{"class":266,"line":267},[1961],{"type":43,"tag":264,"props":1962,"children":1963},{},[1964],{"type":49,"value":1965},"\u003Csection\n",{"type":43,"tag":264,"props":1967,"children":1968},{"class":266,"line":276},[1969],{"type":43,"tag":264,"props":1970,"children":1971},{},[1972],{"type":49,"value":291},{"type":43,"tag":264,"props":1974,"children":1975},{"class":266,"line":285},[1976],{"type":43,"tag":264,"props":1977,"children":1978},{},[1979],{"type":49,"value":1980},"  style=\"\n",{"type":43,"tag":264,"props":1982,"children":1983},{"class":266,"line":30},[1984],{"type":43,"tag":264,"props":1985,"children":1986},{},[1987],{"type":49,"value":1988},"    --hero-bg: {{ section.settings.bg_color }};\n",{"type":43,"tag":264,"props":1990,"children":1991},{"class":266,"line":302},[1992],{"type":43,"tag":264,"props":1993,"children":1994},{},[1995],{"type":49,"value":1996},"    --hero-padding: {{ section.settings.padding }}px;\n",{"type":43,"tag":264,"props":1998,"children":1999},{"class":266,"line":311},[2000],{"type":43,"tag":264,"props":2001,"children":2002},{},[2003],{"type":49,"value":2004},"  \"\n",{"type":43,"tag":264,"props":2006,"children":2007},{"class":266,"line":321},[2008],{"type":43,"tag":264,"props":2009,"children":2010},{},[2011],{"type":49,"value":308},{"type":43,"tag":121,"props":2013,"children":2015},{"id":2014},"css-property-order",[2016],{"type":49,"value":2017},"CSS Property Order",{"type":43,"tag":59,"props":2019,"children":2020},{},[2021,2059,2095,2130,2159],{"type":43,"tag":63,"props":2022,"children":2023},{},[2024,2029,2031,2037,2039,2045,2046,2052,2053],{"type":43,"tag":67,"props":2025,"children":2026},{},[2027],{"type":49,"value":2028},"Layout",{"type":49,"value":2030}," — ",{"type":43,"tag":167,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":49,"value":2036},"position",{"type":49,"value":2038},", ",{"type":43,"tag":167,"props":2040,"children":2042},{"className":2041},[],[2043],{"type":49,"value":2044},"display",{"type":49,"value":2038},{"type":43,"tag":167,"props":2047,"children":2049},{"className":2048},[],[2050],{"type":49,"value":2051},"flex-direction",{"type":49,"value":2038},{"type":43,"tag":167,"props":2054,"children":2056},{"className":2055},[],[2057],{"type":49,"value":2058},"grid-template-columns",{"type":43,"tag":63,"props":2060,"children":2061},{},[2062,2067,2068,2074,2075,2081,2082,2088,2089],{"type":43,"tag":67,"props":2063,"children":2064},{},[2065],{"type":49,"value":2066},"Box model",{"type":49,"value":2030},{"type":43,"tag":167,"props":2069,"children":2071},{"className":2070},[],[2072],{"type":49,"value":2073},"width",{"type":49,"value":2038},{"type":43,"tag":167,"props":2076,"children":2078},{"className":2077},[],[2079],{"type":49,"value":2080},"margin",{"type":49,"value":2038},{"type":43,"tag":167,"props":2083,"children":2085},{"className":2084},[],[2086],{"type":49,"value":2087},"padding",{"type":49,"value":2038},{"type":43,"tag":167,"props":2090,"children":2092},{"className":2091},[],[2093],{"type":49,"value":2094},"border",{"type":43,"tag":63,"props":2096,"children":2097},{},[2098,2103,2104,2110,2111,2116,2117,2123,2124],{"type":43,"tag":67,"props":2099,"children":2100},{},[2101],{"type":49,"value":2102},"Typography",{"type":49,"value":2030},{"type":43,"tag":167,"props":2105,"children":2107},{"className":2106},[],[2108],{"type":49,"value":2109},"font-family",{"type":49,"value":2038},{"type":43,"tag":167,"props":2112,"children":2114},{"className":2113},[],[2115],{"type":49,"value":1289},{"type":49,"value":2038},{"type":43,"tag":167,"props":2118,"children":2120},{"className":2119},[],[2121],{"type":49,"value":2122},"line-height",{"type":49,"value":2038},{"type":43,"tag":167,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":49,"value":2129},"color",{"type":43,"tag":63,"props":2131,"children":2132},{},[2133,2138,2139,2145,2146,2152,2153],{"type":43,"tag":67,"props":2134,"children":2135},{},[2136],{"type":49,"value":2137},"Visual",{"type":49,"value":2030},{"type":43,"tag":167,"props":2140,"children":2142},{"className":2141},[],[2143],{"type":49,"value":2144},"background",{"type":49,"value":2038},{"type":43,"tag":167,"props":2147,"children":2149},{"className":2148},[],[2150],{"type":49,"value":2151},"opacity",{"type":49,"value":2038},{"type":43,"tag":167,"props":2154,"children":2156},{"className":2155},[],[2157],{"type":49,"value":2158},"border-radius",{"type":43,"tag":63,"props":2160,"children":2161},{},[2162,2167,2168,2174,2175],{"type":43,"tag":67,"props":2163,"children":2164},{},[2165],{"type":49,"value":2166},"Animation",{"type":49,"value":2030},{"type":43,"tag":167,"props":2169,"children":2171},{"className":2170},[],[2172],{"type":49,"value":2173},"transition",{"type":49,"value":2038},{"type":43,"tag":167,"props":2176,"children":2178},{"className":2177},[],[2179],{"type":49,"value":2180},"animation",{"type":43,"tag":121,"props":2182,"children":2184},{"id":2183},"logical-properties-rtl-support",[2185],{"type":49,"value":2186},"Logical Properties (RTL Support)",{"type":43,"tag":253,"props":2188,"children":2190},{"className":881,"code":2189,"language":21,"meta":258,"style":258},"\u002F* Do: logical properties *\u002F\npadding-inline: 2rem;\npadding-block: 1rem;\nmargin-inline: auto;\nborder-inline-end: 1px solid var(--color-border);\ntext-align: start;\ninset: 0;\n\n\u002F* Don't: physical properties *\u002F\npadding-left: 2rem;\ntext-align: left;\ntop: 0; right: 0; bottom: 0; left: 0;\n",[2191],{"type":43,"tag":167,"props":2192,"children":2193},{"__ignoreMap":258},[2194,2202,2215,2228,2241,2254,2267,2275,2282,2290,2302,2314],{"type":43,"tag":264,"props":2195,"children":2196},{"class":266,"line":267},[2197],{"type":43,"tag":264,"props":2198,"children":2199},{"style":459},[2200],{"type":49,"value":2201},"\u002F* Do: logical properties *\u002F\n",{"type":43,"tag":264,"props":2203,"children":2204},{"class":266,"line":276},[2205,2210],{"type":43,"tag":264,"props":2206,"children":2207},{"style":905},[2208],{"type":49,"value":2209},"padding-inline",{"type":43,"tag":264,"props":2211,"children":2212},{"style":548},[2213],{"type":49,"value":2214},": 2rem;\n",{"type":43,"tag":264,"props":2216,"children":2217},{"class":266,"line":285},[2218,2223],{"type":43,"tag":264,"props":2219,"children":2220},{"style":905},[2221],{"type":49,"value":2222},"padding-block",{"type":43,"tag":264,"props":2224,"children":2225},{"style":548},[2226],{"type":49,"value":2227},": 1rem;\n",{"type":43,"tag":264,"props":2229,"children":2230},{"class":266,"line":30},[2231,2236],{"type":43,"tag":264,"props":2232,"children":2233},{"style":905},[2234],{"type":49,"value":2235},"margin-inline",{"type":43,"tag":264,"props":2237,"children":2238},{"style":548},[2239],{"type":49,"value":2240},": auto;\n",{"type":43,"tag":264,"props":2242,"children":2243},{"class":266,"line":302},[2244,2249],{"type":43,"tag":264,"props":2245,"children":2246},{"style":905},[2247],{"type":49,"value":2248},"border-inline-end",{"type":43,"tag":264,"props":2250,"children":2251},{"style":548},[2252],{"type":49,"value":2253},": 1px solid var(--color-border);\n",{"type":43,"tag":264,"props":2255,"children":2256},{"class":266,"line":311},[2257,2262],{"type":43,"tag":264,"props":2258,"children":2259},{"style":905},[2260],{"type":49,"value":2261},"text-align",{"type":43,"tag":264,"props":2263,"children":2264},{"style":548},[2265],{"type":49,"value":2266},": start;\n",{"type":43,"tag":264,"props":2268,"children":2269},{"class":266,"line":321},[2270],{"type":43,"tag":264,"props":2271,"children":2272},{"style":548},[2273],{"type":49,"value":2274},"inset: 0;\n",{"type":43,"tag":264,"props":2276,"children":2277},{"class":266,"line":330},[2278],{"type":43,"tag":264,"props":2279,"children":2280},{"emptyLinePlaceholder":315},[2281],{"type":49,"value":318},{"type":43,"tag":264,"props":2283,"children":2284},{"class":266,"line":339},[2285],{"type":43,"tag":264,"props":2286,"children":2287},{"style":459},[2288],{"type":49,"value":2289},"\u002F* Don't: physical properties *\u002F\n",{"type":43,"tag":264,"props":2291,"children":2292},{"class":266,"line":348},[2293,2298],{"type":43,"tag":264,"props":2294,"children":2295},{"style":905},[2296],{"type":49,"value":2297},"padding-left",{"type":43,"tag":264,"props":2299,"children":2300},{"style":548},[2301],{"type":49,"value":2214},{"type":43,"tag":264,"props":2303,"children":2304},{"class":266,"line":775},[2305,2309],{"type":43,"tag":264,"props":2306,"children":2307},{"style":905},[2308],{"type":49,"value":2261},{"type":43,"tag":264,"props":2310,"children":2311},{"style":548},[2312],{"type":49,"value":2313},": left;\n",{"type":43,"tag":264,"props":2315,"children":2316},{"class":266,"line":792},[2317],{"type":43,"tag":264,"props":2318,"children":2319},{"style":548},[2320],{"type":49,"value":2321},"top: 0; right: 0; bottom: 0; left: 0;\n",{"type":43,"tag":121,"props":2323,"children":2325},{"id":2324},"defensive-css",[2326],{"type":49,"value":111},{"type":43,"tag":253,"props":2328,"children":2330},{"className":881,"code":2329,"language":21,"meta":258,"style":258},".component {\n  overflow-wrap: break-word;        \u002F* Prevent text overflow *\u002F\n  min-width: 0;                     \u002F* Allow flex items to shrink *\u002F\n  max-width: 100%;                  \u002F* Constrain images\u002Fmedia *\u002F\n  isolation: isolate;               \u002F* Create stacking context *\u002F\n}\n\n.image-container {\n  aspect-ratio: 4 \u002F 3;             \u002F* Prevent layout shift *\u002F\n  background: var(--color-surface); \u002F* Fallback for missing images *\u002F\n}\n",[2331],{"type":43,"tag":167,"props":2332,"children":2333},{"__ignoreMap":258},[2334,2350,2376,2402,2427,2453,2460,2467,2483,2519,2552],{"type":43,"tag":264,"props":2335,"children":2336},{"class":266,"line":267},[2337,2341,2346],{"type":43,"tag":264,"props":2338,"children":2339},{"style":468},[2340],{"type":49,"value":902},{"type":43,"tag":264,"props":2342,"children":2343},{"style":905},[2344],{"type":49,"value":2345},"component",{"type":43,"tag":264,"props":2347,"children":2348},{"style":468},[2349],{"type":49,"value":913},{"type":43,"tag":264,"props":2351,"children":2352},{"class":266,"line":276},[2353,2358,2362,2367,2371],{"type":43,"tag":264,"props":2354,"children":2355},{"style":919},[2356],{"type":49,"value":2357},"  overflow-wrap",{"type":43,"tag":264,"props":2359,"children":2360},{"style":468},[2361],{"type":49,"value":927},{"type":43,"tag":264,"props":2363,"children":2364},{"style":548},[2365],{"type":49,"value":2366}," break-word",{"type":43,"tag":264,"props":2368,"children":2369},{"style":468},[2370],{"type":49,"value":1230},{"type":43,"tag":264,"props":2372,"children":2373},{"style":459},[2374],{"type":49,"value":2375},"        \u002F* Prevent text overflow *\u002F\n",{"type":43,"tag":264,"props":2377,"children":2378},{"class":266,"line":285},[2379,2384,2388,2393,2397],{"type":43,"tag":264,"props":2380,"children":2381},{"style":919},[2382],{"type":49,"value":2383},"  min-width",{"type":43,"tag":264,"props":2385,"children":2386},{"style":468},[2387],{"type":49,"value":927},{"type":43,"tag":264,"props":2389,"children":2390},{"style":930},[2391],{"type":49,"value":2392}," 0",{"type":43,"tag":264,"props":2394,"children":2395},{"style":468},[2396],{"type":49,"value":1230},{"type":43,"tag":264,"props":2398,"children":2399},{"style":459},[2400],{"type":49,"value":2401},"                     \u002F* Allow flex items to shrink *\u002F\n",{"type":43,"tag":264,"props":2403,"children":2404},{"class":266,"line":30},[2405,2410,2414,2418,2422],{"type":43,"tag":264,"props":2406,"children":2407},{"style":919},[2408],{"type":49,"value":2409},"  max-width",{"type":43,"tag":264,"props":2411,"children":2412},{"style":468},[2413],{"type":49,"value":927},{"type":43,"tag":264,"props":2415,"children":2416},{"style":930},[2417],{"type":49,"value":933},{"type":43,"tag":264,"props":2419,"children":2420},{"style":468},[2421],{"type":49,"value":1230},{"type":43,"tag":264,"props":2423,"children":2424},{"style":459},[2425],{"type":49,"value":2426},"                  \u002F* Constrain images\u002Fmedia *\u002F\n",{"type":43,"tag":264,"props":2428,"children":2429},{"class":266,"line":302},[2430,2435,2439,2444,2448],{"type":43,"tag":264,"props":2431,"children":2432},{"style":919},[2433],{"type":49,"value":2434},"  isolation",{"type":43,"tag":264,"props":2436,"children":2437},{"style":468},[2438],{"type":49,"value":927},{"type":43,"tag":264,"props":2440,"children":2441},{"style":548},[2442],{"type":49,"value":2443}," isolate",{"type":43,"tag":264,"props":2445,"children":2446},{"style":468},[2447],{"type":49,"value":1230},{"type":43,"tag":264,"props":2449,"children":2450},{"style":459},[2451],{"type":49,"value":2452},"               \u002F* Create stacking context *\u002F\n",{"type":43,"tag":264,"props":2454,"children":2455},{"class":266,"line":311},[2456],{"type":43,"tag":264,"props":2457,"children":2458},{"style":468},[2459],{"type":49,"value":1009},{"type":43,"tag":264,"props":2461,"children":2462},{"class":266,"line":321},[2463],{"type":43,"tag":264,"props":2464,"children":2465},{"emptyLinePlaceholder":315},[2466],{"type":49,"value":318},{"type":43,"tag":264,"props":2468,"children":2469},{"class":266,"line":330},[2470,2474,2479],{"type":43,"tag":264,"props":2471,"children":2472},{"style":468},[2473],{"type":49,"value":902},{"type":43,"tag":264,"props":2475,"children":2476},{"style":905},[2477],{"type":49,"value":2478},"image-container",{"type":43,"tag":264,"props":2480,"children":2481},{"style":468},[2482],{"type":49,"value":913},{"type":43,"tag":264,"props":2484,"children":2485},{"class":266,"line":339},[2486,2491,2495,2500,2505,2510,2514],{"type":43,"tag":264,"props":2487,"children":2488},{"style":919},[2489],{"type":49,"value":2490},"  aspect-ratio",{"type":43,"tag":264,"props":2492,"children":2493},{"style":468},[2494],{"type":49,"value":927},{"type":43,"tag":264,"props":2496,"children":2497},{"style":930},[2498],{"type":49,"value":2499}," 4",{"type":43,"tag":264,"props":2501,"children":2502},{"style":548},[2503],{"type":49,"value":2504}," \u002F ",{"type":43,"tag":264,"props":2506,"children":2507},{"style":930},[2508],{"type":49,"value":2509},"3",{"type":43,"tag":264,"props":2511,"children":2512},{"style":468},[2513],{"type":49,"value":1230},{"type":43,"tag":264,"props":2515,"children":2516},{"style":459},[2517],{"type":49,"value":2518},"             \u002F* Prevent layout shift *\u002F\n",{"type":43,"tag":264,"props":2520,"children":2521},{"class":266,"line":348},[2522,2526,2530,2534,2538,2543,2547],{"type":43,"tag":264,"props":2523,"children":2524},{"style":919},[2525],{"type":49,"value":1047},{"type":43,"tag":264,"props":2527,"children":2528},{"style":468},[2529],{"type":49,"value":927},{"type":43,"tag":264,"props":2531,"children":2532},{"style":1054},[2533],{"type":49,"value":1057},{"type":43,"tag":264,"props":2535,"children":2536},{"style":468},[2537],{"type":49,"value":1062},{"type":43,"tag":264,"props":2539,"children":2540},{"style":548},[2541],{"type":49,"value":2542},"--color-surface",{"type":43,"tag":264,"props":2544,"children":2545},{"style":468},[2546],{"type":49,"value":1117},{"type":43,"tag":264,"props":2548,"children":2549},{"style":459},[2550],{"type":49,"value":2551}," \u002F* Fallback for missing images *\u002F\n",{"type":43,"tag":264,"props":2553,"children":2554},{"class":266,"line":775},[2555],{"type":43,"tag":264,"props":2556,"children":2557},{"style":468},[2558],{"type":49,"value":1009},{"type":43,"tag":121,"props":2560,"children":2562},{"id":2561},"modern-css-features",[2563],{"type":49,"value":2564},"Modern CSS Features",{"type":43,"tag":253,"props":2566,"children":2568},{"className":881,"code":2567,"language":21,"meta":258,"style":258},"\u002F* Container queries for responsive components *\u002F\n.product-grid { container-type: inline-size; }\n@container (min-width: 400px) {\n  .product-card { grid-template-columns: 1fr 1fr; }\n}\n\n\u002F* Fluid spacing *\u002F\n.section { padding: clamp(1rem, 4vw, 3rem); }\n\n\u002F* Intrinsic sizing *\u002F\n.content { width: min(100%, 800px); }\n",[2569],{"type":43,"tag":167,"props":2570,"children":2571},{"__ignoreMap":258},[2572,2580,2618,2637,2679,2686,2693,2701,2766,2773,2781],{"type":43,"tag":264,"props":2573,"children":2574},{"class":266,"line":267},[2575],{"type":43,"tag":264,"props":2576,"children":2577},{"style":459},[2578],{"type":49,"value":2579},"\u002F* Container queries for responsive components *\u002F\n",{"type":43,"tag":264,"props":2581,"children":2582},{"class":266,"line":276},[2583,2587,2592,2596,2601,2605,2610,2614],{"type":43,"tag":264,"props":2584,"children":2585},{"style":468},[2586],{"type":49,"value":902},{"type":43,"tag":264,"props":2588,"children":2589},{"style":905},[2590],{"type":49,"value":2591},"product-grid",{"type":43,"tag":264,"props":2593,"children":2594},{"style":468},[2595],{"type":49,"value":1144},{"type":43,"tag":264,"props":2597,"children":2598},{"style":919},[2599],{"type":49,"value":2600}," container-type",{"type":43,"tag":264,"props":2602,"children":2603},{"style":468},[2604],{"type":49,"value":927},{"type":43,"tag":264,"props":2606,"children":2607},{"style":548},[2608],{"type":49,"value":2609}," inline-size",{"type":43,"tag":264,"props":2611,"children":2612},{"style":468},[2613],{"type":49,"value":1230},{"type":43,"tag":264,"props":2615,"children":2616},{"style":468},[2617],{"type":49,"value":1122},{"type":43,"tag":264,"props":2619,"children":2620},{"class":266,"line":285},[2621,2627,2632],{"type":43,"tag":264,"props":2622,"children":2624},{"style":2623},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[2625],{"type":49,"value":2626},"@container",{"type":43,"tag":264,"props":2628,"children":2629},{"style":548},[2630],{"type":49,"value":2631}," (min-width: 400px) ",{"type":43,"tag":264,"props":2633,"children":2634},{"style":468},[2635],{"type":49,"value":2636},"{\n",{"type":43,"tag":264,"props":2638,"children":2639},{"class":266,"line":30},[2640,2645,2649,2653,2658,2662,2667,2671,2675],{"type":43,"tag":264,"props":2641,"children":2642},{"style":468},[2643],{"type":49,"value":2644},"  .",{"type":43,"tag":264,"props":2646,"children":2647},{"style":905},[2648],{"type":49,"value":499},{"type":43,"tag":264,"props":2650,"children":2651},{"style":468},[2652],{"type":49,"value":1144},{"type":43,"tag":264,"props":2654,"children":2655},{"style":919},[2656],{"type":49,"value":2657}," grid-template-columns",{"type":43,"tag":264,"props":2659,"children":2660},{"style":468},[2661],{"type":49,"value":927},{"type":43,"tag":264,"props":2663,"children":2664},{"style":930},[2665],{"type":49,"value":2666}," 1fr",{"type":43,"tag":264,"props":2668,"children":2669},{"style":930},[2670],{"type":49,"value":2666},{"type":43,"tag":264,"props":2672,"children":2673},{"style":468},[2674],{"type":49,"value":1230},{"type":43,"tag":264,"props":2676,"children":2677},{"style":468},[2678],{"type":49,"value":1122},{"type":43,"tag":264,"props":2680,"children":2681},{"class":266,"line":302},[2682],{"type":43,"tag":264,"props":2683,"children":2684},{"style":468},[2685],{"type":49,"value":1009},{"type":43,"tag":264,"props":2687,"children":2688},{"class":266,"line":311},[2689],{"type":43,"tag":264,"props":2690,"children":2691},{"emptyLinePlaceholder":315},[2692],{"type":49,"value":318},{"type":43,"tag":264,"props":2694,"children":2695},{"class":266,"line":321},[2696],{"type":43,"tag":264,"props":2697,"children":2698},{"style":459},[2699],{"type":49,"value":2700},"\u002F* Fluid spacing *\u002F\n",{"type":43,"tag":264,"props":2702,"children":2703},{"class":266,"line":330},[2704,2708,2713,2717,2722,2726,2731,2735,2740,2745,2750,2754,2758,2762],{"type":43,"tag":264,"props":2705,"children":2706},{"style":468},[2707],{"type":49,"value":902},{"type":43,"tag":264,"props":2709,"children":2710},{"style":905},[2711],{"type":49,"value":2712},"section",{"type":43,"tag":264,"props":2714,"children":2715},{"style":468},[2716],{"type":49,"value":1144},{"type":43,"tag":264,"props":2718,"children":2719},{"style":919},[2720],{"type":49,"value":2721}," padding",{"type":43,"tag":264,"props":2723,"children":2724},{"style":468},[2725],{"type":49,"value":927},{"type":43,"tag":264,"props":2727,"children":2728},{"style":1054},[2729],{"type":49,"value":2730}," clamp",{"type":43,"tag":264,"props":2732,"children":2733},{"style":468},[2734],{"type":49,"value":1062},{"type":43,"tag":264,"props":2736,"children":2737},{"style":930},[2738],{"type":49,"value":2739},"1rem",{"type":43,"tag":264,"props":2741,"children":2742},{"style":468},[2743],{"type":49,"value":2744},",",{"type":43,"tag":264,"props":2746,"children":2747},{"style":930},[2748],{"type":49,"value":2749}," 4vw",{"type":43,"tag":264,"props":2751,"children":2752},{"style":468},[2753],{"type":49,"value":2744},{"type":43,"tag":264,"props":2755,"children":2756},{"style":930},[2757],{"type":49,"value":1561},{"type":43,"tag":264,"props":2759,"children":2760},{"style":468},[2761],{"type":49,"value":1117},{"type":43,"tag":264,"props":2763,"children":2764},{"style":468},[2765],{"type":49,"value":1122},{"type":43,"tag":264,"props":2767,"children":2768},{"class":266,"line":339},[2769],{"type":43,"tag":264,"props":2770,"children":2771},{"emptyLinePlaceholder":315},[2772],{"type":49,"value":318},{"type":43,"tag":264,"props":2774,"children":2775},{"class":266,"line":348},[2776],{"type":43,"tag":264,"props":2777,"children":2778},{"style":459},[2779],{"type":49,"value":2780},"\u002F* Intrinsic sizing *\u002F\n",{"type":43,"tag":264,"props":2782,"children":2783},{"class":266,"line":775},[2784,2788,2793,2797,2802,2806,2811,2815,2820,2824,2829,2833],{"type":43,"tag":264,"props":2785,"children":2786},{"style":468},[2787],{"type":49,"value":902},{"type":43,"tag":264,"props":2789,"children":2790},{"style":905},[2791],{"type":49,"value":2792},"content",{"type":43,"tag":264,"props":2794,"children":2795},{"style":468},[2796],{"type":49,"value":1144},{"type":43,"tag":264,"props":2798,"children":2799},{"style":919},[2800],{"type":49,"value":2801}," width",{"type":43,"tag":264,"props":2803,"children":2804},{"style":468},[2805],{"type":49,"value":927},{"type":43,"tag":264,"props":2807,"children":2808},{"style":1054},[2809],{"type":49,"value":2810}," min",{"type":43,"tag":264,"props":2812,"children":2813},{"style":468},[2814],{"type":49,"value":1062},{"type":43,"tag":264,"props":2816,"children":2817},{"style":930},[2818],{"type":49,"value":2819},"100%",{"type":43,"tag":264,"props":2821,"children":2822},{"style":468},[2823],{"type":49,"value":2744},{"type":43,"tag":264,"props":2825,"children":2826},{"style":930},[2827],{"type":49,"value":2828}," 800px",{"type":43,"tag":264,"props":2830,"children":2831},{"style":468},[2832],{"type":49,"value":1117},{"type":43,"tag":264,"props":2834,"children":2835},{"style":468},[2836],{"type":49,"value":1122},{"type":43,"tag":121,"props":2838,"children":2840},{"id":2839},"performance",[2841],{"type":49,"value":2842},"Performance",{"type":43,"tag":380,"props":2844,"children":2845},{},[2846,2866,2878,2890],{"type":43,"tag":63,"props":2847,"children":2848},{},[2849,2851,2857,2859,2864],{"type":49,"value":2850},"Animate only ",{"type":43,"tag":167,"props":2852,"children":2854},{"className":2853},[],[2855],{"type":49,"value":2856},"transform",{"type":49,"value":2858}," and ",{"type":43,"tag":167,"props":2860,"children":2862},{"className":2861},[],[2863],{"type":49,"value":2151},{"type":49,"value":2865}," (never layout properties)",{"type":43,"tag":63,"props":2867,"children":2868},{},[2869,2870,2876],{"type":49,"value":1697},{"type":43,"tag":167,"props":2871,"children":2873},{"className":2872},[],[2874],{"type":49,"value":2875},"will-change",{"type":49,"value":2877}," sparingly — remove after animation",{"type":43,"tag":63,"props":2879,"children":2880},{},[2881,2882,2888],{"type":49,"value":1697},{"type":43,"tag":167,"props":2883,"children":2885},{"className":2884},[],[2886],{"type":49,"value":2887},"contain: content",{"type":49,"value":2889}," for isolated rendering",{"type":43,"tag":63,"props":2891,"children":2892},{},[2893,2894,2900,2902,2908],{"type":49,"value":1697},{"type":43,"tag":167,"props":2895,"children":2897},{"className":2896},[],[2898],{"type":49,"value":2899},"dvh",{"type":49,"value":2901}," instead of ",{"type":43,"tag":167,"props":2903,"children":2905},{"className":2904},[],[2906],{"type":49,"value":2907},"vh",{"type":49,"value":2909}," on mobile",{"type":43,"tag":121,"props":2911,"children":2913},{"id":2912},"reduced-motion",[2914],{"type":49,"value":2915},"Reduced Motion",{"type":43,"tag":253,"props":2917,"children":2919},{"className":881,"code":2918,"language":21,"meta":258,"style":258},"@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n",[2920],{"type":43,"tag":167,"props":2921,"children":2922},{"__ignoreMap":258},[2923,2959,3007,3033,3058,3082,3107,3114],{"type":43,"tag":264,"props":2924,"children":2925},{"class":266,"line":267},[2926,2931,2936,2941,2945,2950,2955],{"type":43,"tag":264,"props":2927,"children":2928},{"style":2623},[2929],{"type":49,"value":2930},"@media",{"type":43,"tag":264,"props":2932,"children":2933},{"style":468},[2934],{"type":49,"value":2935}," (",{"type":43,"tag":264,"props":2937,"children":2938},{"style":548},[2939],{"type":49,"value":2940},"prefers-reduced-motion",{"type":43,"tag":264,"props":2942,"children":2943},{"style":468},[2944],{"type":49,"value":927},{"type":43,"tag":264,"props":2946,"children":2947},{"style":548},[2948],{"type":49,"value":2949}," reduce",{"type":43,"tag":264,"props":2951,"children":2952},{"style":468},[2953],{"type":49,"value":2954},")",{"type":43,"tag":264,"props":2956,"children":2957},{"style":468},[2958],{"type":49,"value":913},{"type":43,"tag":264,"props":2960,"children":2961},{"class":266,"line":276},[2962,2967,2971,2976,2981,2986,2990,2994,2998,3003],{"type":43,"tag":264,"props":2963,"children":2964},{"style":905},[2965],{"type":49,"value":2966},"  *",{"type":43,"tag":264,"props":2968,"children":2969},{"style":468},[2970],{"type":49,"value":2744},{"type":43,"tag":264,"props":2972,"children":2973},{"style":905},[2974],{"type":49,"value":2975}," *",{"type":43,"tag":264,"props":2977,"children":2978},{"style":468},[2979],{"type":49,"value":2980},"::",{"type":43,"tag":264,"props":2982,"children":2983},{"style":480},[2984],{"type":49,"value":2985},"before",{"type":43,"tag":264,"props":2987,"children":2988},{"style":468},[2989],{"type":49,"value":2744},{"type":43,"tag":264,"props":2991,"children":2992},{"style":905},[2993],{"type":49,"value":2975},{"type":43,"tag":264,"props":2995,"children":2996},{"style":468},[2997],{"type":49,"value":2980},{"type":43,"tag":264,"props":2999,"children":3000},{"style":480},[3001],{"type":49,"value":3002},"after",{"type":43,"tag":264,"props":3004,"children":3005},{"style":468},[3006],{"type":49,"value":913},{"type":43,"tag":264,"props":3008,"children":3009},{"class":266,"line":285},[3010,3015,3019,3024,3029],{"type":43,"tag":264,"props":3011,"children":3012},{"style":919},[3013],{"type":49,"value":3014},"    animation-duration",{"type":43,"tag":264,"props":3016,"children":3017},{"style":468},[3018],{"type":49,"value":927},{"type":43,"tag":264,"props":3020,"children":3021},{"style":930},[3022],{"type":49,"value":3023}," 0.01ms",{"type":43,"tag":264,"props":3025,"children":3026},{"style":930},[3027],{"type":49,"value":3028}," !important",{"type":43,"tag":264,"props":3030,"children":3031},{"style":468},[3032],{"type":49,"value":938},{"type":43,"tag":264,"props":3034,"children":3035},{"class":266,"line":30},[3036,3041,3045,3050,3054],{"type":43,"tag":264,"props":3037,"children":3038},{"style":919},[3039],{"type":49,"value":3040},"    animation-iteration-count",{"type":43,"tag":264,"props":3042,"children":3043},{"style":468},[3044],{"type":49,"value":927},{"type":43,"tag":264,"props":3046,"children":3047},{"style":930},[3048],{"type":49,"value":3049}," 1",{"type":43,"tag":264,"props":3051,"children":3052},{"style":930},[3053],{"type":49,"value":3028},{"type":43,"tag":264,"props":3055,"children":3056},{"style":468},[3057],{"type":49,"value":938},{"type":43,"tag":264,"props":3059,"children":3060},{"class":266,"line":302},[3061,3066,3070,3074,3078],{"type":43,"tag":264,"props":3062,"children":3063},{"style":919},[3064],{"type":49,"value":3065},"    transition-duration",{"type":43,"tag":264,"props":3067,"children":3068},{"style":468},[3069],{"type":49,"value":927},{"type":43,"tag":264,"props":3071,"children":3072},{"style":930},[3073],{"type":49,"value":3023},{"type":43,"tag":264,"props":3075,"children":3076},{"style":930},[3077],{"type":49,"value":3028},{"type":43,"tag":264,"props":3079,"children":3080},{"style":468},[3081],{"type":49,"value":938},{"type":43,"tag":264,"props":3083,"children":3084},{"class":266,"line":311},[3085,3090,3094,3099,3103],{"type":43,"tag":264,"props":3086,"children":3087},{"style":919},[3088],{"type":49,"value":3089},"    scroll-behavior",{"type":43,"tag":264,"props":3091,"children":3092},{"style":468},[3093],{"type":49,"value":927},{"type":43,"tag":264,"props":3095,"children":3096},{"style":548},[3097],{"type":49,"value":3098}," auto ",{"type":43,"tag":264,"props":3100,"children":3101},{"style":930},[3102],{"type":49,"value":865},{"type":43,"tag":264,"props":3104,"children":3105},{"style":468},[3106],{"type":49,"value":938},{"type":43,"tag":264,"props":3108,"children":3109},{"class":266,"line":321},[3110],{"type":43,"tag":264,"props":3111,"children":3112},{"style":468},[3113],{"type":49,"value":1001},{"type":43,"tag":264,"props":3115,"children":3116},{"class":266,"line":330},[3117],{"type":43,"tag":264,"props":3118,"children":3119},{"style":468},[3120],{"type":49,"value":1009},{"type":43,"tag":52,"props":3122,"children":3124},{"id":3123},"javascript-in-liquid-themes",[3125],{"type":49,"value":3126},"JavaScript in Liquid Themes",{"type":43,"tag":121,"props":3128,"children":3130},{"id":3129},"where-js-lives",[3131],{"type":49,"value":3132},"Where JS Lives",{"type":43,"tag":128,"props":3134,"children":3135},{},[3136,3154],{"type":43,"tag":132,"props":3137,"children":3138},{},[3139],{"type":43,"tag":136,"props":3140,"children":3141},{},[3142,3146,3150],{"type":43,"tag":140,"props":3143,"children":3144},{},[3145],{"type":49,"value":144},{"type":43,"tag":140,"props":3147,"children":3148},{},[3149],{"type":49,"value":149},{"type":43,"tag":140,"props":3151,"children":3152},{},[3153],{"type":49,"value":154},{"type":43,"tag":156,"props":3155,"children":3156},{},[3157,3178],{"type":43,"tag":136,"props":3158,"children":3159},{},[3160,3169,3173],{"type":43,"tag":163,"props":3161,"children":3162},{},[3163],{"type":43,"tag":167,"props":3164,"children":3166},{"className":3165},[],[3167],{"type":49,"value":3168},"{% javascript %}",{"type":43,"tag":163,"props":3170,"children":3171},{},[3172],{"type":49,"value":177},{"type":43,"tag":163,"props":3174,"children":3175},{},[3176],{"type":49,"value":3177},"Component-specific scripts (one per file)",{"type":43,"tag":136,"props":3179,"children":3180},{},[3181,3190,3194],{"type":43,"tag":163,"props":3182,"children":3183},{},[3184],{"type":43,"tag":167,"props":3185,"children":3187},{"className":3186},[],[3188],{"type":49,"value":3189},"assets\u002F*.js",{"type":43,"tag":163,"props":3191,"children":3192},{},[3193],{"type":49,"value":177},{"type":43,"tag":163,"props":3195,"children":3196},{},[3197],{"type":49,"value":3198},"Shared utilities, Web Components",{"type":43,"tag":121,"props":3200,"children":3202},{"id":3201},"web-component-pattern",[3203],{"type":49,"value":3204},"Web Component Pattern",{"type":43,"tag":253,"props":3206,"children":3209},{"className":3207,"code":3208,"language":18,"meta":258,"style":258},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","class ProductCard extends HTMLElement {\n  connectedCallback() {\n    this.button = this.querySelector('[data-add-to-cart]');\n    this.button?.addEventListener('click', this.#handleClick.bind(this));\n  }\n\n  disconnectedCallback() {\n    \u002F\u002F Clean up event listeners, abort controllers\n  }\n\n  async #handleClick(event) {\n    event.preventDefault();\n    this.button.disabled = true;\n\n    try {\n      const formData = new FormData();\n      formData.append('id', this.dataset.variantId);\n      formData.append('quantity', '1');\n\n      const response = await fetch('\u002Fcart\u002Fadd.js', {\n        method: 'POST',\n        body: formData\n      });\n\n      if (!response.ok) throw new Error('Failed');\n\n      this.dispatchEvent(new CustomEvent('cart:item-added', {\n        detail: await response.json(),\n        bubbles: true\n      }));\n    } catch (error) {\n      console.error('Add to cart error:', error);\n    } finally {\n      this.button.disabled = false;\n    }\n  }\n}\n\ncustomElements.define('product-card', ProductCard);\n",[3210],{"type":43,"tag":167,"props":3211,"children":3212},{"__ignoreMap":258},[3213,3240,3257,3310,3388,3395,3402,3418,3426,3433,3440,3476,3501,3534,3541,3553,3588,3652,3710,3717,3768,3798,3815,3831,3838,3913,3920,3972,4009,4026,4042,4073,4124,4141,4174,4183,4191,4199,4207],{"type":43,"tag":264,"props":3214,"children":3215},{"class":266,"line":267},[3216,3221,3226,3231,3236],{"type":43,"tag":264,"props":3217,"children":3218},{"style":480},[3219],{"type":49,"value":3220},"class",{"type":43,"tag":264,"props":3222,"children":3223},{"style":905},[3224],{"type":49,"value":3225}," ProductCard",{"type":43,"tag":264,"props":3227,"children":3228},{"style":480},[3229],{"type":49,"value":3230}," extends",{"type":43,"tag":264,"props":3232,"children":3233},{"style":905},[3234],{"type":49,"value":3235}," HTMLElement",{"type":43,"tag":264,"props":3237,"children":3238},{"style":468},[3239],{"type":49,"value":913},{"type":43,"tag":264,"props":3241,"children":3242},{"class":266,"line":276},[3243,3248,3253],{"type":43,"tag":264,"props":3244,"children":3245},{"style":474},[3246],{"type":49,"value":3247},"  connectedCallback",{"type":43,"tag":264,"props":3249,"children":3250},{"style":468},[3251],{"type":49,"value":3252},"()",{"type":43,"tag":264,"props":3254,"children":3255},{"style":468},[3256],{"type":49,"value":913},{"type":43,"tag":264,"props":3258,"children":3259},{"class":266,"line":285},[3260,3265,3269,3274,3279,3284,3288,3293,3298,3302,3306],{"type":43,"tag":264,"props":3261,"children":3262},{"style":468},[3263],{"type":49,"value":3264},"    this.",{"type":43,"tag":264,"props":3266,"children":3267},{"style":548},[3268],{"type":49,"value":694},{"type":43,"tag":264,"props":3270,"children":3271},{"style":468},[3272],{"type":49,"value":3273}," =",{"type":43,"tag":264,"props":3275,"children":3276},{"style":468},[3277],{"type":49,"value":3278}," this.",{"type":43,"tag":264,"props":3280,"children":3281},{"style":1054},[3282],{"type":49,"value":3283},"querySelector",{"type":43,"tag":264,"props":3285,"children":3286},{"style":474},[3287],{"type":49,"value":1062},{"type":43,"tag":264,"props":3289,"children":3290},{"style":468},[3291],{"type":49,"value":3292},"'",{"type":43,"tag":264,"props":3294,"children":3295},{"style":496},[3296],{"type":49,"value":3297},"[data-add-to-cart]",{"type":43,"tag":264,"props":3299,"children":3300},{"style":468},[3301],{"type":49,"value":3292},{"type":43,"tag":264,"props":3303,"children":3304},{"style":474},[3305],{"type":49,"value":2954},{"type":43,"tag":264,"props":3307,"children":3308},{"style":468},[3309],{"type":49,"value":938},{"type":43,"tag":264,"props":3311,"children":3312},{"class":266,"line":30},[3313,3317,3321,3326,3331,3335,3339,3344,3348,3352,3356,3361,3365,3370,3374,3379,3384],{"type":43,"tag":264,"props":3314,"children":3315},{"style":468},[3316],{"type":49,"value":3264},{"type":43,"tag":264,"props":3318,"children":3319},{"style":548},[3320],{"type":49,"value":694},{"type":43,"tag":264,"props":3322,"children":3323},{"style":468},[3324],{"type":49,"value":3325},"?.",{"type":43,"tag":264,"props":3327,"children":3328},{"style":1054},[3329],{"type":49,"value":3330},"addEventListener",{"type":43,"tag":264,"props":3332,"children":3333},{"style":474},[3334],{"type":49,"value":1062},{"type":43,"tag":264,"props":3336,"children":3337},{"style":468},[3338],{"type":49,"value":3292},{"type":43,"tag":264,"props":3340,"children":3341},{"style":496},[3342],{"type":49,"value":3343},"click",{"type":43,"tag":264,"props":3345,"children":3346},{"style":468},[3347],{"type":49,"value":3292},{"type":43,"tag":264,"props":3349,"children":3350},{"style":468},[3351],{"type":49,"value":2744},{"type":43,"tag":264,"props":3353,"children":3354},{"style":468},[3355],{"type":49,"value":3278},{"type":43,"tag":264,"props":3357,"children":3358},{"style":548},[3359],{"type":49,"value":3360},"#handleClick",{"type":43,"tag":264,"props":3362,"children":3363},{"style":468},[3364],{"type":49,"value":902},{"type":43,"tag":264,"props":3366,"children":3367},{"style":1054},[3368],{"type":49,"value":3369},"bind",{"type":43,"tag":264,"props":3371,"children":3372},{"style":474},[3373],{"type":49,"value":1062},{"type":43,"tag":264,"props":3375,"children":3376},{"style":468},[3377],{"type":49,"value":3378},"this",{"type":43,"tag":264,"props":3380,"children":3381},{"style":474},[3382],{"type":49,"value":3383},"))",{"type":43,"tag":264,"props":3385,"children":3386},{"style":468},[3387],{"type":49,"value":938},{"type":43,"tag":264,"props":3389,"children":3390},{"class":266,"line":302},[3391],{"type":43,"tag":264,"props":3392,"children":3393},{"style":468},[3394],{"type":49,"value":1001},{"type":43,"tag":264,"props":3396,"children":3397},{"class":266,"line":311},[3398],{"type":43,"tag":264,"props":3399,"children":3400},{"emptyLinePlaceholder":315},[3401],{"type":49,"value":318},{"type":43,"tag":264,"props":3403,"children":3404},{"class":266,"line":321},[3405,3410,3414],{"type":43,"tag":264,"props":3406,"children":3407},{"style":474},[3408],{"type":49,"value":3409},"  disconnectedCallback",{"type":43,"tag":264,"props":3411,"children":3412},{"style":468},[3413],{"type":49,"value":3252},{"type":43,"tag":264,"props":3415,"children":3416},{"style":468},[3417],{"type":49,"value":913},{"type":43,"tag":264,"props":3419,"children":3420},{"class":266,"line":330},[3421],{"type":43,"tag":264,"props":3422,"children":3423},{"style":459},[3424],{"type":49,"value":3425},"    \u002F\u002F Clean up event listeners, abort controllers\n",{"type":43,"tag":264,"props":3427,"children":3428},{"class":266,"line":339},[3429],{"type":43,"tag":264,"props":3430,"children":3431},{"style":468},[3432],{"type":49,"value":1001},{"type":43,"tag":264,"props":3434,"children":3435},{"class":266,"line":348},[3436],{"type":43,"tag":264,"props":3437,"children":3438},{"emptyLinePlaceholder":315},[3439],{"type":49,"value":318},{"type":43,"tag":264,"props":3441,"children":3442},{"class":266,"line":775},[3443,3448,3453,3458,3462,3468,3472],{"type":43,"tag":264,"props":3444,"children":3445},{"style":480},[3446],{"type":49,"value":3447},"  async",{"type":43,"tag":264,"props":3449,"children":3450},{"style":548},[3451],{"type":49,"value":3452}," #",{"type":43,"tag":264,"props":3454,"children":3455},{"style":474},[3456],{"type":49,"value":3457},"handleClick",{"type":43,"tag":264,"props":3459,"children":3460},{"style":468},[3461],{"type":49,"value":1062},{"type":43,"tag":264,"props":3463,"children":3465},{"style":3464},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3466],{"type":49,"value":3467},"event",{"type":43,"tag":264,"props":3469,"children":3470},{"style":468},[3471],{"type":49,"value":2954},{"type":43,"tag":264,"props":3473,"children":3474},{"style":468},[3475],{"type":49,"value":913},{"type":43,"tag":264,"props":3477,"children":3478},{"class":266,"line":792},[3479,3484,3488,3493,3497],{"type":43,"tag":264,"props":3480,"children":3481},{"style":548},[3482],{"type":49,"value":3483},"    event",{"type":43,"tag":264,"props":3485,"children":3486},{"style":468},[3487],{"type":49,"value":902},{"type":43,"tag":264,"props":3489,"children":3490},{"style":1054},[3491],{"type":49,"value":3492},"preventDefault",{"type":43,"tag":264,"props":3494,"children":3495},{"style":474},[3496],{"type":49,"value":3252},{"type":43,"tag":264,"props":3498,"children":3499},{"style":468},[3500],{"type":49,"value":938},{"type":43,"tag":264,"props":3502,"children":3503},{"class":266,"line":1075},[3504,3508,3512,3516,3520,3524,3530],{"type":43,"tag":264,"props":3505,"children":3506},{"style":468},[3507],{"type":49,"value":3264},{"type":43,"tag":264,"props":3509,"children":3510},{"style":548},[3511],{"type":49,"value":694},{"type":43,"tag":264,"props":3513,"children":3514},{"style":468},[3515],{"type":49,"value":902},{"type":43,"tag":264,"props":3517,"children":3518},{"style":548},[3519],{"type":49,"value":1202},{"type":43,"tag":264,"props":3521,"children":3522},{"style":468},[3523],{"type":49,"value":3273},{"type":43,"tag":264,"props":3525,"children":3527},{"style":3526},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[3528],{"type":49,"value":3529}," true",{"type":43,"tag":264,"props":3531,"children":3532},{"style":468},[3533],{"type":49,"value":938},{"type":43,"tag":264,"props":3535,"children":3536},{"class":266,"line":1083},[3537],{"type":43,"tag":264,"props":3538,"children":3539},{"emptyLinePlaceholder":315},[3540],{"type":49,"value":318},{"type":43,"tag":264,"props":3542,"children":3543},{"class":266,"line":1125},[3544,3549],{"type":43,"tag":264,"props":3545,"children":3546},{"style":2623},[3547],{"type":49,"value":3548},"    try",{"type":43,"tag":264,"props":3550,"children":3551},{"style":468},[3552],{"type":49,"value":913},{"type":43,"tag":264,"props":3554,"children":3555},{"class":266,"line":1187},[3556,3561,3566,3570,3575,3580,3584],{"type":43,"tag":264,"props":3557,"children":3558},{"style":480},[3559],{"type":49,"value":3560},"      const",{"type":43,"tag":264,"props":3562,"children":3563},{"style":548},[3564],{"type":49,"value":3565}," formData",{"type":43,"tag":264,"props":3567,"children":3568},{"style":468},[3569],{"type":49,"value":3273},{"type":43,"tag":264,"props":3571,"children":3572},{"style":468},[3573],{"type":49,"value":3574}," new",{"type":43,"tag":264,"props":3576,"children":3577},{"style":1054},[3578],{"type":49,"value":3579}," FormData",{"type":43,"tag":264,"props":3581,"children":3582},{"style":474},[3583],{"type":49,"value":3252},{"type":43,"tag":264,"props":3585,"children":3586},{"style":468},[3587],{"type":49,"value":938},{"type":43,"tag":264,"props":3589,"children":3590},{"class":266,"line":1237},[3591,3596,3600,3605,3609,3613,3618,3622,3626,3630,3635,3639,3644,3648],{"type":43,"tag":264,"props":3592,"children":3593},{"style":548},[3594],{"type":49,"value":3595},"      formData",{"type":43,"tag":264,"props":3597,"children":3598},{"style":468},[3599],{"type":49,"value":902},{"type":43,"tag":264,"props":3601,"children":3602},{"style":1054},[3603],{"type":49,"value":3604},"append",{"type":43,"tag":264,"props":3606,"children":3607},{"style":474},[3608],{"type":49,"value":1062},{"type":43,"tag":264,"props":3610,"children":3611},{"style":468},[3612],{"type":49,"value":3292},{"type":43,"tag":264,"props":3614,"children":3615},{"style":496},[3616],{"type":49,"value":3617},"id",{"type":43,"tag":264,"props":3619,"children":3620},{"style":468},[3621],{"type":49,"value":3292},{"type":43,"tag":264,"props":3623,"children":3624},{"style":468},[3625],{"type":49,"value":2744},{"type":43,"tag":264,"props":3627,"children":3628},{"style":468},[3629],{"type":49,"value":3278},{"type":43,"tag":264,"props":3631,"children":3632},{"style":548},[3633],{"type":49,"value":3634},"dataset",{"type":43,"tag":264,"props":3636,"children":3637},{"style":468},[3638],{"type":49,"value":902},{"type":43,"tag":264,"props":3640,"children":3641},{"style":548},[3642],{"type":49,"value":3643},"variantId",{"type":43,"tag":264,"props":3645,"children":3646},{"style":474},[3647],{"type":49,"value":2954},{"type":43,"tag":264,"props":3649,"children":3650},{"style":468},[3651],{"type":49,"value":938},{"type":43,"tag":264,"props":3653,"children":3654},{"class":266,"line":1245},[3655,3659,3663,3667,3671,3675,3680,3684,3688,3693,3698,3702,3706],{"type":43,"tag":264,"props":3656,"children":3657},{"style":548},[3658],{"type":49,"value":3595},{"type":43,"tag":264,"props":3660,"children":3661},{"style":468},[3662],{"type":49,"value":902},{"type":43,"tag":264,"props":3664,"children":3665},{"style":1054},[3666],{"type":49,"value":3604},{"type":43,"tag":264,"props":3668,"children":3669},{"style":474},[3670],{"type":49,"value":1062},{"type":43,"tag":264,"props":3672,"children":3673},{"style":468},[3674],{"type":49,"value":3292},{"type":43,"tag":264,"props":3676,"children":3677},{"style":496},[3678],{"type":49,"value":3679},"quantity",{"type":43,"tag":264,"props":3681,"children":3682},{"style":468},[3683],{"type":49,"value":3292},{"type":43,"tag":264,"props":3685,"children":3686},{"style":468},[3687],{"type":49,"value":2744},{"type":43,"tag":264,"props":3689,"children":3690},{"style":468},[3691],{"type":49,"value":3692}," '",{"type":43,"tag":264,"props":3694,"children":3695},{"style":496},[3696],{"type":49,"value":3697},"1",{"type":43,"tag":264,"props":3699,"children":3700},{"style":468},[3701],{"type":49,"value":3292},{"type":43,"tag":264,"props":3703,"children":3704},{"style":474},[3705],{"type":49,"value":2954},{"type":43,"tag":264,"props":3707,"children":3708},{"style":468},[3709],{"type":49,"value":938},{"type":43,"tag":264,"props":3711,"children":3712},{"class":266,"line":1253},[3713],{"type":43,"tag":264,"props":3714,"children":3715},{"emptyLinePlaceholder":315},[3716],{"type":49,"value":318},{"type":43,"tag":264,"props":3718,"children":3719},{"class":266,"line":1262},[3720,3724,3729,3733,3738,3743,3747,3751,3756,3760,3764],{"type":43,"tag":264,"props":3721,"children":3722},{"style":480},[3723],{"type":49,"value":3560},{"type":43,"tag":264,"props":3725,"children":3726},{"style":548},[3727],{"type":49,"value":3728}," response",{"type":43,"tag":264,"props":3730,"children":3731},{"style":468},[3732],{"type":49,"value":3273},{"type":43,"tag":264,"props":3734,"children":3735},{"style":2623},[3736],{"type":49,"value":3737}," await",{"type":43,"tag":264,"props":3739,"children":3740},{"style":1054},[3741],{"type":49,"value":3742}," fetch",{"type":43,"tag":264,"props":3744,"children":3745},{"style":474},[3746],{"type":49,"value":1062},{"type":43,"tag":264,"props":3748,"children":3749},{"style":468},[3750],{"type":49,"value":3292},{"type":43,"tag":264,"props":3752,"children":3753},{"style":496},[3754],{"type":49,"value":3755},"\u002Fcart\u002Fadd.js",{"type":43,"tag":264,"props":3757,"children":3758},{"style":468},[3759],{"type":49,"value":3292},{"type":43,"tag":264,"props":3761,"children":3762},{"style":468},[3763],{"type":49,"value":2744},{"type":43,"tag":264,"props":3765,"children":3766},{"style":468},[3767],{"type":49,"value":913},{"type":43,"tag":264,"props":3769,"children":3770},{"class":266,"line":26},[3771,3776,3780,3784,3789,3793],{"type":43,"tag":264,"props":3772,"children":3773},{"style":474},[3774],{"type":49,"value":3775},"        method",{"type":43,"tag":264,"props":3777,"children":3778},{"style":468},[3779],{"type":49,"value":927},{"type":43,"tag":264,"props":3781,"children":3782},{"style":468},[3783],{"type":49,"value":3692},{"type":43,"tag":264,"props":3785,"children":3786},{"style":496},[3787],{"type":49,"value":3788},"POST",{"type":43,"tag":264,"props":3790,"children":3791},{"style":468},[3792],{"type":49,"value":3292},{"type":43,"tag":264,"props":3794,"children":3795},{"style":468},[3796],{"type":49,"value":3797},",\n",{"type":43,"tag":264,"props":3799,"children":3800},{"class":266,"line":1317},[3801,3806,3810],{"type":43,"tag":264,"props":3802,"children":3803},{"style":474},[3804],{"type":49,"value":3805},"        body",{"type":43,"tag":264,"props":3807,"children":3808},{"style":468},[3809],{"type":49,"value":927},{"type":43,"tag":264,"props":3811,"children":3812},{"style":548},[3813],{"type":49,"value":3814}," formData\n",{"type":43,"tag":264,"props":3816,"children":3817},{"class":266,"line":1325},[3818,3823,3827],{"type":43,"tag":264,"props":3819,"children":3820},{"style":468},[3821],{"type":49,"value":3822},"      }",{"type":43,"tag":264,"props":3824,"children":3825},{"style":474},[3826],{"type":49,"value":2954},{"type":43,"tag":264,"props":3828,"children":3829},{"style":468},[3830],{"type":49,"value":938},{"type":43,"tag":264,"props":3832,"children":3833},{"class":266,"line":1333},[3834],{"type":43,"tag":264,"props":3835,"children":3836},{"emptyLinePlaceholder":315},[3837],{"type":49,"value":318},{"type":43,"tag":264,"props":3839,"children":3840},{"class":266,"line":1342},[3841,3846,3850,3855,3860,3864,3869,3874,3879,3883,3888,3892,3896,3901,3905,3909],{"type":43,"tag":264,"props":3842,"children":3843},{"style":2623},[3844],{"type":49,"value":3845},"      if",{"type":43,"tag":264,"props":3847,"children":3848},{"style":474},[3849],{"type":49,"value":2935},{"type":43,"tag":264,"props":3851,"children":3852},{"style":468},[3853],{"type":49,"value":3854},"!",{"type":43,"tag":264,"props":3856,"children":3857},{"style":548},[3858],{"type":49,"value":3859},"response",{"type":43,"tag":264,"props":3861,"children":3862},{"style":468},[3863],{"type":49,"value":902},{"type":43,"tag":264,"props":3865,"children":3866},{"style":548},[3867],{"type":49,"value":3868},"ok",{"type":43,"tag":264,"props":3870,"children":3871},{"style":474},[3872],{"type":49,"value":3873},") ",{"type":43,"tag":264,"props":3875,"children":3876},{"style":2623},[3877],{"type":49,"value":3878},"throw",{"type":43,"tag":264,"props":3880,"children":3881},{"style":468},[3882],{"type":49,"value":3574},{"type":43,"tag":264,"props":3884,"children":3885},{"style":1054},[3886],{"type":49,"value":3887}," Error",{"type":43,"tag":264,"props":3889,"children":3890},{"style":474},[3891],{"type":49,"value":1062},{"type":43,"tag":264,"props":3893,"children":3894},{"style":468},[3895],{"type":49,"value":3292},{"type":43,"tag":264,"props":3897,"children":3898},{"style":496},[3899],{"type":49,"value":3900},"Failed",{"type":43,"tag":264,"props":3902,"children":3903},{"style":468},[3904],{"type":49,"value":3292},{"type":43,"tag":264,"props":3906,"children":3907},{"style":474},[3908],{"type":49,"value":2954},{"type":43,"tag":264,"props":3910,"children":3911},{"style":468},[3912],{"type":49,"value":938},{"type":43,"tag":264,"props":3914,"children":3915},{"class":266,"line":1359},[3916],{"type":43,"tag":264,"props":3917,"children":3918},{"emptyLinePlaceholder":315},[3919],{"type":49,"value":318},{"type":43,"tag":264,"props":3921,"children":3922},{"class":266,"line":1368},[3923,3928,3933,3937,3942,3947,3951,3955,3960,3964,3968],{"type":43,"tag":264,"props":3924,"children":3925},{"style":468},[3926],{"type":49,"value":3927},"      this.",{"type":43,"tag":264,"props":3929,"children":3930},{"style":1054},[3931],{"type":49,"value":3932},"dispatchEvent",{"type":43,"tag":264,"props":3934,"children":3935},{"style":474},[3936],{"type":49,"value":1062},{"type":43,"tag":264,"props":3938,"children":3939},{"style":468},[3940],{"type":49,"value":3941},"new",{"type":43,"tag":264,"props":3943,"children":3944},{"style":1054},[3945],{"type":49,"value":3946}," CustomEvent",{"type":43,"tag":264,"props":3948,"children":3949},{"style":474},[3950],{"type":49,"value":1062},{"type":43,"tag":264,"props":3952,"children":3953},{"style":468},[3954],{"type":49,"value":3292},{"type":43,"tag":264,"props":3956,"children":3957},{"style":496},[3958],{"type":49,"value":3959},"cart:item-added",{"type":43,"tag":264,"props":3961,"children":3962},{"style":468},[3963],{"type":49,"value":3292},{"type":43,"tag":264,"props":3965,"children":3966},{"style":468},[3967],{"type":49,"value":2744},{"type":43,"tag":264,"props":3969,"children":3970},{"style":468},[3971],{"type":49,"value":913},{"type":43,"tag":264,"props":3973,"children":3974},{"class":266,"line":1387},[3975,3980,3984,3988,3992,3996,4001,4005],{"type":43,"tag":264,"props":3976,"children":3977},{"style":474},[3978],{"type":49,"value":3979},"        detail",{"type":43,"tag":264,"props":3981,"children":3982},{"style":468},[3983],{"type":49,"value":927},{"type":43,"tag":264,"props":3985,"children":3986},{"style":2623},[3987],{"type":49,"value":3737},{"type":43,"tag":264,"props":3989,"children":3990},{"style":548},[3991],{"type":49,"value":3728},{"type":43,"tag":264,"props":3993,"children":3994},{"style":468},[3995],{"type":49,"value":902},{"type":43,"tag":264,"props":3997,"children":3998},{"style":1054},[3999],{"type":49,"value":4000},"json",{"type":43,"tag":264,"props":4002,"children":4003},{"style":474},[4004],{"type":49,"value":3252},{"type":43,"tag":264,"props":4006,"children":4007},{"style":468},[4008],{"type":49,"value":3797},{"type":43,"tag":264,"props":4010,"children":4011},{"class":266,"line":1395},[4012,4017,4021],{"type":43,"tag":264,"props":4013,"children":4014},{"style":474},[4015],{"type":49,"value":4016},"        bubbles",{"type":43,"tag":264,"props":4018,"children":4019},{"style":468},[4020],{"type":49,"value":927},{"type":43,"tag":264,"props":4022,"children":4023},{"style":3526},[4024],{"type":49,"value":4025}," true\n",{"type":43,"tag":264,"props":4027,"children":4029},{"class":266,"line":4028},30,[4030,4034,4038],{"type":43,"tag":264,"props":4031,"children":4032},{"style":468},[4033],{"type":49,"value":3822},{"type":43,"tag":264,"props":4035,"children":4036},{"style":474},[4037],{"type":49,"value":3383},{"type":43,"tag":264,"props":4039,"children":4040},{"style":468},[4041],{"type":49,"value":938},{"type":43,"tag":264,"props":4043,"children":4045},{"class":266,"line":4044},31,[4046,4051,4056,4060,4065,4069],{"type":43,"tag":264,"props":4047,"children":4048},{"style":468},[4049],{"type":49,"value":4050},"    }",{"type":43,"tag":264,"props":4052,"children":4053},{"style":2623},[4054],{"type":49,"value":4055}," catch",{"type":43,"tag":264,"props":4057,"children":4058},{"style":474},[4059],{"type":49,"value":2935},{"type":43,"tag":264,"props":4061,"children":4062},{"style":548},[4063],{"type":49,"value":4064},"error",{"type":43,"tag":264,"props":4066,"children":4067},{"style":474},[4068],{"type":49,"value":3873},{"type":43,"tag":264,"props":4070,"children":4071},{"style":468},[4072],{"type":49,"value":2636},{"type":43,"tag":264,"props":4074,"children":4076},{"class":266,"line":4075},32,[4077,4082,4086,4090,4094,4098,4103,4107,4111,4116,4120],{"type":43,"tag":264,"props":4078,"children":4079},{"style":548},[4080],{"type":49,"value":4081},"      console",{"type":43,"tag":264,"props":4083,"children":4084},{"style":468},[4085],{"type":49,"value":902},{"type":43,"tag":264,"props":4087,"children":4088},{"style":1054},[4089],{"type":49,"value":4064},{"type":43,"tag":264,"props":4091,"children":4092},{"style":474},[4093],{"type":49,"value":1062},{"type":43,"tag":264,"props":4095,"children":4096},{"style":468},[4097],{"type":49,"value":3292},{"type":43,"tag":264,"props":4099,"children":4100},{"style":496},[4101],{"type":49,"value":4102},"Add to cart error:",{"type":43,"tag":264,"props":4104,"children":4105},{"style":468},[4106],{"type":49,"value":3292},{"type":43,"tag":264,"props":4108,"children":4109},{"style":468},[4110],{"type":49,"value":2744},{"type":43,"tag":264,"props":4112,"children":4113},{"style":548},[4114],{"type":49,"value":4115}," error",{"type":43,"tag":264,"props":4117,"children":4118},{"style":474},[4119],{"type":49,"value":2954},{"type":43,"tag":264,"props":4121,"children":4122},{"style":468},[4123],{"type":49,"value":938},{"type":43,"tag":264,"props":4125,"children":4127},{"class":266,"line":4126},33,[4128,4132,4137],{"type":43,"tag":264,"props":4129,"children":4130},{"style":468},[4131],{"type":49,"value":4050},{"type":43,"tag":264,"props":4133,"children":4134},{"style":2623},[4135],{"type":49,"value":4136}," finally",{"type":43,"tag":264,"props":4138,"children":4139},{"style":468},[4140],{"type":49,"value":913},{"type":43,"tag":264,"props":4142,"children":4144},{"class":266,"line":4143},34,[4145,4149,4153,4157,4161,4165,4170],{"type":43,"tag":264,"props":4146,"children":4147},{"style":468},[4148],{"type":49,"value":3927},{"type":43,"tag":264,"props":4150,"children":4151},{"style":548},[4152],{"type":49,"value":694},{"type":43,"tag":264,"props":4154,"children":4155},{"style":468},[4156],{"type":49,"value":902},{"type":43,"tag":264,"props":4158,"children":4159},{"style":548},[4160],{"type":49,"value":1202},{"type":43,"tag":264,"props":4162,"children":4163},{"style":468},[4164],{"type":49,"value":3273},{"type":43,"tag":264,"props":4166,"children":4167},{"style":3526},[4168],{"type":49,"value":4169}," false",{"type":43,"tag":264,"props":4171,"children":4172},{"style":468},[4173],{"type":49,"value":938},{"type":43,"tag":264,"props":4175,"children":4177},{"class":266,"line":4176},35,[4178],{"type":43,"tag":264,"props":4179,"children":4180},{"style":468},[4181],{"type":49,"value":4182},"    }\n",{"type":43,"tag":264,"props":4184,"children":4186},{"class":266,"line":4185},36,[4187],{"type":43,"tag":264,"props":4188,"children":4189},{"style":468},[4190],{"type":49,"value":1001},{"type":43,"tag":264,"props":4192,"children":4194},{"class":266,"line":4193},37,[4195],{"type":43,"tag":264,"props":4196,"children":4197},{"style":468},[4198],{"type":49,"value":1009},{"type":43,"tag":264,"props":4200,"children":4202},{"class":266,"line":4201},38,[4203],{"type":43,"tag":264,"props":4204,"children":4205},{"emptyLinePlaceholder":315},[4206],{"type":49,"value":318},{"type":43,"tag":264,"props":4208,"children":4210},{"class":266,"line":4209},39,[4211,4216,4220,4225,4229,4233,4237,4241,4245,4250],{"type":43,"tag":264,"props":4212,"children":4213},{"style":548},[4214],{"type":49,"value":4215},"customElements",{"type":43,"tag":264,"props":4217,"children":4218},{"style":468},[4219],{"type":49,"value":902},{"type":43,"tag":264,"props":4221,"children":4222},{"style":1054},[4223],{"type":49,"value":4224},"define",{"type":43,"tag":264,"props":4226,"children":4227},{"style":548},[4228],{"type":49,"value":1062},{"type":43,"tag":264,"props":4230,"children":4231},{"style":468},[4232],{"type":49,"value":3292},{"type":43,"tag":264,"props":4234,"children":4235},{"style":496},[4236],{"type":49,"value":499},{"type":43,"tag":264,"props":4238,"children":4239},{"style":468},[4240],{"type":49,"value":3292},{"type":43,"tag":264,"props":4242,"children":4243},{"style":468},[4244],{"type":49,"value":2744},{"type":43,"tag":264,"props":4246,"children":4247},{"style":548},[4248],{"type":49,"value":4249}," ProductCard)",{"type":43,"tag":264,"props":4251,"children":4252},{"style":468},[4253],{"type":49,"value":938},{"type":43,"tag":253,"props":4255,"children":4257},{"className":255,"code":4256,"language":257,"meta":258,"style":258},"\u003Cproduct-card data-variant-id=\"{{ product.selected_or_first_available_variant.id }}\">\n  \u003Cbutton data-add-to-cart>{{ 'products.add_to_cart' | t }}\u003C\u002Fbutton>\n\u003C\u002Fproduct-card>\n",[4258],{"type":43,"tag":167,"props":4259,"children":4260},{"__ignoreMap":258},[4261,4269,4277],{"type":43,"tag":264,"props":4262,"children":4263},{"class":266,"line":267},[4264],{"type":43,"tag":264,"props":4265,"children":4266},{},[4267],{"type":49,"value":4268},"\u003Cproduct-card data-variant-id=\"{{ product.selected_or_first_available_variant.id }}\">\n",{"type":43,"tag":264,"props":4270,"children":4271},{"class":266,"line":276},[4272],{"type":43,"tag":264,"props":4273,"children":4274},{},[4275],{"type":49,"value":4276},"  \u003Cbutton data-add-to-cart>{{ 'products.add_to_cart' | t }}\u003C\u002Fbutton>\n",{"type":43,"tag":264,"props":4278,"children":4279},{"class":266,"line":285},[4280],{"type":43,"tag":264,"props":4281,"children":4282},{},[4283],{"type":49,"value":4284},"\u003C\u002Fproduct-card>\n",{"type":43,"tag":121,"props":4286,"children":4288},{"id":4287},"javascript-rules",[4289],{"type":49,"value":4290},"JavaScript Rules",{"type":43,"tag":128,"props":4292,"children":4293},{},[4294,4315],{"type":43,"tag":132,"props":4295,"children":4296},{},[4297],{"type":43,"tag":136,"props":4298,"children":4299},{},[4300,4305,4310],{"type":43,"tag":140,"props":4301,"children":4302},{},[4303],{"type":49,"value":4304},"Rule",{"type":43,"tag":140,"props":4306,"children":4307},{},[4308],{"type":49,"value":4309},"Do",{"type":43,"tag":140,"props":4311,"children":4312},{},[4313],{"type":49,"value":4314},"Don't",{"type":43,"tag":156,"props":4316,"children":4317},{},[4318,4344,4380,4410,4434,4464,4482,4508],{"type":43,"tag":136,"props":4319,"children":4320},{},[4321,4326,4335],{"type":43,"tag":163,"props":4322,"children":4323},{},[4324],{"type":49,"value":4325},"Loops",{"type":43,"tag":163,"props":4327,"children":4328},{},[4329],{"type":43,"tag":167,"props":4330,"children":4332},{"className":4331},[],[4333],{"type":49,"value":4334},"for (const item of items)",{"type":43,"tag":163,"props":4336,"children":4337},{},[4338],{"type":43,"tag":167,"props":4339,"children":4341},{"className":4340},[],[4342],{"type":49,"value":4343},"items.forEach()",{"type":43,"tag":136,"props":4345,"children":4346},{},[4347,4352,4369],{"type":43,"tag":163,"props":4348,"children":4349},{},[4350],{"type":49,"value":4351},"Async",{"type":43,"tag":163,"props":4353,"children":4354},{},[4355,4361,4363],{"type":43,"tag":167,"props":4356,"children":4358},{"className":4357},[],[4359],{"type":49,"value":4360},"async",{"type":49,"value":4362},"\u002F",{"type":43,"tag":167,"props":4364,"children":4366},{"className":4365},[],[4367],{"type":49,"value":4368},"await",{"type":43,"tag":163,"props":4370,"children":4371},{},[4372,4378],{"type":43,"tag":167,"props":4373,"children":4375},{"className":4374},[],[4376],{"type":49,"value":4377},".then()",{"type":49,"value":4379}," chains",{"type":43,"tag":136,"props":4381,"children":4382},{},[4383,4388,4399],{"type":43,"tag":163,"props":4384,"children":4385},{},[4386],{"type":49,"value":4387},"Variables",{"type":43,"tag":163,"props":4389,"children":4390},{},[4391,4397],{"type":43,"tag":167,"props":4392,"children":4394},{"className":4393},[],[4395],{"type":49,"value":4396},"const",{"type":49,"value":4398}," by default",{"type":43,"tag":163,"props":4400,"children":4401},{},[4402,4408],{"type":43,"tag":167,"props":4403,"children":4405},{"className":4404},[],[4406],{"type":49,"value":4407},"let",{"type":49,"value":4409}," unless reassigning",{"type":43,"tag":136,"props":4411,"children":4412},{},[4413,4418,4423],{"type":43,"tag":163,"props":4414,"children":4415},{},[4416],{"type":49,"value":4417},"Conditionals",{"type":43,"tag":163,"props":4419,"children":4420},{},[4421],{"type":49,"value":4422},"Early returns",{"type":43,"tag":163,"props":4424,"children":4425},{},[4426,4428],{"type":49,"value":4427},"Nested ",{"type":43,"tag":167,"props":4429,"children":4431},{"className":4430},[],[4432],{"type":49,"value":4433},"if\u002Felse",{"type":43,"tag":136,"props":4435,"children":4436},{},[4437,4442,4459],{"type":43,"tag":163,"props":4438,"children":4439},{},[4440],{"type":49,"value":4441},"URLs",{"type":43,"tag":163,"props":4443,"children":4444},{},[4445,4451,4453],{"type":43,"tag":167,"props":4446,"children":4448},{"className":4447},[],[4449],{"type":49,"value":4450},"new URL()",{"type":49,"value":4452}," + ",{"type":43,"tag":167,"props":4454,"children":4456},{"className":4455},[],[4457],{"type":49,"value":4458},"URLSearchParams",{"type":43,"tag":163,"props":4460,"children":4461},{},[4462],{"type":49,"value":4463},"String concatenation",{"type":43,"tag":136,"props":4465,"children":4466},{},[4467,4472,4477],{"type":43,"tag":163,"props":4468,"children":4469},{},[4470],{"type":49,"value":4471},"Dependencies",{"type":43,"tag":163,"props":4473,"children":4474},{},[4475],{"type":49,"value":4476},"Native browser APIs",{"type":43,"tag":163,"props":4478,"children":4479},{},[4480],{"type":49,"value":4481},"External libraries",{"type":43,"tag":136,"props":4483,"children":4484},{},[4485,4490,4499],{"type":43,"tag":163,"props":4486,"children":4487},{},[4488],{"type":49,"value":4489},"Private methods",{"type":43,"tag":163,"props":4491,"children":4492},{},[4493],{"type":43,"tag":167,"props":4494,"children":4496},{"className":4495},[],[4497],{"type":49,"value":4498},"#methodName()",{"type":43,"tag":163,"props":4500,"children":4501},{},[4502],{"type":43,"tag":167,"props":4503,"children":4505},{"className":4504},[],[4506],{"type":49,"value":4507},"_methodName()",{"type":43,"tag":136,"props":4509,"children":4510},{},[4511,4516,4541],{"type":43,"tag":163,"props":4512,"children":4513},{},[4514],{"type":49,"value":4515},"Types",{"type":43,"tag":163,"props":4517,"children":4518},{},[4519,4521,4527,4528,4534,4535],{"type":49,"value":4520},"JSDoc ",{"type":43,"tag":167,"props":4522,"children":4524},{"className":4523},[],[4525],{"type":49,"value":4526},"@typedef",{"type":49,"value":2038},{"type":43,"tag":167,"props":4529,"children":4531},{"className":4530},[],[4532],{"type":49,"value":4533},"@param",{"type":49,"value":2038},{"type":43,"tag":167,"props":4536,"children":4538},{"className":4537},[],[4539],{"type":49,"value":4540},"@returns",{"type":43,"tag":163,"props":4542,"children":4543},{},[4544],{"type":49,"value":4545},"Untyped",{"type":43,"tag":121,"props":4547,"children":4549},{"id":4548},"abortcontroller-for-fetch",[4550],{"type":49,"value":4551},"AbortController for Fetch",{"type":43,"tag":253,"props":4553,"children":4555},{"className":3207,"code":4554,"language":18,"meta":258,"style":258},"class DataLoader extends HTMLElement {\n  #controller = null;\n\n  async load(url) {\n    this.#controller?.abort();\n    this.#controller = new AbortController();\n\n    try {\n      const response = await fetch(url, { signal: this.#controller.signal });\n      if (!response.ok) throw new Error(`HTTP ${response.status}`);\n      return await response.json();\n    } catch (error) {\n      if (error.name !== 'AbortError') throw error;\n      return null;\n    }\n  }\n\n  disconnectedCallback() {\n    this.#controller?.abort();\n  }\n}\n",[4556],{"type":43,"tag":167,"props":4557,"children":4558},{"__ignoreMap":258},[4559,4583,4600,4607,4636,4665,4697,4704,4715,4793,4881,4913,4940,4998,5009,5016,5023,5030,5045,5072,5079],{"type":43,"tag":264,"props":4560,"children":4561},{"class":266,"line":267},[4562,4566,4571,4575,4579],{"type":43,"tag":264,"props":4563,"children":4564},{"style":480},[4565],{"type":49,"value":3220},{"type":43,"tag":264,"props":4567,"children":4568},{"style":905},[4569],{"type":49,"value":4570}," DataLoader",{"type":43,"tag":264,"props":4572,"children":4573},{"style":480},[4574],{"type":49,"value":3230},{"type":43,"tag":264,"props":4576,"children":4577},{"style":905},[4578],{"type":49,"value":3235},{"type":43,"tag":264,"props":4580,"children":4581},{"style":468},[4582],{"type":49,"value":913},{"type":43,"tag":264,"props":4584,"children":4585},{"class":266,"line":276},[4586,4591,4595],{"type":43,"tag":264,"props":4587,"children":4588},{"style":474},[4589],{"type":49,"value":4590},"  #controller",{"type":43,"tag":264,"props":4592,"children":4593},{"style":468},[4594],{"type":49,"value":3273},{"type":43,"tag":264,"props":4596,"children":4597},{"style":468},[4598],{"type":49,"value":4599}," null;\n",{"type":43,"tag":264,"props":4601,"children":4602},{"class":266,"line":285},[4603],{"type":43,"tag":264,"props":4604,"children":4605},{"emptyLinePlaceholder":315},[4606],{"type":49,"value":318},{"type":43,"tag":264,"props":4608,"children":4609},{"class":266,"line":30},[4610,4614,4619,4623,4628,4632],{"type":43,"tag":264,"props":4611,"children":4612},{"style":480},[4613],{"type":49,"value":3447},{"type":43,"tag":264,"props":4615,"children":4616},{"style":474},[4617],{"type":49,"value":4618}," load",{"type":43,"tag":264,"props":4620,"children":4621},{"style":468},[4622],{"type":49,"value":1062},{"type":43,"tag":264,"props":4624,"children":4625},{"style":3464},[4626],{"type":49,"value":4627},"url",{"type":43,"tag":264,"props":4629,"children":4630},{"style":468},[4631],{"type":49,"value":2954},{"type":43,"tag":264,"props":4633,"children":4634},{"style":468},[4635],{"type":49,"value":913},{"type":43,"tag":264,"props":4637,"children":4638},{"class":266,"line":302},[4639,4643,4648,4652,4657,4661],{"type":43,"tag":264,"props":4640,"children":4641},{"style":468},[4642],{"type":49,"value":3264},{"type":43,"tag":264,"props":4644,"children":4645},{"style":548},[4646],{"type":49,"value":4647},"#controller",{"type":43,"tag":264,"props":4649,"children":4650},{"style":468},[4651],{"type":49,"value":3325},{"type":43,"tag":264,"props":4653,"children":4654},{"style":1054},[4655],{"type":49,"value":4656},"abort",{"type":43,"tag":264,"props":4658,"children":4659},{"style":474},[4660],{"type":49,"value":3252},{"type":43,"tag":264,"props":4662,"children":4663},{"style":468},[4664],{"type":49,"value":938},{"type":43,"tag":264,"props":4666,"children":4667},{"class":266,"line":311},[4668,4672,4676,4680,4684,4689,4693],{"type":43,"tag":264,"props":4669,"children":4670},{"style":468},[4671],{"type":49,"value":3264},{"type":43,"tag":264,"props":4673,"children":4674},{"style":548},[4675],{"type":49,"value":4647},{"type":43,"tag":264,"props":4677,"children":4678},{"style":468},[4679],{"type":49,"value":3273},{"type":43,"tag":264,"props":4681,"children":4682},{"style":468},[4683],{"type":49,"value":3574},{"type":43,"tag":264,"props":4685,"children":4686},{"style":1054},[4687],{"type":49,"value":4688}," AbortController",{"type":43,"tag":264,"props":4690,"children":4691},{"style":474},[4692],{"type":49,"value":3252},{"type":43,"tag":264,"props":4694,"children":4695},{"style":468},[4696],{"type":49,"value":938},{"type":43,"tag":264,"props":4698,"children":4699},{"class":266,"line":321},[4700],{"type":43,"tag":264,"props":4701,"children":4702},{"emptyLinePlaceholder":315},[4703],{"type":49,"value":318},{"type":43,"tag":264,"props":4705,"children":4706},{"class":266,"line":330},[4707,4711],{"type":43,"tag":264,"props":4708,"children":4709},{"style":2623},[4710],{"type":49,"value":3548},{"type":43,"tag":264,"props":4712,"children":4713},{"style":468},[4714],{"type":49,"value":913},{"type":43,"tag":264,"props":4716,"children":4717},{"class":266,"line":339},[4718,4722,4726,4730,4734,4738,4742,4746,4750,4754,4759,4763,4767,4771,4775,4780,4785,4789],{"type":43,"tag":264,"props":4719,"children":4720},{"style":480},[4721],{"type":49,"value":3560},{"type":43,"tag":264,"props":4723,"children":4724},{"style":548},[4725],{"type":49,"value":3728},{"type":43,"tag":264,"props":4727,"children":4728},{"style":468},[4729],{"type":49,"value":3273},{"type":43,"tag":264,"props":4731,"children":4732},{"style":2623},[4733],{"type":49,"value":3737},{"type":43,"tag":264,"props":4735,"children":4736},{"style":1054},[4737],{"type":49,"value":3742},{"type":43,"tag":264,"props":4739,"children":4740},{"style":474},[4741],{"type":49,"value":1062},{"type":43,"tag":264,"props":4743,"children":4744},{"style":548},[4745],{"type":49,"value":4627},{"type":43,"tag":264,"props":4747,"children":4748},{"style":468},[4749],{"type":49,"value":2744},{"type":43,"tag":264,"props":4751,"children":4752},{"style":468},[4753],{"type":49,"value":1144},{"type":43,"tag":264,"props":4755,"children":4756},{"style":474},[4757],{"type":49,"value":4758}," signal",{"type":43,"tag":264,"props":4760,"children":4761},{"style":468},[4762],{"type":49,"value":927},{"type":43,"tag":264,"props":4764,"children":4765},{"style":468},[4766],{"type":49,"value":3278},{"type":43,"tag":264,"props":4768,"children":4769},{"style":548},[4770],{"type":49,"value":4647},{"type":43,"tag":264,"props":4772,"children":4773},{"style":468},[4774],{"type":49,"value":902},{"type":43,"tag":264,"props":4776,"children":4777},{"style":548},[4778],{"type":49,"value":4779},"signal",{"type":43,"tag":264,"props":4781,"children":4782},{"style":468},[4783],{"type":49,"value":4784}," }",{"type":43,"tag":264,"props":4786,"children":4787},{"style":474},[4788],{"type":49,"value":2954},{"type":43,"tag":264,"props":4790,"children":4791},{"style":468},[4792],{"type":49,"value":938},{"type":43,"tag":264,"props":4794,"children":4795},{"class":266,"line":348},[4796,4800,4804,4808,4812,4816,4820,4824,4828,4832,4836,4840,4845,4850,4855,4859,4863,4868,4873,4877],{"type":43,"tag":264,"props":4797,"children":4798},{"style":2623},[4799],{"type":49,"value":3845},{"type":43,"tag":264,"props":4801,"children":4802},{"style":474},[4803],{"type":49,"value":2935},{"type":43,"tag":264,"props":4805,"children":4806},{"style":468},[4807],{"type":49,"value":3854},{"type":43,"tag":264,"props":4809,"children":4810},{"style":548},[4811],{"type":49,"value":3859},{"type":43,"tag":264,"props":4813,"children":4814},{"style":468},[4815],{"type":49,"value":902},{"type":43,"tag":264,"props":4817,"children":4818},{"style":548},[4819],{"type":49,"value":3868},{"type":43,"tag":264,"props":4821,"children":4822},{"style":474},[4823],{"type":49,"value":3873},{"type":43,"tag":264,"props":4825,"children":4826},{"style":2623},[4827],{"type":49,"value":3878},{"type":43,"tag":264,"props":4829,"children":4830},{"style":468},[4831],{"type":49,"value":3574},{"type":43,"tag":264,"props":4833,"children":4834},{"style":1054},[4835],{"type":49,"value":3887},{"type":43,"tag":264,"props":4837,"children":4838},{"style":474},[4839],{"type":49,"value":1062},{"type":43,"tag":264,"props":4841,"children":4842},{"style":468},[4843],{"type":49,"value":4844},"`",{"type":43,"tag":264,"props":4846,"children":4847},{"style":496},[4848],{"type":49,"value":4849},"HTTP ",{"type":43,"tag":264,"props":4851,"children":4852},{"style":468},[4853],{"type":49,"value":4854},"${",{"type":43,"tag":264,"props":4856,"children":4857},{"style":548},[4858],{"type":49,"value":3859},{"type":43,"tag":264,"props":4860,"children":4861},{"style":468},[4862],{"type":49,"value":902},{"type":43,"tag":264,"props":4864,"children":4865},{"style":548},[4866],{"type":49,"value":4867},"status",{"type":43,"tag":264,"props":4869,"children":4870},{"style":468},[4871],{"type":49,"value":4872},"}`",{"type":43,"tag":264,"props":4874,"children":4875},{"style":474},[4876],{"type":49,"value":2954},{"type":43,"tag":264,"props":4878,"children":4879},{"style":468},[4880],{"type":49,"value":938},{"type":43,"tag":264,"props":4882,"children":4883},{"class":266,"line":775},[4884,4889,4893,4897,4901,4905,4909],{"type":43,"tag":264,"props":4885,"children":4886},{"style":2623},[4887],{"type":49,"value":4888},"      return",{"type":43,"tag":264,"props":4890,"children":4891},{"style":2623},[4892],{"type":49,"value":3737},{"type":43,"tag":264,"props":4894,"children":4895},{"style":548},[4896],{"type":49,"value":3728},{"type":43,"tag":264,"props":4898,"children":4899},{"style":468},[4900],{"type":49,"value":902},{"type":43,"tag":264,"props":4902,"children":4903},{"style":1054},[4904],{"type":49,"value":4000},{"type":43,"tag":264,"props":4906,"children":4907},{"style":474},[4908],{"type":49,"value":3252},{"type":43,"tag":264,"props":4910,"children":4911},{"style":468},[4912],{"type":49,"value":938},{"type":43,"tag":264,"props":4914,"children":4915},{"class":266,"line":792},[4916,4920,4924,4928,4932,4936],{"type":43,"tag":264,"props":4917,"children":4918},{"style":468},[4919],{"type":49,"value":4050},{"type":43,"tag":264,"props":4921,"children":4922},{"style":2623},[4923],{"type":49,"value":4055},{"type":43,"tag":264,"props":4925,"children":4926},{"style":474},[4927],{"type":49,"value":2935},{"type":43,"tag":264,"props":4929,"children":4930},{"style":548},[4931],{"type":49,"value":4064},{"type":43,"tag":264,"props":4933,"children":4934},{"style":474},[4935],{"type":49,"value":3873},{"type":43,"tag":264,"props":4937,"children":4938},{"style":468},[4939],{"type":49,"value":2636},{"type":43,"tag":264,"props":4941,"children":4942},{"class":266,"line":1075},[4943,4947,4951,4955,4959,4964,4969,4973,4978,4982,4986,4990,4994],{"type":43,"tag":264,"props":4944,"children":4945},{"style":2623},[4946],{"type":49,"value":3845},{"type":43,"tag":264,"props":4948,"children":4949},{"style":474},[4950],{"type":49,"value":2935},{"type":43,"tag":264,"props":4952,"children":4953},{"style":548},[4954],{"type":49,"value":4064},{"type":43,"tag":264,"props":4956,"children":4957},{"style":468},[4958],{"type":49,"value":902},{"type":43,"tag":264,"props":4960,"children":4961},{"style":548},[4962],{"type":49,"value":4963},"name",{"type":43,"tag":264,"props":4965,"children":4966},{"style":468},[4967],{"type":49,"value":4968}," !==",{"type":43,"tag":264,"props":4970,"children":4971},{"style":468},[4972],{"type":49,"value":3692},{"type":43,"tag":264,"props":4974,"children":4975},{"style":496},[4976],{"type":49,"value":4977},"AbortError",{"type":43,"tag":264,"props":4979,"children":4980},{"style":468},[4981],{"type":49,"value":3292},{"type":43,"tag":264,"props":4983,"children":4984},{"style":474},[4985],{"type":49,"value":3873},{"type":43,"tag":264,"props":4987,"children":4988},{"style":2623},[4989],{"type":49,"value":3878},{"type":43,"tag":264,"props":4991,"children":4992},{"style":548},[4993],{"type":49,"value":4115},{"type":43,"tag":264,"props":4995,"children":4996},{"style":468},[4997],{"type":49,"value":938},{"type":43,"tag":264,"props":4999,"children":5000},{"class":266,"line":1083},[5001,5005],{"type":43,"tag":264,"props":5002,"children":5003},{"style":2623},[5004],{"type":49,"value":4888},{"type":43,"tag":264,"props":5006,"children":5007},{"style":468},[5008],{"type":49,"value":4599},{"type":43,"tag":264,"props":5010,"children":5011},{"class":266,"line":1125},[5012],{"type":43,"tag":264,"props":5013,"children":5014},{"style":468},[5015],{"type":49,"value":4182},{"type":43,"tag":264,"props":5017,"children":5018},{"class":266,"line":1187},[5019],{"type":43,"tag":264,"props":5020,"children":5021},{"style":468},[5022],{"type":49,"value":1001},{"type":43,"tag":264,"props":5024,"children":5025},{"class":266,"line":1237},[5026],{"type":43,"tag":264,"props":5027,"children":5028},{"emptyLinePlaceholder":315},[5029],{"type":49,"value":318},{"type":43,"tag":264,"props":5031,"children":5032},{"class":266,"line":1245},[5033,5037,5041],{"type":43,"tag":264,"props":5034,"children":5035},{"style":474},[5036],{"type":49,"value":3409},{"type":43,"tag":264,"props":5038,"children":5039},{"style":468},[5040],{"type":49,"value":3252},{"type":43,"tag":264,"props":5042,"children":5043},{"style":468},[5044],{"type":49,"value":913},{"type":43,"tag":264,"props":5046,"children":5047},{"class":266,"line":1253},[5048,5052,5056,5060,5064,5068],{"type":43,"tag":264,"props":5049,"children":5050},{"style":468},[5051],{"type":49,"value":3264},{"type":43,"tag":264,"props":5053,"children":5054},{"style":548},[5055],{"type":49,"value":4647},{"type":43,"tag":264,"props":5057,"children":5058},{"style":468},[5059],{"type":49,"value":3325},{"type":43,"tag":264,"props":5061,"children":5062},{"style":1054},[5063],{"type":49,"value":4656},{"type":43,"tag":264,"props":5065,"children":5066},{"style":474},[5067],{"type":49,"value":3252},{"type":43,"tag":264,"props":5069,"children":5070},{"style":468},[5071],{"type":49,"value":938},{"type":43,"tag":264,"props":5073,"children":5074},{"class":266,"line":1262},[5075],{"type":43,"tag":264,"props":5076,"children":5077},{"style":468},[5078],{"type":49,"value":1001},{"type":43,"tag":264,"props":5080,"children":5081},{"class":266,"line":26},[5082],{"type":43,"tag":264,"props":5083,"children":5084},{"style":468},[5085],{"type":49,"value":1009},{"type":43,"tag":121,"props":5087,"children":5089},{"id":5088},"component-communication",[5090],{"type":49,"value":5091},"Component Communication",{"type":43,"tag":227,"props":5093,"children":5094},{},[5095,5100],{"type":43,"tag":67,"props":5096,"children":5097},{},[5098],{"type":49,"value":5099},"Parent → Child:",{"type":49,"value":5101}," Call public methods",{"type":43,"tag":253,"props":5103,"children":5105},{"className":3207,"code":5104,"language":18,"meta":258,"style":258},"this.querySelector('child-component')?.publicMethod(data);\n",[5106],{"type":43,"tag":167,"props":5107,"children":5108},{"__ignoreMap":258},[5109],{"type":43,"tag":264,"props":5110,"children":5111},{"class":266,"line":267},[5112,5117,5121,5125,5129,5134,5138,5142,5146,5151,5156],{"type":43,"tag":264,"props":5113,"children":5114},{"style":468},[5115],{"type":49,"value":5116},"this.",{"type":43,"tag":264,"props":5118,"children":5119},{"style":1054},[5120],{"type":49,"value":3283},{"type":43,"tag":264,"props":5122,"children":5123},{"style":548},[5124],{"type":49,"value":1062},{"type":43,"tag":264,"props":5126,"children":5127},{"style":468},[5128],{"type":49,"value":3292},{"type":43,"tag":264,"props":5130,"children":5131},{"style":496},[5132],{"type":49,"value":5133},"child-component",{"type":43,"tag":264,"props":5135,"children":5136},{"style":468},[5137],{"type":49,"value":3292},{"type":43,"tag":264,"props":5139,"children":5140},{"style":548},[5141],{"type":49,"value":2954},{"type":43,"tag":264,"props":5143,"children":5144},{"style":468},[5145],{"type":49,"value":3325},{"type":43,"tag":264,"props":5147,"children":5148},{"style":1054},[5149],{"type":49,"value":5150},"publicMethod",{"type":43,"tag":264,"props":5152,"children":5153},{"style":548},[5154],{"type":49,"value":5155},"(data)",{"type":43,"tag":264,"props":5157,"children":5158},{"style":468},[5159],{"type":49,"value":938},{"type":43,"tag":227,"props":5161,"children":5162},{},[5163,5168],{"type":43,"tag":67,"props":5164,"children":5165},{},[5166],{"type":49,"value":5167},"Child → Parent:",{"type":49,"value":5169}," Dispatch custom events",{"type":43,"tag":253,"props":5171,"children":5173},{"className":3207,"code":5172,"language":18,"meta":258,"style":258},"this.dispatchEvent(new CustomEvent('child:action', {\n  detail: { value },\n  bubbles: true\n}));\n",[5174],{"type":43,"tag":167,"props":5175,"children":5176},{"__ignoreMap":258},[5177,5225,5251,5267],{"type":43,"tag":264,"props":5178,"children":5179},{"class":266,"line":267},[5180,5184,5188,5192,5196,5200,5204,5208,5213,5217,5221],{"type":43,"tag":264,"props":5181,"children":5182},{"style":468},[5183],{"type":49,"value":5116},{"type":43,"tag":264,"props":5185,"children":5186},{"style":1054},[5187],{"type":49,"value":3932},{"type":43,"tag":264,"props":5189,"children":5190},{"style":548},[5191],{"type":49,"value":1062},{"type":43,"tag":264,"props":5193,"children":5194},{"style":468},[5195],{"type":49,"value":3941},{"type":43,"tag":264,"props":5197,"children":5198},{"style":1054},[5199],{"type":49,"value":3946},{"type":43,"tag":264,"props":5201,"children":5202},{"style":548},[5203],{"type":49,"value":1062},{"type":43,"tag":264,"props":5205,"children":5206},{"style":468},[5207],{"type":49,"value":3292},{"type":43,"tag":264,"props":5209,"children":5210},{"style":496},[5211],{"type":49,"value":5212},"child:action",{"type":43,"tag":264,"props":5214,"children":5215},{"style":468},[5216],{"type":49,"value":3292},{"type":43,"tag":264,"props":5218,"children":5219},{"style":468},[5220],{"type":49,"value":2744},{"type":43,"tag":264,"props":5222,"children":5223},{"style":468},[5224],{"type":49,"value":913},{"type":43,"tag":264,"props":5226,"children":5227},{"class":266,"line":276},[5228,5233,5237,5241,5246],{"type":43,"tag":264,"props":5229,"children":5230},{"style":474},[5231],{"type":49,"value":5232},"  detail",{"type":43,"tag":264,"props":5234,"children":5235},{"style":468},[5236],{"type":49,"value":927},{"type":43,"tag":264,"props":5238,"children":5239},{"style":468},[5240],{"type":49,"value":1144},{"type":43,"tag":264,"props":5242,"children":5243},{"style":548},[5244],{"type":49,"value":5245}," value ",{"type":43,"tag":264,"props":5247,"children":5248},{"style":468},[5249],{"type":49,"value":5250},"},\n",{"type":43,"tag":264,"props":5252,"children":5253},{"class":266,"line":285},[5254,5259,5263],{"type":43,"tag":264,"props":5255,"children":5256},{"style":474},[5257],{"type":49,"value":5258},"  bubbles",{"type":43,"tag":264,"props":5260,"children":5261},{"style":468},[5262],{"type":49,"value":927},{"type":43,"tag":264,"props":5264,"children":5265},{"style":3526},[5266],{"type":49,"value":4025},{"type":43,"tag":264,"props":5268,"children":5269},{"class":266,"line":30},[5270,5274,5278],{"type":43,"tag":264,"props":5271,"children":5272},{"style":468},[5273],{"type":49,"value":1379},{"type":43,"tag":264,"props":5275,"children":5276},{"style":548},[5277],{"type":49,"value":3383},{"type":43,"tag":264,"props":5279,"children":5280},{"style":468},[5281],{"type":49,"value":938},{"type":43,"tag":52,"props":5283,"children":5285},{"id":5284},"html-standards",[5286],{"type":49,"value":5287},"HTML Standards",{"type":43,"tag":121,"props":5289,"children":5291},{"id":5290},"native-elements-first",[5292],{"type":49,"value":5293},"Native Elements First",{"type":43,"tag":128,"props":5295,"children":5296},{},[5297,5318],{"type":43,"tag":132,"props":5298,"children":5299},{},[5300],{"type":43,"tag":136,"props":5301,"children":5302},{},[5303,5308,5313],{"type":43,"tag":140,"props":5304,"children":5305},{},[5306],{"type":49,"value":5307},"Need",{"type":43,"tag":140,"props":5309,"children":5310},{},[5311],{"type":49,"value":5312},"Use",{"type":43,"tag":140,"props":5314,"children":5315},{},[5316],{"type":49,"value":5317},"Not",{"type":43,"tag":156,"props":5319,"children":5320},{},[5321,5343,5365,5389,5415],{"type":43,"tag":136,"props":5322,"children":5323},{},[5324,5329,5338],{"type":43,"tag":163,"props":5325,"children":5326},{},[5327],{"type":49,"value":5328},"Expandable",{"type":43,"tag":163,"props":5330,"children":5331},{},[5332],{"type":43,"tag":167,"props":5333,"children":5335},{"className":5334},[],[5336],{"type":49,"value":5337},"\u003Cdetails>\u002F\u003Csummary>",{"type":43,"tag":163,"props":5339,"children":5340},{},[5341],{"type":49,"value":5342},"Custom accordion with JS",{"type":43,"tag":136,"props":5344,"children":5345},{},[5346,5351,5360],{"type":43,"tag":163,"props":5347,"children":5348},{},[5349],{"type":49,"value":5350},"Dialog\u002Fmodal",{"type":43,"tag":163,"props":5352,"children":5353},{},[5354],{"type":43,"tag":167,"props":5355,"children":5357},{"className":5356},[],[5358],{"type":49,"value":5359},"\u003Cdialog>",{"type":43,"tag":163,"props":5361,"children":5362},{},[5363],{"type":49,"value":5364},"Custom overlay div",{"type":43,"tag":136,"props":5366,"children":5367},{},[5368,5373,5384],{"type":43,"tag":163,"props":5369,"children":5370},{},[5371],{"type":49,"value":5372},"Tooltip\u002Fpopup",{"type":43,"tag":163,"props":5374,"children":5375},{},[5376,5382],{"type":43,"tag":167,"props":5377,"children":5379},{"className":5378},[],[5380],{"type":49,"value":5381},"popover",{"type":49,"value":5383}," attribute",{"type":43,"tag":163,"props":5385,"children":5386},{},[5387],{"type":49,"value":5388},"Custom positioned div",{"type":43,"tag":136,"props":5390,"children":5391},{},[5392,5397,5406],{"type":43,"tag":163,"props":5393,"children":5394},{},[5395],{"type":49,"value":5396},"Search form",{"type":43,"tag":163,"props":5398,"children":5399},{},[5400],{"type":43,"tag":167,"props":5401,"children":5403},{"className":5402},[],[5404],{"type":49,"value":5405},"\u003Csearch>",{"type":43,"tag":163,"props":5407,"children":5408},{},[5409],{"type":43,"tag":167,"props":5410,"children":5412},{"className":5411},[],[5413],{"type":49,"value":5414},"\u003Cdiv class=\"search\">",{"type":43,"tag":136,"props":5416,"children":5417},{},[5418,5423,5432],{"type":43,"tag":163,"props":5419,"children":5420},{},[5421],{"type":49,"value":5422},"Form results",{"type":43,"tag":163,"props":5424,"children":5425},{},[5426],{"type":43,"tag":167,"props":5427,"children":5429},{"className":5428},[],[5430],{"type":49,"value":5431},"\u003Coutput>",{"type":43,"tag":163,"props":5433,"children":5434},{},[5435],{"type":43,"tag":167,"props":5436,"children":5438},{"className":5437},[],[5439],{"type":49,"value":5440},"\u003Cspan class=\"result\">",{"type":43,"tag":121,"props":5442,"children":5444},{"id":5443},"progressive-enhancement",[5445],{"type":49,"value":5446},"Progressive Enhancement",{"type":43,"tag":253,"props":5448,"children":5450},{"className":255,"code":5449,"language":257,"meta":258,"style":258},"{%- comment -%} Works without JS {%- endcomment -%}\n\u003Cdetails class=\"accordion\">\n  \u003Csummary>{{ block.settings.heading }}\u003C\u002Fsummary>\n  \u003Cdiv class=\"accordion__content\">\n    {{ block.settings.content }}\n  \u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n{%- comment -%} Enhanced with JS {%- endcomment -%}\n{% javascript %}\n  \u002F\u002F Optional: smooth animation, analytics tracking\n{% endjavascript %}\n",[5451],{"type":43,"tag":167,"props":5452,"children":5453},{"__ignoreMap":258},[5454,5462,5470,5478,5486,5494,5502,5510,5517,5525,5533,5541],{"type":43,"tag":264,"props":5455,"children":5456},{"class":266,"line":267},[5457],{"type":43,"tag":264,"props":5458,"children":5459},{},[5460],{"type":49,"value":5461},"{%- comment -%} Works without JS {%- endcomment -%}\n",{"type":43,"tag":264,"props":5463,"children":5464},{"class":266,"line":276},[5465],{"type":43,"tag":264,"props":5466,"children":5467},{},[5468],{"type":49,"value":5469},"\u003Cdetails class=\"accordion\">\n",{"type":43,"tag":264,"props":5471,"children":5472},{"class":266,"line":285},[5473],{"type":43,"tag":264,"props":5474,"children":5475},{},[5476],{"type":49,"value":5477},"  \u003Csummary>{{ block.settings.heading }}\u003C\u002Fsummary>\n",{"type":43,"tag":264,"props":5479,"children":5480},{"class":266,"line":30},[5481],{"type":43,"tag":264,"props":5482,"children":5483},{},[5484],{"type":49,"value":5485},"  \u003Cdiv class=\"accordion__content\">\n",{"type":43,"tag":264,"props":5487,"children":5488},{"class":266,"line":302},[5489],{"type":43,"tag":264,"props":5490,"children":5491},{},[5492],{"type":49,"value":5493},"    {{ block.settings.content }}\n",{"type":43,"tag":264,"props":5495,"children":5496},{"class":266,"line":311},[5497],{"type":43,"tag":264,"props":5498,"children":5499},{},[5500],{"type":49,"value":5501},"  \u003C\u002Fdiv>\n",{"type":43,"tag":264,"props":5503,"children":5504},{"class":266,"line":321},[5505],{"type":43,"tag":264,"props":5506,"children":5507},{},[5508],{"type":49,"value":5509},"\u003C\u002Fdetails>\n",{"type":43,"tag":264,"props":5511,"children":5512},{"class":266,"line":330},[5513],{"type":43,"tag":264,"props":5514,"children":5515},{"emptyLinePlaceholder":315},[5516],{"type":49,"value":318},{"type":43,"tag":264,"props":5518,"children":5519},{"class":266,"line":339},[5520],{"type":43,"tag":264,"props":5521,"children":5522},{},[5523],{"type":49,"value":5524},"{%- comment -%} Enhanced with JS {%- endcomment -%}\n",{"type":43,"tag":264,"props":5526,"children":5527},{"class":266,"line":348},[5528],{"type":43,"tag":264,"props":5529,"children":5530},{},[5531],{"type":49,"value":5532},"{% javascript %}\n",{"type":43,"tag":264,"props":5534,"children":5535},{"class":266,"line":775},[5536],{"type":43,"tag":264,"props":5537,"children":5538},{},[5539],{"type":49,"value":5540},"  \u002F\u002F Optional: smooth animation, analytics tracking\n",{"type":43,"tag":264,"props":5542,"children":5543},{"class":266,"line":792},[5544],{"type":43,"tag":264,"props":5545,"children":5546},{},[5547],{"type":49,"value":5548},"{% endjavascript %}\n",{"type":43,"tag":121,"props":5550,"children":5552},{"id":5551},"images",[5553],{"type":49,"value":5554},"Images",{"type":43,"tag":253,"props":5556,"children":5558},{"className":255,"code":5557,"language":257,"meta":258,"style":258},"{{ image | image_url: width: 800 | image_tag:\n  loading: 'lazy',\n  alt: image.alt | escape,\n  width: image.width,\n  height: image.height\n}}\n",[5559],{"type":43,"tag":167,"props":5560,"children":5561},{"__ignoreMap":258},[5562,5570,5578,5586,5594,5602],{"type":43,"tag":264,"props":5563,"children":5564},{"class":266,"line":267},[5565],{"type":43,"tag":264,"props":5566,"children":5567},{},[5568],{"type":49,"value":5569},"{{ image | image_url: width: 800 | image_tag:\n",{"type":43,"tag":264,"props":5571,"children":5572},{"class":266,"line":276},[5573],{"type":43,"tag":264,"props":5574,"children":5575},{},[5576],{"type":49,"value":5577},"  loading: 'lazy',\n",{"type":43,"tag":264,"props":5579,"children":5580},{"class":266,"line":285},[5581],{"type":43,"tag":264,"props":5582,"children":5583},{},[5584],{"type":49,"value":5585},"  alt: image.alt | escape,\n",{"type":43,"tag":264,"props":5587,"children":5588},{"class":266,"line":30},[5589],{"type":43,"tag":264,"props":5590,"children":5591},{},[5592],{"type":49,"value":5593},"  width: image.width,\n",{"type":43,"tag":264,"props":5595,"children":5596},{"class":266,"line":302},[5597],{"type":43,"tag":264,"props":5598,"children":5599},{},[5600],{"type":49,"value":5601},"  height: image.height\n",{"type":43,"tag":264,"props":5603,"children":5604},{"class":266,"line":311},[5605],{"type":43,"tag":264,"props":5606,"children":5607},{},[5608],{"type":49,"value":5609},"}}\n",{"type":43,"tag":380,"props":5611,"children":5612},{},[5613,5624,5643],{"type":43,"tag":63,"props":5614,"children":5615},{},[5616,5622],{"type":43,"tag":167,"props":5617,"children":5619},{"className":5618},[],[5620],{"type":49,"value":5621},"loading=\"lazy\"",{"type":49,"value":5623}," on all below-fold images",{"type":43,"tag":63,"props":5625,"children":5626},{},[5627,5629,5634,5635,5641],{"type":49,"value":5628},"Always set ",{"type":43,"tag":167,"props":5630,"children":5632},{"className":5631},[],[5633],{"type":49,"value":2073},{"type":49,"value":2858},{"type":43,"tag":167,"props":5636,"children":5638},{"className":5637},[],[5639],{"type":49,"value":5640},"height",{"type":49,"value":5642}," to prevent layout shift",{"type":43,"tag":63,"props":5644,"children":5645},{},[5646,5648,5654,5656,5662],{"type":49,"value":5647},"Descriptive ",{"type":43,"tag":167,"props":5649,"children":5651},{"className":5650},[],[5652],{"type":49,"value":5653},"alt",{"type":49,"value":5655}," text; empty ",{"type":43,"tag":167,"props":5657,"children":5659},{"className":5658},[],[5660],{"type":49,"value":5661},"alt=\"\"",{"type":49,"value":5663}," for decorative images",{"type":43,"tag":52,"props":5665,"children":5667},{"id":5666},"json-template-config-files",[5668],{"type":49,"value":5669},"JSON Template & Config Files",{"type":43,"tag":227,"props":5671,"children":5672},{},[5673,5675,5681,5683,5689,5691,5697,5699,5705,5707,5713],{"type":49,"value":5674},"Theme templates (",{"type":43,"tag":167,"props":5676,"children":5678},{"className":5677},[],[5679],{"type":49,"value":5680},"templates\u002F*.json",{"type":49,"value":5682},"), section groups (",{"type":43,"tag":167,"props":5684,"children":5686},{"className":5685},[],[5687],{"type":49,"value":5688},"sections\u002F*.json",{"type":49,"value":5690},"), and config files (",{"type":43,"tag":167,"props":5692,"children":5694},{"className":5693},[],[5695],{"type":49,"value":5696},"config\u002Fsettings_data.json",{"type":49,"value":5698},") are all JSON. Use ",{"type":43,"tag":167,"props":5700,"children":5702},{"className":5701},[],[5703],{"type":49,"value":5704},"jq",{"type":49,"value":5706}," via the ",{"type":43,"tag":167,"props":5708,"children":5710},{"className":5709},[],[5711],{"type":49,"value":5712},"bash",{"type":49,"value":5714}," tool to make surgical edits — it's safer and more reliable than string-based find-and-replace for structured data.",{"type":43,"tag":121,"props":5716,"children":5718},{"id":5717},"common-patterns",[5719],{"type":49,"value":5720},"Common patterns",{"type":43,"tag":253,"props":5722,"children":5725},{"className":5723,"code":5724,"language":5712,"meta":258,"style":258},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Add a section to a template\njq '.sections.new_section = {\"type\": \"hero\", \"settings\": {\"heading\": \"Welcome\"}}' templates\u002Findex.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout templates\u002Findex.json\n\n# Update a setting value\njq '.current.sections.header.settings.logo_width = 200' config\u002Fsettings_data.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout config\u002Fsettings_data.json\n\n# Reorder sections\njq '.order += [\"new_section\"]' templates\u002Findex.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout templates\u002Findex.json\n\n# Remove a section\njq 'del(.sections.old_banner) | .order -= [\"old_banner\"]' templates\u002Findex.json > \u002Ftmp\u002Fout && mv \u002Ftmp\u002Fout templates\u002Findex.json\n\n# Read a nested value\njq '.sections.header.settings' templates\u002Findex.json\n",[5726],{"type":43,"tag":167,"props":5727,"children":5728},{"__ignoreMap":258},[5729,5737,5791,5798,5806,5856,5863,5871,5919,5926,5934,5982,5989,5997],{"type":43,"tag":264,"props":5730,"children":5731},{"class":266,"line":267},[5732],{"type":43,"tag":264,"props":5733,"children":5734},{"style":459},[5735],{"type":49,"value":5736},"# Add a section to a template\n",{"type":43,"tag":264,"props":5738,"children":5739},{"class":266,"line":276},[5740,5744,5748,5753,5757,5762,5767,5772,5777,5782,5786],{"type":43,"tag":264,"props":5741,"children":5742},{"style":905},[5743],{"type":49,"value":5704},{"type":43,"tag":264,"props":5745,"children":5746},{"style":468},[5747],{"type":49,"value":3692},{"type":43,"tag":264,"props":5749,"children":5750},{"style":496},[5751],{"type":49,"value":5752},".sections.new_section = {\"type\": \"hero\", \"settings\": {\"heading\": \"Welcome\"}}",{"type":43,"tag":264,"props":5754,"children":5755},{"style":468},[5756],{"type":49,"value":3292},{"type":43,"tag":264,"props":5758,"children":5759},{"style":496},[5760],{"type":49,"value":5761}," templates\u002Findex.json",{"type":43,"tag":264,"props":5763,"children":5764},{"style":468},[5765],{"type":49,"value":5766}," >",{"type":43,"tag":264,"props":5768,"children":5769},{"style":496},[5770],{"type":49,"value":5771}," \u002Ftmp\u002Fout",{"type":43,"tag":264,"props":5773,"children":5774},{"style":468},[5775],{"type":49,"value":5776}," &&",{"type":43,"tag":264,"props":5778,"children":5779},{"style":905},[5780],{"type":49,"value":5781}," mv",{"type":43,"tag":264,"props":5783,"children":5784},{"style":496},[5785],{"type":49,"value":5771},{"type":43,"tag":264,"props":5787,"children":5788},{"style":496},[5789],{"type":49,"value":5790}," templates\u002Findex.json\n",{"type":43,"tag":264,"props":5792,"children":5793},{"class":266,"line":285},[5794],{"type":43,"tag":264,"props":5795,"children":5796},{"emptyLinePlaceholder":315},[5797],{"type":49,"value":318},{"type":43,"tag":264,"props":5799,"children":5800},{"class":266,"line":30},[5801],{"type":43,"tag":264,"props":5802,"children":5803},{"style":459},[5804],{"type":49,"value":5805},"# Update a setting value\n",{"type":43,"tag":264,"props":5807,"children":5808},{"class":266,"line":302},[5809,5813,5817,5822,5826,5831,5835,5839,5843,5847,5851],{"type":43,"tag":264,"props":5810,"children":5811},{"style":905},[5812],{"type":49,"value":5704},{"type":43,"tag":264,"props":5814,"children":5815},{"style":468},[5816],{"type":49,"value":3692},{"type":43,"tag":264,"props":5818,"children":5819},{"style":496},[5820],{"type":49,"value":5821},".current.sections.header.settings.logo_width = 200",{"type":43,"tag":264,"props":5823,"children":5824},{"style":468},[5825],{"type":49,"value":3292},{"type":43,"tag":264,"props":5827,"children":5828},{"style":496},[5829],{"type":49,"value":5830}," config\u002Fsettings_data.json",{"type":43,"tag":264,"props":5832,"children":5833},{"style":468},[5834],{"type":49,"value":5766},{"type":43,"tag":264,"props":5836,"children":5837},{"style":496},[5838],{"type":49,"value":5771},{"type":43,"tag":264,"props":5840,"children":5841},{"style":468},[5842],{"type":49,"value":5776},{"type":43,"tag":264,"props":5844,"children":5845},{"style":905},[5846],{"type":49,"value":5781},{"type":43,"tag":264,"props":5848,"children":5849},{"style":496},[5850],{"type":49,"value":5771},{"type":43,"tag":264,"props":5852,"children":5853},{"style":496},[5854],{"type":49,"value":5855}," config\u002Fsettings_data.json\n",{"type":43,"tag":264,"props":5857,"children":5858},{"class":266,"line":311},[5859],{"type":43,"tag":264,"props":5860,"children":5861},{"emptyLinePlaceholder":315},[5862],{"type":49,"value":318},{"type":43,"tag":264,"props":5864,"children":5865},{"class":266,"line":321},[5866],{"type":43,"tag":264,"props":5867,"children":5868},{"style":459},[5869],{"type":49,"value":5870},"# Reorder sections\n",{"type":43,"tag":264,"props":5872,"children":5873},{"class":266,"line":330},[5874,5878,5882,5887,5891,5895,5899,5903,5907,5911,5915],{"type":43,"tag":264,"props":5875,"children":5876},{"style":905},[5877],{"type":49,"value":5704},{"type":43,"tag":264,"props":5879,"children":5880},{"style":468},[5881],{"type":49,"value":3692},{"type":43,"tag":264,"props":5883,"children":5884},{"style":496},[5885],{"type":49,"value":5886},".order += [\"new_section\"]",{"type":43,"tag":264,"props":5888,"children":5889},{"style":468},[5890],{"type":49,"value":3292},{"type":43,"tag":264,"props":5892,"children":5893},{"style":496},[5894],{"type":49,"value":5761},{"type":43,"tag":264,"props":5896,"children":5897},{"style":468},[5898],{"type":49,"value":5766},{"type":43,"tag":264,"props":5900,"children":5901},{"style":496},[5902],{"type":49,"value":5771},{"type":43,"tag":264,"props":5904,"children":5905},{"style":468},[5906],{"type":49,"value":5776},{"type":43,"tag":264,"props":5908,"children":5909},{"style":905},[5910],{"type":49,"value":5781},{"type":43,"tag":264,"props":5912,"children":5913},{"style":496},[5914],{"type":49,"value":5771},{"type":43,"tag":264,"props":5916,"children":5917},{"style":496},[5918],{"type":49,"value":5790},{"type":43,"tag":264,"props":5920,"children":5921},{"class":266,"line":339},[5922],{"type":43,"tag":264,"props":5923,"children":5924},{"emptyLinePlaceholder":315},[5925],{"type":49,"value":318},{"type":43,"tag":264,"props":5927,"children":5928},{"class":266,"line":348},[5929],{"type":43,"tag":264,"props":5930,"children":5931},{"style":459},[5932],{"type":49,"value":5933},"# Remove a section\n",{"type":43,"tag":264,"props":5935,"children":5936},{"class":266,"line":775},[5937,5941,5945,5950,5954,5958,5962,5966,5970,5974,5978],{"type":43,"tag":264,"props":5938,"children":5939},{"style":905},[5940],{"type":49,"value":5704},{"type":43,"tag":264,"props":5942,"children":5943},{"style":468},[5944],{"type":49,"value":3692},{"type":43,"tag":264,"props":5946,"children":5947},{"style":496},[5948],{"type":49,"value":5949},"del(.sections.old_banner) | .order -= [\"old_banner\"]",{"type":43,"tag":264,"props":5951,"children":5952},{"style":468},[5953],{"type":49,"value":3292},{"type":43,"tag":264,"props":5955,"children":5956},{"style":496},[5957],{"type":49,"value":5761},{"type":43,"tag":264,"props":5959,"children":5960},{"style":468},[5961],{"type":49,"value":5766},{"type":43,"tag":264,"props":5963,"children":5964},{"style":496},[5965],{"type":49,"value":5771},{"type":43,"tag":264,"props":5967,"children":5968},{"style":468},[5969],{"type":49,"value":5776},{"type":43,"tag":264,"props":5971,"children":5972},{"style":905},[5973],{"type":49,"value":5781},{"type":43,"tag":264,"props":5975,"children":5976},{"style":496},[5977],{"type":49,"value":5771},{"type":43,"tag":264,"props":5979,"children":5980},{"style":496},[5981],{"type":49,"value":5790},{"type":43,"tag":264,"props":5983,"children":5984},{"class":266,"line":792},[5985],{"type":43,"tag":264,"props":5986,"children":5987},{"emptyLinePlaceholder":315},[5988],{"type":49,"value":318},{"type":43,"tag":264,"props":5990,"children":5991},{"class":266,"line":1075},[5992],{"type":43,"tag":264,"props":5993,"children":5994},{"style":459},[5995],{"type":49,"value":5996},"# Read a nested value\n",{"type":43,"tag":264,"props":5998,"children":5999},{"class":266,"line":1083},[6000,6004,6008,6013,6017],{"type":43,"tag":264,"props":6001,"children":6002},{"style":905},[6003],{"type":49,"value":5704},{"type":43,"tag":264,"props":6005,"children":6006},{"style":468},[6007],{"type":49,"value":3692},{"type":43,"tag":264,"props":6009,"children":6010},{"style":496},[6011],{"type":49,"value":6012},".sections.header.settings",{"type":43,"tag":264,"props":6014,"children":6015},{"style":468},[6016],{"type":49,"value":3292},{"type":43,"tag":264,"props":6018,"children":6019},{"style":496},[6020],{"type":49,"value":5790},{"type":43,"tag":227,"props":6022,"children":6023},{},[6024,6042,6044,6050],{"type":43,"tag":67,"props":6025,"children":6026},{},[6027,6029,6034,6036],{"type":49,"value":6028},"Prefer ",{"type":43,"tag":167,"props":6030,"children":6032},{"className":6031},[],[6033],{"type":49,"value":5704},{"type":49,"value":6035}," over ",{"type":43,"tag":167,"props":6037,"children":6039},{"className":6038},[],[6040],{"type":49,"value":6041},"edit",{"type":49,"value":6043}," for any ",{"type":43,"tag":167,"props":6045,"children":6047},{"className":6046},[],[6048],{"type":49,"value":6049},".json",{"type":49,"value":6051}," file modification — it validates structure, handles escaping, and avoids whitespace\u002Fformatting issues.",{"type":43,"tag":52,"props":6053,"children":6055},{"id":6054},"references",[6056],{"type":49,"value":6057},"References",{"type":43,"tag":380,"props":6059,"children":6060},{},[6061,6071],{"type":43,"tag":63,"props":6062,"children":6063},{},[6064],{"type":43,"tag":6065,"props":6066,"children":6068},"a",{"href":6067},"references\u002Fcss-patterns.md",[6069],{"type":49,"value":6070},"CSS patterns and examples",{"type":43,"tag":63,"props":6072,"children":6073},{},[6074],{"type":43,"tag":6065,"props":6075,"children":6077},{"href":6076},"references\u002Fjavascript-patterns.md",[6078],{"type":49,"value":6079},"JavaScript patterns and examples",{"type":43,"tag":249,"props":6081,"children":6082},{},[6083],{"type":49,"value":6084},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":6086,"total":1342},[6087,6106,6121,6133,6143,6157,6169,6181,6191,6203,6213,6223],{"slug":6088,"name":6088,"fn":6089,"description":6090,"org":6091,"tags":6092,"stars":6103,"repoUrl":6104,"updatedAt":6105},"shopify-admin","generate Shopify Admin GraphQL queries","Write or explain **Admin GraphQL** queries and mutations for apps and integrations that extend the Shopify admin. Use when the user wants to **understand, design, or generate** the operation itself—even before deciding how to run it. Do **not** choose `admin` first for **app or extension config validation** —use **`use-shopify-cli`**. Do **not** choose `admin` first to **execute** Admin GraphQL **now via Shopify CLI** or for CLI setup\u002Ftroubleshooting on store workflows—use **`use-shopify-cli`** (store auth\u002Fexecute, handle\u002FSKU\u002Flocation lookups, inventory changes).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6093,6096,6099,6102],{"name":6094,"slug":6095,"type":15},"API Development","api-development",{"name":6097,"slug":6098,"type":15},"E-commerce","e-commerce",{"name":6100,"slug":6101,"type":15},"GraphQL","graphql",{"name":9,"slug":8,"type":15},446,"https:\u002F\u002Fgithub.com\u002FShopify\u002FShopify-AI-Toolkit","2026-07-29T05:40:06.767371",{"slug":6107,"name":6107,"fn":6108,"description":6109,"org":6110,"tags":6111,"stars":6103,"repoUrl":6104,"updatedAt":6120},"shopify-app-store-review","review Shopify apps for store compliance","Run a pre-submission compliance check against your Shopify app's codebase. Reviews App Store requirements and surfaces likely issues before you submit for official review.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6112,6115,6116,6119],{"name":6113,"slug":6114,"type":15},"Compliance","compliance",{"name":6097,"slug":6098,"type":15},{"name":6117,"slug":6118,"type":15},"QA","qa",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:08.79575",{"slug":6122,"name":6122,"fn":6123,"description":6124,"org":6125,"tags":6126,"stars":6103,"repoUrl":6104,"updatedAt":6132},"shopify-custom-data","model and store custom Shopify data","MUST be used first when prompts mention Metafields or Metaobjects. Use Metafields and Metaobjects to model and store custom data for your app. Metafields extend built-in Shopify data types like products or customers, Metaobjects are custom data types that can be used to store bespoke data structures. Metafield and Metaobject definitions provide a schema and configuration for values to follow.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6127,6130,6131],{"name":6128,"slug":6129,"type":15},"Data Modeling","data-modeling",{"name":6097,"slug":6098,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:04.773144",{"slug":6134,"name":6134,"fn":6135,"description":6136,"org":6137,"tags":6138,"stars":6103,"repoUrl":6104,"updatedAt":6142},"shopify-customer","access Shopify customer account data","The Customer Account API allows customers to access their own data including orders, payment methods, and addresses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6139,6140,6141],{"name":6094,"slug":6095,"type":15},{"name":6097,"slug":6098,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:07.747374",{"slug":6144,"name":6144,"fn":6145,"description":6146,"org":6147,"tags":6148,"stars":6103,"repoUrl":6104,"updatedAt":6156},"shopify-dev","search Shopify developer documentation","Search Shopify developer documentation across all APIs. Use only when no API-specific skill applies.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6149,6152,6155],{"name":6150,"slug":6151,"type":15},"Documentation","documentation",{"name":6153,"slug":6154,"type":15},"Reference","reference",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:23.768244",{"slug":6158,"name":6158,"fn":6159,"description":6160,"org":6161,"tags":6162,"stars":6103,"repoUrl":6104,"updatedAt":6168},"shopify-functions","customize Shopify backend logic","Shopify Functions allow developers to customize the backend logic that powers parts of Shopify. Available APIs: Discount, Cart and Checkout Validation, Cart Transform, Pickup Point Delivery Option Generator, Delivery Customization, Fulfillment Constraints, Local Pickup Delivery Option Generator, Order Routing Location Rule, Payment Customization",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6163,6166,6167],{"name":6164,"slug":6165,"type":15},"Backend","backend",{"name":6097,"slug":6098,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:05.772104",{"slug":6170,"name":6170,"fn":6171,"description":6172,"org":6173,"tags":6174,"stars":6103,"repoUrl":6104,"updatedAt":6180},"shopify-hydrogen","build Shopify Hydrogen storefronts","Hydrogen storefront implementation cookbooks. Some of the available recipes are: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Legacy Customer Account Flow, Markets, Partytown + Google Tag Manager, Subscriptions, Third-party API Queries and Caching. MANDATORY: Use this API for ANY Hydrogen storefront question - do NOT use Storefront GraphQL when 'Hydrogen' is mentioned.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6175,6176,6179],{"name":6097,"slug":6098,"type":15},{"name":6177,"slug":6178,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:22.922882",{"slug":6182,"name":6182,"fn":6183,"description":6184,"org":6185,"tags":6186,"stars":6103,"repoUrl":6104,"updatedAt":6190},"shopify-liquid","build Shopify themes with Liquid","Liquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6187,6188,6189],{"name":6097,"slug":6098,"type":15},{"name":9,"slug":8,"type":15},{"name":23,"slug":24,"type":15},"2026-07-29T05:40:15.216131",{"slug":6192,"name":6192,"fn":6193,"description":6194,"org":6195,"tags":6196,"stars":6103,"repoUrl":6104,"updatedAt":6202},"shopify-onboarding-dev","scaffold Shopify development projects","Get started building on Shopify. Use when a developer asks to build an app, build a theme, create a dev store, set up a partner account, scaffold a project, or get started developing for Shopify. NOT for merchants managing stores.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6197,6198,6201],{"name":6097,"slug":6098,"type":15},{"name":6199,"slug":6200,"type":15},"Onboarding","onboarding",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:10.774529",{"slug":6204,"name":6204,"fn":6205,"description":6206,"org":6207,"tags":6208,"stars":6103,"repoUrl":6104,"updatedAt":6212},"shopify-onboarding-merchant","connect and manage Shopify stores","Set up and connect a Shopify store from your AI assistant. Use when the user wants to start selling online, open a first Shopify store, try Shopify before they have an account, or get merchant-facing next steps after a preview store is created, including how to keep it, save it, or make it real. This is for store owners — not developers. Preview-store creation for brand-new merchants belongs here via `shopify store create preview`; explicit CLI troubleshooting and named-store command execution belong in **`use-shopify-cli`**.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6209,6210,6211],{"name":6097,"slug":6098,"type":15},{"name":6199,"slug":6200,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:21.780249",{"slug":6214,"name":6214,"fn":6215,"description":6216,"org":6217,"tags":6218,"stars":6103,"repoUrl":6104,"updatedAt":6222},"shopify-partner","access Shopify Partner Dashboard data","The Partner API lets you programmatically access data about your Partner Dashboard, including your apps, themes, and affiliate referrals.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6219,6220,6221],{"name":6094,"slug":6095,"type":15},{"name":6097,"slug":6098,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:20.774076",{"slug":6224,"name":6224,"fn":6225,"description":6226,"org":6227,"tags":6228,"stars":6103,"repoUrl":6104,"updatedAt":6235},"shopify-payments-apps","integrate payment providers with Shopify checkout","The Payments Apps API enables payment providers to integrate their payment solutions with Shopify's checkout.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6229,6230,6231,6234],{"name":6094,"slug":6095,"type":15},{"name":6097,"slug":6098,"type":15},{"name":6232,"slug":6233,"type":15},"Payments","payments",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:15.753592",{"items":6237,"total":285},[6238,6254,6262],{"slug":6239,"name":6239,"fn":6240,"description":6241,"org":6242,"tags":6243,"stars":26,"repoUrl":27,"updatedAt":6253},"liquid-theme-a11y","implement accessibility in Shopify Liquid themes","Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6244,6247,6248,6249,6250],{"name":6245,"slug":6246,"type":15},"Accessibility","accessibility",{"name":6097,"slug":6098,"type":15},{"name":9,"slug":8,"type":15},{"name":23,"slug":24,"type":15},{"name":6251,"slug":6252,"type":15},"WCAG","wcag","2026-07-16T06:02:05.292848",{"slug":4,"name":4,"fn":5,"description":6,"org":6255,"tags":6256,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6257,6258,6259,6260,6261],{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":23,"slug":24,"type":15},{"slug":6263,"name":6263,"fn":6264,"description":6265,"org":6266,"tags":6267,"stars":26,"repoUrl":27,"updatedAt":6272},"shopify-liquid-themes","generate Shopify Liquid theme code","Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS\u002FJS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects\u002Ffilters\u002Ftags.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[6268,6269,6270,6271],{"name":6097,"slug":6098,"type":15},{"name":6177,"slug":6178,"type":15},{"name":9,"slug":8,"type":15},{"name":23,"slug":24,"type":15},"2026-07-16T06:02:06.664972"]