diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..c8cd739d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,379 @@
+# CLAUDE.md - Fashion-Forward Shopify Theme
+
+## Project Overview
+
+This project is a premium Shopify theme built on the **Skeleton Theme** foundation, targeting the Shopify Theme Store. The theme draws inspiration from **Prestige** but pushes further into high-fashion, editorial aesthetics.
+
+**Theme Codename:** *Influence*
+**Target Market:** Luxury fashion, designer brands, high-end accessories, curated boutiques
+**Design Philosophy:** Bold minimalism meets editorial sophistication
+
+---
+
+## Vision & Design Direction
+
+### Core Aesthetic
+- **Editorial fashion magazine** feel - think Vogue, Harper's Bazaar
+- **Bold typography** with dramatic scale contrasts
+- **Generous whitespace** that lets products breathe
+- **Asymmetric layouts** that feel curated, not templated
+- **Subtle, refined animations** that convey luxury (no gimmicks)
+- **Monochromatic palettes** with strategic accent colors
+- **Full-bleed imagery** with cinematic aspect ratios
+
+### Differentiation from Prestige
+| Prestige | Influence |
+|----------|-----------|
+| Classic luxury | Contemporary fashion-forward |
+| Balanced symmetry | Intentional asymmetry |
+| Traditional grid | Editorial/magazine layouts |
+| Subtle typography | Bold typographic statements |
+| Standard product cards | Editorial product presentations |
+| Conventional navigation | Fashion-week inspired navigation |
+
+---
+
+## Technical Foundation
+
+### Base Theme
+- **Skeleton Theme v0.1.0** (required for new Theme Store submissions)
+- No Dawn or Horizon code permitted
+- All code must be original or from Skeleton
+
+### Directory Structure
+```
+skeleton-influence/
+├── assets/ # CSS, SVGs, fonts (no SCSS)
+├── blocks/ # Reusable nested components
+├── config/ # settings_schema.json, settings_data.json
+├── layout/ # theme.liquid, password.liquid
+├── locales/ # en.default.json, schema translations
+├── sections/ # Full-width modular components
+├── snippets/ # Reusable Liquid fragments
+└── templates/ # JSON templates (OS 2.0)
+```
+
+---
+
+## Theme Store Requirements Checklist
+
+### 1. Required Templates
+All must be JSON format (except noted):
+- [ ] `theme.liquid` (layout)
+- [ ] `404.json`
+- [ ] `article.json`
+- [ ] `blog.json`
+- [ ] `cart.json`
+- [ ] `collection.json`
+- [ ] `index.json`
+- [ ] `list-collections.json`
+- [ ] `page.json`
+- [ ] `page.contact.json`
+- [ ] `password.json`
+- [ ] `product.json`
+- [ ] `search.json`
+- [ ] `gift_card.liquid` (special Liquid template)
+- [ ] `settings_data.json`
+- [ ] `settings_schema.json`
+
+### 2. Required Features
+- [ ] **Sections Everywhere** - All templates support sections
+- [ ] **Discounts** - Display on cart, checkout, order templates
+- [ ] **Accelerated checkout buttons** - Product + Cart pages (enabled by default)
+- [ ] **Faceted search filtering** - Collection + Search pages
+- [ ] **Gift cards** - With Apple Wallet, QR code support
+- [ ] **Image focal points** - Respect focal point settings
+- [ ] **Social sharing images** - page_image object
+- [ ] **Country/currency selector** - For international selling
+- [ ] **Language selector** - Multi-language support
+- [ ] **Multi-level menus** - Nested dropdown navigation
+- [ ] **Newsletter forms** - Email collection
+- [ ] **Pickup availability** - Product page
+- [ ] **Related product recommendations** - Product page
+- [ ] **Complementary product recommendations** - Product page
+- [ ] **Predictive search** - With search template
+- [ ] **Selling plans/subscriptions** - Cart + Customer pages
+- [ ] **Shop Pay Installments** - Product page banner
+- [ ] **Unit pricing** - Collection, Product, Cart, Customer pages
+- [ ] **Variant images** - Show on variant selection
+- [ ] **Follow on Shop button** - Using login_button filter
+- [ ] **Product swatches** - Using swatch.image and swatch.color
+- [ ] **Gift card recipient** - form.email, form.name, form.message, send_on
+
+### 3. Section & Block Requirements
+- [ ] **Custom Liquid section** - Available on all templates
+- [ ] **Header/Footer in section groups** - Dynamic reordering
+- [ ] **Product page blocks** - Price, vendor, description as separate blocks
+- [ ] **App blocks support** - @app blocks in product sections
+- [ ] **Custom Liquid blocks** - Where app blocks are appropriate
+
+### 4. Performance & Accessibility Targets
+- [ ] **Lighthouse Performance:** Minimum 60 (desktop + mobile)
+- [ ] **Lighthouse Accessibility:** Minimum 90 (desktop + mobile)
+- [ ] **Color contrast:** 4.5:1 body text, 3:1 large text/icons
+- [ ] **Touch targets:** Minimum 24x24 CSS pixels
+- [ ] **Keyboard navigation:** Full support with visible focus states
+- [ ] **Valid HTML:** No markup errors
+- [ ] **Alt text:** All images use image.alt or image_tag alt
+
+### 5. Browser Support
+**Desktop:**
+- Safari (latest 2)
+- Chrome (latest 3)
+- Firefox (latest 3)
+- Edge (latest 2)
+
+**Mobile:**
+- Mobile Safari (latest 2)
+- Chrome Mobile (latest 3)
+- Samsung Internet (latest 2)
+
+**Webviews:**
+- Instagram, Facebook, Pinterest (latest)
+
+---
+
+## Design System
+
+### Typography
+Use Shopify's font_picker setting type. Load bold, italic, bold-italic variants via font_modify filter.
+
+**Suggested Pairings (fashion-forward):**
+- Headings: Didone serif (high contrast) or geometric sans
+- Body: Clean, readable sans-serif
+- Accent: Display font for editorial moments
+
+### Color System
+Minimum 4 colors required. Each background needs corresponding foreground.
+
+**Recommended Palette Structure:**
+- Primary background (light)
+- Primary foreground (dark)
+- Secondary background (accent)
+- Secondary foreground
+- Accent color
+- Sale/error color
+
+### Spacing System
+Use CSS custom properties for consistent spacing scale:
+```css
+--space-xs: 0.25rem;
+--space-sm: 0.5rem;
+--space-md: 1rem;
+--space-lg: 2rem;
+--space-xl: 4rem;
+--space-2xl: 8rem;
+```
+
+### Grid System
+Fashion-forward layouts using CSS Grid:
+- Full-bleed hero sections
+- Asymmetric product grids
+- Magazine-style article layouts
+- Generous margins (use --min-page-margin)
+
+---
+
+## Section Roadmap
+
+### Header Sections
+- [ ] **Header** - Sticky, minimal, with mega menu support
+- [ ] **Announcement bar** - Dismissible, animated
+
+### Hero Sections
+- [ ] **Full-bleed hero** - Video/image with text overlay
+- [ ] **Split hero** - Image + text side-by-side
+- [ ] **Editorial hero** - Magazine-style with multiple images
+
+### Product Sections
+- [ ] **Featured product** - With all blocks, app blocks
+- [ ] **Product grid** - Asymmetric option
+- [ ] **Product carousel** - Horizontal scroll
+- [ ] **Lookbook** - Hotspots on images
+
+### Collection Sections
+- [ ] **Collection banner** - Full-width with filters
+- [ ] **Collection grid** - With pagination, sorting, filtering
+- [ ] **Featured collections** - Grid/carousel
+
+### Content Sections
+- [ ] **Rich text** - Editorial typography
+- [ ] **Image with text** - Multiple layout options
+- [ ] **Image gallery** - Masonry/grid options
+- [ ] **Video** - YouTube/Vimeo/hosted
+- [ ] **Testimonials** - Carousel/grid
+- [ ] **Logo list** - Brand partners
+- [ ] **Newsletter** - Email signup
+- [ ] **Contact form** - Styled form
+- [ ] **Custom Liquid** - Required
+
+### Footer Sections
+- [ ] **Footer** - Multi-column, social, payment icons, menus
+
+---
+
+## Code Standards
+
+### Liquid
+- Use `routes` object for all URLs
+- Never modify `content_for_header`
+- Use `request.locale.iso_code` for lang attribute
+- Use `rel="nofollow"` on Shopify domain links
+- Support `request.design_mode` for editor preview
+
+### CSS
+- **No SCSS** - Native CSS only (.css or .css.liquid)
+- **No minification** - Shopify handles this
+- Use CSS custom properties for theming
+- Mobile-first responsive design
+- Use `{% stylesheet %}` for scoped section styles
+
+### JavaScript
+- ES6+ syntax (unminified)
+- No jQuery dependency
+- Vanilla JS preferred
+- Third-party libraries must be licensed
+
+### Images
+- Use responsive image strategy
+- Lazy loading for below-fold images
+- Support focal points
+- Use image_url filter for optimization
+
+### Assets
+- Protocol-relative URLs only
+- No hardcoded http/https
+- Host all scripts on Shopify (except approved third-party)
+
+---
+
+## SEO Requirements
+
+- [ ] Title, meta description, canonical URL in all templates
+- [ ] Open Graph tags
+- [ ] Twitter Card tags
+- [ ] JSON-LD structured data (especially products)
+- [ ] No robots.txt.liquid template
+
+---
+
+## Settings Terminology
+
+Use these Shopify-approved terms:
+
+| Use | Don't Use |
+|-----|-----------|
+| home page | homepage |
+| heading | title |
+| subheading | sub-heading |
+| signup | sign-up |
+| navigation | menus |
+| cart type | Ajax cart |
+| color | colour |
+| center | centre |
+
+**Text style:** Sentence case, no ampersands, active voice, American English.
+
+---
+
+## Demo Store Requirements
+
+- Fully realistic content (no Lorem Ipsum)
+- Professional, high-quality imagery
+- Products that match fashion/luxury positioning
+- All sections populated with meaningful content
+- Inspiring merchant experience
+
+---
+
+## Preset Strategy
+
+**Required:** One preset must share theme name ("Influence")
+
+**Suggested Presets (3 total):**
+1. **Influence** - Core black/white editorial aesthetic
+2. **Runway** - Bolder, more colorful fashion-week vibe
+3. **Atelier** - Softer, artisanal luxury feel
+
+Each preset: 1-2 words, under 30 characters, unique from other themes.
+
+---
+
+## Development Workflow
+
+### Local Development
+```bash
+# Install Shopify CLI
+npm install -g @shopify/cli @shopify/theme
+
+# Start development server
+shopify theme dev --store your-store.myshopify.com
+```
+
+### Quality Checks
+```bash
+# Run Theme Check linter
+shopify theme check
+
+# Test Lighthouse scores
+# Use benchmark dataset for consistent testing
+```
+
+### Before Submission
+1. Run Theme Check - fix all errors
+2. Test all templates with real content
+3. Verify Lighthouse scores (Performance 60+, Accessibility 90+)
+4. Test on all required browsers
+5. Test keyboard navigation
+6. Verify color contrast ratios
+7. Check mobile responsiveness
+8. Test in Instagram/Facebook/Pinterest webviews
+
+---
+
+## File Naming Conventions
+
+- Sections: `section-name.liquid` (kebab-case)
+- Snippets: `snippet-name.liquid` (kebab-case)
+- Blocks: `block-name.liquid` (kebab-case)
+- Templates: `template.json` or `template.type.json`
+- Assets: `descriptive-name.css`, `descriptive-name.js`
+
+---
+
+## Prohibited
+
+- Dawn or Horizon derived code
+- SCSS files
+- Minified CSS/JS (except ES6+ and third-party)
+- External script hosting (except approved libraries)
+- App-dependent functionality
+- Fake urgency/scarcity tactics
+- Designer credits or affiliate links
+- config/markets.json file
+
+---
+
+## Resources
+
+- [Skeleton Theme](https://github.com/shopify/skeleton-theme)
+- [Theme Store Requirements](https://shopify.dev/docs/storefronts/themes/store/requirements)
+- [Liquid Reference](https://shopify.dev/docs/api/liquid)
+- [Theme Check](https://shopify.dev/docs/storefronts/themes/tools/theme-check)
+- [Performance Best Practices](https://shopify.dev/docs/storefronts/themes/best-practices/performance)
+- [Accessibility Best Practices](https://shopify.dev/docs/storefronts/themes/best-practices/accessibility)
+- [Color System Best Practices](https://shopify.dev/docs/storefronts/themes/best-practices/design/color-system)
+
+---
+
+## Notes for Claude
+
+When working on this theme:
+1. Always check existing Skeleton code before creating new files
+2. Maintain the minimalist, fashion-forward aesthetic
+3. Prioritize performance - every KB matters
+4. Test accessibility as you build
+5. Use semantic HTML
+6. Keep settings organized and clearly labeled
+7. Follow Shopify terminology exactly
+8. Support all required features before adding extras
diff --git a/assets/critical.css b/assets/critical.css
index cdb1ae1a..b021d884 100644
--- a/assets/critical.css
+++ b/assets/critical.css
@@ -1,20 +1,45 @@
-/** Critical CSS for the theme. This file is included on every page. */
+/**
+ * Critical CSS - Influence Theme
+ * Editorial fashion-forward styling with comprehensive design system
+ */
-/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
-* {
+/* ========================================
+ CSS RESET
+ Inspired by Josh Comeau's CSS Reset
+ ======================================== */
+
+*,
+*::before,
+*::after {
box-sizing: border-box;
+}
+
+* {
margin: 0;
}
+html {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-size-adjust: 100%;
+ scroll-behavior: smooth;
+}
+
+html:has(dialog[open], [data-drawer-open]) {
+ overflow: hidden;
+}
+
body {
display: flex;
flex-direction: column;
- margin: 0;
min-height: 100svh;
-}
-
-html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
- overflow: hidden;
+ line-height: var(--line-height-normal);
+ font-family: var(--font-body-family);
+ font-style: var(--font-body-style);
+ font-weight: var(--font-body-weight);
+ font-size: var(--font-size-base);
+ color: var(--color-foreground);
+ background-color: var(--color-background);
}
img,
@@ -28,25 +53,13 @@ svg {
}
input,
+button,
textarea,
select {
font: inherit;
- border-radius: var(--style-border-radius-inputs);
-}
-
-select {
- background-color: var(--color-background);
- color: currentcolor;
-}
-
-dialog {
- background-color: var(--color-background);
- color: var(--color-foreground);
+ color: inherit;
}
-p {
- text-wrap: pretty;
-}
p,
h1,
h2,
@@ -57,40 +70,228 @@ h6 {
overflow-wrap: break-word;
}
-p:empty {
- display: none;
+p {
+ text-wrap: pretty;
}
-:is(p, h1, h2, h3, h4, h5, h6):first-child,
-:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
- margin-block-start: 0;
+h1, h2, h3, h4, h5, h6 {
+ text-wrap: balance;
}
-:is(p, h1, h2, h3, h4, h5, h6):last-child,
-:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
- margin-block-end: 0;
+a {
+ color: inherit;
+ text-decoration-skip-ink: auto;
}
-/** Theme styles below */
-body {
- font-family: var(--font-primary--family);
- background-color: var(--color-background);
- color: var(--color-foreground);
+ul, ol {
+ list-style: none;
+ padding: 0;
}
-/** Section layout utilities */
+button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+}
-/**
- * Setup a grid that enables both full-width and constrained layouts
- * depending on the class of the child elements.
- *
- * By default, a minimum content margin is set on the left and right
- * sides of the section and the content is centered in the viewport to
- * not exceed the maximum page width.
- *
- * When a child element is given the `full-width` class, it will span
- * the entire viewport.
- */
+/* Remove default focus outline, add custom later */
+:focus {
+ outline: none;
+}
+
+/* Focus visible for keyboard navigation */
+:focus-visible {
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
+ outline-offset: var(--focus-ring-offset);
+}
+
+/* Skip link */
+.skip-link {
+ position: absolute;
+ top: -100%;
+ left: var(--page-margin);
+ z-index: var(--z-toast);
+ padding: var(--space-3) var(--space-4);
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.skip-link:focus {
+ top: var(--space-2);
+}
+
+/* ========================================
+ TYPOGRAPHY
+ Editorial fashion-forward type scale
+ ======================================== */
+
+/* Headings */
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ font-family: var(--font-heading-family);
+ font-style: var(--font-heading-style);
+ font-weight: var(--font-heading-weight);
+ line-height: var(--line-height-tight);
+ letter-spacing: var(--letter-spacing-tight);
+}
+
+h1, .h1 {
+ font-size: var(--font-size-4xl);
+}
+
+h2, .h2 {
+ font-size: var(--font-size-3xl);
+}
+
+h3, .h3 {
+ font-size: var(--font-size-2xl);
+}
+
+h4, .h4 {
+ font-size: var(--font-size-xl);
+}
+
+h5, .h5 {
+ font-size: var(--font-size-lg);
+}
+
+h6, .h6 {
+ font-size: var(--font-size-md);
+}
+
+/* Display heading for hero sections */
+.heading-display {
+ font-family: var(--font-heading-family);
+ font-size: var(--font-size-display);
+ line-height: var(--line-height-tight);
+ letter-spacing: var(--letter-spacing-tighter);
+}
+
+/* Subheading/Eyebrow text */
+.subheading {
+ font-size: var(--font-size-xs);
+ letter-spacing: var(--letter-spacing-widest);
+ text-transform: uppercase;
+ color: var(--color-muted);
+}
+
+/* Body text variants */
+.text-sm {
+ font-size: var(--font-size-sm);
+}
+
+.text-lg {
+ font-size: var(--font-size-lg);
+}
+
+.text-xl {
+ font-size: var(--font-size-xl);
+}
+
+/* Rich text styling */
+.rte {
+ line-height: var(--line-height-relaxed);
+}
+
+.rte > * + * {
+ margin-top: var(--space-4);
+}
+
+.rte h2 {
+ margin-top: var(--space-8);
+ font-size: var(--font-size-2xl);
+}
+
+.rte h3 {
+ margin-top: var(--space-6);
+ font-size: var(--font-size-xl);
+}
+
+.rte h4 {
+ margin-top: var(--space-5);
+ font-size: var(--font-size-lg);
+}
+
+.rte a {
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.rte a:hover {
+ opacity: 0.7;
+}
+
+.rte ul,
+.rte ol {
+ padding-left: var(--space-6);
+}
+
+.rte ul {
+ list-style: disc;
+}
+
+.rte ol {
+ list-style: decimal;
+}
+
+.rte li + li {
+ margin-top: var(--space-2);
+}
+
+.rte blockquote {
+ padding-left: var(--space-6);
+ border-left: var(--border-width-thick) solid var(--color-foreground);
+ font-style: italic;
+ font-size: var(--font-size-lg);
+}
+
+.rte img {
+ margin-top: var(--space-6);
+ margin-bottom: var(--space-6);
+}
+
+.rte table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.rte th,
+.rte td {
+ padding: var(--space-3) var(--space-4);
+ border: var(--border-width) solid var(--border-color);
+ text-align: left;
+}
+
+.rte th {
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+}
+
+/* Drop cap for editorial content */
+.drop-cap::first-letter {
+ float: left;
+ font-family: var(--font-heading-family);
+ font-size: 4em;
+ line-height: 0.8;
+ padding-right: var(--space-3);
+ padding-top: var(--space-1);
+}
+
+/* ========================================
+ LAYOUT SYSTEM
+ Section grid and content constraints
+ ======================================== */
+
+/* Main content grows to fill space */
+main {
+ flex: 1 0 auto;
+}
+
+/* Section grid layout */
.shopify-section {
--content-width: min(
calc(var(--page-width) - var(--page-margin) * 2),
@@ -99,19 +300,731 @@ body {
--content-margin: minmax(var(--page-margin), 1fr);
--content-grid: var(--content-margin) var(--content-width) var(--content-margin);
- /* This is required to make elements work as background images */
position: relative;
- grid-template-columns: var(--content-grid);
display: grid;
+ grid-template-columns: var(--content-grid);
width: 100%;
}
-/* Child elements, by default, are constrained to the central column of the grid. */
+/* Default content column */
.shopify-section > * {
grid-column: 2;
}
-/* Child elements that use the full-width utility class span the entire viewport. */
+/* Full-width content */
.shopify-section > .full-width {
grid-column: 1 / -1;
}
+
+/* Section spacing */
+.section {
+ padding-block: var(--section-spacing-md);
+}
+
+.section--sm {
+ padding-block: var(--section-spacing-sm);
+}
+
+.section--lg {
+ padding-block: var(--section-spacing-lg);
+}
+
+.section--xl {
+ padding-block: var(--section-spacing-xl);
+}
+
+.section--flush {
+ padding-block: 0;
+}
+
+/* Content width constraints */
+.container {
+ width: 100%;
+ max-width: var(--page-width);
+ margin-inline: auto;
+ padding-inline: var(--page-margin);
+}
+
+.container--narrow {
+ max-width: var(--content-width-narrow);
+}
+
+.container--medium {
+ max-width: var(--content-width-medium);
+}
+
+.container--wide {
+ max-width: var(--content-width-wide);
+}
+
+/* Grid system */
+.grid {
+ display: grid;
+ gap: var(--grid-gap-md);
+}
+
+.grid--2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.grid--3 {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.grid--4 {
+ grid-template-columns: repeat(4, 1fr);
+}
+
+/* Responsive grid */
+@media (max-width: 989px) {
+ .grid--3,
+ .grid--4 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 749px) {
+ .grid--2,
+ .grid--3,
+ .grid--4 {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Flex utilities */
+.flex {
+ display: flex;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.items-start {
+ align-items: flex-start;
+}
+
+.items-end {
+ align-items: flex-end;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.justify-end {
+ justify-content: flex-end;
+}
+
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+.gap-8 { gap: var(--space-8); }
+
+/* ========================================
+ BUTTONS
+ Elegant, minimal button system
+ ======================================== */
+
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
+ height: var(--button-height);
+ padding-inline: var(--button-padding-x);
+ font-size: var(--button-font-size);
+ font-weight: 500;
+ text-transform: var(--button-text-transform);
+ letter-spacing: var(--button-letter-spacing);
+ text-decoration: none;
+ white-space: nowrap;
+ border: var(--border-width) solid transparent;
+ border-radius: var(--radius-buttons);
+ cursor: pointer;
+ transition: all var(--duration-fast) var(--ease-out);
+ min-width: var(--touch-target-min);
+}
+
+.btn:disabled,
+.btn[disabled] {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Primary button - solid */
+.btn--primary {
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+ border-color: var(--color-foreground);
+}
+
+.btn--primary:hover:not(:disabled) {
+ background-color: var(--color-accent);
+ border-color: var(--color-accent);
+}
+
+/* Secondary button - outlined */
+.btn--secondary {
+ background-color: transparent;
+ color: var(--color-foreground);
+ border-color: var(--color-foreground);
+}
+
+.btn--secondary:hover:not(:disabled) {
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+}
+
+/* Tertiary button - text only */
+.btn--tertiary {
+ background-color: transparent;
+ color: var(--color-foreground);
+ border-color: transparent;
+ padding-inline: var(--space-2);
+}
+
+.btn--tertiary:hover:not(:disabled) {
+ opacity: 0.7;
+}
+
+/* Button sizes */
+.btn--sm {
+ height: var(--button-height-sm);
+ padding-inline: var(--space-4);
+ font-size: var(--font-size-xs);
+}
+
+.btn--lg {
+ height: var(--button-height-lg);
+ padding-inline: var(--space-8);
+ font-size: var(--font-size-base);
+}
+
+.btn--full {
+ width: 100%;
+}
+
+/* Icon button */
+.btn--icon {
+ width: var(--button-height);
+ height: var(--button-height);
+ padding: 0;
+ border-radius: var(--radius-full);
+}
+
+.btn--icon svg {
+ width: 1.25rem;
+ height: 1.25rem;
+}
+
+/* ========================================
+ FORMS
+ Clean, minimal form styling
+ ======================================== */
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+}
+
+.form-label {
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+ width: 100%;
+ height: var(--button-height);
+ padding: var(--space-3) var(--space-4);
+ font-size: var(--font-size-base);
+ background-color: var(--color-background);
+ color: var(--color-foreground);
+ border: var(--border-width) solid var(--border-color);
+ border-radius: var(--radius-inputs);
+ transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+.form-textarea {
+ height: auto;
+ min-height: 8rem;
+ resize: vertical;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+ border-color: var(--color-foreground);
+ outline: none;
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+ color: var(--color-muted);
+}
+
+.form-input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
+
+.form-select {
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right var(--space-3) center;
+ padding-right: var(--space-10);
+}
+
+.form-checkbox,
+.form-radio {
+ width: 1.25rem;
+ height: 1.25rem;
+ accent-color: var(--color-foreground);
+ cursor: pointer;
+}
+
+.form-error {
+ font-size: var(--font-size-sm);
+ color: var(--color-error);
+}
+
+.form-help {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted);
+}
+
+/* Quantity input */
+.quantity-input {
+ display: flex;
+ align-items: center;
+ gap: 0;
+ border: var(--border-width) solid var(--border-color);
+ border-radius: var(--radius-inputs);
+ width: fit-content;
+}
+
+.quantity-input__button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--button-height);
+ height: var(--button-height);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.quantity-input__button:hover {
+ opacity: 0.7;
+}
+
+.quantity-input__button svg {
+ width: 1rem;
+ height: 1rem;
+}
+
+.quantity-input__field {
+ width: 3rem;
+ height: var(--button-height);
+ text-align: center;
+ border: none;
+ background: transparent;
+ font-size: var(--font-size-base);
+ -moz-appearance: textfield;
+}
+
+.quantity-input__field::-webkit-inner-spin-button,
+.quantity-input__field::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* ========================================
+ IMAGES & MEDIA
+ Responsive images with aspect ratios
+ ======================================== */
+
+.media {
+ position: relative;
+ overflow: hidden;
+ background-color: var(--color-muted);
+}
+
+.media img,
+.media video {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Aspect ratios */
+.aspect-square {
+ aspect-ratio: 1 / 1;
+}
+
+.aspect-portrait {
+ aspect-ratio: 3 / 4;
+}
+
+.aspect-landscape {
+ aspect-ratio: 4 / 3;
+}
+
+.aspect-wide {
+ aspect-ratio: 16 / 9;
+}
+
+.aspect-cinematic {
+ aspect-ratio: 21 / 9;
+}
+
+/* Image loading placeholder */
+.media--loading {
+ background: linear-gradient(
+ 90deg,
+ var(--color-muted) 0%,
+ color-mix(in srgb, var(--color-muted) 80%, var(--color-background)) 50%,
+ var(--color-muted) 100%
+ );
+ background-size: 200% 100%;
+ animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+
+/* ========================================
+ LINKS & NAVIGATION
+ ======================================== */
+
+.link {
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.link:hover {
+ opacity: 0.7;
+}
+
+.link--subtle {
+ text-decoration: none;
+}
+
+.link--subtle:hover {
+ text-decoration: underline;
+}
+
+/* ========================================
+ BADGES & LABELS
+ ======================================== */
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ padding: var(--space-1) var(--space-2);
+ font-size: var(--font-size-xs);
+ font-weight: 500;
+ letter-spacing: var(--letter-spacing-wide);
+ text-transform: uppercase;
+ border-radius: var(--radius-sm);
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+}
+
+.badge--sale {
+ background-color: var(--color-sale);
+ color: #fff;
+}
+
+.badge--soldout {
+ background-color: var(--color-muted);
+ color: var(--color-background);
+}
+
+/* ========================================
+ PRICE
+ ======================================== */
+
+.price {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: var(--space-2);
+}
+
+.price__regular {
+ font-weight: 500;
+}
+
+.price__compare {
+ text-decoration: line-through;
+ color: var(--color-muted);
+}
+
+.price__sale {
+ color: var(--color-sale);
+ font-weight: 500;
+}
+
+.price__unit {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted);
+}
+
+/* ========================================
+ COLOR SCHEMES
+ ======================================== */
+
+.color-scheme-1 {
+ --color-background: var(--color-scheme-1-background);
+ --color-foreground: var(--color-scheme-1-foreground);
+ --color-accent: var(--color-scheme-1-accent);
+ --color-muted: var(--color-scheme-1-muted);
+ background-color: var(--color-background);
+ color: var(--color-foreground);
+}
+
+.color-scheme-2 {
+ --color-background: var(--color-scheme-2-background);
+ --color-foreground: var(--color-scheme-2-foreground);
+ --color-accent: var(--color-scheme-2-accent);
+ --color-muted: var(--color-scheme-2-muted);
+ background-color: var(--color-background);
+ color: var(--color-foreground);
+}
+
+/* ========================================
+ ANIMATIONS
+ Subtle, elegant motion
+ ======================================== */
+
+.fade-in {
+ animation: fadeIn var(--duration-normal) var(--ease-out);
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.slide-up {
+ animation: slideUp var(--duration-normal) var(--ease-out);
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(1rem);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Hover lift effect */
+.hover-lift {
+ transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.hover-lift:hover {
+ transform: translateY(-0.25rem);
+}
+
+/* Image zoom on hover */
+.hover-zoom {
+ overflow: hidden;
+}
+
+.hover-zoom img {
+ transition: transform var(--duration-slow) var(--ease-out);
+}
+
+.hover-zoom:hover img {
+ transform: scale(1.05);
+}
+
+/* ========================================
+ UTILITIES
+ ======================================== */
+
+/* Visibility */
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.hidden {
+ display: none !important;
+}
+
+/* Text alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+/* Text colors */
+.text-muted { color: var(--color-muted); }
+.text-accent { color: var(--color-accent); }
+.text-sale { color: var(--color-sale); }
+
+/* Spacing utilities */
+.mt-0 { margin-top: 0; }
+.mt-2 { margin-top: var(--space-2); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-8 { margin-top: var(--space-8); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-8 { margin-bottom: var(--space-8); }
+
+/* Responsive utilities */
+@media (max-width: 749px) {
+ .hide-mobile { display: none !important; }
+}
+
+@media (min-width: 750px) and (max-width: 989px) {
+ .hide-tablet { display: none !important; }
+}
+
+@media (min-width: 990px) {
+ .hide-desktop { display: none !important; }
+}
+
+/* Loading states */
+.loading {
+ position: relative;
+ pointer-events: none;
+}
+
+.loading::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--color-background);
+ opacity: 0.8;
+}
+
+/* Overlay */
+.overlay {
+ position: fixed;
+ inset: 0;
+ background-color: rgb(0 0 0 / 0.5);
+ z-index: var(--z-overlay);
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity var(--duration-normal) var(--ease-out),
+ visibility var(--duration-normal) var(--ease-out);
+}
+
+.overlay.is-active {
+ opacity: 1;
+ visibility: visible;
+}
+
+/* Dialog / Modal */
+dialog {
+ position: fixed;
+ max-width: min(90vw, 40rem);
+ max-height: 90vh;
+ padding: var(--space-8);
+ border: none;
+ border-radius: var(--radius-lg);
+ background-color: var(--color-background);
+ color: var(--color-foreground);
+ box-shadow: var(--shadow-2xl);
+}
+
+dialog::backdrop {
+ background-color: rgb(0 0 0 / 0.5);
+}
+
+/* Icon sizing */
+.icon {
+ width: 1.25rem;
+ height: 1.25rem;
+ flex-shrink: 0;
+}
+
+.icon--sm {
+ width: 1rem;
+ height: 1rem;
+}
+
+.icon--lg {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+/* Divider */
+.divider {
+ height: var(--border-width);
+ background-color: var(--border-color);
+ border: none;
+}
+
+/* Empty state */
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: var(--space-16) var(--space-4);
+ gap: var(--space-4);
+}
+
+.empty-state__icon {
+ width: 3rem;
+ height: 3rem;
+ color: var(--color-muted);
+}
+
+.empty-state__title {
+ font-size: var(--font-size-xl);
+}
+
+.empty-state__text {
+ color: var(--color-muted);
+ max-width: 30rem;
+}
diff --git a/assets/icons.svg b/assets/icons.svg
new file mode 100644
index 00000000..9b698d3a
--- /dev/null
+++ b/assets/icons.svg
@@ -0,0 +1,297 @@
+
diff --git a/assets/theme.css b/assets/theme.css
new file mode 100644
index 00000000..94759c25
--- /dev/null
+++ b/assets/theme.css
@@ -0,0 +1,1387 @@
+/**
+ * Theme CSS - Influence Theme
+ * Non-critical styles loaded asynchronously
+ * Contains component-specific and enhancement styles
+ */
+
+/* ========================================
+ HEADER STYLES
+ ======================================== */
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: var(--z-sticky);
+ background-color: var(--color-background);
+ transition: background-color var(--duration-normal) var(--ease-out),
+ box-shadow var(--duration-normal) var(--ease-out);
+}
+
+.header--transparent {
+ background-color: transparent;
+}
+
+.header--scrolled {
+ background-color: var(--color-background);
+ box-shadow: var(--shadow-sm);
+}
+
+.header__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: var(--header-height);
+ gap: var(--space-4);
+}
+
+.header__logo {
+ flex-shrink: 0;
+}
+
+.header__logo img,
+.header__logo svg {
+ max-height: 2.5rem;
+ width: auto;
+}
+
+.header__nav {
+ display: none;
+}
+
+@media (min-width: 990px) {
+ .header__nav {
+ display: flex;
+ align-items: center;
+ gap: var(--space-8);
+ }
+}
+
+.header__nav-link {
+ position: relative;
+ font-size: var(--font-size-sm);
+ text-decoration: none;
+ letter-spacing: var(--letter-spacing-wide);
+ text-transform: uppercase;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.header__nav-link:hover {
+ opacity: 0.7;
+}
+
+.header__nav-link::after {
+ content: '';
+ position: absolute;
+ bottom: -0.25rem;
+ left: 0;
+ width: 0;
+ height: 1px;
+ background-color: currentColor;
+ transition: width var(--duration-fast) var(--ease-out);
+}
+
+.header__nav-link:hover::after,
+.header__nav-link[aria-current="page"]::after {
+ width: 100%;
+}
+
+.header__icons {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+}
+
+.header__icon-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--touch-target-min);
+ height: var(--touch-target-min);
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.header__icon-btn:hover {
+ opacity: 0.7;
+}
+
+.header__cart-count {
+ position: absolute;
+ top: 0.25rem;
+ right: 0.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 1.25rem;
+ height: 1.25rem;
+ padding: 0 0.25rem;
+ font-size: 0.625rem;
+ font-weight: 600;
+ background-color: var(--color-accent);
+ color: var(--color-background);
+ border-radius: var(--radius-full);
+}
+
+/* ========================================
+ ANNOUNCEMENT BAR
+ ======================================== */
+
+.announcement-bar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: var(--announcement-bar-height);
+ padding: var(--space-2) var(--space-4);
+ font-size: var(--font-size-xs);
+ letter-spacing: var(--letter-spacing-wide);
+ text-align: center;
+}
+
+.announcement-bar a {
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+}
+
+/* ========================================
+ MEGA MENU
+ ======================================== */
+
+.mega-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: var(--color-background);
+ border-top: var(--border-width) solid var(--border-color);
+ box-shadow: var(--shadow-lg);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-0.5rem);
+ transition: opacity var(--duration-normal) var(--ease-out),
+ visibility var(--duration-normal) var(--ease-out),
+ transform var(--duration-normal) var(--ease-out);
+}
+
+.header__nav-item:hover .mega-menu,
+.header__nav-item:focus-within .mega-menu {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.mega-menu__inner {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: var(--space-8);
+ padding: var(--space-8) var(--page-margin);
+ max-width: var(--page-width);
+ margin: 0 auto;
+}
+
+.mega-menu__column h3 {
+ font-size: var(--font-size-xs);
+ letter-spacing: var(--letter-spacing-widest);
+ text-transform: uppercase;
+ margin-bottom: var(--space-4);
+ color: var(--color-muted);
+}
+
+.mega-menu__links {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+
+.mega-menu__link {
+ font-size: var(--font-size-sm);
+ text-decoration: none;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.mega-menu__link:hover {
+ opacity: 0.7;
+}
+
+/* ========================================
+ MOBILE DRAWER
+ ======================================== */
+
+.drawer {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: min(100vw, 24rem);
+ max-height: 100vh;
+ background-color: var(--color-background);
+ z-index: var(--z-modal);
+ overflow-y: auto;
+ transform: translateX(-100%);
+ transition: transform var(--duration-normal) var(--ease-out);
+}
+
+.drawer--right {
+ right: 0;
+ left: auto;
+ transform: translateX(100%);
+}
+
+.drawer.is-open {
+ transform: translateX(0);
+}
+
+.drawer__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-4);
+ border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.drawer__title {
+ font-size: var(--font-size-lg);
+ font-weight: 500;
+}
+
+.drawer__content {
+ padding: var(--space-4);
+}
+
+.drawer__nav {
+ display: flex;
+ flex-direction: column;
+}
+
+.drawer__nav-link {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-4) 0;
+ font-size: var(--font-size-lg);
+ text-decoration: none;
+ border-bottom: var(--border-width) solid var(--border-color);
+}
+
+/* ========================================
+ FOOTER
+ ======================================== */
+
+.footer {
+ margin-top: auto;
+ border-top: var(--border-width) solid var(--border-color);
+}
+
+.footer__main {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+ gap: var(--space-8);
+ padding-block: var(--section-spacing-md);
+}
+
+.footer__column h3 {
+ font-size: var(--font-size-xs);
+ letter-spacing: var(--letter-spacing-widest);
+ text-transform: uppercase;
+ margin-bottom: var(--space-4);
+}
+
+.footer__links {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+
+.footer__link {
+ font-size: var(--font-size-sm);
+ text-decoration: none;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.footer__link:hover {
+ opacity: 0.7;
+}
+
+.footer__newsletter-form {
+ display: flex;
+ gap: var(--space-2);
+}
+
+.footer__newsletter-input {
+ flex: 1;
+}
+
+.footer__social {
+ display: flex;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+}
+
+.footer__social-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--touch-target-min);
+ height: var(--touch-target-min);
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.footer__social-link:hover {
+ opacity: 0.7;
+}
+
+.footer__bottom {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-4);
+ padding-block: var(--space-6);
+ border-top: var(--border-width) solid var(--border-color);
+ font-size: var(--font-size-xs);
+ color: var(--color-muted);
+}
+
+.footer__copyright {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-2);
+}
+
+.footer__payment-icons {
+ display: flex;
+ gap: var(--space-2);
+}
+
+.footer__payment-icons svg {
+ height: 1.5rem;
+ width: auto;
+}
+
+/* ========================================
+ HERO SECTION
+ ======================================== */
+
+.hero {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 60vh;
+ overflow: hidden;
+}
+
+.hero--full {
+ min-height: 100vh;
+}
+
+.hero--large {
+ min-height: 80vh;
+}
+
+.hero--medium {
+ min-height: 60vh;
+}
+
+.hero--small {
+ min-height: 40vh;
+}
+
+.hero__media {
+ position: absolute;
+ inset: 0;
+}
+
+.hero__media img,
+.hero__media video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.hero__overlay {
+ position: absolute;
+ inset: 0;
+ background-color: rgb(0 0 0 / var(--hero-overlay-opacity, 0.3));
+}
+
+.hero__content {
+ position: relative;
+ z-index: 1;
+ max-width: var(--content-width-medium);
+ padding: var(--space-8);
+ text-align: center;
+}
+
+.hero__subheading {
+ margin-bottom: var(--space-4);
+}
+
+.hero__heading {
+ margin-bottom: var(--space-6);
+}
+
+.hero__text {
+ margin-bottom: var(--space-8);
+ font-size: var(--font-size-lg);
+ max-width: 40rem;
+ margin-inline: auto;
+}
+
+.hero__buttons {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: var(--space-4);
+}
+
+/* ========================================
+ PRODUCT CARD
+ ======================================== */
+
+.product-card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+.product-card__media {
+ position: relative;
+ aspect-ratio: var(--product-card-aspect-ratio);
+ overflow: hidden;
+ background-color: var(--color-muted);
+ margin-bottom: var(--space-4);
+}
+
+.product-card__media img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform var(--duration-slow) var(--ease-out);
+}
+
+.product-card:hover .product-card__media img {
+ transform: scale(1.05);
+}
+
+.product-card__secondary-image {
+ opacity: 0;
+ transition: opacity var(--duration-normal) var(--ease-out);
+}
+
+.product-card:hover .product-card__secondary-image {
+ opacity: 1;
+}
+
+.product-card__badges {
+ position: absolute;
+ top: var(--space-3);
+ left: var(--space-3);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+}
+
+.product-card__quick-add {
+ position: absolute;
+ bottom: var(--space-3);
+ left: var(--space-3);
+ right: var(--space-3);
+ opacity: 0;
+ transform: translateY(0.5rem);
+ transition: opacity var(--duration-fast) var(--ease-out),
+ transform var(--duration-fast) var(--ease-out);
+}
+
+.product-card:hover .product-card__quick-add {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.product-card__info {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-1);
+}
+
+.product-card__vendor {
+ font-size: var(--font-size-xs);
+ color: var(--color-muted);
+ text-transform: uppercase;
+ letter-spacing: var(--letter-spacing-wide);
+}
+
+.product-card__title {
+ font-size: var(--font-size-base);
+ font-weight: 500;
+}
+
+.product-card__title a {
+ text-decoration: none;
+}
+
+.product-card__title a::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+}
+
+.product-card__price {
+ font-size: var(--font-size-sm);
+}
+
+.product-card__swatches {
+ display: flex;
+ gap: var(--space-2);
+ margin-top: var(--space-2);
+}
+
+.product-card__swatch {
+ width: 1rem;
+ height: 1rem;
+ border-radius: var(--radius-full);
+ border: var(--border-width) solid var(--border-color);
+}
+
+/* ========================================
+ COLLECTION CARD
+ ======================================== */
+
+.collection-card {
+ position: relative;
+ display: block;
+ overflow: hidden;
+}
+
+.collection-card__media {
+ aspect-ratio: 4 / 5;
+}
+
+.collection-card__media img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform var(--duration-slow) var(--ease-out);
+}
+
+.collection-card:hover .collection-card__media img {
+ transform: scale(1.05);
+}
+
+.collection-card__overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: flex-end;
+ padding: var(--space-6);
+ background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, transparent 50%);
+}
+
+.collection-card__title {
+ font-size: var(--font-size-xl);
+ color: #fff;
+}
+
+/* ========================================
+ PRODUCT GALLERY
+ ======================================== */
+
+.product-gallery {
+ display: grid;
+ gap: var(--space-2);
+}
+
+@media (min-width: 750px) {
+ .product-gallery {
+ grid-template-columns: 5rem 1fr;
+ }
+}
+
+.product-gallery__thumbnails {
+ display: none;
+ flex-direction: column;
+ gap: var(--space-2);
+}
+
+@media (min-width: 750px) {
+ .product-gallery__thumbnails {
+ display: flex;
+ }
+}
+
+.product-gallery__thumbnail {
+ position: relative;
+ aspect-ratio: 1;
+ overflow: hidden;
+ cursor: pointer;
+ opacity: 0.6;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.product-gallery__thumbnail.is-active,
+.product-gallery__thumbnail:hover {
+ opacity: 1;
+}
+
+.product-gallery__thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.product-gallery__main {
+ position: relative;
+ aspect-ratio: 3 / 4;
+ overflow: hidden;
+}
+
+.product-gallery__main img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.product-gallery__zoom {
+ position: absolute;
+ top: var(--space-4);
+ right: var(--space-4);
+}
+
+/* ========================================
+ PRODUCT INFO
+ ======================================== */
+
+.product-info {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-6);
+}
+
+.product-info__vendor {
+ font-size: var(--font-size-xs);
+ color: var(--color-muted);
+ text-transform: uppercase;
+ letter-spacing: var(--letter-spacing-widest);
+}
+
+.product-info__title {
+ font-size: var(--font-size-3xl);
+ line-height: var(--line-height-tight);
+}
+
+.product-info__price {
+ font-size: var(--font-size-xl);
+}
+
+.product-info__description {
+ color: var(--color-muted);
+}
+
+/* Variant picker */
+.variant-picker {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-6);
+}
+
+.variant-picker__option {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+
+.variant-picker__label {
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+}
+
+.variant-picker__values {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-2);
+}
+
+.variant-picker__value {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 3rem;
+ height: 2.5rem;
+ padding: 0 var(--space-4);
+ font-size: var(--font-size-sm);
+ border: var(--border-width) solid var(--border-color);
+ background-color: transparent;
+ cursor: pointer;
+ transition: border-color var(--duration-fast) var(--ease-out),
+ background-color var(--duration-fast) var(--ease-out);
+}
+
+.variant-picker__value:hover {
+ border-color: var(--color-foreground);
+}
+
+.variant-picker__value.is-selected {
+ border-color: var(--color-foreground);
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+}
+
+.variant-picker__value.is-unavailable {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Color swatches */
+.swatch {
+ position: relative;
+ width: 2rem;
+ height: 2rem;
+ border-radius: var(--radius-full);
+ border: 2px solid transparent;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.swatch::before {
+ content: '';
+ position: absolute;
+ inset: 2px;
+ border-radius: var(--radius-full);
+ background-color: var(--swatch-color);
+ background-image: var(--swatch-image);
+ background-size: cover;
+ background-position: center;
+}
+
+.swatch.is-selected {
+ border-color: var(--color-foreground);
+}
+
+.swatch:hover::after {
+ content: '';
+ position: absolute;
+ inset: 2px;
+ border-radius: var(--radius-full);
+ background-color: rgb(0 0 0 / 0.1);
+}
+
+/* Buy buttons */
+.buy-buttons {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+
+/* ========================================
+ CART
+ ======================================== */
+
+.cart {
+ display: grid;
+ gap: var(--space-8);
+}
+
+@media (min-width: 990px) {
+ .cart {
+ grid-template-columns: 1fr 24rem;
+ }
+}
+
+.cart__items {
+ display: flex;
+ flex-direction: column;
+}
+
+.cart__item {
+ display: grid;
+ grid-template-columns: 6rem 1fr;
+ gap: var(--space-4);
+ padding: var(--space-6) 0;
+ border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.cart__item-media {
+ aspect-ratio: 3 / 4;
+ overflow: hidden;
+ background-color: var(--color-muted);
+}
+
+.cart__item-media img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.cart__item-info {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+}
+
+.cart__item-title {
+ font-size: var(--font-size-base);
+ font-weight: 500;
+}
+
+.cart__item-variant {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted);
+}
+
+.cart__item-price {
+ font-size: var(--font-size-sm);
+}
+
+.cart__item-actions {
+ display: flex;
+ align-items: center;
+ gap: var(--space-4);
+ margin-top: auto;
+}
+
+.cart__summary {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4);
+ padding: var(--space-6);
+ background-color: color-mix(in srgb, var(--color-muted) 20%, transparent);
+ height: fit-content;
+}
+
+@media (min-width: 990px) {
+ .cart__summary {
+ position: sticky;
+ top: calc(var(--header-height) + var(--space-4));
+ }
+}
+
+.cart__subtotal {
+ display: flex;
+ justify-content: space-between;
+ font-size: var(--font-size-lg);
+ font-weight: 500;
+}
+
+.cart__note {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted);
+}
+
+/* ========================================
+ SEARCH
+ ======================================== */
+
+.search-form {
+ display: flex;
+ gap: var(--space-2);
+}
+
+.search-form__input {
+ flex: 1;
+}
+
+.predictive-search {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: var(--color-background);
+ border: var(--border-width) solid var(--border-color);
+ border-top: none;
+ box-shadow: var(--shadow-lg);
+ max-height: 80vh;
+ overflow-y: auto;
+}
+
+.predictive-search__results {
+ padding: var(--space-4);
+}
+
+.predictive-search__item {
+ display: grid;
+ grid-template-columns: 4rem 1fr;
+ gap: var(--space-3);
+ padding: var(--space-3);
+ text-decoration: none;
+ transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.predictive-search__item:hover {
+ background-color: color-mix(in srgb, var(--color-muted) 10%, transparent);
+}
+
+.predictive-search__item-image {
+ aspect-ratio: 1;
+ background-color: var(--color-muted);
+}
+
+.predictive-search__item-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.predictive-search__item-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: var(--space-1);
+}
+
+.predictive-search__item-title {
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+}
+
+.predictive-search__item-price {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted);
+}
+
+/* ========================================
+ FACETED FILTERING
+ ======================================== */
+
+.facets {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4);
+}
+
+.facets__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.facets__group {
+ border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.facets__summary {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-4) 0;
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ cursor: pointer;
+ list-style: none;
+}
+
+.facets__summary::-webkit-details-marker {
+ display: none;
+}
+
+.facets__summary svg {
+ transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.facets__group[open] .facets__summary svg {
+ transform: rotate(180deg);
+}
+
+.facets__options {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+ padding-bottom: var(--space-4);
+}
+
+.facets__option {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ font-size: var(--font-size-sm);
+ cursor: pointer;
+}
+
+.facets__option-count {
+ color: var(--color-muted);
+ margin-left: auto;
+}
+
+.active-filters {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-2);
+}
+
+.active-filter {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-1) var(--space-3);
+ font-size: var(--font-size-xs);
+ background-color: var(--color-foreground);
+ color: var(--color-background);
+ border-radius: var(--radius-full);
+}
+
+.active-filter__remove {
+ display: flex;
+ padding: var(--space-1);
+ margin: calc(var(--space-1) * -1);
+ margin-left: 0;
+}
+
+/* ========================================
+ BLOG & ARTICLES
+ ======================================== */
+
+.article-card {
+ display: flex;
+ flex-direction: column;
+}
+
+.article-card__media {
+ aspect-ratio: 16 / 9;
+ overflow: hidden;
+ margin-bottom: var(--space-4);
+}
+
+.article-card__media img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform var(--duration-slow) var(--ease-out);
+}
+
+.article-card:hover .article-card__media img {
+ transform: scale(1.05);
+}
+
+.article-card__meta {
+ display: flex;
+ gap: var(--space-4);
+ font-size: var(--font-size-xs);
+ color: var(--color-muted);
+ text-transform: uppercase;
+ letter-spacing: var(--letter-spacing-wide);
+ margin-bottom: var(--space-3);
+}
+
+.article-card__title {
+ font-size: var(--font-size-xl);
+ line-height: var(--line-height-snug);
+ margin-bottom: var(--space-3);
+}
+
+.article-card__title a {
+ text-decoration: none;
+}
+
+.article-card__excerpt {
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+}
+
+/* Article page */
+.article {
+ max-width: var(--content-width-narrow);
+ margin: 0 auto;
+}
+
+.article__header {
+ text-align: center;
+ margin-bottom: var(--space-8);
+}
+
+.article__meta {
+ display: flex;
+ justify-content: center;
+ gap: var(--space-4);
+ font-size: var(--font-size-xs);
+ color: var(--color-muted);
+ text-transform: uppercase;
+ letter-spacing: var(--letter-spacing-wide);
+ margin-bottom: var(--space-4);
+}
+
+.article__title {
+ font-size: var(--font-size-4xl);
+ margin-bottom: var(--space-4);
+}
+
+.article__featured-image {
+ margin-bottom: var(--space-8);
+}
+
+.article__featured-image img {
+ width: 100%;
+ height: auto;
+}
+
+.article__content {
+ font-size: var(--font-size-md);
+}
+
+/* ========================================
+ NEWSLETTER
+ ======================================== */
+
+.newsletter {
+ text-align: center;
+ max-width: var(--content-width-narrow);
+ margin: 0 auto;
+}
+
+.newsletter__title {
+ margin-bottom: var(--space-4);
+}
+
+.newsletter__text {
+ color: var(--color-muted);
+ margin-bottom: var(--space-6);
+}
+
+.newsletter__form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+
+@media (min-width: 750px) {
+ .newsletter__form {
+ flex-direction: row;
+ max-width: 28rem;
+ margin: 0 auto;
+ }
+}
+
+.newsletter__input {
+ flex: 1;
+}
+
+/* ========================================
+ TESTIMONIALS
+ ======================================== */
+
+.testimonial {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: var(--space-8);
+}
+
+.testimonial__quote {
+ font-family: var(--font-heading-family);
+ font-size: var(--font-size-2xl);
+ font-style: italic;
+ line-height: var(--line-height-relaxed);
+ margin-bottom: var(--space-6);
+}
+
+.testimonial__author {
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+}
+
+.testimonial__role {
+ font-size: var(--font-size-xs);
+ color: var(--color-muted);
+}
+
+/* ========================================
+ PAGINATION
+ ======================================== */
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--space-2);
+ margin-top: var(--space-8);
+}
+
+.pagination__item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: var(--touch-target-min);
+ height: var(--touch-target-min);
+ font-size: var(--font-size-sm);
+ text-decoration: none;
+ transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.pagination__item:hover {
+ opacity: 0.7;
+}
+
+.pagination__item.is-current {
+ font-weight: 600;
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+}
+
+.pagination__item.is-disabled {
+ opacity: 0.3;
+ pointer-events: none;
+}
+
+/* ========================================
+ LOCALIZATION
+ ======================================== */
+
+.localization-form {
+ display: flex;
+ gap: var(--space-4);
+}
+
+.localization-selector {
+ position: relative;
+}
+
+.localization-selector__button {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ font-size: var(--font-size-sm);
+}
+
+.localization-selector__dropdown {
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ min-width: 10rem;
+ padding: var(--space-2);
+ background-color: var(--color-background);
+ border: var(--border-width) solid var(--border-color);
+ box-shadow: var(--shadow-lg);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(0.5rem);
+ transition: opacity var(--duration-fast) var(--ease-out),
+ visibility var(--duration-fast) var(--ease-out),
+ transform var(--duration-fast) var(--ease-out);
+}
+
+.localization-selector.is-open .localization-selector__dropdown {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.localization-selector__option {
+ display: block;
+ width: 100%;
+ padding: var(--space-2) var(--space-3);
+ font-size: var(--font-size-sm);
+ text-align: left;
+ text-decoration: none;
+ transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.localization-selector__option:hover {
+ background-color: color-mix(in srgb, var(--color-muted) 10%, transparent);
+}
+
+/* ========================================
+ GIFT CARD
+ ======================================== */
+
+.gift-card {
+ max-width: 28rem;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.gift-card__image {
+ margin-bottom: var(--space-6);
+}
+
+.gift-card__image img {
+ width: 100%;
+ height: auto;
+}
+
+.gift-card__title {
+ margin-bottom: var(--space-4);
+}
+
+.gift-card__balance {
+ font-size: var(--font-size-3xl);
+ font-weight: 500;
+ margin-bottom: var(--space-6);
+}
+
+.gift-card__code {
+ display: inline-flex;
+ padding: var(--space-3) var(--space-6);
+ font-family: monospace;
+ font-size: var(--font-size-lg);
+ background-color: color-mix(in srgb, var(--color-muted) 20%, transparent);
+ border-radius: var(--radius-md);
+ margin-bottom: var(--space-6);
+}
+
+.gift-card__qr {
+ margin-bottom: var(--space-6);
+}
+
+.gift-card__qr img {
+ max-width: 8rem;
+ margin: 0 auto;
+}
+
+/* ========================================
+ PASSWORD PAGE
+ ======================================== */
+
+.password-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ text-align: center;
+ padding: var(--space-8);
+}
+
+.password-page__logo {
+ margin-bottom: var(--space-8);
+}
+
+.password-page__title {
+ margin-bottom: var(--space-4);
+}
+
+.password-page__message {
+ color: var(--color-muted);
+ margin-bottom: var(--space-8);
+ max-width: 30rem;
+}
+
+.password-page__form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+ width: 100%;
+ max-width: 20rem;
+}
+
+/* ========================================
+ 404 PAGE
+ ======================================== */
+
+.not-found {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 50vh;
+ text-align: center;
+ padding: var(--space-8);
+}
+
+.not-found__title {
+ font-size: var(--font-size-display);
+ margin-bottom: var(--space-4);
+}
+
+.not-found__text {
+ color: var(--color-muted);
+ margin-bottom: var(--space-8);
+ max-width: 30rem;
+}
diff --git a/config/settings_data.json b/config/settings_data.json
index 512f358e..bff80d61 100644
--- a/config/settings_data.json
+++ b/config/settings_data.json
@@ -1,12 +1,189 @@
-/*
- * ------------------------------------------------------------
- * IMPORTANT: The contents of this file are auto-generated.
- *
- * This file may be updated by the Shopify admin theme editor
- * or related systems. Please exercise caution as any changes
- * made to this file may be overwritten.
- * ------------------------------------------------------------
- */
{
- "current": {}
+ "current": "Influence",
+ "presets": {
+ "Influence": {
+ "colors_scheme_1_background": "#ffffff",
+ "colors_scheme_1_foreground": "#1a1a1a",
+ "colors_scheme_1_foreground_muted": "#666666",
+ "colors_scheme_1_border": "#e5e5e5",
+ "colors_scheme_2_background": "#1a1a1a",
+ "colors_scheme_2_foreground": "#ffffff",
+ "colors_scheme_2_foreground_muted": "#a0a0a0",
+ "colors_scheme_2_border": "#333333",
+ "colors_primary": "#1a1a1a",
+ "colors_primary_foreground": "#ffffff",
+ "colors_secondary": "#666666",
+ "colors_secondary_foreground": "#ffffff",
+ "colors_accent": "#c4a87c",
+ "colors_error": "#c62828",
+ "colors_success": "#2e7d32",
+ "type_heading_font": "assistant_n7",
+ "type_heading_font_size": 100,
+ "type_heading_letter_spacing": -2,
+ "type_heading_line_height": 1.1,
+ "type_body_font": "assistant_n4",
+ "type_body_font_size": 100,
+ "type_body_line_height": 1.6,
+ "layout_max_width": 1400,
+ "layout_page_margin": 24,
+ "buttons_border_radius": 0,
+ "buttons_uppercase": true,
+ "animations_enabled": true,
+ "animations_duration": 300,
+ "animations_hover_effect": "lift",
+ "products_show_vendor": false,
+ "products_show_secondary_image": true,
+ "products_enable_quick_add": true,
+ "products_enable_image_zoom": true,
+ "products_card_aspect_ratio": "3/4",
+ "cart_type": "drawer",
+ "cart_show_vendor": false,
+ "social_facebook_link": "",
+ "social_instagram_link": "",
+ "social_twitter_link": "",
+ "social_pinterest_link": "",
+ "social_tiktok_link": "",
+ "social_youtube_link": "",
+ "social_linkedin_link": "",
+ "sections": {
+ "header": {
+ "type": "header",
+ "settings": {
+ "menu": "main-menu",
+ "logo_position": "center",
+ "logo_width": 120,
+ "enable_sticky": true,
+ "enable_transparent": false,
+ "show_search": true,
+ "show_account": true
+ }
+ },
+ "footer": {
+ "type": "footer",
+ "blocks": {
+ "menu_1": {
+ "type": "menu",
+ "settings": {
+ "heading": "Shop",
+ "menu": "footer"
+ }
+ },
+ "menu_2": {
+ "type": "menu",
+ "settings": {
+ "heading": "Help",
+ "menu": "footer"
+ }
+ },
+ "newsletter": {
+ "type": "newsletter",
+ "settings": {
+ "heading": "Subscribe",
+ "text": "Get exclusive access to new arrivals and promotions."
+ }
+ }
+ },
+ "block_order": ["menu_1", "menu_2", "newsletter"],
+ "settings": {
+ "show_social": true,
+ "show_payment_icons": true,
+ "show_country_selector": true,
+ "show_language_selector": true
+ }
+ },
+ "announcement-bar": {
+ "type": "announcement-bar",
+ "blocks": {
+ "announcement_1": {
+ "type": "announcement",
+ "settings": {
+ "text": "Free shipping on orders over $100",
+ "link": ""
+ }
+ }
+ },
+ "block_order": ["announcement_1"],
+ "settings": {
+ "color_scheme": "scheme-2"
+ }
+ }
+ }
+ },
+ "Runway": {
+ "colors_scheme_1_background": "#faf9f7",
+ "colors_scheme_1_foreground": "#2d2d2d",
+ "colors_scheme_1_foreground_muted": "#757575",
+ "colors_scheme_1_border": "#e0ddd8",
+ "colors_scheme_2_background": "#2d2d2d",
+ "colors_scheme_2_foreground": "#faf9f7",
+ "colors_scheme_2_foreground_muted": "#b0b0b0",
+ "colors_scheme_2_border": "#4a4a4a",
+ "colors_primary": "#c41e3a",
+ "colors_primary_foreground": "#ffffff",
+ "colors_secondary": "#2d2d2d",
+ "colors_secondary_foreground": "#ffffff",
+ "colors_accent": "#c41e3a",
+ "colors_error": "#b71c1c",
+ "colors_success": "#1b5e20",
+ "type_heading_font": "playfair_display_n7",
+ "type_heading_font_size": 110,
+ "type_heading_letter_spacing": -1,
+ "type_heading_line_height": 1.1,
+ "type_body_font": "source_sans_pro_n4",
+ "type_body_font_size": 100,
+ "type_body_line_height": 1.6,
+ "layout_max_width": 1400,
+ "layout_page_margin": 24,
+ "buttons_border_radius": 4,
+ "buttons_uppercase": false,
+ "animations_enabled": true,
+ "animations_duration": 400,
+ "animations_hover_effect": "fade",
+ "products_show_vendor": true,
+ "products_show_secondary_image": true,
+ "products_enable_quick_add": true,
+ "products_enable_image_zoom": true,
+ "products_card_aspect_ratio": "3/4",
+ "cart_type": "drawer",
+ "cart_show_vendor": true
+ },
+ "Atelier": {
+ "colors_scheme_1_background": "#f5f3ef",
+ "colors_scheme_1_foreground": "#3d3d3d",
+ "colors_scheme_1_foreground_muted": "#7a7a7a",
+ "colors_scheme_1_border": "#ddd9d3",
+ "colors_scheme_2_background": "#3d3d3d",
+ "colors_scheme_2_foreground": "#f5f3ef",
+ "colors_scheme_2_foreground_muted": "#a8a8a8",
+ "colors_scheme_2_border": "#5a5a5a",
+ "colors_primary": "#8b7355",
+ "colors_primary_foreground": "#ffffff",
+ "colors_secondary": "#3d3d3d",
+ "colors_secondary_foreground": "#ffffff",
+ "colors_accent": "#8b7355",
+ "colors_error": "#bf360c",
+ "colors_success": "#33691e",
+ "type_heading_font": "cormorant_garamond_n5",
+ "type_heading_font_size": 120,
+ "type_heading_letter_spacing": 0,
+ "type_heading_line_height": 1.2,
+ "type_body_font": "karla_n4",
+ "type_body_font_size": 100,
+ "type_body_line_height": 1.7,
+ "layout_max_width": 1200,
+ "layout_page_margin": 32,
+ "buttons_border_radius": 2,
+ "buttons_uppercase": true,
+ "animations_enabled": true,
+ "animations_duration": 350,
+ "animations_hover_effect": "lift",
+ "products_show_vendor": false,
+ "products_show_secondary_image": true,
+ "products_enable_quick_add": false,
+ "products_enable_image_zoom": true,
+ "products_card_aspect_ratio": "4/5",
+ "cart_type": "page",
+ "cart_show_vendor": false
+ }
+ }
}
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 8d3b532d..8415b8f6 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -1,42 +1,181 @@
[
{
"name": "theme_info",
- "theme_name": "Skeleton",
- "theme_version": "0.1.0",
- "theme_author": "Shopify",
+ "theme_name": "Influence",
+ "theme_version": "1.0.0",
+ "theme_author": "Shopify Partner",
"theme_documentation_url": "https://help.shopify.com/manual/online-store/themes",
"theme_support_url": "https://support.shopify.com/"
},
{
- "name": "t:general.typography",
+ "name": "t:settings_schema.logo.name",
+ "settings": [
+ {
+ "type": "image_picker",
+ "id": "logo",
+ "label": "t:settings_schema.logo.settings.logo.label"
+ },
+ {
+ "type": "range",
+ "id": "logo_width",
+ "min": 50,
+ "max": 250,
+ "step": 10,
+ "unit": "px",
+ "label": "t:settings_schema.logo.settings.logo_width.label",
+ "default": 120
+ },
+ {
+ "type": "image_picker",
+ "id": "favicon",
+ "label": "t:settings_schema.logo.settings.favicon.label",
+ "info": "t:settings_schema.logo.settings.favicon.info"
+ }
+ ]
+ },
+ {
+ "name": "t:settings_schema.colors.name",
+ "settings": [
+ {
+ "type": "header",
+ "content": "t:settings_schema.colors.settings.scheme_1.header"
+ },
+ {
+ "type": "color",
+ "id": "scheme_1_background",
+ "label": "t:settings_schema.colors.settings.background.label",
+ "default": "#FFFFFF"
+ },
+ {
+ "type": "color",
+ "id": "scheme_1_foreground",
+ "label": "t:settings_schema.colors.settings.foreground.label",
+ "default": "#1A1A1A"
+ },
+ {
+ "type": "color",
+ "id": "scheme_1_accent",
+ "label": "t:settings_schema.colors.settings.accent.label",
+ "default": "#000000"
+ },
+ {
+ "type": "color",
+ "id": "scheme_1_muted",
+ "label": "t:settings_schema.colors.settings.muted.label",
+ "default": "#757575"
+ },
+ {
+ "type": "header",
+ "content": "t:settings_schema.colors.settings.scheme_2.header"
+ },
+ {
+ "type": "color",
+ "id": "scheme_2_background",
+ "label": "t:settings_schema.colors.settings.background.label",
+ "default": "#1A1A1A"
+ },
+ {
+ "type": "color",
+ "id": "scheme_2_foreground",
+ "label": "t:settings_schema.colors.settings.foreground.label",
+ "default": "#FFFFFF"
+ },
+ {
+ "type": "color",
+ "id": "scheme_2_accent",
+ "label": "t:settings_schema.colors.settings.accent.label",
+ "default": "#FFFFFF"
+ },
+ {
+ "type": "color",
+ "id": "scheme_2_muted",
+ "label": "t:settings_schema.colors.settings.muted.label",
+ "default": "#A0A0A0"
+ },
+ {
+ "type": "header",
+ "content": "t:settings_schema.colors.settings.semantic.header"
+ },
+ {
+ "type": "color",
+ "id": "color_sale",
+ "label": "t:settings_schema.colors.settings.sale.label",
+ "default": "#B22222"
+ },
+ {
+ "type": "color",
+ "id": "color_error",
+ "label": "t:settings_schema.colors.settings.error.label",
+ "default": "#DC3545"
+ },
+ {
+ "type": "color",
+ "id": "color_success",
+ "label": "t:settings_schema.colors.settings.success.label",
+ "default": "#198754"
+ }
+ ]
+ },
+ {
+ "name": "t:settings_schema.typography.name",
"settings": [
{
"type": "header",
- "content": "t:general.fonts"
+ "content": "t:settings_schema.typography.settings.headings.header"
},
{
"type": "font_picker",
- "id": "type_primary_font",
- "default": "work_sans_n4",
- "label": "t:general.primary"
+ "id": "type_heading_font",
+ "label": "t:settings_schema.typography.settings.heading_font.label",
+ "default": "cormorant_garamond_n4",
+ "info": "t:settings_schema.typography.settings.heading_font.info"
+ },
+ {
+ "type": "header",
+ "content": "t:settings_schema.typography.settings.body.header"
+ },
+ {
+ "type": "font_picker",
+ "id": "type_body_font",
+ "label": "t:settings_schema.typography.settings.body_font.label",
+ "default": "assistant_n4",
+ "info": "t:settings_schema.typography.settings.body_font.info"
+ },
+ {
+ "type": "range",
+ "id": "type_base_size",
+ "min": 14,
+ "max": 18,
+ "step": 1,
+ "unit": "px",
+ "label": "t:settings_schema.typography.settings.base_size.label",
+ "default": 16
}
]
},
{
- "name": "t:general.layout",
+ "name": "t:settings_schema.layout.name",
"settings": [
{
"type": "select",
"id": "max_page_width",
- "label": "t:labels.page_width",
+ "label": "t:settings_schema.layout.settings.page_width.label",
"options": [
+ {
+ "value": "80rem",
+ "label": "t:settings_schema.layout.settings.page_width.options.narrow"
+ },
{
"value": "90rem",
- "label": "t:options.page_width.narrow"
+ "label": "t:settings_schema.layout.settings.page_width.options.standard"
+ },
+ {
+ "value": "100rem",
+ "label": "t:settings_schema.layout.settings.page_width.options.wide"
},
{
"value": "110rem",
- "label": "t:options.page_width.wide"
+ "label": "t:settings_schema.layout.settings.page_width.options.full"
}
],
"default": "90rem"
@@ -44,39 +183,256 @@
{
"type": "range",
"id": "min_page_margin",
- "min": 10,
- "max": 100,
- "step": 1,
+ "min": 16,
+ "max": 80,
+ "step": 4,
"unit": "px",
- "label": "t:labels.page_margin",
- "default": 20
+ "label": "t:settings_schema.layout.settings.page_margin.label",
+ "default": 24
+ },
+ {
+ "type": "select",
+ "id": "section_spacing",
+ "label": "t:settings_schema.layout.settings.section_spacing.label",
+ "options": [
+ {
+ "value": "compact",
+ "label": "t:settings_schema.layout.settings.section_spacing.options.compact"
+ },
+ {
+ "value": "standard",
+ "label": "t:settings_schema.layout.settings.section_spacing.options.standard"
+ },
+ {
+ "value": "generous",
+ "label": "t:settings_schema.layout.settings.section_spacing.options.generous"
+ }
+ ],
+ "default": "standard"
}
]
},
{
- "name": "t:general.colors",
+ "name": "t:settings_schema.buttons.name",
"settings": [
{
- "type": "color",
- "id": "background_color",
- "default": "#FFFFFF",
- "label": "t:labels.background"
+ "type": "range",
+ "id": "button_corner_radius",
+ "min": 0,
+ "max": 24,
+ "step": 2,
+ "unit": "px",
+ "label": "t:settings_schema.buttons.settings.corner_radius.label",
+ "default": 0
},
{
- "type": "color",
- "id": "foreground_color",
- "default": "#333333",
- "label": "t:labels.foreground"
+ "type": "checkbox",
+ "id": "button_uppercase",
+ "label": "t:settings_schema.buttons.settings.uppercase.label",
+ "default": true
},
{
"type": "range",
"id": "input_corner_radius",
"min": 0,
- "max": 10,
- "step": 1,
+ "max": 16,
+ "step": 2,
"unit": "px",
- "label": "t:labels.input_corner_radius",
- "default": 4
+ "label": "t:settings_schema.buttons.settings.input_corner_radius.label",
+ "default": 0
+ }
+ ]
+ },
+ {
+ "name": "t:settings_schema.animations.name",
+ "settings": [
+ {
+ "type": "checkbox",
+ "id": "enable_animations",
+ "label": "t:settings_schema.animations.settings.enable.label",
+ "default": true,
+ "info": "t:settings_schema.animations.settings.enable.info"
+ },
+ {
+ "type": "select",
+ "id": "animation_style",
+ "label": "t:settings_schema.animations.settings.style.label",
+ "options": [
+ {
+ "value": "subtle",
+ "label": "t:settings_schema.animations.settings.style.options.subtle"
+ },
+ {
+ "value": "elegant",
+ "label": "t:settings_schema.animations.settings.style.options.elegant"
+ },
+ {
+ "value": "dramatic",
+ "label": "t:settings_schema.animations.settings.style.options.dramatic"
+ }
+ ],
+ "default": "elegant"
+ },
+ {
+ "type": "checkbox",
+ "id": "enable_image_zoom",
+ "label": "t:settings_schema.animations.settings.image_zoom.label",
+ "default": true
+ }
+ ]
+ },
+ {
+ "name": "t:settings_schema.products.name",
+ "settings": [
+ {
+ "type": "select",
+ "id": "product_card_aspect_ratio",
+ "label": "t:settings_schema.products.settings.card_aspect_ratio.label",
+ "options": [
+ {
+ "value": "1/1",
+ "label": "t:settings_schema.products.settings.card_aspect_ratio.options.square"
+ },
+ {
+ "value": "3/4",
+ "label": "t:settings_schema.products.settings.card_aspect_ratio.options.portrait"
+ },
+ {
+ "value": "4/5",
+ "label": "t:settings_schema.products.settings.card_aspect_ratio.options.tall"
+ }
+ ],
+ "default": "3/4"
+ },
+ {
+ "type": "checkbox",
+ "id": "show_secondary_image",
+ "label": "t:settings_schema.products.settings.secondary_image.label",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "show_vendor",
+ "label": "t:settings_schema.products.settings.show_vendor.label",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "enable_quick_add",
+ "label": "t:settings_schema.products.settings.quick_add.label",
+ "default": true
+ }
+ ]
+ },
+ {
+ "name": "t:settings_schema.cart.name",
+ "settings": [
+ {
+ "type": "select",
+ "id": "cart_type",
+ "label": "t:settings_schema.cart.settings.type.label",
+ "options": [
+ {
+ "value": "page",
+ "label": "t:settings_schema.cart.settings.type.options.page"
+ },
+ {
+ "value": "drawer",
+ "label": "t:settings_schema.cart.settings.type.options.drawer"
+ }
+ ],
+ "default": "drawer"
+ },
+ {
+ "type": "checkbox",
+ "id": "cart_show_vendor",
+ "label": "t:settings_schema.cart.settings.show_vendor.label",
+ "default": false
+ },
+ {
+ "type": "checkbox",
+ "id": "cart_enable_notes",
+ "label": "t:settings_schema.cart.settings.enable_notes.label",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "enable_cart_upsell",
+ "label": "t:settings_schema.cart.settings.upsell.label",
+ "default": true
+ }
+ ]
+ },
+ {
+ "name": "t:settings_schema.social_media.name",
+ "settings": [
+ {
+ "type": "header",
+ "content": "t:settings_schema.social_media.settings.accounts.header"
+ },
+ {
+ "type": "text",
+ "id": "social_instagram_link",
+ "label": "t:settings_schema.social_media.settings.instagram.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "text",
+ "id": "social_facebook_link",
+ "label": "t:settings_schema.social_media.settings.facebook.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "text",
+ "id": "social_twitter_link",
+ "label": "t:settings_schema.social_media.settings.twitter.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "text",
+ "id": "social_pinterest_link",
+ "label": "t:settings_schema.social_media.settings.pinterest.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "text",
+ "id": "social_youtube_link",
+ "label": "t:settings_schema.social_media.settings.youtube.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "text",
+ "id": "social_tiktok_link",
+ "label": "t:settings_schema.social_media.settings.tiktok.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "text",
+ "id": "social_linkedin_link",
+ "label": "t:settings_schema.social_media.settings.linkedin.label",
+ "info": "t:settings_schema.social_media.settings.social_info"
+ },
+ {
+ "type": "header",
+ "content": "t:settings_schema.social_media.settings.sharing.header"
+ },
+ {
+ "type": "checkbox",
+ "id": "share_facebook",
+ "label": "t:settings_schema.social_media.settings.share_facebook.label",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "share_twitter",
+ "label": "t:settings_schema.social_media.settings.share_twitter.label",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "share_pinterest",
+ "label": "t:settings_schema.social_media.settings.share_pinterest.label",
+ "default": true
}
]
}
diff --git a/layout/password.liquid b/layout/password.liquid
index 350ec0bd..8824d487 100644
--- a/layout/password.liquid
+++ b/layout/password.liquid
@@ -1,19 +1,31 @@
+ {{ 'blog.onboarding.excerpt' | t }} +
+ +Have a question? We'd love to hear from you.
" + }, + { + "type": "select", + "id": "text_alignment", + "label": "t:labels.text_alignment", + "options": [ + { "value": "left", "label": "t:options.alignment.left" }, + { "value": "center", "label": "t:options.alignment.center" } + ], + "default": "center" + }, + { + "type": "checkbox", + "id": "narrow_container", + "label": "t:sections.contact_form.settings.narrow_container.label", + "default": true + }, + { + "type": "header", + "content": "t:sections.contact_form.settings.header_form_fields.content" + }, + { + "type": "checkbox", + "id": "show_phone", + "label": "t:sections.contact_form.settings.show_phone.label", + "default": false + }, + { + "type": "checkbox", + "id": "show_subject", + "label": "t:sections.contact_form.settings.show_subject.label", + "default": true + }, + { + "type": "checkbox", + "id": "full_width_button", + "label": "t:sections.contact_form.settings.full_width_button.label", + "default": false + }, + { + "type": "select", + "id": "color_scheme", + "label": "t:labels.color_scheme", + "options": [ + { "value": "scheme-1", "label": "t:options.color_scheme.scheme_1" }, + { "value": "scheme-2", "label": "t:options.color_scheme.scheme_2" } + ], + "default": "scheme-1" + } + ], + "presets": [ + { + "name": "t:sections.contact_form.name" + } + ] +} +{% endschema %} diff --git a/sections/custom-liquid.liquid b/sections/custom-liquid.liquid new file mode 100644 index 00000000..87ee9c96 --- /dev/null +++ b/sections/custom-liquid.liquid @@ -0,0 +1,41 @@ +{% comment %} + Custom Liquid Section - Influence Theme (REQUIRED FOR THEME STORE) + Allows merchants to add custom Liquid code to any page +{% endcomment %} + +We offer free standard shipping on all orders over $100. Orders are typically processed within 1-2 business days and delivered within 5-7 business days.
" + } + ] + } + ], + "presets": [ + { + "name": "t:sections.faq.name", + "blocks": [ + { + "type": "question", + "settings": { + "question": "What is your shipping policy?", + "answer": "We offer free standard shipping on all orders over $100. Orders are typically processed within 1-2 business days and delivered within 5-7 business days.
" + } + }, + { + "type": "question", + "settings": { + "question": "What is your return policy?", + "answer": "We accept returns within 30 days of purchase. Items must be unworn, unwashed, and in their original packaging with all tags attached.
" + } + }, + { + "type": "question", + "settings": { + "question": "How can I track my order?", + "answer": "Once your order ships, you'll receive an email with tracking information. You can also track your order by logging into your account.
" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid new file mode 100644 index 00000000..fc932d87 --- /dev/null +++ b/sections/featured-collection.liquid @@ -0,0 +1,176 @@ +{% comment %} + Featured Collection Section - Influence Theme + Displays products from a selected collection with editorial styling +{% endcomment %} + +{%- liquid + assign collection = collections[section.settings.collection] + assign products_to_show = section.settings.products_to_show + assign columns = section.settings.columns_desktop +-%} + +{{ section.settings.subheading }}
+ {%- endif -%} + + {%- if section.settings.heading != blank -%} +Vendor
+{{ 9999 | money }}
+