\n {% comment %} Static breadcrumb block {% endcomment %}\n {% content_for 'block', type: 'breadcrumb', id: 'product-breadcrumb' %}\n\n
\n```\n\n**Key Points about Static Blocks:**\n\n- They have a fixed `id` that makes them identifiable in the theme editor\n- Settings can be overridden in the theme editor despite having defaults\n- They appear in the theme editor as locked blocks that can't be removed or reordered\n- Useful for consistent layout elements that should always be present\n- Can be mixed with dynamic block areas using `{% content_for 'blocks' %}`\n\n## Schema Configuration\n\nSee [schemas.mdc](mdc:.cursor/rules/schemas.mdc) for rules on schemas\n\n### Advanced Schema Features\n\n#### Exclude wrapper\n\n```json\n{\n \"tag\": null // No wrapper - must include {{ block.shopify_attributes }} for proper editor function\n}\n```\n\n## Block Implementation Patterns\n\n### Accessing Block Data\n\n**Block Settings:**\n\n```liquid\n{{ block.settings.text }}\n{{ block.settings.heading | escape }}\n{{ block.settings.image | image_url: width: 800 }}\n```\n\n**Block Properties:**\n\n```liquid\n{{ block.id }} // Unique block identifier {{ block.type }} // Block type name {{ block.shopify_attributes }} // Required\nfor theme editor\n```\n\n**Section Context:**\n\n```liquid\n{{ section.id }} // Parent section ID\n{{ section.settings.heading | escape }}\n{{ section.settings.image | image_url: width: 800 }}\n```\n\n## Nested Blocks Implementation\n\n### Critical Constraint: Single `content_for 'blocks'` Per File\n\n**IMPORTANT:** There can only be **ONE** `{% content_for 'blocks' %}` call per Liquid file. If you need to use the blocks content in multiple places (e.g., in conditional branches), you must capture it first:\n\n```liquid\n{% comment %} ✅ CORRECT - Capture once, use multiple times {% endcomment %}\n{% capture blocks_content %}\n {% content_for 'blocks' %}\n{% endcapture %}\n\n{% if condition %}\n \n
\n\n {% comment %} Static related products block {% endcomment %}\n {%\n content_for 'block', type: 'related-products', id: 'related-products', settings: {\n heading: \"You might also like\",\n limit: 4\n }\n %}\n\n {% comment %} Static product gallery block {% endcomment %}\n {%\n content_for 'block', type: 'product-gallery', id: 'main-gallery', settings: {\n enable_zoom: true,\n thumbnails_position: \"bottom\"\n }\n %}\n
\n\n \n {% comment %} Static product info blocks {% endcomment %}\n {% content_for 'block', type: 'product-title', id: 'product-title' %}\n {% content_for 'block', type: 'product-price', id: 'product-price' %}\n {% content_for 'block', type: 'product-form', id: 'product-form' %}\n\n {% comment %} Dynamic blocks area for additional content {% endcomment %}\n
\n \n {% content_for 'blocks' %}\n
\n \n {{ blocks_content }}\n
\n{% else %}\n \n {{ blocks_content }}\n
\n{% endif %}\n```\n\n```liquid\n{% comment %} ❌ INCORRECT - Multiple content_for calls will cause errors {% endcomment %}\n{% if condition %}\n \n {% content_for 'blocks' %}\n \n
\n{% else %}\n \n {% content_for 'blocks' %}\n \n
\n{% endif %}\n```\n\n**Common Error Message:**\n\n```\nLiquid syntax error: Duplicate entries for 'content_for \"blocks\"'\n```\n\n### Rendering Nested Blocks\n\n```liquid\n{{ block.settings.heading | escape }}
\n\n\n {% content_for 'blocks' %}\n
\n\n```\n\n### Nesting with Layout Control\n\n```liquid\n{{ block.settings.heading | escape }}
\n {% endif %}\n\n {% if block.settings.text != blank %}\n{{ block.settings.text }}
\n {% endif %}\n\n {% if block.settings.button_text != blank %}\n \n {{\n block.settings.image\n | image_url: width: 800\n | image_tag: alt: block.settings.image.alt\n | default: block.settings.alt_text\n }}\n
\n {% endif %}\n\n {% if block.settings.video %}\n \n {{ block.settings.video | video_tag: controls: true }}\n
\n {% endif %}\n\n```\n\n### Layout Block (Container)\n\n```liquid\n\n
\n ```\n\n **Tab Controls Implementation:**\n ```html\n \n \n
\n \n ![\"Product](\"product1.jpg\")
\n
\n \n \n \n Product 1
\n\n
\n\n \n\n \n ```\n\n **JavaScript Considerations:**\n - Implement auto-rotation pause on focus or mouse hover\n - Handle keyboard navigation\n - Update ARIA labels for rotation state\n - Implement proper tab sequence\n - Handle slide picker controls\n - Consider touch/swipe interactions\n - Ensure minimum 5-second interval between slides\n - Stop rotation on user interaction\n - Do not restart rotation automatically after manual pause\n - Handle mouse enter/leave events for pause/resume\n - Maintain manual pause state across mouse events\n - Separate auto-rotation pause behavior from Play/Pause button state\n - Update button state only on explicit user interaction\n - **Update aria-live attribute dynamically based on rotation state**\n - Track and manage multiple pause states (manual vs. focus/hover)\n\n **aria-live Management Example:**\n ```javascript\n function toggleRotation() {\n const carouselContainer = document.querySelector('[aria-live]');\n wasManuallyPaused = isRotating;\n isRotating = !isRotating;\n\n if (isRotating) {\n startRotation();\n playPauseButton.textContent = 'Pause';\n playPauseButton.setAttribute('aria-label', 'Stop slide rotation');\n // Set to 'off' when rotating - prevents announcement overload\n carouselContainer.setAttribute('aria-live', 'off');\n } else {\n stopRotation();\n playPauseButton.textContent = 'Play';\n playPauseButton.setAttribute('aria-label', 'Start slide rotation');\n // Set to 'polite' when paused - allows screen readers to announce changes\n carouselContainer.setAttribute('aria-live', 'polite');\n }\n }\n\n // Also update aria-live on hover pause/resume\n function pauseRotation() {\n if (!wasManuallyPaused && isRotating) {\n stopRotation();\n const carouselContainer = document.querySelector('[aria-live]');\n carouselContainer.setAttribute('aria-live', 'polite');\n }\n }\n\n function resumeRotation() {\n if (!wasManuallyPaused && isRotating) {\n startRotation();\n const carouselContainer = document.querySelector('[aria-live]');\n carouselContainer.setAttribute('aria-live', 'off');\n }\n }\n ```\n\n **Slide Visibility Management Example:**\n ```css\n /* Hide all slides by default */\n .carousel-slide {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0.5s ease, opacity 0.5s ease, transform 0.5s ease;\n }\n\n /* Show active slide */\n .carousel-slide.active {\n visibility: visible;\n opacity: 1;\n }\n\n /* Alternative: Use data attribute for active state */\n .carousel-slide[data-active=\"false\"] {\n visibility: hidden;\n opacity: 0;\n }\n\n .carousel-slide[data-active=\"true\"] {\n visibility: visible;\n opacity: 1;\n }\n ```\n\n ```javascript\n function updateSlide(index) {\n const slides = document.querySelectorAll('.carousel-slide');\n currentSlide = (index + slides.length) % slides.length;\n\n slides.forEach((slide, i) => {\n if (i === currentSlide) {\n // Show active slide\n slide.classList.add('active');\n slide.setAttribute('aria-hidden', 'false');\n slide.setAttribute('data-active', 'true');\n } else {\n // Hide inactive slides\n slide.classList.remove('active');\n slide.setAttribute('aria-hidden', 'true');\n slide.setAttribute('data-active', 'false');\n }\n });\n\n // Update visual position\n slidesContainer.style.transform = `translateX(-${currentSlide * 100}%)`;\n }\n ```\n\n **Accessibility Notes:**\n - Auto-rotation should be paused by default\n - Provide clear visual focus indicators\n - Ensure sufficient color contrast\n - Test with screen readers\n - Consider motion sensitivity\n - Provide alternative navigation methods\n - Comply with WCAG 2.2.2 Pause, Stop, Hide requirement\n - Ensure mouse hover behavior is consistent and predictable\n - Maintain clear distinction between temporary and permanent pause states\n - Ensure screen reader announcements are appropriate for current state\n\nmetadata:\n priority: high\n version: 1.0\n\n \n \n\n \n
\n \n \n
\n\n \n \n \n\n \n \n Product 1
\n\n \n \n \n
\n \n \n
\n ```\n\n **Quantity Controls with aria-live:**\n ```html\n Shopping Cart
\n\n \n
\n \n
\n Total: $99.99
\n \n\n \n \n \n
\n ```\n\n **Item Removal with Focus Management:**\n ```javascript\n function removeItem(itemId) {\n const item = cartItems.find(item => item.id === itemId);\n if (item) {\n cartItems = cartItems.filter(item => item.id !== itemId);\n\n // Remove only the specific cart item element\n const cartItem = document.querySelector(`[data-item-id=\"${itemId}\"]`);\n if (cartItem) {\n cartItem.remove();\n }\n\n // Update cart state\n updateCartCount();\n updateCartTotal();\n\n // Announce removal to screen readers\n announceToScreenReader(`${item.name} removed from cart`);\n\n // Shift focus to close button for logical focus management\n const closeButton = document.querySelector('.cart-close');\n if (closeButton) {\n closeButton.focus();\n }\n }\n }\n ```\n\n **JavaScript Considerations:**\n - Implement proper event listeners for Escape key\n - Manage body scroll when cart drawer is open\n - Handle focus restoration on cart drawer close\n - Implement focus trapping within cart drawer\n - Store reference to activator for focus return\n - Handle dynamic cart content updates\n - Ensure proper announcement of cart state changes\n - **Quantity Management:** Update only specific DOM elements instead of re-rendering entire cart\n - **Focus Management:** Shift focus to close button when removing items\n - **Performance:** Avoid unnecessary DOM manipulation to maintain accessibility features\n\n **Quantity Controls and Item Management:**\n - **aria-live=\"polite\":** Add to all quantity input fields for screen reader announcements\n - **Focus Preservation:** Maintain focus on quantity controls during updates to prevent keyboard navigation issues\n - **Value Announcements:** Screen readers should announce new quantity values when inputs change\n - **Item Removal Focus:** Shift focus to close button after removing items for logical navigation flow\n - **Dynamic Updates:** Avoid full cart re-rendering to preserve focus and improve performance\n\n **Ecommerce-Specific Considerations:**\n - Announce cart item count changes\n - Provide clear product information in cart items\n - Ensure checkout button is prominently accessible\n - Handle empty cart states appropriately\n - Provide clear pricing and total information\n - Support quantity adjustments with proper labeling\n - Handle cart item removal with confirmation\n\n **Accessibility Notes:**\n - Cart drawers should not contain critical page navigation\n - Ensure cart content is fully accessible to screen readers\n - Test with screen readers to ensure proper announcement\n - Consider using aria-live regions for dynamic cart updates\n - Provide clear error messages for cart operations\n - Ensure cart drawer works with keyboard-only navigation\n - Test focus management with multiple cart activators\n\nmetadata:\n priority: high\n version: 1.0\n\n
\n ```\n\n **2. Chat Message Structure:**\n ```html\n \n \n\n **Note:** Use div elements for chat messages instead of role=\"article\" to reduce navigation noise for screen reader users. Chat messages are conversational content rather than standalone articles.\n\n \n \n
\n\n \n \n\n \n Chat: Customer Support
\n \n\n \n \n \n
\n \n
\n ```\n\n **3. Multi-Sensory Notifications:**\n ```html\n \n \n
\n Customer Support: Hi
\nCustomer Support: How can I help?
\n\n
\n Me: Hi
\nMe: I need help
\n\n New message received\n
\n\n \n \n 1\n
\n\n \n \n ```\n\n **4. Enhanced Notification System:**\n ```html\n \n \n\n **Note:** The notification badge is part of the button's accessible name, not hidden from screen readers. This provides better context about unread messages.\n\n **5. Enhanced Button Labeling:**\n ```html\n \n \n ```\n\n **JavaScript for Dynamic Labeling:**\n ```javascript\n // Update button's accessible name to include message count\n function updateNotificationBadge() {\n const launcher = document.getElementById('chat-launcher');\n\n if (messageCount === 1) {\n launcher.setAttribute('aria-label', 'Chat with Support - 1 new message');\n } else if (messageCount > 1) {\n launcher.setAttribute('aria-label', `Chat with Support - ${messageCount} new messages`);\n }\n }\n\n // Reset button's accessible name when chat is opened\n function clearNotificationBadge() {\n const launcher = document.getElementById('chat-launcher');\n launcher.removeAttribute('aria-label');\n }\n ```\n\n \n \n
\n\n \n\n \n ```\n\n **6. Focus Management:**\n ```html\n \n \n
\n\n \n ```\n\n **7. Session Timeout Management:**\n ```html\n \n \n
\n\n Chat Support
\n \n\n \n
\n \n
\n\n \n This chat will end in 20 seconds if you do not reply.
\n \n\n This chat will end in 20 seconds if you do not reply.\n
\n\n \n ```\n\n **Note:** The timeout warning should appear with sufficient notice (minimum 30 seconds) and use a dedicated `role=\"alert\"` element for screen reader announcements. This ensures important timeout information is properly communicated without interfering with chat functionality.\n\n **8. User Interaction Monitoring:**\n ```javascript\n // Setup comprehensive user interaction monitoring\n function setupUserInteractionListeners() {\n const chatWindow = document.getElementById('chat-window');\n\n // Add listeners for various user interactions\n chatWindow.addEventListener('click', extendSessionOnInteraction);\n chatWindow.addEventListener('keydown', extendSessionOnInteraction);\n chatWindow.addEventListener('keypress', extendSessionOnInteraction);\n chatWindow.addEventListener('input', extendSessionOnInteraction);\n chatWindow.addEventListener('scroll', extendSessionOnInteraction);\n\n // Also listen for focus events on interactive elements\n const interactiveElements = chatWindow.querySelectorAll('button, input, textarea, [tabindex]:not([tabindex=\"-1\"])');\n interactiveElements.forEach(element => {\n element.addEventListener('focus', extendSessionOnInteraction);\n });\n }\n ```\n\n **Note:** Chat sessions should extend on any user interaction, not just sent messages. This is crucial for assistive technology users who may have difficulty typing or need more time to compose messages. Monitor clicks, key presses, input changes, scrolling, and focus events to ensure the session remains active during user engagement.\n\n **Important:** When extending sessions, ensure both the main session timeout and warning timeout are properly cleared to prevent race conditions where the session can end even after being extended.\n\n **Session State Management:** Use a dedicated boolean flag (`isSessionExtended`) to track session extension state, rather than relying on DOM element visibility. This prevents race conditions and ensures reliable session management.\n\n **Race Condition Prevention:** Set the session extension flag BEFORE clearing timeouts to prevent race conditions where the countdown might still call `endSession()` after the session has been extended.\n\n **Countdown Safety:** Implement proper bounds checking to prevent negative countdown values and ensure the countdown stops immediately when the session is extended. Clear existing intervals before starting new ones to prevent multiple countdowns from running simultaneously.\n\n **Session Ending Protection:** Implement multiple safety checks in the `endSession()` function to prevent premature session termination. Check session extension status, session activity state, and warning visibility before allowing the session to end.\n\n **Visual Design Consistency:** Follow the established design pattern used across all accessibility example files, including consistent container styling, typography, color scheme, and layout structure for a cohesive user experience.\n\n **9. Responsive Chat Design:**\n ```css\n /* Responsive chat window */\n .chat-window {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 350px;\n height: 500px;\n max-width: calc(100vw - 40px);\n max-height: calc(100vh - 40px);\n background: white;\n border: 1px solid #ccc;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n }\n\n /* Mobile responsive adjustments */\n @media screen and (max-width: 480px) {\n .chat-window {\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100vh;\n max-width: none;\n max-height: none;\n border-radius: 0;\n }\n }\n\n /* Ensure minimum width compliance */\n @media screen and (max-width: 320px) {\n .chat-window {\n width: 320px;\n min-width: 320px;\n }\n }\n ```\n\n **10. Screen Reader Optimized Messages:**\n ```html\n \n \n\n \n \n Customer Support is typing\n ...\n
\n ```\n\n **11. Proper Focus Trap Implementation:**\n ```javascript\n // Focus trap variables\n let focusableElements = [];\n let firstFocusableElement = null;\n let lastFocusableElement = null;\n\n // Setup focus trap\n function setupFocusTrap() {\n const chatWindow = document.getElementById('chat-window');\n\n // Get all focusable elements within the chat window\n // Include all interactive elements that can receive focus\n focusableElements = chatWindow.querySelectorAll(\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [role=\"button\"]:not([disabled])'\n );\n\n if (focusableElements.length > 0) {\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n // Add focus trap event listener\n chatWindow.addEventListener('keydown', trapFocus);\n }\n }\n\n // Focus trap functionality\n function trapFocus(event) {\n if (event.key === 'Tab') {\n // Check if focus is currently within the chat window\n const chatWindow = document.getElementById('chat-window');\n const isFocusInChat = chatWindow.contains(document.activeElement);\n\n if (event.shiftKey) {\n // Shift + Tab: move backwards\n if (document.activeElement === firstFocusableElement) {\n event.preventDefault();\n lastFocusableElement.focus();\n }\n } else {\n // Tab: move forwards\n if (document.activeElement === lastFocusableElement) {\n event.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n // Additional safety check: if focus somehow escapes, bring it back\n if (!isFocusInChat && focusableElements.length > 0) {\n event.preventDefault();\n firstFocusableElement.focus();\n }\n }\n }\n\n // Clean up focus trap when closing chat\n function closeChat() {\n const chatWindow = document.getElementById('chat-window');\n const launcher = document.getElementById('chat-launcher');\n\n chatWindow.hidden = true;\n launcher.setAttribute('aria-expanded', 'false');\n\n // Remove focus trap\n chatWindow.removeEventListener('keydown', trapFocus);\n\n // Return focus to launcher\n launcher.focus();\n }\n ```\n\n **JavaScript Considerations:**\n - Implement proper focus management for popup windows\n - Handle keyboard navigation (Tab, Enter, Escape)\n - Manage session timeouts with user notifications\n - Provide pause/stop controls for auto-updating content\n - Update page titles for new message notifications\n - Monitor input activity for session extension\n - Handle focus restoration when chat closes\n - Implement proper ARIA live regions for status updates\n\n **Accessibility Notes:**\n - Use role=\"log\" for message history with aria-labelledby\n - Provide multi-sensory notifications for new messages\n - Maintain chronological message order in DOM\n - Ensure all interactive elements have accessible names\n - Test with screen readers for proper announcement\n - Consider user preferences for notification levels\n - Provide alternatives to chat (phone, email, etc.)\n - Test keyboard navigation thoroughly\n - Validate focus management in popup windows\n - Use div elements for chat messages to reduce navigation noise (avoid role=\"article\")\n - Chat messages are conversational content, not standalone articles\n\n **Testing Requirements:**\n - Test with screen readers (NVDA, JAWS, VoiceOver)\n - Verify keyboard navigation works completely\n - Test focus management in popup windows\n - Validate message reading order\n - Test timeout notifications and extensions\n - Verify responsive design on small screens\n - Test with different notification preferences\n - Validate ARIA live region announcements\n - Test focus restoration when chat closes\n - Verify contrast ratios meet WCAG requirements\n - **Test focus trapping thoroughly:** Verify Tab and Shift+Tab navigation stays within chat window\n - **Test focus escape scenarios:** Ensure focus cannot accidentally leave the chat window\n - **Test focus restoration:** Verify focus returns to launcher when chat closes\n - **Test all interactive elements:** Ensure all buttons, inputs, and focusable elements are included in focus trap\n\n **Common Mistakes to Avoid:**\n - Chat messages in wrong DOM order\n - Notifications relying only on sound\n - Missing keyboard support for chat functions\n - Poor focus management in popup windows\n - Missing author identification in messages\n - Chat windows not responsive to small screens\n - Missing timeout warnings and extensions\n - Auto-updating content without pause controls\n - Focus becoming obscured behind chat windows\n - Missing accessible names for chat controls\n - Chat buttons without proper roles\n - Missing expandable state management\n - Insufficient contrast for message text\n - Chat icons without alt text\n - Missing status message roles\n - Missing aria-haspopup=\"dialog\" on chat launcher\n - Missing focus trapping in chat popup windows\n - Poor focus management when opening/closing chat\n - **Incomplete focus trap implementation:** Focus trap that only works in one direction (Tab vs Shift+Tab)\n - **Missing focusable elements:** Focus trap that doesn't include all interactive elements\n - **Focus escape vulnerabilities:** Focus trap without safety checks to prevent focus from leaving chat window\n - **Incorrect ARIA attributes for modal dialogs:** Using aria-controls or aria-expanded with modal dialog pattern\n - **Missing notification context:** Not including unread message count in button's accessible name\n - **Decorative images with alt text:** Including unnecessary alt text for decorative icons in buttons\n - **Limited session extension:** Only extending chat session on sent messages instead of all user interactions\n - **Missing user interaction monitoring:** Not monitoring clicks, key presses, scrolling, and focus events for session extension\n\nmetadata:\n priority: high\n version: 1.0\n\n \n \n
\n\n \n\n \n ```\n\n **JavaScript Considerations:**\n - Implement proper event listeners for all keyboard interactions\n - Update ARIA attributes dynamically based on state\n - **Remove `aria-activedescendant` when hiding the listbox** to avoid referencing hidden elements\n - Handle focus management and trapping\n - Implement proper filtering and selection logic\n - Update status messages for all state changes\n - Ensure proper pluralization in status messages\n - Handle edge cases (no matches, empty input, etc.)\n\n **Accessibility Notes:**\n - Status region helps screen readers understand available options\n - Proper pluralization improves user experience\n - Clear status messages help users understand the current state\n - Visual feedback should match announced status\n - Test with screen readers to ensure proper announcement\n\nmetadata:\n priority: high\n version: 1.0\n- \n
- \n Option 1\n \n
- \n Option 2\n \n
\n \n
\n \n \n
\n```\n\n❌ Not this:\n\n`.my-component__wrapper` is used as a parent to `.my-component`.\n\n```html\n\n \n
\n```\n\n### Naming an \"Element\" (child)\n\nThere should only be a _single_ \"element\" in a classname. Only the root \"block\" name needs to be included in child classnames. If additional naming specificity is necessary, use a \"-\" to seperate words or consider starting a new BEM scope altogether when an element could make sense as a standalone entity.\n\n✅ Do this:\n\n```html\n\n
\n```\n\n✅ Or this:\n\nStarted new scope with `.button-component`.\n\n```html\n\n \n
\n\n
\n```\n\n❌ Not this:\n\nMultiple element names are used (`__wrapper__button__label`).\n\n```html\n\n \n
\n\n
\n```\n\n### Naming a \"Modifier\" (variant)\n\nAny \"modifier\" classname should always use a \"--\" and should always correspond to an existing block and element namespace. Never use a modifier class on an element that doesn't also have a base classname.\n\n✅ Do this:\n\nThe `.button` class is the base classname and modified by `--secondary`.\n\n```html\n\n```\n\n❌ Not this:\n\nThe `.button` and `.button-secondary` classes are both named as _exclusive_ components and should not used together.\n\n```html\n\n```\n\n❌ Or this:\n\nModifer class is used without corresponding base classname.\n\n```html\n\n```\n\nAlso consider keeping modifiers at the highest element that makes sense. This makes the component more extensible and resilient as styling needs are changed or added in the future.\n\n✅ Do this:\n\n```html\n\n \n
\n\n \n
\n```\n\n### Utility Classes\n\nUtility classes are intended to act as global overrides for a single styling decision, e.g. alignment, show/hide, etc. BEM conventions are not followed, there is no hierarchy in utility classes and utility classes do not assume they are used with any particular block or element.\n\nName multi-word utility classes with hyphens `-`. Append any viewport specifications at the **end**, e.g. `hidden-mobile`.\n\n✅ This is fine:\n\n```css\n.align-left {\n text-align: left;\n}\n```\n\n```html\n\n \n
\n```\n\n## Modern CSS Features\n\n### Container Queries\n\nUse container queries for truly responsive components:\n\n```css\n.product-grid {\n container-type: inline-size;\n}\n\n@container (min-width: 400px) {\n .product-card {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n}\n```\n\n### CSS Functions\n\nLeverage modern CSS functions for better responsiveness:\n\n```css\n.component {\n /* Fluid spacing */\n padding: clamp(1rem, 4vw, 3rem);\n\n /* Intrinsic sizing */\n width: min(100%, 800px);\n\n /* Dynamic colors */\n /* color-mix isn't supported in earlier version of iOS <16.2 so limit its usage */\n background: color-mix(in srgb, rgb(var(--color-primary)) 90%, white);\n}\n```\n\n### Cascade Layers\n\nFor better CSS organization in complex themes:\n\n```css\n@layer reset, base, components, utilities, overrides;\n\n@layer components {\n .button {\n /* Component styles here won't conflict with utilities */\n }\n}\n```\n\n### View Transitions\n\n```css\n@view-transition {\n navigation: auto;\n}\n\n.page-content {\n view-transition-name: main-content;\n}\n```\n\n## Media Queries\n\n- Default to mobile first. e.g. `min-width` queries\n- Use `screen` for all media queries\n\n### Breakpoint System\n\nDefine consistent breakpoints:\n\n```css\n/* Mobile first breakpoints */\n--breakpoint-sm: 576px; /* Small devices */\n--breakpoint-md: 768px; /* Medium devices */\n--breakpoint-lg: 992px; /* Large devices */\n--breakpoint-xl: 1200px; /* Extra large devices */\n--breakpoint-2xl: 1400px; /* 2X Extra large devices */\n```\n\n### Context-Aware Queries\n\nUse feature queries alongside media queries:\n\n```css\n@supports (display: grid) {\n .product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n }\n}\n\n@supports not (display: grid) {\n .product-grid {\n display: flex;\n flex-wrap: wrap;\n }\n}\n```\n\n### Print Styles\n\nAlways consider print stylesheets:\n\n```css\n@media print {\n .no-print {\n display: none !important;\n }\n\n a[href^='http']:after {\n content: ' (' attr(href) ')';\n }\n}\n```\n\n## CSS Nesting Rules\n\nNesting can make styles harder to read. Be responsible with it.\n\n- **No `&` operator** in nested selectors\n- **Never nest beyond first level** (except media queries/states)\n- **Keep nesting simple** and readable\n- Only use `&` when there is a direct relationship between the two selectors\n - State based selectors e.g. `&:hover`, `&:focus`, `&:active`\n - Modifiers that affect each other e.g. `button--integrated { &.button--text }`\n- Never nest beyond the first level\n- See below for exceptions\n\n### Nesting Media Queries\n\nUse nesting for media queries\n\n```css\n.header {\n width: 100%;\n\n @media screen and (min-width: 750px) {\n width: 100px;\n }\n}\n```\n\nThis includes when there is nothing to override, e.g.\n\n```css\n.header {\n @media screen and (min-width: 750px) {\n width: 100px;\n }\n}\n```\n\nThat way, if something needs to be added later, it can just be added without needing to flip the media query to the inside.\n\n### If-like Parent-Child Relationships\n\nYou may use nesting to help organize parent-child relationship when the parent can have **multiple states or modifiers** that affect children. In the example below, a number of child selectors need to change when the parent is the `--full-width` variant. This saves you from needing to append `parent--full-width` to each css selector.\n\n```css\n.parent {\n grid-columns: var(--gap) 1fr var(--gap);\n}\n\n.child {\n grid-column: 2;\n}\n\n.grand-child {\n ...;\n}\n\n.parent--full-screen {\n grid-columns: 1fr;\n\n .child {\n grid-column: 1;\n }\n\n .grand-child {\n ...;\n }\n}\n```\n\nIn cases like this, the styles that are being applied are the direct result of the parent's modifier. We can see this as a kind of if-like relationship where the logic is easier to follow if the child styles are nested inside the parent.\n\nThis is not a reason to nest multiple levels. Maintain the single level rule.\n\n## Logical Properties\n\nWhere appropriate, use logical properties to have baseline support for Right-to-Left (RTL) languages.\nFocusing on these properties:\n\n- padding\n- margin\n- border\n- text-align\n- top, bottom, left, right\n\n✅ Do this:\n\n```css\n.element {\n padding-inline: 2rem;\n padding-block: 1rem;\n margin-inline: auto;\n margin-block: 0;\n border-inline-end: 1rem solid var(--color-background);\n text-align: start;\n inset: 0;\n}\n```\n\n❌ Not this:\n\n```css\n.element {\n padding: 1rem 2rem;\n margin: 0 auto;\n border-bottom: 1rem solid var(--color-background);\n text-align: left;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n```\n\n## Layout Patterns\n\n### CSS Grid for Layouts\n\n```css\n.section-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: var(--spacing-lg);\n}\n```\n\n### Flexbox for Components\n\n```css\n.product-card {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n}\n```\n\n### Aspect Ratio for Media\n\n```css\n.product-card__image {\n aspect-ratio: 4 / 3;\n object-fit: cover;\n}\n```\n\n## Fancy Selectors\n\n### Using `:is()`\n\nWhen giving the same styles to multiple selectors, use a comma separated list.\n\n✅ Do this:\n\n```css\n.facets__label,\n.facets__clear-all,\n.clear-filter {\n ...;\n}\n```\n\n❌ Not this:\n\n```css\n:is(.facets__label, .facets__clear-all, .clear-filter) {\n ...;\n}\n```\n\nHowever, if you are giving the same styles to a parent-child relationship with different selectors, you may use `:is()`.\n\n✅ Do this:\n\n```css\n.parent:is(.child-1, .child-2) {\n ...;\n}\n```\n\n❌ Not this:\n\n```css\n.parent .child-1,\n.parent .child-2 {\n ...;\n}\n```\n\n✅ Do this:\n\n```css\n:is(.parent, .parent-2) .child {\n ...;\n}\n```\n\n❌ Not this:\n\n```css\n.parent .child,\n.parent-2 .child {\n ...;\n}\n```\n\nTry to keep the same specificity for all selectors within a single `:is()` to avoid increasing the overall specificity of the selector unintentionally.\n\n## Accessibility\n\n### Motion and Animation\n\n- Always respect user motion preferences\n- Provide fallbacks for users who prefer reduced motion\n\n```css\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::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### Focus Management\n\n- Ensure all interactive elements have visible focus indicators\n- Use `:focus-visible` for better UX\n\n```css\n.button:focus-visible {\n outline: 2px solid rgb(var(--color-focus));\n outline-offset: 2px;\n}\n```\n\n### Color and Contrast\n\n- Maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)\n- Test with high contrast mode\n- Never rely solely on color to convey information\n\n```css\n@media (prefers-color-scheme: dark) {\n :root {\n /* Dark theme variables */\n }\n}\n```\n\n## Performance Considerations\n\n### Animation Performance\n\n- Use `transform` and `opacity` for animations\n- Avoid animating layout properties (`width`, `height`, `margin`, `padding`)\n- Use `will-change` sparingly and remove after animation\n\n```css\n.product-card {\n transition: transform 0.2s ease;\n}\n\n.product-card:hover {\n transform: translateY(-2px); /* Better than animating top/margin */\n}\n\n/* Only use will-change during animation */\n.product-card:hover {\n will-change: transform;\n}\n\n.product-card:not(:hover) {\n will-change: auto;\n}\n```\n\n### Layout Performance\n\n- Use `contain` property for better rendering performance\n- Prefer CSS Grid and Flexbox over complex positioning\n\n```css\n.product-grid {\n contain: content;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n}\n```\n\n## CSS Organization\n\n### CSS Property Order\n\nMaintain consistent property order within declarations:\n\n```css\n.component {\n /* 1. Layout & Positioning */\n position: relative;\n display: flex;\n flex-direction: column;\n\n /* 2. Box Model */\n width: 100%;\n margin: 0;\n padding: var(--space-md);\n border: 1px solid rgb(var(--color-border));\n\n /* 3. Typography */\n font-family: var(--font-body-family);\n font-size: var(--font-size-base);\n\n /* 4. Visual */\n background: rgb(var(--color-surface));\n color: rgb(var(--color-text));\n\n /* 5. Animation & Transforms */\n transition: transform 0.2s ease;\n}\n```\n\n## Error Prevention\n\n### Common Pitfalls\n\n- **Never** use `position: fixed` without considering mobile keyboards\n- **Always** test with zoom up to 200%\n- **Avoid** magic numbers - use variables or calc() instead\n- **Remember** that `vh` units can be problematic on mobile, use `dvh` to mitage this\n\n### Defensive CSS\n\nWrite CSS that gracefully handles edge cases:\n\n```css\n.product-card {\n /* Prevent content overflow */\n word-wrap: break-word;\n overflow-wrap: break-word;\n\n /* Handle long content */\n min-width: 0; /* Allows flex items to shrink below content size */\n\n /* Prevent layout shift */\n aspect-ratio: 1 / 1;\n\n /* Fallback for missing images */\n background: rgb(var(--color-surface-secondary));\n}\n```\n\n### Browser Support\n\n- Test in browsers used by your audience\n- Provide fallbacks for newer CSS features\n- Use progressive enhancement approach\n\n## CSS Documentation\n\n### Commenting Standards\n\nUse consistent commenting for better maintainability:\n\n```css\n/* =============================================================================\n Component Name\n ============================================================================= */\n\n/**\n * Brief component description\n *\n * @example\n * \n *
\n */\n.component {\n /* Implementation */\n}\n\n/* Component modifiers\n ========================================================================== */\n\n/**\n * Modifier description\n */\n.component--modifier {\n /* Modifier styles */\n}\n\n/* Component elements\n ========================================================================== */\n\n/**\n * Element description\n */\n.component__element {\n /* Element styles */\n}\n```\n\n## Example Component Structure\n\n```liquid\n{% stylesheet %}\n .featured-collection {\n --section-padding: {{ section.settings.padding | default: 60 }}px;\n --bg-color: {{ section.settings.background_color | default: '#ffffff' }};\n --text-color: {{ section.settings.text_color | default: '#000000' }};\n\n padding: var(--section-padding) 0;\n background-color: var(--bg-color);\n color: var(--text-color);\n container-type: inline-size;\n }\n\n .featured-collection__grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: var(--spacing-md);\n }\n\n @container (min-width: 768px) {\n .featured-collection__grid {\n grid-template-columns: repeat({{ section.settings.columns | default: 4 }}, 1fr);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .featured-collection * {\n transition: none !important;\n }\n }\n{% endstylesheet %}\n```\n"
},
{
"path": ".cursor/rules/disclosure-accessibility.mdc",
"content": "---\ndescription: Disclosure component accessibility compliance pattern\nglobs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid\nalwaysApply: false\n---\n# Disclosure Component Accessibility Standards\n\nEnsures disclosure components follow WCAG compliance and WAI-ARIA Disclosure Pattern specifications.\n\nContent
\n * \n \n
\n\n \n \n Disclosure content goes here...\n
\n \n \n
\n \n
\n\n \n ```\n\n **JavaScript Considerations:**\n - Implement Enter and Space key handlers for toggling\n - Update aria-expanded state when content toggles\n - Use hidden attribute or CSS to show/hide content\n - Consider implementing smooth transitions\n\n **Accessibility Notes:**\n - Button should be the only element inside the control\n - Content MUST be a sibling to the control in the DOM\n - Visual focus indicators should be clear\n - Test with screen readers to ensure proper announcement\n - Consider adding aria-label if the button text is not descriptive\n - Maintain proper reading order for screen reader users\n - Avoid complex DOM structures that could confuse navigation\n\nmetadata:\n priority: high\n version: 1.0\nOther content...
\n\n Disclosure content goes here...\n
\n \n \n
\n ```\n\n **JavaScript for Dropdown Toggle:**\n ```javascript\n function toggleDropdown(button) {\n const isExpanded = button.getAttribute('aria-expanded') === 'true';\n const content = document.getElementById(button.getAttribute('aria-controls'));\n\n button.setAttribute('aria-expanded', !isExpanded);\n content.hidden = isExpanded;\n\n // Update chevron icon\n const chevron = button.querySelector('.chevron');\n if (chevron) {\n chevron.textContent = isExpanded ? '▼' : '▲';\n }\n\n if (!isExpanded) {\n // Add escape key listener to content\n content.addEventListener('keydown', handleDropdownEscapeKey);\n } else {\n // Remove escape key listener\n content.removeEventListener('keydown', handleDropdownEscapeKey);\n }\n }\n\n function handleDropdownEscapeKey(event) {\n if (event.key === 'Escape') {\n const content = event.target.closest('[hidden]');\n if (content) {\n const button = document.querySelector(`[aria-controls=\"${content.id}\"]`);\n if (button) {\n button.setAttribute('aria-expanded', 'false');\n content.hidden = true;\n button.focus(); // Return focus to launcher\n content.removeEventListener('keydown', handleDropdownEscapeKey);\n }\n }\n }\n }\n ```\n\n **JavaScript for Mobile Modal:**\n ```javascript\n function openMobileNav() {\n const modal = document.querySelector('.mobile-nav-modal');\n const closeButton = modal.querySelector('button[aria-label*=\"Close\"]');\n\n modal.hidden = false;\n closeButton.focus(); // Focus first focusable element\n }\n\n function closeMobileNav() {\n const modal = document.querySelector('.mobile-nav-modal');\n const launcher = document.querySelector('[aria-haspopup=\"dialog\"]');\n\n modal.hidden = true;\n launcher.focus(); // Return focus to launcher\n }\n\n // Handle escape key for mobile modal\n document.addEventListener('keydown', function(event) {\n if (event.key === 'Escape') {\n const modal = document.querySelector('.mobile-nav-modal');\n if (!modal.hidden) {\n closeMobileNav();\n }\n }\n });\n\n // Mobile dropdown click and double-click handlers\n document.addEventListener('DOMContentLoaded', function() {\n const mobileDropdownButtons = document.querySelectorAll('.mobile-dropdown-button');\n\n mobileDropdownButtons.forEach(button => {\n // Single click toggles dropdown\n button.addEventListener('click', (event) => {\n event.preventDefault();\n toggleDropdown(button);\n });\n\n // Double click navigates to page\n button.addEventListener('dblclick', (event) => {\n event.preventDefault();\n const href = button.getAttribute('data-href') || '/default';\n window.location.href = href;\n });\n });\n });\n ```\n\n **CSS for Hover Interactions:**\n ```css\n /* Link hover underline */\n nav a:hover {\n text-decoration: underline;\n }\n\n /* Dropdown hover behavior */\n .dropdown-launcher:hover + .dropdown-content,\n .dropdown-content:hover {\n display: block;\n }\n\n .dropdown-content {\n display: none;\n }\n\n /* Chevron rotation */\n .chevron {\n transition: transform 0.2s ease;\n }\n\n button[aria-expanded=\"true\"] .chevron {\n transform: rotate(180deg);\n }\n ```\n\n **JavaScript Considerations:**\n - Implement proper event listeners for all keyboard interactions\n - Handle mouse hover events for dropdown display\n - Manage focus for mobile modal open/close\n - Update aria-current states based on current page\n - Handle chevron icon rotation\n - Implement proper escape key handling\n - Ensure no auto-opening on keyboard focus\n - Handle mouse-specific click events for navigation\n - Implement double-click navigation for mobile dropdown launchers\n\n **Accessibility Notes:**\n - Navigation is NOT a menu - use proper navigation semantics\n - Avoid menu roles and aria-haspopup (except mobile modal)\n - Ensure proper focus management for mobile modal\n - Test with screen readers for proper announcement\n - Maintain clear visual indicators for active states\n - Consider implementing skip links for large navigation\n - Ensure sufficient color contrast for all navigation elements\n - Test keyboard navigation flow thoroughly\n\n **Testing Requirements:**\n - Test keyboard navigation through all navigation items\n - Verify dropdown opens/closes with keyboard and mouse\n - Test mobile modal focus management\n - Verify screen reader announcement of navigation structure\n - Test aria-current updates correctly\n - Ensure escape key closes dropdowns and modals\n - Test hover interactions work as expected\n - Verify no auto-opening on keyboard focus\n\nmetadata:\n priority: high\n version: 1.0\nNavigation
\n \n\n {% if section.settings.background_image %}\n
\n\n{% stylesheet %}\n .example-section {\n position: relative;\n overflow: hidden;\n width: 100%;\n }\n\n .example-section__background {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n overflow: hidden;\n }\n\n .example-section__background img {\n position: absolute;\n width: 100%;\n height: auto;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .example-section__content {\n display: grid;\n grid-template-columns: var(--content-grid);\n }\n\n .example-section__content > * {\n grid-column: 2;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:general.custom_section\",\n \"blocks\": [{ \"type\": \"@theme\" }],\n \"settings\": [\n {\n \"type\": \"image_picker\",\n \"id\": \"background_image\",\n \"label\": \"t:labels.background\"\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:general.custom_section\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": ".cursor/rules/examples/snippet-example.liquid",
"content": "{% doc %}\n Product Card Snippet Template\n\n @param product - {Object} Product object (required)\n @param show_vendor - {Boolean} Display vendor name (default: false)\n @param show_quick_add - {Boolean} Show quick add button (default: false)\n @param image_ratio - {String} Image aspect ratio (default: 'adapt')\n @param card_class - {String} Additional CSS classes\n\n @example\n {% render 'product-card',\n product: product,\n show_vendor: true,\n image_ratio: 'square'\n %}\n{% enddoc %}\n\n{% liquid\n # Parameter validation and defaults\n assign product = product | default: empty\n assign show_vendor = show_vendor | default: false\n assign show_quick_add = show_quick_add | default: false\n assign image_ratio = image_ratio | default: 'adapt'\n assign card_class = card_class | default: ''\n\n # Early return if required parameters missing\n unless product != empty\n echo ''\n break\n endunless\n\n # Build CSS classes\n assign card_classes = 'product-card'\n if card_class != blank\n assign card_classes = card_classes | append: ' ' | append: card_class\n endif\n if image_ratio != 'adapt'\n assign card_classes = card_classes | append: ' product-card--' | append: image_ratio\n endif\n%}\n\n\n {{ section.settings.background_image | image_url: width: 2000 | image_tag }}\n
\n {% endif %}\n\n \n {% content_for 'blocks' %}\n
\n\n {% if product.featured_image %}\n \n {{\n product.featured_image\n | image_url: width: 800\n | image_tag: alt: product.featured_image.alt\n | default: product.title, loading: 'lazy', class: 'product-card__image'\n }}\n \n {% else %}\n
\n\n \n {{ 'product-1' | placeholder_svg_tag: 'product-card__placeholder-svg' }}\n
\n {% endif %}\n \n
\n\n"
},
{
"path": ".cursor/rules/flip-card-accessibility.mdc",
"content": "---\ndescription: Flip Card component accessibility compliance pattern\nglobs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid\nalwaysApply: false\n---\n# Flip Card Component Accessibility Standards\n\nEnsures flip card components follow WCAG compliance and provide proper state management for screen reader users.\n\n\n {{ product.title | escape }}\n
\n\n {% if show_vendor and product.vendor != blank %}\n{{ product.vendor | escape }}
\n {% endif %}\n\n {% render 'price', product: product, show_compare_at: true %}\n\n {% if show_quick_add and product.available %}\n\n {% render 'product-form', product: product, form_type: 'quick-add', show_quantity: false %}\n
\n {% endif %}\n \n
\n ```\n\n **CSS Implementation:**\n ```css\n .card {\n position: relative;\n perspective: 1000px;\n /* Focus indicator for keyboard navigation */\n outline: 2px solid transparent;\n outline-offset: 2px;\n /* Visual affordance for clickable card */\n cursor: pointer;\n }\n\n .card:focus-within {\n outline-color: #0056b3;\n outline-width: 3px;\n }\n\n .card:hover {\n outline-color: #0056b3;\n outline-width: 3px;\n }\n\n .card--front,\n .card--back {\n transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;\n }\n\n /* Show front by default */\n .card--front {\n visibility: visible;\n opacity: 1;\n transform: rotateY(0deg);\n }\n\n .card--back {\n visibility: hidden;\n opacity: 0;\n transform: rotateY(180deg);\n }\n\n /* Show back when aria-pressed=\"true\" */\n .card[data-pressed=\"true\"] .card--front {\n visibility: hidden;\n opacity: 0;\n transform: rotateY(-180deg);\n }\n\n .card[data-pressed=\"true\"] .card--back {\n visibility: visible;\n opacity: 1;\n transform: rotateY(0deg);\n }\n\n .flip-button {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: #0056b3;\n color: #ffffff;\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n }\n\n .flip-button:hover {\n background: #004085;\n transform: scale(1.1);\n box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);\n }\n\n .flip-button:focus {\n outline: 3px solid #ffd700;\n outline-offset: 2px;\n background: #004085;\n }\n\n .flip-button:active {\n transform: scale(0.95);\n }\n\n /* Button icon states */\n .flip-button::before {\n content: \"↻\"; /* Circular arrow icon for front state */\n transition: all 0.3s ease;\n }\n\n /* Show X icon when back is visible */\n .card[data-pressed=\"true\"] .flip-button::before {\n content: \"×\"; /* X icon for back state */\n font-size: 24px;\n font-weight: bold;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n .card--front,\n .card--back {\n transition: none;\n }\n\n .flip-button {\n transition: none;\n }\n\n .flip-button:hover {\n transform: none;\n box-shadow: none;\n }\n\n .flip-button:active {\n transform: none;\n }\n\n .card {\n transition: none;\n }\n }\n ```\n\n **JavaScript State Management:**\n ```javascript\n const flipCards = document.querySelectorAll('.card');\n\n flipCards.forEach(card => {\n const button = card.querySelector('.flip-button');\n const front = card.querySelector('.card--front');\n const back = card.querySelector('.card--back');\n\n function toggleCard() {\n const isPressed = button.getAttribute('aria-pressed') === 'true';\n const newState = !isPressed;\n\n // Update ARIA state\n button.setAttribute('aria-pressed', newState);\n\n // Update card data attribute for CSS\n card.setAttribute('data-pressed', newState);\n\n // Announce state change to screen readers\n const announcement = newState ? 'Showing back of card' : 'Showing front of card';\n announceToScreenReader(announcement);\n }\n\n // Button click handler\n button.addEventListener('click', (event) => {\n event.stopPropagation(); // Prevent card click when button is clicked\n toggleCard();\n });\n\n // Card container click handler for mouse/touch users\n card.addEventListener('click', toggleCard);\n\n // Keyboard handler\n button.addEventListener('keydown', (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n toggleCard();\n }\n });\n });\n\n // Screen reader announcement helper\n function announceToScreenReader(message) {\n const announcement = document.createElement('div');\n announcement.setAttribute('aria-live', 'polite');\n announcement.setAttribute('aria-atomic', 'true');\n announcement.className = 'sr-only';\n announcement.textContent = message;\n\n document.body.appendChild(announcement);\n\n setTimeout(() => {\n document.body.removeChild(announcement);\n }, 1000);\n }\n ```\n\n **Accessibility Guidelines:**\n\n **Button Requirements:**\n - Must have type=\"button\" to prevent form submission\n - aria-pressed attribute must be present and toggle between \"true\" and \"false\"\n - Accessible name should reference visible card content via aria-label\n - Should handle both click and keyboard events\n - Position in top-right corner for intuitive placement\n - Use dynamic icons: ↻ (arrow) for front state, × (X) for back state\n\n **Card Container Interaction:**\n - **Mouse/Touch Support:** Allow clicking anywhere on card to flip\n - **Visual Affordance:** Use cursor: pointer to indicate clickable area\n - **Event Handling:** Prevent conflicts between card and button clicks\n - **Accessibility Maintained:** All keyboard and screen reader functionality preserved\n\n **Content Structure:**\n - Front and back content must be present\n - Only one side visible at a time\n - Use semantic HTML for content (headings, paragraphs, images)\n - Maintain logical reading order\n - Use `visibility: hidden/visible` for smooth animations while maintaining accessibility\n\n **Focus Management:**\n - Focus indicator should wrap the entire card when button is focused\n - Use :focus-within CSS pseudo-class for container focus\n - Ensure focus indicator has sufficient contrast (3:1 minimum)\n - Maintain focus order during state changes\n\n **Screen Reader Support:**\n - aria-pressed state announces current card side\n - Consider adding aria-live region for state changes\n - Ensure content is properly labeled and described\n - Test with screen readers to verify announcements\n\n **Animation Considerations:**\n - Use CSS transitions for smooth flipping effects\n - Ensure animations don't interfere with accessibility\n - **Always implement prefers-reduced-motion media query**\n - Remove all animations, transforms, and transitions when reduced motion is preferred\n - Maintain content visibility during transitions\n - Respect user's motion sensitivity preferences\n\n **Button Design Best Practices:**\n - **Positioning**: Place in top-right corner for intuitive access\n - **Shape**: Use circular design for modern, clean appearance\n - **Icons**: Implement dynamic icons that change with card state\n - Front state: ↻ (circular arrow) indicating \"click to flip\"\n - Back state: × (X) indicating \"click to return\"\n - **Visual Feedback**: Include hover, focus, and active states\n - **Accessibility**: Maintain aria-label for screen reader context\n - **Responsive**: Scale appropriately for different card sizes\n\n **Testing Checklist:**\n - Verify aria-pressed toggles correctly\n - Test keyboard navigation (Enter, Space, Tab)\n - Check focus indicator visibility and contrast\n - Validate screen reader announcements\n - Test content visibility changes\n - Verify accessible names are descriptive via aria-label\n - Check that only one side is visible at a time\n - Verify button positioning in top-right corner\n - Test dynamic icon changes (↻ to ×) with state changes\n - Ensure button remains accessible in all card states\n - Validate responsive button sizing for different card layouts\n - Test card container click functionality (anywhere on card)\n - Verify hover states show blue border matching focus indicator\n - Check cursor pointer appears on card hover\n - Ensure no conflicts between card and button click events\n - Test reduced motion preference support (prefers-reduced-motion: reduce)\n - Verify all animations are disabled when reduced motion is preferred\n\nmetadata:\n priority: high\n version: 1.0\n\n ![\"Front](\"front-image.jpg\")
\n
\n\n \n\n \n Card Title
\n\n ![\"Product](\"back-image-1.jpg\")
\n ![\"Product](\"back-image-2.jpg\")
\n ![\"Product](\"back-image-3.jpg\")
\n ![\"View](\"link-icon.svg\"){kind=icon}
\n \n Custom Button\n
\n\n \n Focus target
\n \n\n \n \n \n \n ```\n\n **Focus Styles Requirements:**\n\n **1. WCAG 2.4.7 Focus Visible (Level A):**\n - **Requirement:** Focus indicator must exist\n - **Purpose:** Keyboard users need visible focus indication\n\n **2. WCAG 1.4.11 Non-Text Contrast (Level AA):**\n - **Requirement:** Minimum 3:1 contrast ratio for UI components\n - **Applies to:** Focus indicators, borders, focus outlines\n\n **3. WCAG 2.4.13 Focus Appearance (Level AAA):**\n - **Requirement:** Minimum area and contrast for focus indicators\n - **Area:** Focus indicator should be clearly visible\n\n **4. WCAG 2.4.11 Focus Not Obscured (Level AA):**\n - **Requirement:** Focused element not hidden by other content\n - **Solution:** Use outline-offset to prevent overlap\n\n **Focus Styles Implementation:**\n\n **1. Basic Focus Styles:**\n ```css\n /* Good: Visible focus indicator */\n button:focus {\n outline: 2px solid #0056b3;\n outline-offset: 2px;\n }\n\n /* Good: Custom focus styles */\n .custom-button:focus {\n outline: 3px solid #dc3545;\n outline-offset: 3px;\n box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);\n }\n ```\n\n **2. Focus-Visible Implementation:**\n ```css\n /* Default focus styles */\n button:focus {\n outline: 2px solid #0056b3;\n outline-offset: 2px;\n }\n\n /* Remove focus styles for mouse users */\n button:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n }\n\n /* Enhanced focus styles for keyboard users */\n button:focus-visible {\n outline: 3px solid #0056b3;\n outline-offset: 3px;\n box-shadow: 0 0 8px rgba(0, 86, 179, 0.5);\n }\n ```\n\n **3. High Contrast Focus Styles:**\n ```css\n /* Default focus styles */\n *:focus-visible {\n outline: 0.2rem solid rgba(var(--color-foreground), 0.5);\n outline-offset: -0.2rem;\n box-shadow: 0 0 0.2rem rgba(var(--color-foreground), 0.3);\n }\n\n /* Windows High Contrast Mode */\n @media (forced-colors: active) {\n *:focus {\n outline: 0.2rem solid transparent;\n }\n }\n ```\n\n **4. Component-Specific Focus Styles:**\n ```css\n /* Form inputs */\n input:focus-visible,\n textarea:focus-visible,\n select:focus-visible {\n outline: 2px solid #0056b3;\n outline-offset: 2px;\n border-color: #0056b3;\n }\n\n /* Links */\n a:focus-visible {\n outline: 2px solid #0056b3;\n outline-offset: 2px;\n text-decoration: underline;\n }\n\n /* Buttons */\n button:focus-visible {\n outline: 2px solid #0056b3;\n outline-offset: 2px;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0056b3;\n }\n ```\n\n **Focus Order Best Practices:**\n\n **1. Logical Content Flow:**\n ```html\n \n Page Title
\n \nNew Content
\n \n `;\n\n container.appendChild(newElement);\n\n // Focus the first focusable element in new content\n const firstFocusable = newElement.querySelector('button');\n if (firstFocusable) {\n firstFocusable.focus();\n }\n }\n\n // When removing content: restore focus to logical location\n function removeDynamicContent(element) {\n const triggerButton = document.querySelector('[onclick=\"addDynamicContent()\"]');\n\n // Store reference to element being removed\n const removedElement = element;\n\n // Remove the element\n element.remove();\n\n // Restore focus to the trigger button\n if (triggerButton) {\n triggerButton.focus();\n }\n }\n\n // Advanced focus management for multiple elements\n function removeSpecificElement(element, elementType) {\n const container = element.parentElement;\n const triggerButton = document.querySelector(`[onclick=\"add${elementType}()\"]`);\n\n // Find the next logical focus target\n let nextFocusTarget = triggerButton;\n\n // If there are other elements, focus the next one\n const remainingElements = container.querySelectorAll(`.${elementType.toLowerCase()}`);\n if (remainingElements.length > 0) {\n const targetElement = remainingElements[0];\n const focusableElement = targetElement.querySelector('button, a, input');\n if (focusableElement) {\n nextFocusTarget = focusableElement;\n }\n }\n\n // Remove the element\n element.remove();\n\n // Set focus to the appropriate target\n nextFocusTarget.focus();\n }\n ```\n\nmetadata:\n priority: high\n version: 1.0\nShipping Address
\n \n ```\n\n **Required Field Indicators:**\n ```html\n \n \n \n We'll use this to send you order confirmations\n \n ```\n\n **Input Groups with Fieldset:**\n ```html\n \n ```\n\n **Input Purpose Identification:**\n ```html\n \n \n \n\n \n \n\n \n \n ```\n\n **Error Handling and Validation:**\n\n **Error Message Association:**\n ```html\n \n \n\n \n Password must be at least 8 characters with uppercase, lowercase, and number\n \n\n \n ```\n\n **Real-time Validation:**\n ```javascript\n function validatePassword(input) {\n const password = input.value;\n const requirements = document.getElementById('password-requirements');\n const error = document.getElementById('password-error');\n\n // Check requirements\n const hasLength = password.length >= 8;\n const hasUpper = /[A-Z]/.test(password);\n const hasLower = /[a-z]/.test(password);\n const hasNumber = /\\d/.test(password);\n\n if (hasLength && hasUpper && hasLower && hasNumber) {\n input.setAttribute('aria-invalid', 'false');\n error.hidden = true;\n requirements.className = 'help-text valid';\n } else {\n input.setAttribute('aria-invalid', 'true');\n error.hidden = false;\n requirements.className = 'help-text invalid';\n }\n }\n ```\n\n **Form Instructions and Help:**\n\n **Input Instructions:**\n ```html\n \n \n\n Enter 5-digit ZIP code (e.g., 12345)\n
\n ```\n\n **Form-level Instructions:**\n ```html\n \n ```\n\n **Success and Error Messages:**\n\n **Success Confirmation:**\n ```html\n \n ```\n\n **Error Summary:**\n ```html\n \n
\n ```\n\n **Focus Management for Error and Success Messages:**\n ```javascript\n function showErrorSummary(errors) {\n const errorSummary = document.getElementById('error-summary');\n const errorHeading = errorSummary.querySelector('h2');\n\n // Show error summary\n errorSummary.classList.add('show');\n\n // Shift focus to error banner heading for better user experience\n // Use requestAnimationFrame to ensure the element is fully visible before focusing\n requestAnimationFrame(() => {\n if (errorHeading) {\n errorHeading.focus();\n errorHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n }\n\n function showSuccessMessage() {\n const successMessage = document.getElementById('success-message');\n const successHeading = successMessage.querySelector('h3');\n\n successMessage.classList.add('show');\n\n // Shift focus to success message heading for better user experience\n // Use requestAnimationFrame to ensure the element is fully visible before focusing\n requestAnimationFrame(() => {\n if (successHeading) {\n successHeading.focus();\n successHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n }\n ```\n\n **Focus Management Benefits:**\n - **User Experience:** Places cursor at beginning of error information\n - **Accessibility:** Screen readers announce error content from the start\n - **Navigation:** Users can easily navigate through error list\n - **Context:** Provides clear starting point for error resolution\n\n **Implementation Considerations:**\n - **Timing:** Use requestAnimationFrame to ensure elements are fully visible before focusing\n - **Fallback:** Provide fallback focus management if headings aren't found\n - **Smooth Scrolling:** Use smooth scrolling for better user experience\n - **Focus Indicators:** Ensure focusable headings have visible focus indicators\n - **Browser Behavior:** Prevent default browser focus behavior on form submission\n\n **CSS for Focusable Error and Success Message Headings:**\n ```css\n /* Make error and success message headings focusable */\n .error-summary h2:focus,\n .success-message h3:focus {\n outline: 3px solid #0056b3;\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: more) {\n .error-summary h2:focus,\n .success-message h3:focus {\n outline: 3px solid #000000;\n }\n }\n ```\n\n **Form Structure and Semantic HTML:**\n\n **Proper Section Organization:**\n ```html\n Please correct the following errors:
\n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n ```\n\n **Help Text Semantic Elements:**\n ```html\n \n \n \n \n We'll use this to send you order confirmations\n \n\n \n Form Instructions
\n \n \n \n\n \n
\n\n \n \n \n
\n\n \n Form Content
\n \nDisabled Field Example
\n \n\n We'll use this to send you order confirmations\n
\n ```\n\n **Help Text Color Contrast Requirements:**\n ```css\n .help-text {\n font-size: 0.875rem;\n color: #495057; /* 7.0:1 contrast ratio on white */\n margin-top: 4px;\n margin-bottom: 8px;\n display: block;\n line-height: 1.4;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: more) {\n .help-text,\n small.help-text {\n color: #000000; /* Maximum contrast */\n }\n }\n ```\n\n **Structural Guidelines:**\n - **Container Organization:** All sections should be direct children of the container div\n - **Main Landmark:** Use main element only for the form itself, not for wrapper content\n - **Section Semantics:** Use section elements for major content areas with proper headings\n - **Help Text Elements:** Use small elements for supplementary text and instructions\n - **Color Contrast:** Ensure help text meets minimum 4.5:1 contrast ratio (7.0:1 recommended)\n - **Proper Nesting:** Avoid nesting sections within other sections or main elements\n\n **Time Limits and Error Prevention:**\n\n **Time Limit Controls:**\n ```html\n \n
\n ```\n\n **Critical Form Confirmation:**\n ```html\n \n ```\n\n **JavaScript for Form Accessibility:**\n\n **Form Validation:**\n ```javascript\n function validateForm() {\n const form = document.querySelector('form');\n const inputs = form.querySelectorAll('input, textarea, select');\n let hasErrors = false;\n\n inputs.forEach(input => {\n if (input.hasAttribute('required') && !input.value.trim()) {\n showError(input, 'This field is required');\n hasErrors = true;\n } else if (input.getAttribute('aria-invalid') === 'true') {\n hasErrors = true;\n }\n });\n\n if (hasErrors) {\n showErrorSummary();\n return false;\n }\n\n return true;\n }\n\n function showError(input, message) {\n const errorId = input.id + '-error';\n let errorElement = document.getElementById(errorId);\n\n if (!errorElement) {\n errorElement = document.createElement('div');\n errorElement.id = errorId;\n errorElement.className = 'error-message';\n errorElement.role = 'alert';\n input.parentNode.appendChild(errorElement);\n }\n\n errorElement.textContent = message;\n errorElement.hidden = false;\n input.setAttribute('aria-invalid', 'true');\n input.setAttribute('aria-describedby',\n input.getAttribute('aria-describedby') + ' ' + errorId);\n }\n ```\n\n **Focus Management:**\n ```javascript\n function focusFirstError() {\n const firstError = document.querySelector('[aria-invalid=\"true\"]');\n if (firstError) {\n firstError.focus();\n firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n\n function focusSuccessMessage() {\n const successMessage = document.getElementById('success-message');\n if (successMessage) {\n successMessage.hidden = false;\n successMessage.focus();\n }\n }\n ```\n\n **CSS for Accessibility:**\n\n **Focus Indicators:**\n ```css\n /* High contrast focus indicators */\n input:focus,\n textarea:focus,\n select:focus,\n button:focus {\n outline: 3px solid #0056b3;\n outline-offset: 2px;\n border-color: #0056b3;\n }\n\n /* Error states */\n input[aria-invalid=\"true\"] {\n border-color: #dc3545;\n border-width: 2px;\n }\n\n /* Required field indicators */\n .required {\n color: #dc3545;\n font-weight: bold;\n }\n\n /* Help text styling */\n .help-text {\n font-size: 0.875rem;\n color: #6c757d;\n margin-top: 0.25rem;\n }\n\n /* Error message styling */\n .error-message {\n color: #dc3545;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n font-weight: 500;\n }\n\n /* Success message styling */\n .success-message {\n color: #198754;\n background-color: #d1e7dd;\n border: 1px solid #badbcc;\n padding: 1rem;\n border-radius: 0.375rem;\n margin: 1rem 0;\n }\n ```\n\n **Testing and Validation:**\n\n **Accessibility Checklist:**\n - All form inputs have associated labels\n - Required fields are clearly indicated\n - Error messages are associated with inputs\n - Form can be completed with keyboard only\n - Focus indicators are visible and clear\n - Screen readers can access all form content\n - Time limits have appropriate controls\n - Critical forms have error prevention\n - Success/error messages are announced\n - Form instructions are accessible\n\n **Common Mistakes to Avoid:**\n - Using placeholder text as the only label\n - Missing required field indicators\n - Not associating error messages with inputs\n - Missing form-level instructions\n - No success confirmation messages\n - Insufficient time limit controls\n - Missing error prevention for critical forms\n - Poor focus management\n - Inaccessible validation feedback\n - Missing input purpose identification\n\nmetadata:\n priority: high\n version: 1.0\nYour session will expire in 14:30 minutes
\n \n \nWelcome to our site. Bienvenue sur notre site.
\n ```\n\n **Language Code Requirements:**\n - **Primary language:** Set on `` element\n - **Format:** ISO 639-1 (e.g., `lang=\"en\"`, `lang=\"fr-CA\"`)\n - **Mixed content:** Use `lang` attribute on specific elements\n - **Purpose:** Enables proper pronunciation by assistive technology\n\n **2. Viewport Meta Tag (WCAG 1.3.3 Sensory Characteristics):**\n ```html\n \n \n\n \n \n\n \n \n ```\n\n **Viewport Requirements:**\n - **Required:** Must be present for responsive design\n - **Zoom support:** Must allow users to zoom content\n - **Avoid:** `maximum-scale=1.0` and `user-scalable=no`\n - **Purpose:** Enables low-vision users to zoom content\n\n **3. Title Attribute (General Avoidance):**\n ```html\n \n \n Help\n\n \n \n Get help with your account\n\n \n \n\n Click to submit your form\n
\n ```\n\n **Title Attribute Guidelines:**\n - **Avoid:** On interactive elements, links, buttons\n - **Exception:** Required on iframe elements\n - **Alternatives:** Visible text, aria-label, aria-describedby\n - **Issues:** Mouse-only, screen reader redundancy, low-vision interference\n\n **4. Iframe Title Requirements:**\n ```html\n \n Page Title
\n \n`, or main content container\n - **Focus management:** Use `tabindex=\"-1\"` on target\n - **Visual feedback:** Show link when it receives focus\n - **Positioning:** Place at very top of document\n - **Text:** Clear and descriptive (e.g., \"Skip to main content\")\n\n **7. Complete Implementation Example:**\n ```html\n \n \n \n \n \n Accessible Web Page \n \n \n \n \n Skip to main content\n\n \n \n Company Name
\n \n \n\n \n \n Welcome to Our Site
\n This is the main content area that the skip link targets.
\n\n \n \n \n \n\n \n \n \n \n ```\n\n **Testing and Validation:**\n - **Language:** Verify lang attribute is set correctly\n - **Viewport:** Test zoom functionality on mobile devices\n - **Title attributes:** Check for unnecessary usage on non-iframe elements\n - **Iframe titles:** Verify descriptive titles for all iframes\n - **Skip links:** Test keyboard navigation and focus management\n - **Screen readers:** Verify skip link announces correctly\n - **Focus order:** Ensure skip link target receives focus properly\n\n **Common Mistakes to Avoid:**\n - Missing lang attribute on html element\n - Viewport meta tag preventing zoom\n - Using title attributes on interactive elements\n - Missing or generic iframe titles\n - Skip link not positioned at top of page\n - Skip link target without tabindex=\"-1\"\n - Skip link hidden with display:none\n - Skip link not visible on focus\n - Generic skip link text\n - Skip link targeting wrong element\n\nmetadata:\n priority: high\n version: 1.0\n
Company Name
\n \nWelcome to Our Site
\nThis is the main content area that the skip link targets.
\n\n \nMain Page Title
\nSection Heading
\nSubsection Heading
\n\n \nMain Page Title
\n Section Heading
\n ```\n\n **2. Proper Heading Hierarchy:**\n ```html\n \n Product Catalog
\nElectronics
\nSmartphones
\nLaptops
\nClothing
\nMen's Clothing
\nWomen's Clothing
\n\n \nProduct Catalog
\nElectronics
\n ```\n\n **3. Clickable Headings:**\n ```html\n \nElectronics
\n\n \n \nElectronics
\n \n ```\n\n **4. Meaningful Heading Text:**\n ```html\n \nAcme Corporation - Leading Tech Solutions
\nOur Services
\nWeb Development
\nMobile App Development
\n\n \nWelcome
\nSection
\nContent
\n ```\n\n **5. Single H1 Per Page:**\n ```html\n \nCompany Homepage
\nAbout Us
\nOur Services
\nContact
\n\n \nCompany Homepage
\nAbout Us
\n ```\n\n **6. Proper Content Structure:**\n ```html\n \nProduct Documentation
\nInstallation Guide
\nSystem Requirements
\nInstallation Steps
\nUser Manual
\nGetting Started
\nAdvanced Features
\nMain Page Title
\n Section Heading
\n Subsection Heading
\n\n \n Company Overview
\n Our Mission
\n Our Values
\n ```\n\n **Heading Guidelines:**\n\n **Content Structure:**\n - **H1:** Main page title or primary content heading\n - **H2:** Major section headings\n - **H3:** Subsection headings\n - **H4-H6:** Further subdivisions as needed\n\n **Text Requirements:**\n - **Concise:** Keep heading text brief and to the point\n - **Descriptive:** Accurately describe the content that follows\n - **Unique:** Each heading should be distinct and meaningful\n - **Hierarchical:** Follow logical content structure\n\n **Navigation Benefits:**\n - **Screen Reader Users:** Can jump between sections using heading navigation\n - **Keyboard Users:** Can navigate page structure efficiently\n - **All Users:** Clear content organization and hierarchy\n\n **Implementation Best Practices:**\n\n **Page Structure Example:**\n ```html\n Product Documentation
\n\nGetting Started
\nInstallation
\nConfiguration
\nUser Guide
\nBasic Features
\nAdvanced Features
\nCustomization
\nIntegration
\nTroubleshooting
\nCommon Issues
\nSupport
\nSearch Results
\nFound 15 results for \"accessibility\"
\n\n \nElectronics (25 items)
\nShowing 1-10 of 25 products
\n ```\n\n **Form Sections:**\n ```html\n \nContact Information
\n \n\nShipping Address
\n \n ```\n\n **Testing and Validation:**\n - Test with screen reader heading navigation\n - Verify heading hierarchy is logical\n - Check that heading text is descriptive\n - Ensure no skipped heading levels\n - Validate single h1 per page\n - Test keyboard navigation between headings\n\n **Common Mistakes to Avoid:**\n - Using heading elements for styling only\n - Skipping heading levels (h1 → h3)\n - Multiple h1 elements on same page\n - Generic or meaningless heading text\n - Missing headings for major content sections\n - Improper heading structure for clickable elements\n - Using heading markup for non-heading content\n - Missing aria-level on role=\"heading\" elements\n\nmetadata:\n priority: high\n version: 1.0\n` and `` instead of JavaScript toggles\n- Perfect for FAQs, product details, filters\n- See the [accordion component](mdc:assets/accordion-custom.js) for cases where animation is involved\n\n**Modals and Popups:**\n- Use `\n \n{% endif %}\n\n{% stylesheet %}\n .facets-block-wrapper {\n @media screen and (min-width: 750px) {\n margin: var(--facets-margin);\n grid-column: var(--grid-column--desktop);\n }\n }\n\n .facets-block-wrapper--vertical {\n @media screen and (min-width: 750px) {\n grid-column: var(--grid-column--desktop);\n }\n }\n\n .facets-toggle {\n --icon-offset: -3px;\n\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: var(--minimum-touch-target);\n margin: var(--facets-margin);\n padding-block: var(--facets-inner-padding-block);\n padding-inline: var(--facets-inner-padding-inline);\n\n @media screen and (min-width: 750px) {\n display: none;\n }\n }\n\n .facets-toggle__wrapper {\n margin-left: var(--icon-offset);\n }\n\n .facets-toggle__button {\n box-shadow: none;\n\n @media screen and (min-width: 750px) {\n display: none;\n }\n }\n\n .filter-count-bubble {\n position: relative;\n width: 20px;\n aspect-ratio: 1;\n border-radius: 50%;\n display: grid;\n line-height: normal;\n place-content: center;\n color: var(--color-foreground);\n border: var(--icon-stroke-width) solid var(--color-background);\n }\n\n .facets-mobile__title-wrapper .h3 {\n margin-block-end: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--gap-xs);\n }\n\n .facets-mobile__title-wrapper .filter-count-bubble {\n width: 22px;\n height: 22px;\n }\n\n .facets-mobile__title-wrapper .filter-count-bubble__text {\n font-size: var(--font-size--xs);\n }\n\n .filter-count-bubble__background {\n position: absolute;\n inset: 0;\n background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));\n border-radius: var(--style-border-radius-50);\n }\n\n .filter-count-bubble__text {\n font-size: 11px;\n font-weight: var(--font-paragraph--weight);\n aspect-ratio: 1 / 1;\n }\n\n .facets-toggle--no-filters {\n @media screen and (max-width: 749px) {\n /* stylelint-disable-next-line declaration-no-important */\n justify-content: unset !important;\n\n & > .facets-mobile-wrapper {\n width: 100%;\n }\n }\n }\n\n .facets-block-wrapper--vertical + .facets-toggle {\n @media screen and (max-width: 749px) {\n margin: 0;\n }\n }\n\n .facets-mobile-wrapper {\n display: flex;\n align-items: center;\n gap: var(--gap-sm);\n justify-content: flex-end;\n }\n\n .facets-mobile-wrapper--multiple-controls {\n justify-content: space-between;\n }\n\n @media screen and (min-width: 750px) {\n dialog-component.facets-block-wrapper {\n position: absolute;\n width: 0;\n height: 0;\n }\n }\n\n .facets {\n --facets-form-horizontal-gap: 20px;\n --facets-horizontal-max-input-wrapper-height: 230px;\n --facets-upper-z-index: var(--layer-raised);\n --facets-open-z-index: var(--layer-heightened);\n --facets-sticky-z-index: var(--layer-sticky);\n --facets-panel-min-width: 120px;\n --facets-panel-height: 300px;\n --facets-grid-panel-width: 300px;\n --facets-clear-padding: var(--padding-md);\n --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));\n --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));\n --facets-clear-all-min-width: 120px;\n --facets-see-results-min-width: 55%;\n --facets-mobile-gap: 22px;\n --facets-low-opacity: 10%;\n --facets-hover-opacity: 75%;\n\n top: auto;\n bottom: 0;\n height: var(--drawer-height);\n max-height: var(--drawer-height);\n width: var(--drawer-width);\n max-width: var(--drawer-max-width);\n box-shadow: none;\n padding-block: 0;\n\n &:not(.facets--drawer) {\n @media screen and (min-width: 750px) {\n padding-inline: var(--padding-inline-start) var(--padding-inline-end);\n width: 100%;\n max-width: 100%;\n }\n }\n }\n\n .facets--horizontal {\n display: none;\n\n @media screen and (min-width: 750px) {\n padding-block: var(--padding-block-start) var(--padding-block-end);\n display: flex;\n align-items: center;\n position: relative;\n z-index: var(--facets-upper-z-index);\n border: none;\n height: auto;\n top: initial;\n bottom: initial;\n max-height: none;\n width: auto;\n overflow: visible;\n }\n }\n\n .facets--vertical {\n display: none;\n\n @media screen and (min-width: 750px) {\n padding-block: 0 var(--padding-block-end);\n display: block;\n position: static;\n top: auto;\n bottom: auto;\n height: auto;\n max-height: none;\n width: auto;\n overflow: visible;\n }\n }\n\n .facets--drawer {\n border-radius: 0;\n border-right: var(--style-border-drawer);\n box-shadow: var(--shadow-drawer);\n padding-inline: 0;\n }\n\n .facets--drawer[open] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n\n .facets-drawer__form-wrapper {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .facets-drawer__form-wrapper .facets__form {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .facets-drawer__filters {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n\n .facets-drawer__filters .facets__filters-wrapper,\n .facets-drawer__filters .filter-remove-buttons,\n .facets-drawer__filters .sorting-filter-component {\n overflow: visible;\n }\n\n .facets.facets-controls-wrapper {\n @media screen and (min-width: 750px) {\n grid-column: column-1 / column-12;\n color: rgb(var(--color-foreground-rgb) / var(--opacity-70));\n gap: 0 var(--facets-form-horizontal-gap);\n padding-bottom: var(--padding-xs);\n }\n }\n\n .facets__inputs {\n display: flex;\n flex-direction: column;\n gap: var(--padding-lg);\n width: 100%;\n }\n\n :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {\n padding-block-end: var(--padding-sm);\n }\n\n /* Facets - Form */\n .facets__form-wrapper {\n display: flex;\n flex-direction: column;\n color: var(--color-foreground-muted);\n width: 100%;\n }\n\n .facets--horizontal .facets__form-wrapper {\n @media screen and (min-width: 750px) {\n flex-direction: row;\n height: auto;\n }\n }\n\n .facets__form {\n display: flex;\n flex-flow: column;\n width: 100%;\n height: 100%;\n }\n\n .facets--horizontal .facets__form {\n @media screen and (min-width: 750px) {\n flex-flow: row nowrap;\n height: auto;\n }\n }\n\n .facets:not(.facets--drawer) .facets__filters-wrapper {\n @media screen and (min-width: 750px) {\n margin-inline-end: var(--margin-md);\n }\n }\n\n .facets--horizontal .facets__filters-wrapper {\n @media screen and (min-width: 750px) {\n max-width: 60%;\n display: flex;\n flex-wrap: wrap;\n column-gap: var(--gap-xl);\n margin-inline-end: 0;\n }\n }\n\n /* Facets - Summary */\n .facets__summary {\n --variant-picker-swatch-width: 32px;\n --variant-picker-swatch-height: 32px;\n --icon-opacity: 0.5;\n\n @media screen and (min-width: 750px) {\n --variant-picker-swatch-width: 26px;\n --variant-picker-swatch-height: 26px;\n }\n\n font-size: var(--font-h5--size);\n display: flex;\n justify-content: space-between;\n\n &:hover {\n --icon-opacity: 1;\n }\n }\n\n .facets__filters-wrapper:hover .facets__summary,\n .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {\n opacity: var(--facets-hover-opacity);\n }\n\n .facets__filters-wrapper .facets__summary:hover,\n .facets__filters-wrapper .facets__panel[open] .facets__summary {\n opacity: 1;\n }\n\n .facets--horizontal .facets__summary {\n @media screen and (min-width: 750px) {\n font-size: var(--font-paragraph--size);\n justify-content: flex-start;\n height: var(--minimum-touch-target);\n }\n }\n\n .facets__summary .icon-caret {\n height: var(--icon-size-xs);\n width: var(--icon-size-xs);\n color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));\n margin-block: var(--margin-2xs);\n transition: color var(--animation-speed) var(--animation-easing);\n }\n\n .facets--drawer .facets__summary .icon-caret {\n margin-inline-start: var(--margin-2xs);\n }\n\n /* Facets - Bubble */\n .facets__bubble {\n display: inline-flex;\n font-family: var(--font-paragraph--family);\n font-weight: var(--font-paragraph--weight);\n aspect-ratio: 1 / 1;\n }\n\n /* Facets - Inputs */\n .facets__inputs-wrapper {\n margin-block: var(--padding-xs) var(--padding-xs);\n }\n\n .facets__inputs .show-more {\n display: flex;\n flex-direction: column;\n gap: var(--gap-xl);\n margin-block-end: var(--padding-xl);\n }\n\n .facets:not(.facets--drawer) .facets__inputs-wrapper {\n @media screen and (min-width: 750px) {\n gap: var(--gap-sm);\n }\n }\n\n .facets--horizontal .facets__inputs .show-more {\n @media screen and (min-width: 750px) {\n display: contents;\n }\n }\n\n .facets--horizontal .facets__inputs-wrapper {\n @media screen and (min-width: 750px) {\n max-height: var(--facets-horizontal-max-input-wrapper-height);\n scrollbar-width: none;\n -ms-overflow-style: none;\n overflow-x: auto;\n padding: var(--padding-md);\n margin-block: 0;\n }\n }\n\n .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {\n padding-block: var(--padding-sm);\n padding-inline: var(--padding-sm);\n margin-block: calc(var(--padding-sm) * -1);\n margin-inline: calc(var(--padding-sm) * -1);\n }\n\n @media screen and (max-width: 749px) {\n .facets__inputs:has(.show-more) .facets__inputs-wrapper {\n padding-block: var(--padding-sm);\n padding-inline: var(--padding-sm);\n margin-block: calc(var(--padding-sm) * -1);\n margin-inline: calc(var(--padding-sm) * -1);\n }\n }\n\n .facets__inputs-wrapper:not(:has(.facets__inputs-list)),\n .facets__inputs-wrapper .facets__inputs-list {\n display: flex;\n gap: var(--facets-mobile-gap);\n flex-direction: column;\n\n @media screen and (min-width: 750px) {\n gap: var(--gap-sm);\n }\n }\n\n @media screen and (min-width: 750px) {\n .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {\n gap: var(--gap-sm);\n }\n\n .facets--horizontal\n .facets__inputs-wrapper\n .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {\n display: grid;\n grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);\n }\n }\n\n .facets__inputs-wrapper .facets__inputs-list--swatches {\n --facets-mobile-gap: var(--gap-sm);\n }\n\n .facets__inputs-wrapper .facets__inputs-list--grid {\n --min-column-width: 20%;\n\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));\n gap: var(--gap-sm);\n\n @media screen and (min-width: 750px) {\n --min-column-width: 50px;\n }\n }\n\n .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {\n @media screen and (min-width: 750px) {\n width: var(--facets-grid-panel-width);\n }\n }\n\n .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),\n .facets__inputs-wrapper--row .facets__inputs-list {\n flex-wrap: wrap;\n flex-direction: row;\n }\n\n .facets__inputs .show-more__button {\n --show-more-icon-size: 22px;\n --show-more-gap: 8px;\n\n gap: var(--show-more-gap);\n\n @media screen and (min-width: 750px) {\n --show-more-icon-size: 16px;\n --show-more-gap: 6px;\n }\n }\n\n .facets__inputs .show-more__button .icon-plus {\n width: var(--show-more-icon-size);\n height: var(--show-more-icon-size);\n\n svg {\n width: var(--icon-size-xs);\n height: var(--icon-size-xs);\n }\n }\n\n /* Facets - Panel */\n .facets__panel {\n padding: 0 var(--drawer-padding);\n }\n\n .facets:not(.facets--drawer) .facets__panel,\n .facets-controls-wrapper .facets__panel {\n @media screen and (min-width: 750px) {\n padding: 0;\n }\n }\n\n .facets--horizontal .facets__panel {\n @media screen and (min-width: 750px) {\n position: relative;\n }\n }\n\n .facets-mobile-wrapper .facets__panel-content {\n border-radius: var(--style-border-radius-popover);\n }\n\n .facets-mobile-wrapper {\n --facets-upper-z-index: var(--layer-raised);\n --facets-panel-min-width: 120px;\n --facets-panel-height: 300px;\n }\n\n .facets--horizontal .facets__panel-content {\n @media screen and (min-width: 750px) {\n border-radius: var(--style-border-radius-popover);\n position: absolute;\n top: 100%;\n width: max-content;\n min-width: var(--facets-panel-min-width);\n max-width: var(--facets-panel-width);\n max-height: var(--facets-panel-height);\n z-index: var(--facets-upper-z-index);\n box-shadow: var(--shadow-popover);\n border: var(--style-border-popover);\n background-color: var(--color-background);\n overflow-y: hidden;\n gap: 0;\n }\n }\n\n :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {\n content: '';\n display: block;\n height: 0;\n width: calc(100% - var(--drawer-padding) * 2);\n border-top: var(--style-border-width) solid var(--color-border);\n margin: 0 auto;\n }\n\n @media screen and (min-width: 750px) {\n .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {\n width: 100%;\n }\n\n .facets--horizontal .facets__item:not(:first-of-type)::before,\n .facets--horizontal .sorting-filter::before {\n content: none;\n }\n }\n\n @media screen and (min-width: 750px) {\n .facets--vertical .facets__item:not(:first-of-type)::before,\n .facets--vertical .sorting-filter::before {\n content: '';\n }\n }\n\n /* Facets - Text */\n .facets__label,\n .facets__clear-all-link,\n .clear-filter {\n text-decoration-color: transparent;\n text-decoration-thickness: 0.075em;\n text-underline-offset: 0.125em;\n transition: text-decoration-color var(--animation-speed) var(--animation-easing);\n }\n\n .facets__clear-all-link {\n display: none;\n cursor: pointer;\n padding: var(--padding-xs);\n color: var(--button-color);\n transition: text-decoration-color var(--animation-speed) var(--animation-easing),\n color var(--animation-speed) var(--animation-easing);\n }\n\n .facets__clear-all-link:hover {\n --button-color: var(--color-primary-hover);\n\n text-decoration: underline;\n text-decoration-color: var(--button-color);\n }\n\n .facets__clear-all-link--horizontal {\n height: var(--minimum-touch-target);\n padding-inline: var(--facets-form-horizontal-gap);\n min-width: var(--facets-clear-all-min-width);\n }\n\n .facets__clear-all-link--active {\n display: block;\n }\n\n .facets__label,\n .products-count-wrapper {\n text-transform: var(--facet-label-transform);\n }\n\n .clear-filter {\n background-color: transparent;\n box-shadow: none;\n padding: 0;\n }\n\n .clear-filter:hover {\n text-decoration: underline;\n }\n\n /* Clear button */\n .facets__clear {\n display: none;\n }\n\n .facets--horizontal .facets__clear {\n @media screen and (min-width: 750px) {\n width: 100%;\n justify-content: flex-end;\n padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;\n cursor: pointer;\n }\n }\n\n .facets__clear--active {\n @media screen and (min-width: 750px) {\n display: flex;\n }\n }\n\n /* Facets - Label */\n .facets__label {\n color: var(--color-foreground);\n cursor: pointer;\n white-space: nowrap;\n\n @media screen and (min-width: 750px) {\n margin-inline-end: var(--margin-2xs);\n }\n }\n\n /* Products count */\n .products-count-wrapper {\n display: none;\n }\n\n .facets--horizontal .products-count-wrapper {\n @media screen and (min-width: 750px) {\n display: flex;\n margin-left: auto;\n flex-shrink: 0;\n align-items: center;\n height: var(--minimum-touch-target);\n }\n }\n\n /* Mobile specific components */\n .facets__title-wrapper {\n background-color: var(--color-background);\n color: var(--color-foreground);\n position: sticky;\n top: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-block: var(--padding-xs);\n padding-inline-start: var(--drawer-padding);\n padding-inline-end: var(--padding-2xs);\n z-index: var(--facets-sticky-z-index);\n }\n\n :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {\n @media screen and (min-width: 750px) {\n display: none;\n }\n }\n\n .facets-drawer__title {\n --variant-picker-swatch-width: 32px;\n --variant-picker-swatch-height: 32px;\n\n margin: 0;\n display: flex;\n align-items: center;\n gap: var(--gap-xs);\n\n @media screen and (min-width: 750px) {\n --variant-picker-swatch-width: 26px;\n --variant-picker-swatch-height: 26px;\n }\n }\n\n .facets-drawer__close {\n position: relative;\n top: 0;\n right: 0;\n padding: 0;\n cursor: pointer;\n }\n\n /* Status */\n .facets__status:not(:empty) {\n width: max-content;\n display: flex;\n margin-inline-start: auto;\n font-weight: 500;\n color: var(--color-foreground);\n }\n\n .facets__panel[open] .facets__status {\n display: none;\n }\n\n .facets--filters-title {\n margin-block-end: 0;\n color: var(--color-foreground);\n height: fit-content;\n\n @media screen and (max-width: 749px) {\n display: none;\n }\n }\n\n .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {\n @media screen and (min-width: 750px) {\n display: flex;\n margin-inline-start: var(--margin-xs);\n margin-inline-end: var(--margin-xs);\n }\n }\n\n /* Horizontal filter style */\n .facets--horizontal .facets__form {\n @media screen and (min-width: 750px) {\n gap: 0 var(--facets-form-horizontal-gap);\n }\n }\n\n /* Facets - Actions */\n .facets__drawer-actions {\n --to-top-gradient-background: linear-gradient(\n to top,\n rgb(var(--color-background-rgb) / var(--opacity-90)),\n rgb(var(--color-background-rgb) / var(--opacity-80)),\n rgb(var(--color-background-rgb) / var(--opacity-40)),\n transparent\n );\n\n position: sticky;\n bottom: 0;\n z-index: var(--facets-sticky-z-index);\n order: 1;\n display: flex;\n flex-shrink: 0;\n justify-content: space-between;\n align-items: stretch;\n gap: var(--gap-sm);\n padding-block-start: var(--padding-xs);\n padding-block-end: var(--padding-md);\n padding-inline: var(--padding-lg);\n margin-top: auto;\n background-image: var(--to-top-gradient-background);\n background-color: var(--color-background);\n }\n\n /* Clear all button */\n .facets__clear-all {\n display: none;\n cursor: pointer;\n min-width: var(--facets-clear-all-min-width);\n flex-grow: 1;\n padding-block: var(--padding-lg);\n color: var(--button-color, inherit);\n }\n\n .facets__clear-all--active {\n display: block;\n opacity: 1;\n transform: translateY(0);\n transition: transform var(--animation-values), opacity var(--animation-values);\n }\n\n @starting-style {\n .facets__clear-all--active {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n\n .facets__see-results {\n min-width: var(--facets-see-results-min-width);\n flex-grow: 1;\n padding-block: var(--padding-lg);\n }\n\n .facets-horizontal-remove {\n display: flex;\n align-items: center;\n }\n\n .facets-horizontal-remove--active::before {\n content: '';\n border-inline-start: var(--style-border-width) solid var(--color-border);\n height: var(--font-paragraph--size);\n position: absolute;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.filters\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"checkbox\",\n \"id\": \"enable_filtering\",\n \"label\": \"t:settings.enable_filtering\",\n \"info\": \"t:info.enable_filtering_info\",\n \"default\": false\n },\n {\n \"type\": \"select\",\n \"id\": \"filter_style\",\n \"label\": \"t:settings.direction\",\n \"options\": [\n {\n \"value\": \"horizontal\",\n \"label\": \"t:options.horizontal\"\n },\n {\n \"value\": \"vertical\",\n \"label\": \"t:options.vertical\"\n }\n ],\n \"default\": \"horizontal\",\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"filter_width\",\n \"label\": \"t:settings.width\",\n \"options\": [\n {\n \"value\": \"centered\",\n \"label\": \"t:options.page\"\n },\n {\n \"value\": \"full-width\",\n \"label\": \"t:options.full\"\n }\n ],\n \"default\": \"centered\",\n \"visible_if\": \"{{ block.settings.enable_filtering == true and block.settings.filter_style == 'horizontal' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"text_label_case\",\n \"label\": \"t:settings.text_label_case\",\n \"options\": [\n {\n \"value\": \"default\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"uppercase\",\n \"label\": \"t:options.uppercase\"\n }\n ],\n \"default\": \"default\",\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_swatch_label\",\n \"label\": \"t:settings.show_swatch_label\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_filter_label\",\n \"label\": \"t:settings.show_filter_label\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"enable_sorting\",\n \"label\": \"t:settings.enable_sorting\",\n \"default\": true\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"enable_grid_density\",\n \"label\": \"t:settings.enable_grid_density\",\n \"default\": true\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.margin\"\n },\n {\n \"type\": \"range\",\n \"id\": \"facets_margin_bottom\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 8,\n \"visible_if\": \"{{ block.settings.filter_style == 'horizontal' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"facets_margin_right\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 20,\n \"visible_if\": \"{{ block.settings.filter_style == 'vertical' }}\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/follow-on-shop.liquid",
"content": "{%- if shop.features.follow_on_shop? -%}\n
\n \n{% endif %}\n\n{% stylesheet %}\n .menu {\n width: 100%;\n }\n\n .menu:not(:has(.menu__heading--empty)) .details-content {\n margin-block-start: var(--spacing--size);\n }\n\n .menu__item + .menu__item {\n margin-block-start: var(--spacing--size);\n }\n\n .menu .menu__heading--empty {\n display: none;\n }\n\n .menu__heading__default {\n display: contents;\n }\n\n .menu__heading__accordion {\n display: none;\n }\n\n @media screen and (max-width: 749px) {\n /* Always show the fallback heading on mobile when accordion is enabled */\n .menu--accordion .menu__heading--empty {\n display: flex;\n }\n\n .menu--accordion .menu__heading__accordion {\n display: contents;\n }\n\n .menu--accordion .menu__heading__default {\n display: none;\n }\n\n .menu--accordion .details-content {\n margin-block-start: var(--spacing--size);\n }\n\n .menu--accordion .menu__details {\n padding-inline: 0;\n }\n\n .menu--dividers .menu__details {\n border-block-end: var(--style-border-width) solid var(--color-border);\n }\n\n .menu--dividers .details-content {\n padding-block-end: var(--padding-sm);\n }\n }\n\n .menu--caret .icon-plus,\n .menu--plus .icon-caret {\n display: none;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.menu\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"link_list\",\n \"id\": \"menu\",\n \"label\": \"t:settings.menu\",\n \"default\": \"main-menu\"\n },\n {\n \"type\": \"text\",\n \"id\": \"heading\",\n \"label\": \"t:settings.heading\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.appearance\"\n },\n {\n \"type\": \"range\",\n \"id\": \"menu_spacing\",\n \"label\": \"t:settings.vertical_gap\",\n \"min\": 0,\n \"max\": 50,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 12\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_as_accordion\",\n \"label\": \"t:settings.show_as_accordion\",\n \"default\": false\n },\n {\n \"type\": \"select\",\n \"id\": \"accordion_icon\",\n \"label\": \"t:settings.icon\",\n \"options\": [\n {\n \"value\": \"caret\",\n \"label\": \"t:options.caret\"\n },\n {\n \"value\": \"plus\",\n \"label\": \"t:options.plus\"\n }\n ],\n \"default\": \"caret\",\n \"visible_if\": \"{{ block.settings.show_as_accordion == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"accordion_dividers\",\n \"label\": \"t:settings.dividers\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.show_as_accordion == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.typography\"\n },\n {\n \"type\": \"select\",\n \"id\": \"heading_preset\",\n \"label\": \"t:settings.heading_preset\",\n \"options\": [\n {\n \"value\": \"\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"paragraph\",\n \"label\": \"t:options.paragraph\"\n },\n {\n \"value\": \"h1\",\n \"label\": \"t:options.h1\"\n },\n {\n \"value\": \"h2\",\n \"label\": \"t:options.h2\"\n },\n {\n \"value\": \"h3\",\n \"label\": \"t:options.h3\"\n },\n {\n \"value\": \"h4\",\n \"label\": \"t:options.h4\"\n },\n {\n \"value\": \"h5\",\n \"label\": \"t:options.h5\"\n },\n {\n \"value\": \"h6\",\n \"label\": \"t:options.h6\"\n }\n ],\n \"default\": \"h3\"\n },\n {\n \"type\": \"select\",\n \"id\": \"link_preset\",\n \"label\": \"t:settings.link_preset\",\n \"options\": [\n {\n \"value\": \"\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"paragraph\",\n \"label\": \"t:options.paragraph\"\n },\n {\n \"value\": \"h1\",\n \"label\": \"t:options.h1\"\n },\n {\n \"value\": \"h2\",\n \"label\": \"t:options.h2\"\n },\n {\n \"value\": \"h3\",\n \"label\": \"t:options.h3\"\n },\n {\n \"value\": \"h4\",\n \"label\": \"t:options.h4\"\n },\n {\n \"value\": \"h5\",\n \"label\": \"t:options.h5\"\n },\n {\n \"value\": \"h6\",\n \"label\": \"t:options.h6\"\n }\n ],\n \"default\": \"paragraph\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.menu\",\n \"category\": \"t:categories.links\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/page-content.liquid",
"content": "` instead of JavaScript toggles\n- Perfect for FAQs, product details, filters\n- See the [accordion component](mdc:assets/accordion-custom.js) for cases where animation is involved\n\n**Modals and Popups:**\n- Use `\n \n{% endif %}\n\n{% stylesheet %}\n .facets-block-wrapper {\n @media screen and (min-width: 750px) {\n margin: var(--facets-margin);\n grid-column: var(--grid-column--desktop);\n }\n }\n\n .facets-block-wrapper--vertical {\n @media screen and (min-width: 750px) {\n grid-column: var(--grid-column--desktop);\n }\n }\n\n .facets-toggle {\n --icon-offset: -3px;\n\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: var(--minimum-touch-target);\n margin: var(--facets-margin);\n padding-block: var(--facets-inner-padding-block);\n padding-inline: var(--facets-inner-padding-inline);\n\n @media screen and (min-width: 750px) {\n display: none;\n }\n }\n\n .facets-toggle__wrapper {\n margin-left: var(--icon-offset);\n }\n\n .facets-toggle__button {\n box-shadow: none;\n\n @media screen and (min-width: 750px) {\n display: none;\n }\n }\n\n .filter-count-bubble {\n position: relative;\n width: 20px;\n aspect-ratio: 1;\n border-radius: 50%;\n display: grid;\n line-height: normal;\n place-content: center;\n color: var(--color-foreground);\n border: var(--icon-stroke-width) solid var(--color-background);\n }\n\n .facets-mobile__title-wrapper .h3 {\n margin-block-end: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--gap-xs);\n }\n\n .facets-mobile__title-wrapper .filter-count-bubble {\n width: 22px;\n height: 22px;\n }\n\n .facets-mobile__title-wrapper .filter-count-bubble__text {\n font-size: var(--font-size--xs);\n }\n\n .filter-count-bubble__background {\n position: absolute;\n inset: 0;\n background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));\n border-radius: var(--style-border-radius-50);\n }\n\n .filter-count-bubble__text {\n font-size: 11px;\n font-weight: var(--font-paragraph--weight);\n aspect-ratio: 1 / 1;\n }\n\n .facets-toggle--no-filters {\n @media screen and (max-width: 749px) {\n /* stylelint-disable-next-line declaration-no-important */\n justify-content: unset !important;\n\n & > .facets-mobile-wrapper {\n width: 100%;\n }\n }\n }\n\n .facets-block-wrapper--vertical + .facets-toggle {\n @media screen and (max-width: 749px) {\n margin: 0;\n }\n }\n\n .facets-mobile-wrapper {\n display: flex;\n align-items: center;\n gap: var(--gap-sm);\n justify-content: flex-end;\n }\n\n .facets-mobile-wrapper--multiple-controls {\n justify-content: space-between;\n }\n\n @media screen and (min-width: 750px) {\n dialog-component.facets-block-wrapper {\n position: absolute;\n width: 0;\n height: 0;\n }\n }\n\n .facets {\n --facets-form-horizontal-gap: 20px;\n --facets-horizontal-max-input-wrapper-height: 230px;\n --facets-upper-z-index: var(--layer-raised);\n --facets-open-z-index: var(--layer-heightened);\n --facets-sticky-z-index: var(--layer-sticky);\n --facets-panel-min-width: 120px;\n --facets-panel-height: 300px;\n --facets-grid-panel-width: 300px;\n --facets-clear-padding: var(--padding-md);\n --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));\n --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));\n --facets-clear-all-min-width: 120px;\n --facets-see-results-min-width: 55%;\n --facets-mobile-gap: 22px;\n --facets-low-opacity: 10%;\n --facets-hover-opacity: 75%;\n\n top: auto;\n bottom: 0;\n height: var(--drawer-height);\n max-height: var(--drawer-height);\n width: var(--drawer-width);\n max-width: var(--drawer-max-width);\n box-shadow: none;\n padding-block: 0;\n\n &:not(.facets--drawer) {\n @media screen and (min-width: 750px) {\n padding-inline: var(--padding-inline-start) var(--padding-inline-end);\n width: 100%;\n max-width: 100%;\n }\n }\n }\n\n .facets--horizontal {\n display: none;\n\n @media screen and (min-width: 750px) {\n padding-block: var(--padding-block-start) var(--padding-block-end);\n display: flex;\n align-items: center;\n position: relative;\n z-index: var(--facets-upper-z-index);\n border: none;\n height: auto;\n top: initial;\n bottom: initial;\n max-height: none;\n width: auto;\n overflow: visible;\n }\n }\n\n .facets--vertical {\n display: none;\n\n @media screen and (min-width: 750px) {\n padding-block: 0 var(--padding-block-end);\n display: block;\n position: static;\n top: auto;\n bottom: auto;\n height: auto;\n max-height: none;\n width: auto;\n overflow: visible;\n }\n }\n\n .facets--drawer {\n border-radius: 0;\n border-right: var(--style-border-drawer);\n box-shadow: var(--shadow-drawer);\n padding-inline: 0;\n }\n\n .facets--drawer[open] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n\n .facets-drawer__form-wrapper {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .facets-drawer__form-wrapper .facets__form {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .facets-drawer__filters {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n\n .facets-drawer__filters .facets__filters-wrapper,\n .facets-drawer__filters .filter-remove-buttons,\n .facets-drawer__filters .sorting-filter-component {\n overflow: visible;\n }\n\n .facets.facets-controls-wrapper {\n @media screen and (min-width: 750px) {\n grid-column: column-1 / column-12;\n color: rgb(var(--color-foreground-rgb) / var(--opacity-70));\n gap: 0 var(--facets-form-horizontal-gap);\n padding-bottom: var(--padding-xs);\n }\n }\n\n .facets__inputs {\n display: flex;\n flex-direction: column;\n gap: var(--padding-lg);\n width: 100%;\n }\n\n :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {\n padding-block-end: var(--padding-sm);\n }\n\n /* Facets - Form */\n .facets__form-wrapper {\n display: flex;\n flex-direction: column;\n color: var(--color-foreground-muted);\n width: 100%;\n }\n\n .facets--horizontal .facets__form-wrapper {\n @media screen and (min-width: 750px) {\n flex-direction: row;\n height: auto;\n }\n }\n\n .facets__form {\n display: flex;\n flex-flow: column;\n width: 100%;\n height: 100%;\n }\n\n .facets--horizontal .facets__form {\n @media screen and (min-width: 750px) {\n flex-flow: row nowrap;\n height: auto;\n }\n }\n\n .facets:not(.facets--drawer) .facets__filters-wrapper {\n @media screen and (min-width: 750px) {\n margin-inline-end: var(--margin-md);\n }\n }\n\n .facets--horizontal .facets__filters-wrapper {\n @media screen and (min-width: 750px) {\n max-width: 60%;\n display: flex;\n flex-wrap: wrap;\n column-gap: var(--gap-xl);\n margin-inline-end: 0;\n }\n }\n\n /* Facets - Summary */\n .facets__summary {\n --variant-picker-swatch-width: 32px;\n --variant-picker-swatch-height: 32px;\n --icon-opacity: 0.5;\n\n @media screen and (min-width: 750px) {\n --variant-picker-swatch-width: 26px;\n --variant-picker-swatch-height: 26px;\n }\n\n font-size: var(--font-h5--size);\n display: flex;\n justify-content: space-between;\n\n &:hover {\n --icon-opacity: 1;\n }\n }\n\n .facets__filters-wrapper:hover .facets__summary,\n .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {\n opacity: var(--facets-hover-opacity);\n }\n\n .facets__filters-wrapper .facets__summary:hover,\n .facets__filters-wrapper .facets__panel[open] .facets__summary {\n opacity: 1;\n }\n\n .facets--horizontal .facets__summary {\n @media screen and (min-width: 750px) {\n font-size: var(--font-paragraph--size);\n justify-content: flex-start;\n height: var(--minimum-touch-target);\n }\n }\n\n .facets__summary .icon-caret {\n height: var(--icon-size-xs);\n width: var(--icon-size-xs);\n color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));\n margin-block: var(--margin-2xs);\n transition: color var(--animation-speed) var(--animation-easing);\n }\n\n .facets--drawer .facets__summary .icon-caret {\n margin-inline-start: var(--margin-2xs);\n }\n\n /* Facets - Bubble */\n .facets__bubble {\n display: inline-flex;\n font-family: var(--font-paragraph--family);\n font-weight: var(--font-paragraph--weight);\n aspect-ratio: 1 / 1;\n }\n\n /* Facets - Inputs */\n .facets__inputs-wrapper {\n margin-block: var(--padding-xs) var(--padding-xs);\n }\n\n .facets__inputs .show-more {\n display: flex;\n flex-direction: column;\n gap: var(--gap-xl);\n margin-block-end: var(--padding-xl);\n }\n\n .facets:not(.facets--drawer) .facets__inputs-wrapper {\n @media screen and (min-width: 750px) {\n gap: var(--gap-sm);\n }\n }\n\n .facets--horizontal .facets__inputs .show-more {\n @media screen and (min-width: 750px) {\n display: contents;\n }\n }\n\n .facets--horizontal .facets__inputs-wrapper {\n @media screen and (min-width: 750px) {\n max-height: var(--facets-horizontal-max-input-wrapper-height);\n scrollbar-width: none;\n -ms-overflow-style: none;\n overflow-x: auto;\n padding: var(--padding-md);\n margin-block: 0;\n }\n }\n\n .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {\n padding-block: var(--padding-sm);\n padding-inline: var(--padding-sm);\n margin-block: calc(var(--padding-sm) * -1);\n margin-inline: calc(var(--padding-sm) * -1);\n }\n\n @media screen and (max-width: 749px) {\n .facets__inputs:has(.show-more) .facets__inputs-wrapper {\n padding-block: var(--padding-sm);\n padding-inline: var(--padding-sm);\n margin-block: calc(var(--padding-sm) * -1);\n margin-inline: calc(var(--padding-sm) * -1);\n }\n }\n\n .facets__inputs-wrapper:not(:has(.facets__inputs-list)),\n .facets__inputs-wrapper .facets__inputs-list {\n display: flex;\n gap: var(--facets-mobile-gap);\n flex-direction: column;\n\n @media screen and (min-width: 750px) {\n gap: var(--gap-sm);\n }\n }\n\n @media screen and (min-width: 750px) {\n .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {\n gap: var(--gap-sm);\n }\n\n .facets--horizontal\n .facets__inputs-wrapper\n .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {\n display: grid;\n grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);\n }\n }\n\n .facets__inputs-wrapper .facets__inputs-list--swatches {\n --facets-mobile-gap: var(--gap-sm);\n }\n\n .facets__inputs-wrapper .facets__inputs-list--grid {\n --min-column-width: 20%;\n\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));\n gap: var(--gap-sm);\n\n @media screen and (min-width: 750px) {\n --min-column-width: 50px;\n }\n }\n\n .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {\n @media screen and (min-width: 750px) {\n width: var(--facets-grid-panel-width);\n }\n }\n\n .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),\n .facets__inputs-wrapper--row .facets__inputs-list {\n flex-wrap: wrap;\n flex-direction: row;\n }\n\n .facets__inputs .show-more__button {\n --show-more-icon-size: 22px;\n --show-more-gap: 8px;\n\n gap: var(--show-more-gap);\n\n @media screen and (min-width: 750px) {\n --show-more-icon-size: 16px;\n --show-more-gap: 6px;\n }\n }\n\n .facets__inputs .show-more__button .icon-plus {\n width: var(--show-more-icon-size);\n height: var(--show-more-icon-size);\n\n svg {\n width: var(--icon-size-xs);\n height: var(--icon-size-xs);\n }\n }\n\n /* Facets - Panel */\n .facets__panel {\n padding: 0 var(--drawer-padding);\n }\n\n .facets:not(.facets--drawer) .facets__panel,\n .facets-controls-wrapper .facets__panel {\n @media screen and (min-width: 750px) {\n padding: 0;\n }\n }\n\n .facets--horizontal .facets__panel {\n @media screen and (min-width: 750px) {\n position: relative;\n }\n }\n\n .facets-mobile-wrapper .facets__panel-content {\n border-radius: var(--style-border-radius-popover);\n }\n\n .facets-mobile-wrapper {\n --facets-upper-z-index: var(--layer-raised);\n --facets-panel-min-width: 120px;\n --facets-panel-height: 300px;\n }\n\n .facets--horizontal .facets__panel-content {\n @media screen and (min-width: 750px) {\n border-radius: var(--style-border-radius-popover);\n position: absolute;\n top: 100%;\n width: max-content;\n min-width: var(--facets-panel-min-width);\n max-width: var(--facets-panel-width);\n max-height: var(--facets-panel-height);\n z-index: var(--facets-upper-z-index);\n box-shadow: var(--shadow-popover);\n border: var(--style-border-popover);\n background-color: var(--color-background);\n overflow-y: hidden;\n gap: 0;\n }\n }\n\n :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {\n content: '';\n display: block;\n height: 0;\n width: calc(100% - var(--drawer-padding) * 2);\n border-top: var(--style-border-width) solid var(--color-border);\n margin: 0 auto;\n }\n\n @media screen and (min-width: 750px) {\n .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {\n width: 100%;\n }\n\n .facets--horizontal .facets__item:not(:first-of-type)::before,\n .facets--horizontal .sorting-filter::before {\n content: none;\n }\n }\n\n @media screen and (min-width: 750px) {\n .facets--vertical .facets__item:not(:first-of-type)::before,\n .facets--vertical .sorting-filter::before {\n content: '';\n }\n }\n\n /* Facets - Text */\n .facets__label,\n .facets__clear-all-link,\n .clear-filter {\n text-decoration-color: transparent;\n text-decoration-thickness: 0.075em;\n text-underline-offset: 0.125em;\n transition: text-decoration-color var(--animation-speed) var(--animation-easing);\n }\n\n .facets__clear-all-link {\n display: none;\n cursor: pointer;\n padding: var(--padding-xs);\n color: var(--button-color);\n transition: text-decoration-color var(--animation-speed) var(--animation-easing),\n color var(--animation-speed) var(--animation-easing);\n }\n\n .facets__clear-all-link:hover {\n --button-color: var(--color-primary-hover);\n\n text-decoration: underline;\n text-decoration-color: var(--button-color);\n }\n\n .facets__clear-all-link--horizontal {\n height: var(--minimum-touch-target);\n padding-inline: var(--facets-form-horizontal-gap);\n min-width: var(--facets-clear-all-min-width);\n }\n\n .facets__clear-all-link--active {\n display: block;\n }\n\n .facets__label,\n .products-count-wrapper {\n text-transform: var(--facet-label-transform);\n }\n\n .clear-filter {\n background-color: transparent;\n box-shadow: none;\n padding: 0;\n }\n\n .clear-filter:hover {\n text-decoration: underline;\n }\n\n /* Clear button */\n .facets__clear {\n display: none;\n }\n\n .facets--horizontal .facets__clear {\n @media screen and (min-width: 750px) {\n width: 100%;\n justify-content: flex-end;\n padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;\n cursor: pointer;\n }\n }\n\n .facets__clear--active {\n @media screen and (min-width: 750px) {\n display: flex;\n }\n }\n\n /* Facets - Label */\n .facets__label {\n color: var(--color-foreground);\n cursor: pointer;\n white-space: nowrap;\n\n @media screen and (min-width: 750px) {\n margin-inline-end: var(--margin-2xs);\n }\n }\n\n /* Products count */\n .products-count-wrapper {\n display: none;\n }\n\n .facets--horizontal .products-count-wrapper {\n @media screen and (min-width: 750px) {\n display: flex;\n margin-left: auto;\n flex-shrink: 0;\n align-items: center;\n height: var(--minimum-touch-target);\n }\n }\n\n /* Mobile specific components */\n .facets__title-wrapper {\n background-color: var(--color-background);\n color: var(--color-foreground);\n position: sticky;\n top: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-block: var(--padding-xs);\n padding-inline-start: var(--drawer-padding);\n padding-inline-end: var(--padding-2xs);\n z-index: var(--facets-sticky-z-index);\n }\n\n :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {\n @media screen and (min-width: 750px) {\n display: none;\n }\n }\n\n .facets-drawer__title {\n --variant-picker-swatch-width: 32px;\n --variant-picker-swatch-height: 32px;\n\n margin: 0;\n display: flex;\n align-items: center;\n gap: var(--gap-xs);\n\n @media screen and (min-width: 750px) {\n --variant-picker-swatch-width: 26px;\n --variant-picker-swatch-height: 26px;\n }\n }\n\n .facets-drawer__close {\n position: relative;\n top: 0;\n right: 0;\n padding: 0;\n cursor: pointer;\n }\n\n /* Status */\n .facets__status:not(:empty) {\n width: max-content;\n display: flex;\n margin-inline-start: auto;\n font-weight: 500;\n color: var(--color-foreground);\n }\n\n .facets__panel[open] .facets__status {\n display: none;\n }\n\n .facets--filters-title {\n margin-block-end: 0;\n color: var(--color-foreground);\n height: fit-content;\n\n @media screen and (max-width: 749px) {\n display: none;\n }\n }\n\n .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {\n @media screen and (min-width: 750px) {\n display: flex;\n margin-inline-start: var(--margin-xs);\n margin-inline-end: var(--margin-xs);\n }\n }\n\n /* Horizontal filter style */\n .facets--horizontal .facets__form {\n @media screen and (min-width: 750px) {\n gap: 0 var(--facets-form-horizontal-gap);\n }\n }\n\n /* Facets - Actions */\n .facets__drawer-actions {\n --to-top-gradient-background: linear-gradient(\n to top,\n rgb(var(--color-background-rgb) / var(--opacity-90)),\n rgb(var(--color-background-rgb) / var(--opacity-80)),\n rgb(var(--color-background-rgb) / var(--opacity-40)),\n transparent\n );\n\n position: sticky;\n bottom: 0;\n z-index: var(--facets-sticky-z-index);\n order: 1;\n display: flex;\n flex-shrink: 0;\n justify-content: space-between;\n align-items: stretch;\n gap: var(--gap-sm);\n padding-block-start: var(--padding-xs);\n padding-block-end: var(--padding-md);\n padding-inline: var(--padding-lg);\n margin-top: auto;\n background-image: var(--to-top-gradient-background);\n background-color: var(--color-background);\n }\n\n /* Clear all button */\n .facets__clear-all {\n display: none;\n cursor: pointer;\n min-width: var(--facets-clear-all-min-width);\n flex-grow: 1;\n padding-block: var(--padding-lg);\n color: var(--button-color, inherit);\n }\n\n .facets__clear-all--active {\n display: block;\n opacity: 1;\n transform: translateY(0);\n transition: transform var(--animation-values), opacity var(--animation-values);\n }\n\n @starting-style {\n .facets__clear-all--active {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n\n .facets__see-results {\n min-width: var(--facets-see-results-min-width);\n flex-grow: 1;\n padding-block: var(--padding-lg);\n }\n\n .facets-horizontal-remove {\n display: flex;\n align-items: center;\n }\n\n .facets-horizontal-remove--active::before {\n content: '';\n border-inline-start: var(--style-border-width) solid var(--color-border);\n height: var(--font-paragraph--size);\n position: absolute;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.filters\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"checkbox\",\n \"id\": \"enable_filtering\",\n \"label\": \"t:settings.enable_filtering\",\n \"info\": \"t:info.enable_filtering_info\",\n \"default\": false\n },\n {\n \"type\": \"select\",\n \"id\": \"filter_style\",\n \"label\": \"t:settings.direction\",\n \"options\": [\n {\n \"value\": \"horizontal\",\n \"label\": \"t:options.horizontal\"\n },\n {\n \"value\": \"vertical\",\n \"label\": \"t:options.vertical\"\n }\n ],\n \"default\": \"horizontal\",\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"filter_width\",\n \"label\": \"t:settings.width\",\n \"options\": [\n {\n \"value\": \"centered\",\n \"label\": \"t:options.page\"\n },\n {\n \"value\": \"full-width\",\n \"label\": \"t:options.full\"\n }\n ],\n \"default\": \"centered\",\n \"visible_if\": \"{{ block.settings.enable_filtering == true and block.settings.filter_style == 'horizontal' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"text_label_case\",\n \"label\": \"t:settings.text_label_case\",\n \"options\": [\n {\n \"value\": \"default\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"uppercase\",\n \"label\": \"t:options.uppercase\"\n }\n ],\n \"default\": \"default\",\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_swatch_label\",\n \"label\": \"t:settings.show_swatch_label\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_filter_label\",\n \"label\": \"t:settings.show_filter_label\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.enable_filtering == true }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"enable_sorting\",\n \"label\": \"t:settings.enable_sorting\",\n \"default\": true\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"enable_grid_density\",\n \"label\": \"t:settings.enable_grid_density\",\n \"default\": true\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.margin\"\n },\n {\n \"type\": \"range\",\n \"id\": \"facets_margin_bottom\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 8,\n \"visible_if\": \"{{ block.settings.filter_style == 'horizontal' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"facets_margin_right\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 20,\n \"visible_if\": \"{{ block.settings.filter_style == 'vertical' }}\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/follow-on-shop.liquid",
"content": "{%- if shop.features.follow_on_shop? -%}\n \n {{ shop | login_button: action: 'follow' }}\n \n{%- endif -%}\n\n{% schema %}\n{\n \"name\": \"t:names.follow_on_shop\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.follow_on_shop_eligiblity\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.follow_on_shop\",\n \"category\": \"t:categories.footer\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/footer-copyright.liquid",
"content": "{% assign block_settings = block.settings %}\n\n \n\n\n{% schema %}\n{\n \"name\": \"t:names.copyright\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"checkbox\",\n \"id\": \"show_powered_by\",\n \"label\": \"t:settings.show_powered_by_shopify\",\n \"default\": true\n },\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.manage_store_name\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font_size\",\n \"label\": \"t:settings.size\",\n \"options\": [\n {\n \"value\": \"0.625rem\",\n \"label\": \"10px\"\n },\n {\n \"value\": \"0.75rem\",\n \"label\": \"12px\"\n },\n {\n \"value\": \"0.875rem\",\n \"label\": \"14px\"\n },\n {\n \"value\": \"1rem\",\n \"label\": \"16px\"\n },\n {\n \"value\": \"1.125rem\",\n \"label\": \"18px\"\n }\n ],\n \"default\": \"0.75rem\"\n },\n {\n \"type\": \"select\",\n \"id\": \"case\",\n \"label\": \"t:settings.case\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"uppercase\",\n \"label\": \"t:options.uppercase\"\n }\n ],\n \"default\": \"none\"\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.copyright\",\n \"category\": \"t:categories.footer\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/footer-policy-list.liquid",
"content": "{% if shop.policies.size > 0 %}\n \n \n {{ 'content.terms_and_policies' | t }}\n \n \n \n {%- for policy in shop.policies -%}\n {%- if policy != blank -%}\n \n \n {{- policy.title | escape -}}\n \n \n {%- endif -%}\n {%- endfor -%}\n \n \n \n{% endif %}\n\n{% stylesheet %}\n .policy-list-trigger {\n anchor-name: --terms-policies-trigger;\n cursor: pointer;\n font-size: var(--font-size, 0.75rem);\n text-transform: var(--text-transform, none);\n }\n\n .policy_list {\n li {\n border-radius: calc(var(--style-border-radius-popover) - 8px);\n\n a {\n color: var(--color-foreground);\n display: inline-block;\n padding: 8px;\n text-align: start;\n width: 100%;\n outline-color: #0000;\n font-size: var(--font-size, 0.75rem);\n text-transform: var(--text-transform, none);\n }\n\n &:is(:hover, :focus-within) {\n background: rgb(var(--color-foreground-rgb) / 0.15);\n }\n }\n }\n\n .terms-policies-popover {\n position-anchor: --terms-policies-trigger;\n inset: unset;\n bottom: calc(anchor(top) + 1rem);\n left: anchor(left);\n border-radius: var(--style-border-radius-popover);\n background: linear-gradient(var(--color-background) 0 100%),\n linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);\n background-clip: padding-box, border-box;\n border: 1px solid #0000;\n box-shadow: var(--shadow-popover);\n padding: 8px;\n margin: 0;\n opacity: 0;\n scale: 0.94;\n translate: 0 6px;\n transform-origin: 3.9em 100%;\n }\n\n .terms-policies-popover.\\:popover-open,\n .terms-policies-popover:popover-open {\n opacity: 1;\n translate: 0 0;\n scale: 1;\n }\n\n @media screen and (max-width: 749px) {\n .terms-policies-popover {\n left: anchor(center);\n transform: translate(-50%, 0);\n transform-origin: 0% 100%;\n }\n }\n\n @supports not (position-anchor: --account-button-trigger) {\n .terms-policies-popover {\n bottom: unset;\n top: calc(var(--anchor-top) * 1px);\n left: calc(var(--anchor-left) * 1px);\n transform: translate(0, calc(-100% - 1.25rem));\n }\n\n @media screen and (max-width: 749px) {\n .terms-policies-popover {\n left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);\n transform: translate(-50%, calc(-100% - 1.25rem));\n }\n }\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .terms-policies-popover {\n transition-property: display, overlay, opacity, scale, translate;\n transition-behavior: allow-discrete;\n transition-duration: 0.3s;\n transition-timing-function: var(--ease-out-quad);\n }\n\n @starting-style {\n .terms-policies-popover.\\:popover-open,\n .terms-policies-popover:popover-open {\n opacity: 0.7;\n translate: 0 6px;\n scale: 0.94;\n }\n }\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.policy_list\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.manage_policies\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font_size\",\n \"label\": \"t:settings.size\",\n \"options\": [\n {\n \"value\": \"0.625rem\",\n \"label\": \"10px\"\n },\n {\n \"value\": \"0.75rem\",\n \"label\": \"12px\"\n },\n {\n \"value\": \"0.875rem\",\n \"label\": \"14px\"\n },\n {\n \"value\": \"1rem\",\n \"label\": \"16px\"\n },\n {\n \"value\": \"1.125rem\",\n \"label\": \"18px\"\n }\n ],\n \"default\": \"0.75rem\"\n },\n {\n \"type\": \"select\",\n \"id\": \"case\",\n \"label\": \"t:settings.case\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"uppercase\",\n \"label\": \"t:options.uppercase\"\n }\n ],\n \"default\": \"none\"\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.policy_list\",\n \"category\": \"t:categories.footer\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/group.liquid",
"content": "{%- capture children %}\n {% content_for 'blocks' %}\n{% endcapture %}\n\n{% render 'group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %}\n\n{% schema %}\n{\n \"name\": \"t:names.group\",\n \"tag\": null,\n \"blocks\": [\n {\n \"type\": \"@theme\"\n },\n {\n \"type\": \"@app\"\n },\n {\n \"type\": \"_divider\"\n }\n ],\n \"settings\": [\n {\n \"type\": \"header\",\n \"content\": \"t:content.layout\"\n },\n {\n \"type\": \"select\",\n \"id\": \"content_direction\",\n \"label\": \"t:settings.direction\",\n \"options\": [\n {\n \"value\": \"column\",\n \"label\": \"t:options.vertical\"\n },\n {\n \"value\": \"row\",\n \"label\": \"t:options.horizontal\"\n }\n ],\n \"default\": \"column\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"vertical_on_mobile\",\n \"label\": \"t:settings.vertical_on_mobile\",\n \"default\": true,\n \"visible_if\": \"{{ block.settings.content_direction == 'row' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"horizontal_alignment\",\n \"label\": \"t:settings.alignment\",\n \"options\": [\n {\n \"value\": \"flex-start\",\n \"label\": \"t:options.left\"\n },\n {\n \"value\": \"center\",\n \"label\": \"t:options.center\"\n },\n {\n \"value\": \"flex-end\",\n \"label\": \"t:options.right\"\n },\n {\n \"value\": \"space-between\",\n \"label\": \"t:options.space_between\"\n }\n ],\n \"default\": \"flex-start\",\n \"visible_if\": \"{{ block.settings.content_direction == 'row' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"vertical_alignment\",\n \"label\": \"t:settings.position\",\n \"options\": [\n {\n \"value\": \"flex-start\",\n \"label\": \"t:options.top\"\n },\n {\n \"value\": \"center\",\n \"label\": \"t:options.center\"\n },\n {\n \"value\": \"flex-end\",\n \"label\": \"t:options.bottom\"\n }\n ],\n \"default\": \"center\",\n \"visible_if\": \"{{ block.settings.content_direction == 'row' }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"align_baseline\",\n \"label\": \"t:settings.align_baseline\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.vertical_alignment == 'flex-end' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"horizontal_alignment_flex_direction_column\",\n \"label\": \"t:settings.alignment\",\n \"options\": [\n {\n \"value\": \"flex-start\",\n \"label\": \"t:options.left\"\n },\n {\n \"value\": \"center\",\n \"label\": \"t:options.center\"\n },\n {\n \"value\": \"flex-end\",\n \"label\": \"t:options.right\"\n }\n ],\n \"default\": \"flex-start\",\n \"visible_if\": \"{{ block.settings.content_direction != 'row' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"vertical_alignment_flex_direction_column\",\n \"label\": \"t:settings.position\",\n \"options\": [\n {\n \"value\": \"flex-start\",\n \"label\": \"t:options.top\"\n },\n {\n \"value\": \"center\",\n \"label\": \"t:options.center\"\n },\n {\n \"value\": \"flex-end\",\n \"label\": \"t:options.bottom\"\n },\n {\n \"value\": \"space-between\",\n \"label\": \"t:options.space_between\"\n }\n ],\n \"default\": \"center\",\n \"visible_if\": \"{{ block.settings.content_direction == 'column' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"gap\",\n \"label\": \"t:settings.gap\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 12\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.size\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width\",\n \"label\": \"t:settings.width\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fill\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_width\",\n \"label\": \"t:settings.custom_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.width == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width_mobile\",\n \"label\": \"t:settings.width_mobile\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fill\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_width_mobile\",\n \"label\": \"t:settings.custom_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.width_mobile == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"height\",\n \"label\": \"t:settings.height\",\n \"options\": [\n {\n \"value\": \"fit\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fit\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_height\",\n \"label\": \"t:settings.custom_height\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.height == 'custom' }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.appearance\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"background_media\",\n \"label\": \"t:settings.background_media\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"image\",\n \"label\": \"t:options.image\"\n },\n {\n \"value\": \"video\",\n \"label\": \"t:options.video\"\n }\n ],\n \"default\": \"none\"\n },\n {\n \"type\": \"video\",\n \"id\": \"video\",\n \"label\": \"t:settings.video\",\n \"visible_if\": \"{{ block.settings.background_media == 'video' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"video_position\",\n \"label\": \"t:settings.video_position\",\n \"options\": [\n {\n \"value\": \"cover\",\n \"label\": \"t:options.cover\"\n },\n {\n \"value\": \"contain\",\n \"label\": \"t:options.contain\"\n }\n ],\n \"default\": \"cover\",\n \"visible_if\": \"{{ block.settings.background_media == 'video' }}\"\n },\n {\n \"type\": \"image_picker\",\n \"id\": \"background_image\",\n \"label\": \"t:settings.image\",\n \"visible_if\": \"{{ block.settings.background_media == 'image' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"background_image_position\",\n \"label\": \"t:settings.image_position\",\n \"options\": [\n {\n \"value\": \"cover\",\n \"label\": \"t:options.cover\"\n },\n {\n \"value\": \"fit\",\n \"label\": \"t:options.fit\"\n }\n ],\n \"default\": \"cover\",\n \"visible_if\": \"{{ block.settings.background_media == 'image' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"border\",\n \"label\": \"t:settings.borders\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"solid\",\n \"label\": \"t:options.solid\"\n }\n ],\n \"default\": \"none\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_width\",\n \"min\": 0,\n \"max\": 10,\n \"step\": 0.5,\n \"unit\": \"px\",\n \"label\": \"t:settings.border_width\",\n \"default\": 1,\n \"visible_if\": \"{{ block.settings.border != 'none' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_opacity\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"label\": \"t:settings.border_opacity\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.border != 'none' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_radius\",\n \"label\": \"t:settings.border_radius\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"toggle_overlay\",\n \"label\": \"t:settings.background_overlay\"\n },\n {\n \"type\": \"color\",\n \"id\": \"overlay_color\",\n \"label\": \"t:settings.overlay_color\",\n \"alpha\": true,\n \"default\": \"#00000026\",\n \"visible_if\": \"{{ block.settings.toggle_overlay }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"overlay_style\",\n \"label\": \"t:settings.overlay_style\",\n \"options\": [\n {\n \"value\": \"solid\",\n \"label\": \"t:options.solid\"\n },\n {\n \"value\": \"gradient\",\n \"label\": \"t:options.gradient\"\n }\n ],\n \"default\": \"solid\",\n \"visible_if\": \"{{ block.settings.toggle_overlay }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"gradient_direction\",\n \"label\": \"t:settings.gradient_direction\",\n \"options\": [\n {\n \"value\": \"to top\",\n \"label\": \"t:options.up\"\n },\n {\n \"value\": \"to bottom\",\n \"label\": \"t:options.down\"\n }\n ],\n \"default\": \"to top\",\n \"visible_if\": \"{{ block.settings.toggle_overlay and block.settings.overlay_style == 'gradient' }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.block_link\"\n },\n {\n \"type\": \"url\",\n \"id\": \"link\",\n \"label\": \"t:settings.link\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"open_in_new_tab\",\n \"label\": \"t:settings.open_new_tab\",\n \"default\": false\n },\n {\n \"type\": \"text\",\n \"id\": \"placeholder\",\n \"label\": \"t:settings.image\",\n \"visible_if\": \"{{ false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.group\",\n \"category\": \"t:categories.layout\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/icon.liquid",
"content": "{% assign block_settings = block.settings %}\n{% assign icon_block_class = 'icon-block__media icon-block-' | append: block.id %}\n\n{% capture icon %}\n {% render 'icon-or-image',\n icon: block_settings.icon,\n image_upload: block_settings.image_upload,\n width: block_settings.width,\n class_name: icon_block_class,\n attributes: block.shopify_attributes\n %}\n{% endcapture %}\n\n{%- if block_settings.link != blank -%}\n \n {{ icon }}\n \n{%- else -%}\n {{ icon }}\n{%- endif -%}\n\n{% stylesheet %}\n .icon-block {\n display: flex;\n flex-shrink: 0;\n }\n\n .icon-block__media {\n height: auto;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.icon\",\n \"class\": \"icon-block\",\n \"settings\": [\n {\n \"type\": \"select\",\n \"id\": \"icon\",\n \"label\": \"t:settings.icon\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"apple\",\n \"label\": \"t:options.apple\"\n },\n {\n \"value\": \"arrow\",\n \"label\": \"t:options.arrow\"\n },\n {\n \"value\": \"banana\",\n \"label\": \"t:options.banana\"\n },\n {\n \"value\": \"bottle\",\n \"label\": \"t:options.bottle\"\n },\n {\n \"value\": \"box\",\n \"label\": \"t:options.box\"\n },\n {\n \"value\": \"carrot\",\n \"label\": \"t:options.carrot\"\n },\n {\n \"value\": \"chat_bubble\",\n \"label\": \"t:options.chat_bubble\"\n },\n {\n \"value\": \"check_box\",\n \"label\": \"t:options.check_box\"\n },\n {\n \"value\": \"clipboard\",\n \"label\": \"t:options.clipboard\"\n },\n {\n \"value\": \"dairy\",\n \"label\": \"t:options.dairy\"\n },\n {\n \"value\": \"dairy_free\",\n \"label\": \"t:options.dairy_free\"\n },\n {\n \"value\": \"dryer\",\n \"label\": \"t:options.dryer\"\n },\n {\n \"value\": \"eye\",\n \"label\": \"t:options.eye\"\n },\n {\n \"value\": \"fire\",\n \"label\": \"t:options.fire\"\n },\n {\n \"value\": \"gluten_free\",\n \"label\": \"t:options.gluten_free\"\n },\n {\n \"value\": \"heart\",\n \"label\": \"t:options.heart\"\n },\n {\n \"value\": \"iron\",\n \"label\": \"t:options.iron\"\n },\n {\n \"value\": \"leaf\",\n \"label\": \"t:options.leaf\"\n },\n {\n \"value\": \"leather\",\n \"label\": \"t:options.leather\"\n },\n {\n \"value\": \"lightning_bolt\",\n \"label\": \"t:options.lightning_bolt\"\n },\n {\n \"value\": \"lipstick\",\n \"label\": \"t:options.lipstick\"\n },\n {\n \"value\": \"lock\",\n \"label\": \"t:options.lock\"\n },\n {\n \"value\": \"map_pin\",\n \"label\": \"t:options.map_pin\"\n },\n {\n \"value\": \"nut_free\",\n \"label\": \"t:options.nut_free\"\n },\n {\n \"value\": \"pants\",\n \"label\": \"t:options.pants\"\n },\n {\n \"value\": \"paw_print\",\n \"label\": \"t:options.paw_print\"\n },\n {\n \"value\": \"pepper\",\n \"label\": \"t:options.pepper\"\n },\n {\n \"value\": \"perfume\",\n \"label\": \"t:options.perfume\"\n },\n {\n \"value\": \"plane\",\n \"label\": \"t:options.plane\"\n },\n {\n \"value\": \"plant\",\n \"label\": \"t:options.plant\"\n },\n {\n \"value\": \"price_tag\",\n \"label\": \"t:options.price_tag\"\n },\n {\n \"value\": \"question_mark\",\n \"label\": \"t:options.question_mark\"\n },\n {\n \"value\": \"recycle\",\n \"label\": \"t:options.recycle\"\n },\n {\n \"value\": \"return\",\n \"label\": \"t:options.return\"\n },\n {\n \"value\": \"ruler\",\n \"label\": \"t:options.ruler\"\n },\n {\n \"value\": \"serving_dish\",\n \"label\": \"t:options.serving_dish\"\n },\n {\n \"value\": \"shirt\",\n \"label\": \"t:options.shirt\"\n },\n {\n \"value\": \"shoe\",\n \"label\": \"t:options.shoe\"\n },\n {\n \"value\": \"silhouette\",\n \"label\": \"t:options.silhouette\"\n },\n {\n \"value\": \"bluesky\",\n \"label\": \"t:options.social_bluesky\"\n },\n {\n \"value\": \"facebook\",\n \"label\": \"t:options.social_facebook\"\n },\n {\n \"value\": \"instagram\",\n \"label\": \"t:options.social_instagram\"\n },\n {\n \"value\": \"linkedin\",\n \"label\": \"t:options.social_linkedin\"\n },\n {\n \"value\": \"pinterest\",\n \"label\": \"t:options.social_pinterest\"\n },\n {\n \"value\": \"snapchat\",\n \"label\": \"t:options.social_snapchat\"\n },\n {\n \"value\": \"spotify\",\n \"label\": \"t:options.social_spotify\"\n },\n {\n \"value\": \"threads\",\n \"label\": \"t:options.social_threads\"\n },\n {\n \"value\": \"tiktok\",\n \"label\": \"t:options.social_tiktok\"\n },\n {\n \"value\": \"tumblr\",\n \"label\": \"t:options.social_tumblr\"\n },\n {\n \"value\": \"twitter\",\n \"label\": \"t:options.social_twitter\"\n },\n {\n \"value\": \"vimeo\",\n \"label\": \"t:options.social_vimeo\"\n },\n {\n \"value\": \"youtube\",\n \"label\": \"t:options.social_youtube\"\n },\n {\n \"value\": \"whatsapp\",\n \"label\": \"t:options.social_whatsapp\"\n },\n {\n \"value\": \"snowflake\",\n \"label\": \"t:options.snowflake\"\n },\n {\n \"value\": \"star\",\n \"label\": \"t:options.star\"\n },\n {\n \"value\": \"stopwatch\",\n \"label\": \"t:options.stopwatch\"\n },\n {\n \"value\": \"truck\",\n \"label\": \"t:options.truck\"\n },\n {\n \"value\": \"washing\",\n \"label\": \"t:options.washing\"\n }\n ],\n \"default\": \"apple\"\n },\n {\n \"type\": \"image_picker\",\n \"id\": \"image_upload\",\n \"label\": \"t:settings.image_icon\"\n },\n {\n \"type\": \"range\",\n \"id\": \"width\",\n \"label\": \"t:settings.width\",\n \"min\": 12,\n \"max\": 200,\n \"step\": 2,\n \"unit\": \"px\",\n \"default\": 24\n },\n {\n \"type\": \"url\",\n \"id\": \"link\",\n \"label\": \"t:settings.link\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"open_in_new_tab\",\n \"label\": \"t:settings.open_new_tab\",\n \"default\": false\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.icon\",\n \"category\": \"t:categories.basic\",\n \"settings\": {\n \"icon\": \"price_tag\"\n }\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/image.liquid",
"content": "{% liquid\n assign block_settings = block.settings\n assign ratio = 1\n\n case block_settings.image_ratio\n when 'landscape'\n assign ratio = '16 / 9'\n when 'portrait'\n assign ratio = '4 / 5'\n when 'adapt'\n assign ratio = block_settings.image.aspect_ratio\n endcase\n\n if ratio == 0 or ratio == null\n assign ratio = 1\n endif\n%}\n\n{% capture class %}\n image-block image-block--{{ block.id }} image-block--height-{{ block_settings.height }} spacing-style size-style\n{% endcapture %}\n\n{% capture style %}\n --ratio: {{ ratio }};\n {% render 'size-style', settings: block_settings %}\n {% render 'spacing-style', settings: block_settings %}\n{% endcapture %}\n\n{% capture image_border_style %}\n --ratio: {{ ratio }};\n {% render 'border-override', settings: block_settings %}\n{% endcapture %}\n\n{% liquid\n assign media_width_desktop = '100vw'\n assign media_width_mobile = '100vw'\n assign sizes = 'auto, (min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile\n assign widths = '240, 352, 832, 1200, 1600, 1920, 2560, 3840'\n%}\n\n{% capture image %}\n {%- if block_settings.image -%}\n {{\n block_settings.image\n | image_url: width: 3840\n | image_tag:\n width: block_settings.image.width,\n widths: widths,\n height: block_settings.image.height,\n class: 'image-block__image border-style',\n style: image_border_style,\n sizes: sizes\n }}\n {%- else -%}\n \n {{ 'detailed-apparel-1' | placeholder_svg_tag: 'hero__media' }}\n \n {%- endif -%}\n{% endcapture %}\n\n{% if block_settings.link == blank %}\n \n {{ image }}\n \n{% else %}\n \n {{ image }}\n \n{% endif %}\n\n{% stylesheet %}\n .placeholder-image {\n position: relative;\n aspect-ratio: var(--ratio);\n overflow: hidden;\n }\n\n .image-block {\n display: flex;\n\n /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */\n justify-content: var(--horizontal-alignment, 'inline-start');\n }\n\n .image-block--height-fill .image-block__image {\n height: 100%;\n }\n\n .image-block__image {\n object-fit: cover;\n aspect-ratio: var(--ratio);\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.image\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"image_picker\",\n \"id\": \"image\",\n \"label\": \"t:settings.image\"\n },\n {\n \"type\": \"url\",\n \"id\": \"link\",\n \"label\": \"t:settings.link\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.size\"\n },\n {\n \"type\": \"select\",\n \"id\": \"image_ratio\",\n \"label\": \"t:settings.aspect_ratio\",\n \"options\": [\n {\n \"value\": \"adapt\",\n \"label\": \"t:options.auto\"\n },\n {\n \"value\": \"portrait\",\n \"label\": \"t:options.portrait\"\n },\n {\n \"value\": \"square\",\n \"label\": \"t:options.square\"\n },\n {\n \"value\": \"landscape\",\n \"label\": \"t:options.landscape\"\n }\n ],\n \"default\": \"adapt\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width\",\n \"label\": \"t:settings.width_desktop\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fill\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_width\",\n \"label\": \"t:settings.custom_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.width == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width_mobile\",\n \"label\": \"t:settings.width_mobile\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fill\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_width_mobile\",\n \"label\": \"t:settings.custom_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.width_mobile == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"height\",\n \"label\": \"t:settings.height\",\n \"options\": [\n {\n \"value\": \"fit\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n }\n ],\n \"default\": \"fit\",\n \"visible_if\": \"{{ block.settings.image_ratio == 'adapt' }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.borders\"\n },\n {\n \"type\": \"select\",\n \"id\": \"border\",\n \"label\": \"t:settings.style\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"solid\",\n \"label\": \"t:options.solid\"\n }\n ],\n \"default\": \"none\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"label\": \"t:settings.thickness\",\n \"default\": 1,\n \"visible_if\": \"{{ block.settings.border != 'none' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_opacity\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"label\": \"t:settings.opacity\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.border != 'none' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_radius\",\n \"label\": \"t:settings.border_radius\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.image\",\n \"category\": \"t:categories.basic\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/jumbo-text.liquid",
"content": "{% render 'jumbo-text' %}\n\n{% schema %}\n{\n \"name\": \"t:names.jumbo_text\",\n \"tag\": null,\n \"settings\": [\n {\n \"id\": \"text\",\n \"type\": \"textarea\",\n \"label\": \"t:settings.text\",\n \"default\": \"t:text_defaults.be_bold\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font\",\n \"label\": \"t:settings.font\",\n \"options\": [\n {\n \"value\": \"body\",\n \"label\": \"t:options.body\"\n },\n {\n \"value\": \"subheading\",\n \"label\": \"t:options.subheading\"\n },\n {\n \"value\": \"heading\",\n \"label\": \"t:options.heading\"\n },\n {\n \"value\": \"accent\",\n \"label\": \"t:options.accent\"\n }\n ],\n \"default\": \"heading\"\n },\n {\n \"type\": \"text_alignment\",\n \"id\": \"alignment\",\n \"label\": \"t:settings.alignment\",\n \"default\": \"left\"\n },\n {\n \"type\": \"select\",\n \"id\": \"line_height\",\n \"label\": \"t:settings.line_height\",\n \"options\": [\n {\n \"value\": \"0.8\",\n \"label\": \"t:options.tight\"\n },\n {\n \"value\": \"1\",\n \"label\": \"t:options.normal\"\n },\n {\n \"value\": \"1.2\",\n \"label\": \"t:options.loose\"\n }\n ],\n \"default\": \"0.8\"\n },\n {\n \"type\": \"select\",\n \"id\": \"letter_spacing\",\n \"label\": \"t:settings.letter_spacing\",\n \"options\": [\n {\n \"value\": \"-0.03em\",\n \"label\": \"t:options.tight\"\n },\n {\n \"value\": \"normal\",\n \"label\": \"t:options.normal\"\n },\n {\n \"value\": \"0.03em\",\n \"label\": \"t:options.loose\"\n }\n ],\n \"default\": \"-0.03em\"\n },\n {\n \"type\": \"select\",\n \"id\": \"case\",\n \"label\": \"t:settings.case\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"uppercase\",\n \"label\": \"t:options.uppercase\"\n }\n ],\n \"default\": \"none\"\n },\n {\n \"type\": \"select\",\n \"id\": \"text_effect\",\n \"label\": \"t:settings.animation\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"blur\",\n \"label\": \"t:options.blur\"\n },\n {\n \"value\": \"reveal\",\n \"label\": \"t:options.reveal\"\n }\n ],\n \"default\": \"none\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"animation_repeat\",\n \"label\": \"t:settings.animation_repeat\",\n \"default\": false,\n \"visible_if\": \"{{ block.settings.text_effect == \\\"blur\\\" or block.settings.text_effect == \\\"reveal\\\" }}\"\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.jumbo_text\",\n \"category\": \"t:categories.decorative\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/logo.liquid",
"content": "{% liquid\n assign block_settings = block.settings\n assign image = settings.logo\n\n if block_settings.inverse and settings.logo_inverse\n assign image = settings.logo_inverse\n endif\n%}\n\n{%- if image -%}\n {% capture logo_image %}\n {{-\n image\n | image_url: width: 3840\n | image_tag:\n width: image.width,\n widths: '240, 352, 832, 1200, 1600, 1920, 2560, 3840',\n height: image.height,\n class: 'logo-block__image',\n alt: shop.name,\n sizes: '(min-width: 750px) calc(var(--logo-width)), 100vw'\n -}}\n {% endcapture %}\n{%- endif -%}\n\n\n {% if logo_image %}\n \n {{ logo_image }}\n \n {% else %}\n {% render 'jumbo-text', text: shop.name %}\n {% endif %}\n\n\n{% stylesheet %}\n .logo-block {\n width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));\n max-width: 100%;\n max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));\n font-size: var(--logo-height);\n display: flex;\n\n @media screen and (max-width: 749px) {\n max-height: calc(\n var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)\n );\n font-size: var(--logo-height-mobile, var(--logo-height));\n width: calc(\n var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)\n );\n }\n }\n\n .logo-block__image-wrapper {\n display: flex;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n }\n\n .logo-block__image {\n object-fit: contain;\n width: 100%;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.logo\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"checkbox\",\n \"label\": \"t:settings.use_inverse_logo\",\n \"id\": \"inverse\",\n \"default\": false,\n \"visible_if\": \"{{ settings.logo_inverse }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font\",\n \"label\": \"t:settings.font\",\n \"options\": [\n {\n \"value\": \"body\",\n \"label\": \"t:options.body\"\n },\n {\n \"value\": \"subheading\",\n \"label\": \"t:options.subheading\"\n },\n {\n \"value\": \"heading\",\n \"label\": \"t:options.heading\"\n },\n {\n \"value\": \"accent\",\n \"label\": \"t:options.accent\"\n }\n ],\n \"default\": \"heading\",\n \"visible_if\": \"{{ settings.logo == blank and settings.logo_inverse == blank or block.settings.inverse == false }}\"\n },\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.edit_logo_in_theme_settings\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.size\"\n },\n {\n \"type\": \"select\",\n \"id\": \"unit\",\n \"label\": \"t:settings.unit\",\n \"options\": [\n {\n \"value\": \"pixel\",\n \"label\": \"t:options.pixel\"\n },\n {\n \"value\": \"percent\",\n \"label\": \"t:options.percent\"\n }\n ],\n \"default\": \"percent\"\n },\n {\n \"type\": \"range\",\n \"id\": \"percent_width\",\n \"label\": \"t:settings.width\",\n \"min\": 10,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.unit == 'percent' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"pixel_height\",\n \"label\": \"t:settings.height\",\n \"min\": 16,\n \"max\": 320,\n \"step\": 8,\n \"unit\": \"px\",\n \"default\": 48,\n \"visible_if\": \"{{ block.settings.unit == 'pixel' }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"custom_mobile_size\",\n \"label\": \"t:settings.custom_mobile_size\",\n \"default\": false\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.mobile_size\",\n \"visible_if\": \"{{ block.settings.custom_mobile_size == true }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"unit_mobile\",\n \"label\": \"t:settings.unit\",\n \"options\": [\n {\n \"value\": \"pixel\",\n \"label\": \"t:options.pixel\"\n },\n {\n \"value\": \"percent\",\n \"label\": \"t:options.percent\"\n }\n ],\n \"default\": \"percent\",\n \"visible_if\": \"{{ block.settings.custom_mobile_size == true }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"percent_width_mobile\",\n \"label\": \"t:settings.width\",\n \"min\": 10,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.unit_mobile == 'percent' and block.settings.custom_mobile_size == true}}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"pixel_height_mobile\",\n \"label\": \"t:settings.height\",\n \"min\": 16,\n \"max\": 160,\n \"step\": 8,\n \"unit\": \"px\",\n \"default\": 120,\n \"visible_if\": \"{{ block.settings.unit_mobile == 'pixel' and block.settings.custom_mobile_size == true}}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.logo\",\n \"category\": \"t:categories.basic\",\n \"settings\": {\n \"unit\": \"pixel\",\n \"pixel_height\": 48\n }\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/menu.liquid",
"content": "{% liquid\n assign block_settings = block.settings\n assign menu = block_settings.menu\n assign heading = block_settings.heading\n assign color_scheme = block_settings.color_scheme\n assign show_as_accordion = block_settings.show_as_accordion\n if show_as_accordion == true and block_settings.accordion_dividers == true\n assign dividers_enabled = true\n endif\n%}\n\n{% if menu != blank or heading != blank %}\n \n \n \n \n \n
\n\n \n {% if menu %}\n \n {% for link in menu.links %}\n \n {% endfor %}\n
\n {% endif %}\n \n
\n {{ 'detailed-apparel-1' | placeholder_svg_tag: 'hero__media' }}\n
\n {%- endif -%}\n{% endcapture %}\n\n{% if block_settings.link == blank %}\n \n {{ logo_image }}\n
\n {% else %}\n {% render 'jumbo-text', text: shop.name %}\n {% endif %}\n\n\n{% stylesheet %}\n .logo-block {\n width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));\n max-width: 100%;\n max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));\n font-size: var(--logo-height);\n display: flex;\n\n @media screen and (max-width: 749px) {\n max-height: calc(\n var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)\n );\n font-size: var(--logo-height-mobile, var(--logo-height));\n width: calc(\n var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)\n );\n }\n }\n\n .logo-block__image-wrapper {\n display: flex;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n }\n\n .logo-block__image {\n object-fit: contain;\n width: 100%;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.logo\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"checkbox\",\n \"label\": \"t:settings.use_inverse_logo\",\n \"id\": \"inverse\",\n \"default\": false,\n \"visible_if\": \"{{ settings.logo_inverse }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font\",\n \"label\": \"t:settings.font\",\n \"options\": [\n {\n \"value\": \"body\",\n \"label\": \"t:options.body\"\n },\n {\n \"value\": \"subheading\",\n \"label\": \"t:options.subheading\"\n },\n {\n \"value\": \"heading\",\n \"label\": \"t:options.heading\"\n },\n {\n \"value\": \"accent\",\n \"label\": \"t:options.accent\"\n }\n ],\n \"default\": \"heading\",\n \"visible_if\": \"{{ settings.logo == blank and settings.logo_inverse == blank or block.settings.inverse == false }}\"\n },\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.edit_logo_in_theme_settings\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.size\"\n },\n {\n \"type\": \"select\",\n \"id\": \"unit\",\n \"label\": \"t:settings.unit\",\n \"options\": [\n {\n \"value\": \"pixel\",\n \"label\": \"t:options.pixel\"\n },\n {\n \"value\": \"percent\",\n \"label\": \"t:options.percent\"\n }\n ],\n \"default\": \"percent\"\n },\n {\n \"type\": \"range\",\n \"id\": \"percent_width\",\n \"label\": \"t:settings.width\",\n \"min\": 10,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.unit == 'percent' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"pixel_height\",\n \"label\": \"t:settings.height\",\n \"min\": 16,\n \"max\": 320,\n \"step\": 8,\n \"unit\": \"px\",\n \"default\": 48,\n \"visible_if\": \"{{ block.settings.unit == 'pixel' }}\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"custom_mobile_size\",\n \"label\": \"t:settings.custom_mobile_size\",\n \"default\": false\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.mobile_size\",\n \"visible_if\": \"{{ block.settings.custom_mobile_size == true }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"unit_mobile\",\n \"label\": \"t:settings.unit\",\n \"options\": [\n {\n \"value\": \"pixel\",\n \"label\": \"t:options.pixel\"\n },\n {\n \"value\": \"percent\",\n \"label\": \"t:options.percent\"\n }\n ],\n \"default\": \"percent\",\n \"visible_if\": \"{{ block.settings.custom_mobile_size == true }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"percent_width_mobile\",\n \"label\": \"t:settings.width\",\n \"min\": 10,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.unit_mobile == 'percent' and block.settings.custom_mobile_size == true}}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"pixel_height_mobile\",\n \"label\": \"t:settings.height\",\n \"min\": 16,\n \"max\": 160,\n \"step\": 8,\n \"unit\": \"px\",\n \"default\": 120,\n \"visible_if\": \"{{ block.settings.unit_mobile == 'pixel' and block.settings.custom_mobile_size == true}}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.logo\",\n \"category\": \"t:categories.basic\",\n \"settings\": {\n \"unit\": \"pixel\",\n \"pixel_height\": 48\n }\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/menu.liquid",
"content": "{% liquid\n assign block_settings = block.settings\n assign menu = block_settings.menu\n assign heading = block_settings.heading\n assign color_scheme = block_settings.color_scheme\n assign show_as_accordion = block_settings.show_as_accordion\n if show_as_accordion == true and block_settings.accordion_dividers == true\n assign dividers_enabled = true\n endif\n%}\n\n{% if menu != blank or heading != blank %}\n \n \n \n
\n\n- \n {% for link in menu.links %}\n \n {% endfor %}\n
{{ block_settings.page.title }}
\n {%- endif -%}\n {%- if block_settings.page.content != blank -%}\n\n {{ block_settings.page.content }}\n
\n {%- endif -%}\n {%- else -%}\n {{ 'content.page_placeholder_title' | t }}
\n\n {{ 'content.page_placeholder_content' | t }}\n
\n {%- endif -%}\n\n\n{% stylesheet %}\n .page-block {\n display: flex;\n flex-direction: column;\n max-width: 100%;\n max-height: 100%;\n width: 100%;\n height: auto;\n align-items: flex-start;\n }\n\n .page-title {\n margin-bottom: var(--margin-xl);\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.page\",\n \"settings\": [\n {\n \"type\": \"page\",\n \"id\": \"page\",\n \"label\": \"t:settings.page\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.appearance\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"background\",\n \"label\": \"t:settings.background\",\n \"default\": false\n },\n {\n \"type\": \"color\",\n \"id\": \"background_color\",\n \"label\": \"t:settings.background_color\",\n \"default\": \"#00000026\",\n \"visible_if\": \"{{ block.settings.background }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.page\",\n \"category\": \"t:categories.basic\"\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/payment-icons.liquid",
"content": "{% assign block_settings = block.settings %}\n\n{%- assign block_settings = block.settings -%}\n\n\n {% content_for 'blocks' %}\n
\n \n {%- if cart.duties_included and cart.taxes_included -%}\n {{ 'content.duties_and_taxes_included' | t }}\n {%- elsif cart.taxes_included -%}\n {{ 'content.taxes_included' | t }}\n {%- elsif cart.duties_included -%}\n {{ 'content.duties_included' | t }}\n {%- endif -%}\n\n {%- if shop.shipping_policy.body != blank -%}\n {{ 'content.shipping_policy' | t }}\n {%- endif -%}\n
\n {% endif %}\n\n {%- if selected_variant != blank and block_settings.show_installments -%}\n \n {%- assign product_form_installment_id = 'product-form-installment-' | append: block.id -%}\n {%- form 'product', product_resource, id: product_form_installment_id, class: 'payment-terms' -%}\n \n {{ form | payment_terms }}\n {%- endform -%}\n
\n {%- endif -%}\n\n\n{% # theme-check-disable %}\n{% stylesheet %}\n .tax-note:empty {\n display: none;\n }\n\n form.payment-terms {\n padding-top: 0.5em;\n font-size: min(0.85em, var(--font-paragraph--size));\n font-weight: var(--font-paragraph--weight);\n color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));\n }\n\n .installments:not(:has(shopify-payment-terms)) {\n display: none;\n }\n\n /* Volume pricing note should match unit-price styling (small, grey text) */\n product-price .volume-pricing-note,\n product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {\n display: block;\n font-family: var(--font-body--family);\n font-weight: normal;\n font-size: var(--font-size--xs);\n line-height: normal;\n letter-spacing: normal;\n text-transform: none;\n color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.product_price\",\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.resource_reference_product_price\"\n },\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.edit_price_in_theme_settings\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_sale_price_first\",\n \"label\": \"t:settings.show_sale_price_first\",\n \"default\": true\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_installments\",\n \"label\": \"t:settings.installments\",\n \"default\": false\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_tax_info\",\n \"label\": \"t:settings.show_tax_info\",\n \"default\": false\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.typography\"\n },\n {\n \"type\": \"select\",\n \"id\": \"type_preset\",\n \"label\": \"t:settings.preset\",\n \"options\": [\n {\n \"value\": \"\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"paragraph\",\n \"label\": \"t:options.paragraph\"\n },\n {\n \"value\": \"h1\",\n \"label\": \"t:options.h1\"\n },\n {\n \"value\": \"h2\",\n \"label\": \"t:options.h2\"\n },\n {\n \"value\": \"h3\",\n \"label\": \"t:options.h3\"\n },\n {\n \"value\": \"h4\",\n \"label\": \"t:options.h4\"\n },\n {\n \"value\": \"h5\",\n \"label\": \"t:options.h5\"\n },\n {\n \"value\": \"h6\",\n \"label\": \"t:options.h6\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"info\": \"t:info.edit_presets_in_theme_settings\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width\",\n \"label\": \"t:settings.width\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"100%\",\n \"label\": \"t:options.fill\"\n }\n ],\n \"default\": \"100%\"\n },\n {\n \"type\": \"text_alignment\",\n \"id\": \"alignment\",\n \"label\": \"t:settings.alignment\",\n \"default\": \"left\",\n \"visible_if\": \"{{ block.settings.width != 'fit-content' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font\",\n \"label\": \"t:settings.font\",\n \"options\": [\n {\n \"value\": \"var(--font-body--family)\",\n \"label\": \"t:options.body\"\n },\n {\n \"value\": \"var(--font-subheading--family)\",\n \"label\": \"t:options.subheading\"\n },\n {\n \"value\": \"var(--font-heading--family)\",\n \"label\": \"t:options.heading\"\n },\n {\n \"value\": \"var(--font-accent--family)\",\n \"label\": \"t:options.accent\"\n }\n ],\n \"default\": \"var(--font-body--family)\",\n \"visible_if\": \"{{ block.settings.type_preset == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"font_size\",\n \"label\": \"t:settings.size\",\n \"options\": [\n {\n \"value\": \"\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"0.625rem\",\n \"label\": \"10px\"\n },\n {\n \"value\": \"0.75rem\",\n \"label\": \"12px\"\n },\n {\n \"value\": \"0.875rem\",\n \"label\": \"14px\"\n },\n {\n \"value\": \"1rem\",\n \"label\": \"16px\"\n },\n {\n \"value\": \"1.125rem\",\n \"label\": \"18px\"\n },\n {\n \"value\": \"1.25rem\",\n \"label\": \"20px\"\n },\n {\n \"value\": \"1.5rem\",\n \"label\": \"24px\"\n },\n {\n \"value\": \"2rem\",\n \"label\": \"32px\"\n },\n {\n \"value\": \"2.5rem\",\n \"label\": \"40px\"\n },\n {\n \"value\": \"3rem\",\n \"label\": \"48px\"\n },\n {\n \"value\": \"3.5rem\",\n \"label\": \"56px\"\n },\n {\n \"value\": \"4.5rem\",\n \"label\": \"72px\"\n },\n {\n \"value\": \"5.5rem\",\n \"label\": \"88px\"\n },\n {\n \"value\": \"7.5rem\",\n \"label\": \"120px\"\n },\n {\n \"value\": \"9.5rem\",\n \"label\": \"152px\"\n },\n {\n \"value\": \"11.5rem\",\n \"label\": \"184px\"\n }\n ],\n \"default\": \"1rem\",\n \"visible_if\": \"{{ block.settings.type_preset == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"line_height\",\n \"label\": \"t:settings.line_height\",\n \"options\": [\n {\n \"value\": \"tight\",\n \"label\": \"t:options.tight\"\n },\n {\n \"value\": \"normal\",\n \"label\": \"t:options.normal\"\n },\n {\n \"value\": \"loose\",\n \"label\": \"t:options.loose\"\n }\n ],\n \"default\": \"normal\",\n \"visible_if\": \"{{ block.settings.type_preset == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"letter_spacing\",\n \"label\": \"t:settings.letter_spacing\",\n \"options\": [\n {\n \"value\": \"tight\",\n \"label\": \"t:options.tight\"\n },\n {\n \"value\": \"normal\",\n \"label\": \"t:options.normal\"\n },\n {\n \"value\": \"loose\",\n \"label\": \"t:options.loose\"\n }\n ],\n \"default\": \"normal\",\n \"visible_if\": \"{{ block.settings.type_preset == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"case\",\n \"label\": \"t:settings.case\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.default\"\n },\n {\n \"value\": \"uppercase\",\n \"label\": \"t:options.uppercase\"\n }\n ],\n \"default\": \"none\",\n \"visible_if\": \"{{ block.settings.type_preset == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"color\",\n \"label\": \"t:settings.color\",\n \"options\": [\n {\n \"value\": \"var(--color-foreground)\",\n \"label\": \"t:options.text\"\n },\n {\n \"value\": \"var(--color-foreground-heading)\",\n \"label\": \"t:options.heading\"\n },\n {\n \"value\": \"var(--color-primary)\",\n \"label\": \"t:options.link\"\n }\n ],\n \"default\": \"var(--color-foreground)\",\n \"visible_if\": \"{{ block.settings.type_preset != 'rte' }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.product_price\",\n \"category\": \"t:categories.product\"\n }\n ]\n}\n{% endschema %}\n{% # theme-check-enable %}\n"
},
{
"path": "blocks/product-card.liquid",
"content": "{% liquid\n assign product = block.settings.product\n-%}\n\n{% capture children %}\n {% content_for 'blocks', closest.product: product %}\n{% endcapture %}\n\n{% render 'product-card', children: children, product: product, block: block %}\n\n{% schema %}\n{\n \"name\": \"t:names.product_card\",\n \"blocks\": [\n {\n \"type\": \"_product-card-group\"\n },\n {\n \"type\": \"text\"\n },\n {\n \"type\": \"image\"\n },\n {\n \"type\": \"price\"\n },\n {\n \"type\": \"review\"\n },\n {\n \"type\": \"sku\"\n },\n {\n \"type\": \"swatches\"\n },\n {\n \"type\": \"_product-card-gallery\"\n },\n {\n \"type\": \"product-title\"\n },\n {\n \"type\": \"custom-liquid\"\n },\n {\n \"type\": \"@app\"\n }\n ],\n \"tag\": null,\n \"settings\": [\n {\n \"type\": \"product\",\n \"id\": \"product\",\n \"label\": \"t:settings.product\"\n },\n {\n \"type\": \"range\",\n \"id\": \"product_card_gap\",\n \"label\": \"t:settings.vertical_gap\",\n \"min\": 0,\n \"max\": 50,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 16\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.size\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width\",\n \"label\": \"t:settings.width_desktop\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fill\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_width\",\n \"label\": \"t:settings.custom_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.width == 'custom' }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"width_mobile\",\n \"label\": \"t:settings.width_mobile\",\n \"options\": [\n {\n \"value\": \"fit-content\",\n \"label\": \"t:options.fit_content\"\n },\n {\n \"value\": \"fill\",\n \"label\": \"t:options.fill\"\n },\n {\n \"value\": \"custom\",\n \"label\": \"t:options.custom\"\n }\n ],\n \"default\": \"fill\"\n },\n {\n \"type\": \"range\",\n \"id\": \"custom_width_mobile\",\n \"label\": \"t:settings.custom_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.width_mobile == 'custom' }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.borders\"\n },\n {\n \"type\": \"select\",\n \"id\": \"border\",\n \"label\": \"t:settings.style\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"solid\",\n \"label\": \"t:options.solid\"\n }\n ],\n \"default\": \"none\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_width\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"label\": \"t:settings.thickness\",\n \"default\": 1,\n \"visible_if\": \"{{ block.settings.border != 'none' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_opacity\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"%\",\n \"label\": \"t:settings.opacity\",\n \"default\": 100,\n \"visible_if\": \"{{ block.settings.border != 'none' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"border_radius\",\n \"label\": \"t:settings.border_radius\",\n \"min\": 0,\n \"max\": 32,\n \"step\": 1,\n \"default\": 0\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 50,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 50,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 50,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 50,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.product_card\",\n \"category\": \"t:categories.product\",\n \"settings\": {\n \"product_card_gap\": 4\n },\n \"blocks\": {\n \"product-card-gallery\": {\n \"type\": \"_product-card-gallery\",\n \"settings\": {\n \"image_ratio\": \"adapt\",\n \"border\": \"none\",\n \"border_width\": 1,\n \"border_opacity\": 100,\n \"border_radius\": 0,\n \"padding-block-start\": 0,\n \"padding-block-end\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n }\n },\n \"product_title\": {\n \"type\": \"product-title\",\n \"name\": \"t:names.product_title\",\n \"settings\": {\n \"width\": \"fit-content\",\n \"max_width\": \"normal\",\n \"alignment\": \"left\",\n \"type_preset\": \"rte\",\n \"font\": \"var(--font-body--family)\",\n \"font_size\": \"1rem\",\n \"line_height\": \"normal\",\n \"letter_spacing\": \"normal\",\n \"case\": \"none\",\n \"wrap\": \"pretty\",\n \"color\": \"var(--color-foreground)\",\n \"background\": false,\n \"background_color\": \"#00000026\",\n \"corner_radius\": 0,\n \"padding-block-start\": 4,\n \"padding-block-end\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n }\n },\n \"price\": {\n \"type\": \"price\",\n \"name\": \"t:names.product_price\",\n \"settings\": {\n \"show_sale_price_first\": true,\n \"show_installments\": false,\n \"show_tax_info\": false,\n \"type_preset\": \"h6\",\n \"width\": \"100%\",\n \"alignment\": \"left\",\n \"font\": \"var(--font-body--family)\",\n \"font_size\": \"1rem\",\n \"line_height\": \"normal\",\n \"letter_spacing\": \"normal\",\n \"case\": \"none\",\n \"color\": \"var(--color-foreground)\",\n \"padding-block-start\": 0,\n \"padding-block-end\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n }\n }\n },\n \"block_order\": [\"product-card-gallery\", \"product_title\", \"price\"]\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/product-custom-property.liquid",
"content": "{%- liquid\n assign block_settings = block.settings\n assign property_key = block_settings.property_key | default: block_settings.property_heading | default: block.id\n assign property_name = 'properties[custom-property]' | replace: 'custom-property', property_key\n\n assign product_id = closest.product.id\n assign element_id = 'CustomProperty-product_id-block_id' | replace: 'product_id', product_id | replace: 'block_id', block.id\n assign product_form_id = 'BuyButtons-ProductForm-section.id' | replace: 'section.id', section.id\n\n # Determine input type based on max_length for text inputs\n if block_settings.input_type == 'text'\n if block_settings.max_length > 45\n assign actual_input_type = 'textarea'\n else\n assign actual_input_type = 'text'\n endif\n else\n assign actual_input_type = block_settings.input_type\n endif\n-%}\n\n{% capture character_count_label %}\n \n {% if actual_input_type == 'textarea' %}\n
\n\n\n{% stylesheet %}\n product-custom-property-component {\n display: block;\n width: 100%;\n }\n\n product-custom-property-component .__heading {\n margin-inline: 0;\n margin-block: 0 var(--padding-sm);\n }\n\n product-custom-property-component .__heading:has(+ .__description) {\n margin-block-end: var(--padding-2xs);\n }\n\n product-custom-property-component .__description {\n font-size: min(0.85em, var(--font-paragraph--size));\n color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));\n margin-inline: 0;\n margin-block: 0 var(--padding-md);\n }\n\n product-custom-property-component .__field {\n position: relative;\n }\n\n product-custom-property-component .__input-wrapper {\n position: relative;\n }\n\n product-custom-property-component input,\n product-custom-property-component textarea {\n width: 100%;\n /* stylelint-disable-next-line declaration-no-important */\n color: var(--color-input-text) !important;\n }\n\n /* Add padding for inputs with counter inside */\n product-custom-property-component .__input-wrapper input {\n padding-bottom: calc(var(--padding-sm) * 3);\n }\n\n product-custom-property-component .__input-wrapper textarea {\n padding-bottom: calc(var(--padding-sm) * 3);\n scroll-padding-bottom: calc(var(--padding-sm) * 3);\n }\n\n product-custom-property-component textarea {\n min-height: 80px;\n }\n\n @supports (resize: vertical) {\n @media (hover: hover) and (pointer: fine) {\n product-custom-property-component textarea {\n resize: vertical; /* stylelint-disable-line */\n }\n }\n }\n\n product-custom-property-component .__character-label {\n position: absolute;\n left: var(--input-padding-x);\n bottom: var(--padding-sm);\n pointer-events: none;\n }\n\n product-custom-property-component .__character-count {\n font-style: italic;\n /* stylelint-disable-next-line declaration-no-important */\n color: var(--color-input-text) !important;\n }\n\n /* We should consolidate input styles that share the same behavior */\n .custom-property__input {\n border: var(--style-border-width-inputs) solid var(--color-input-border);\n border-radius: var(--style-border-radius-inputs);\n\n /* this is needed to override the styles from field__input */\n box-shadow: none;\n\n &:is(:hover, :focus) {\n /* this is needed to override the styles from field__input */\n box-shadow: none;\n }\n\n &:focus {\n /* this is needed to override the styles from field__input */\n outline: var(--focus-outline-width) solid var(--color-input-background);\n }\n }\n{% endstylesheet %}\n\n\n \n {{ character_count_label }}\n
\n {% elsif actual_input_type == 'checkbox' %}\n {% render 'checkbox',\n name: property_name,\n value: block_settings.checkbox_label,\n label: block_settings.checkbox_label,\n id: element_id,\n checked: false,\n events: '',\n disabled: false,\n required: block_settings.required,\n formId: product_form_id\n %}\n {% else %}\n \n \n {{ character_count_label }}\n
\n {% endif %}\n \n {% content_for 'blocks' %}\n
\n\n {%- if recommendations.performed or closest.product == blank -%}\n {% liquid\n assign products = recommendations.products\n\n if closest.product == blank\n # Onboarding mode: Show placeholder products\n for i in (1..block_settings.max_products)\n assign products = products | append: ', '\n assign products = products | split: ','\n endfor\n elsif recommendations.performed and recommendations.products_count == 0\n # No recommendations found, pull from catalog\n if block_settings.recommendation_type == 'related'\n assign products = collections.all.products | reject: 'id', closest.product.id\n elsif block_settings.recommendation_type == 'complementary'\n # Do not recommend the All collection as complementary products\n assign products = null\n endif\n else\n assign products = recommendations.products\n endif\n %}\n {% capture list_items %}\n {% for product in products limit: block_settings.max_products %}\n \n {% content_for 'block',\n type: '_product-card',\n id: 'static-product-card',\n closest.product: product\n %}\n
\n {% if block_settings.layout_type == 'carousel' or block_settings.carousel_on_mobile %}\n {% unless forloop.last %}\n \n {% endunless %}\n {% endif %}\n {% endfor %}\n {% endcapture %}\n\n {% liquid\n # Create an array from the list items to be used in the carousel\n assign slide_content = list_items | strip\n assign slides = slide_content | split: ''\n\n if products != blank and products.size > 0\n assign has_recommendations = 'true'\n else\n assign has_recommendations = 'false'\n endif\n %}\n\n \n {% for i in (1..block_settings.max_products) %}\n
\n {% endfor %}\n \n {%- endif -%}\n \n\n\n{% stylesheet %}\n .block-resource-list {\n display: flex;\n flex-direction: column;\n row-gap: var(--gap);\n min-width: 0;\n min-height: 0;\n container-type: inline-size;\n container-name: resource-list;\n border-radius: var(--border-radius, 0);\n }\n\n .product-recommendations-wrapper {\n width: 100%;\n }\n\n .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {\n width: 100vw;\n }\n{% endstylesheet %}\n\n{% schema %}\n{\n \"name\": \"t:names.product_recommendations\",\n \"class\": \"product-recommendations-wrapper\",\n \"blocks\": [\n {\n \"type\": \"@theme\"\n },\n {\n \"type\": \"@app\"\n }\n ],\n \"settings\": [\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.resource_reference_product_recommendations\"\n },\n {\n \"type\": \"select\",\n \"id\": \"recommendation_type\",\n \"label\": \"t:settings.type\",\n \"options\": [\n {\n \"value\": \"related\",\n \"label\": \"t:options.related\"\n },\n {\n \"value\": \"complementary\",\n \"label\": \"t:options.complementary\"\n }\n ],\n \"default\": \"related\"\n },\n {\n \"type\": \"paragraph\",\n \"content\": \"t:content.complementary_products\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.cards_layout\"\n },\n {\n \"type\": \"select\",\n \"id\": \"layout_type\",\n \"label\": \"t:settings.layout_style\",\n \"options\": [\n {\n \"value\": \"grid\",\n \"label\": \"t:options.grid\"\n },\n {\n \"value\": \"carousel\",\n \"label\": \"t:options.carousel\"\n }\n ],\n \"default\": \"grid\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"carousel_on_mobile\",\n \"label\": \"t:settings.carousel_on_mobile\",\n \"default\": true,\n \"visible_if\": \"{{ block.settings.layout_type == 'grid' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"max_products\",\n \"label\": \"t:settings.product_count\",\n \"min\": 2,\n \"max\": 10,\n \"step\": 1,\n \"default\": 4\n },\n {\n \"type\": \"range\",\n \"id\": \"columns_gap\",\n \"label\": \"t:settings.horizontal_gap\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 16,\n \"visible_if\": \"{{ block.settings.layout_type == 'grid' or block.settings.layout_type == 'carousel' }}\"\n },\n {\n \"type\": \"range\",\n \"id\": \"rows_gap\",\n \"label\": \"t:settings.vertical_gap\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 16,\n \"visible_if\": \"{{ block.settings.layout_type == 'grid' }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.carousel_navigation\",\n \"visible_if\": \"{{ block.settings.layout_type == 'carousel' or block.settings.carousel_on_mobile == true }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"icons_style\",\n \"label\": \"t:settings.icon\",\n \"options\": [\n {\n \"value\": \"arrow\",\n \"label\": \"t:options.arrows\"\n },\n {\n \"value\": \"chevron\",\n \"label\": \"t:options.chevrons\"\n },\n {\n \"value\": \"arrows_large\",\n \"label\": \"t:options.arrows_large\"\n },\n {\n \"value\": \"chevron_large\",\n \"label\": \"t:options.chevron_large\"\n },\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n }\n ],\n \"default\": \"arrow\",\n \"visible_if\": \"{{ block.settings.layout_type == 'carousel' or block.settings.carousel_on_mobile == true }}\"\n },\n {\n \"type\": \"select\",\n \"id\": \"icons_shape\",\n \"label\": \"t:settings.icon_background\",\n \"options\": [\n {\n \"value\": \"none\",\n \"label\": \"t:options.none\"\n },\n {\n \"value\": \"circle\",\n \"label\": \"t:options.circle\"\n },\n {\n \"value\": \"square\",\n \"label\": \"t:options.square\"\n }\n ],\n \"default\": \"none\",\n \"visible_if\": \"{{ block.settings.icons_style != 'none' and block.settings.layout_type == 'carousel' or block.settings.carousel_on_mobile == true }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.layout\"\n },\n {\n \"type\": \"range\",\n \"id\": \"gap\",\n \"label\": \"t:settings.gap\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 12\n },\n {\n \"type\": \"range\",\n \"id\": \"border_radius\",\n \"label\": \"t:settings.border_radius\",\n \"min\": 0,\n \"max\": 32,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"inherit_color_scheme\",\n \"label\": \"t:settings.inherit_color_scheme\",\n \"default\": true\n },\n {\n \"type\": \"color_scheme\",\n \"id\": \"color_scheme\",\n \"label\": \"t:settings.color_scheme\",\n \"default\": \"scheme-1\",\n \"visible_if\": \"{{ block.settings.inherit_color_scheme == false }}\"\n },\n {\n \"type\": \"header\",\n \"content\": \"t:content.padding\"\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-start\",\n \"label\": \"t:settings.top\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-block-end\",\n \"label\": \"t:settings.bottom\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-start\",\n \"label\": \"t:settings.left\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n },\n {\n \"type\": \"range\",\n \"id\": \"padding-inline-end\",\n \"label\": \"t:settings.right\",\n \"min\": 0,\n \"max\": 100,\n \"step\": 1,\n \"unit\": \"px\",\n \"default\": 0\n }\n ],\n \"presets\": [\n {\n \"name\": \"t:names.product_recommendations\",\n \"category\": \"t:categories.product\",\n \"settings\": {\n \"recommendation_type\": \"related\",\n \"border_radius\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n },\n \"blocks\": {\n \"heading\": {\n \"type\": \"text\",\n \"settings\": {\n \"text\": \"t:html_defaults.may_also_like\"\n }\n },\n \"static-product-card\": {\n \"type\": \"_product-card\",\n \"static\": true,\n \"settings\": {\n \"product_card_gap\": 4\n },\n \"blocks\": {\n \"product-card-gallery\": {\n \"type\": \"_product-card-gallery\",\n \"settings\": {\n \"image_ratio\": \"adapt\",\n \"border\": \"none\",\n \"border_width\": 1,\n \"border_opacity\": 100,\n \"border_radius\": 0,\n \"padding-block-start\": 0,\n \"padding-block-end\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n }\n },\n \"product_title\": {\n \"type\": \"product-title\",\n \"name\": \"t:names.product_title\",\n \"settings\": {\n \"width\": \"fit-content\",\n \"max_width\": \"normal\",\n \"alignment\": \"left\",\n \"type_preset\": \"rte\",\n \"font\": \"var(--font-body--family)\",\n \"font_size\": \"1rem\",\n \"line_height\": \"normal\",\n \"letter_spacing\": \"normal\",\n \"case\": \"none\",\n \"wrap\": \"pretty\",\n \"color\": \"var(--color-foreground)\",\n \"background\": false,\n \"background_color\": \"#00000026\",\n \"corner_radius\": 0,\n \"padding-block-start\": 4,\n \"padding-block-end\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n }\n },\n \"price\": {\n \"type\": \"price\",\n \"name\": \"t:names.product_price\",\n \"settings\": {\n \"show_sale_price_first\": true,\n \"show_installments\": false,\n \"show_tax_info\": false,\n \"type_preset\": \"h6\",\n \"width\": \"100%\",\n \"alignment\": \"left\",\n \"font\": \"var(--font-body--family)\",\n \"font_size\": \"1rem\",\n \"line_height\": \"normal\",\n \"letter_spacing\": \"normal\",\n \"case\": \"none\",\n \"color\": \"var(--color-foreground)\",\n \"padding-block-start\": 0,\n \"padding-block-end\": 0,\n \"padding-inline-start\": 0,\n \"padding-inline-end\": 0\n }\n }\n },\n \"block_order\": [\"product-card-gallery\", \"product_title\", \"price\"]\n }\n },\n \"block_order\": [\"heading\"]\n }\n ]\n}\n{% endschema %}\n"
},
{
"path": "blocks/product-title.liquid",
"content": "{% if closest.product == blank %}\n {% assign text = 'placeholders.product_title' | t %}\n {% assign product_title = '' | append: text | append: '
' %}\n {% render 'text', fallback_text: product_title, block: block %}\n{% else %}\n {% assign product_title = '' | append: closest.product.title | append: '
' %}\n\n \n \n {{ 'icon-close.svg' | inline_asset_content }}\n \n \n
\n \n \n {{ 'actions.enter_password' | t }}\n \n\n
\n {%- endif -%}\n \n \n \n \n {{ 'placeholders.password' | t }}\n \n\n \n\n \n {{ 'actions.submit' | t }}\n \n
\n\n {%- if form.errors -%}\n \n {% sections 'header-group' %}\n
\n\n \n\n