Feat/product collection redesign

.cursor/rules/common-debugging-steps.mdc

@@ -0,0 +1,47 @@
+---
+description: Common Debugging Steps for Shopify Theme Customization
+globs: 
+alwaysApply: false
+---
+# Common Debugging Steps for Shopify Theme Customization
+
+This guide outlines common issues and recommended debugging steps when working on Shopify theme customizations, particularly with CSS and Liquid.
+
+1.  **Verify Theme Customizer Settings:**
+    *   Many visual aspects (e.g., logo position, color schemes, feature toggles) are controlled by settings in the Shopify Admin (Online Store -> Themes -> Customize -> Section/Theme Settings).
+    *   Always double-check that the relevant settings are configured as expected, as these often drive Liquid logic that adds CSS classes or changes behavior.
+    *   **Example:** Header mobile logo position relies on "Mobile logo position" being set to "Left" in Header settings.
+
+2.  **Clear Browser Cache / Hard Refresh:**
+    *   Browsers aggressively cache CSS and JavaScript. After making changes to these assets, always perform a hard refresh to ensure you're seeing the latest version.
+    *   **Shortcuts:** Cmd+Shift+R (Mac), Ctrl+Shift+R (Windows/Linux).
+
+3.  **Use Browser Developer Tools (Inspector):**
+    *   **Element Inspection:** Right-click on the problematic element and choose "Inspect" or "Inspect Element".
+    *   **Styles Panel:** This is crucial for CSS debugging.
+        *   See all CSS rules applying to the selected element.
+        *   Identify which rules are active and which are overridden (struck-through).
+        *   Check the specificity of selectors. Highly specific selectors from base theme CSS (like Dawn's `base.css`) might override your custom styles.
+        *   Verify your custom CSS file (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`) is loaded and its rules are present.
+    *   **Computed Panel:** Shows the final, calculated value for each CSS property on the element, after all stylesheets and inline styles have been considered.
+    *   **Classes:** Verify that the expected CSS classes (e.g., `header--mobile-left`) are present on the HTML elements. These are often added by Liquid logic based on theme settings.
+    *   **Console:** Check for JavaScript errors, which might break functionality or prevent CSS classes from being applied correctly.
+
+4.  **CSS Specificity and `!important`:**
+    *   If your custom styles aren't applying, it's often due to more specific selectors in the base theme's CSS.
+    *   You can increase the specificity of your selectors or, as a last resort for targeted overrides, use `!important`. Use `!important` judiciously as it can make future CSS maintenance harder.
+
+5.  **Media Query Scoping:**
+    *   Ensure styles intended for specific viewports (mobile, tablet, desktop) are correctly wrapped in appropriate media queries (e.g., `@media screen and (max-width: 749px)` for mobile, `@media screen and (min-width: 990px)` for desktop).
+    *   A common issue encountered was desktop-specific grid styles for the header unintentionally affecting mobile layout until they were properly scoped with a `min-width` media query.
+
+6.  **Homepage-Specific Issues:**
+    *   Shopify themes can have CSS rules or Liquid logic that applies only to the homepage (e.g., via `body.template-index` class or specific homepage section IDs).
+    *   If an issue occurs only on the homepage, inspect elements there to find homepage-specific styles that might be overriding more general rules.
+
+7.  **Liquid Asset Inclusion Order:**
+    *   Ensure that shared resources like CSS variable definitions (`[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`) are included in `[layout/theme.liquid](mdc:layout/theme.liquid)` *before* the main custom stylesheet (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`) that depends on them.
+
+8.  **Shopify CLI and Development Server:**
+    *   Use `shopify theme dev --store YOUR_STORE.myshopify.com` for local development.
+    *   Ensure the dev server is running and syncing changes. Sometimes, a restart of the dev server might be needed if changes don't appear to be syncing.

.cursor/rules/custom-files-reference.mdc

@@ -0,0 +1,43 @@
+---
+description: This document outlines the key custom files created or significantly modified for the Rave Yoga Shopify theme migration.
+globs: 
+alwaysApply: false
+---
+# Custom Files Reference
+
+This document outlines the key custom files created or significantly modified for the Rave Yoga Shopify theme migration.
+
+*   **`[assets/rave-custom.css](mdc:assets/rave-custom.css)`**
+    *   **Purpose:** Contains all primary custom CSS overrides and new styles for the theme.
+    *   **Structure:** Organized with comments for global resets (use sparingly), Rave-specific utility classes, and section-specific styles (e.g., `/* == HEADER == */`, `/* == FOOTER == */`).
+    *   **Important:** This file is enqueued in `[layout/theme.liquid](mdc:layout/theme.liquid)`.
+
+*   **`[assets/rave-custom.js](mdc:assets/rave-custom.js)`**
+    *   **Purpose:** Houses custom JavaScript functionalities.
+    *   **Structure:** Currently uses an Immediately Invoked Function Expression (IIFE) to avoid polluting the global scope.
+    *   **Important:** This file is enqueued in `[layout/theme.liquid](mdc:layout/theme.liquid)`.
+
+*   **`[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`**
+    *   **Purpose:** Defines custom CSS variables for Rave Yoga brand (colors, fonts). It also maps these custom variables to Dawn's global CSS variables where appropriate.
+    *   **Source of Values:** Uses color settings defined in Theme Settings -> "Rave Brand Settings" (from `[config/settings_schema.json](mdc:config/settings_schema.json)`).
+    *   **Important:** Included in `[layout/theme.liquid](mdc:layout/theme.liquid)` *before* `rave-custom.css` is loaded to ensure variables are available.
+
+*   **`[config/settings_schema.json](mdc:config/settings_schema.json)`**
+    *   **Purpose:** Modified to add a new "Rave Brand Settings" section in the Shopify Theme Customizer.
+    *   **Functionality:** Allows easy selection of brand colors (primary text, secondary text, accent, main background) via color pickers. These settings are then used by `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`.
+
+*   **`[locales/en.default.json](mdc:locales/en.default.json)`**
+    *   **Purpose:** The default English localization file for the theme. Used for any custom text strings required by the theme that are not part of standard Shopify/Dawn translations.
+
+*   **`[layout/theme.liquid](mdc:layout/theme.liquid)`**
+    *   **Purpose:** The main theme layout file. Modified to correctly include/enqueue custom assets:
+        1.  `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` (as a snippet render).
+        2.  `[assets/rave-custom.css](mdc:assets/rave-custom.css)` (as a stylesheet link).
+        3.  `[assets/rave-custom.js](mdc:assets/rave-custom.js)` (as a script tag, typically deferred).
+
+*   **`[sections/header.liquid](mdc:sections/header.liquid)`**
+    *   **Purpose:** The Liquid file for the header section. Has been significantly modified from the default Dawn header.
+    *   **Key Customizations:** Contains Liquid logic to split the main navigation menu for desktop view (when logo is centered) and to hide default header icons. Also structured to support distinct mobile layout requirements.
+
+*   **`[CUSTOMIZATIONS.md](mdc:CUSTOMIZATIONS.md)`**
+    *   **Purpose:** A manually maintained Markdown file intended to log significant customizations, decisions, and troubleshooting steps made during the project. This helps with future maintenance and understanding the evolution of the theme.

.cursor/rules/header-logic.mdc

@@ -0,0 +1,47 @@
+---
+description:  Header Customization Logic
+globs: 
+alwaysApply: false
+---
+# Header Customization Logic
+
+The header in this theme (`[sections/header.liquid](mdc:sections/header.liquid)`) has significant customizations to achieve specific desktop and mobile layouts.
+
+## Desktop Header (min-width: 990px)
+
+*   **Layout Goal:** Split navigation (Left Navigation - Centered Logo - Right Navigation).
+*   **Theme Setting Trigger:** This layout is active when "Logo position" is set to "Middle center" in the Theme Customizer (Header section settings).
+*   **Implementation Details:**
+    *   **Liquid (`[sections/header.liquid](mdc:sections/header.liquid)`)**: When the above condition is met and the menu type is not "drawer", the Liquid code calculates the midpoint of the main menu (`linklists[section.settings.menu]`). It then renders the first half of the links in a `<nav class="...--left">` before the logo, and the second half in a `<nav class="...--right">` after the logo.
+    *   **CSS (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`)**: The `header.header--middle-center` element is styled with `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;`. The child navigation elements (`nav.header__inline-menu--left`, `nav.header__inline-menu--right`) and the logo (`>.header__heading`) are explicitly placed using `grid-column` and `justify-self`.
+        *   **Important:** All these grid-related CSS rules are wrapped in an `@media screen and (min-width: 990px)` query to ensure they only apply to desktop views.
+
+## Mobile Header (max-width: 749px)
+
+*   **Layout Goal:** Logo on the far left, Hamburger Menu icon on the far right.
+*   **Theme Setting Trigger:** This layout relies on "Mobile logo position" being set to "Left" in the Theme Customizer (Header section settings). This adds the `header--mobile-left` class to the `<header>` element.
+*   **Implementation Details (CSS in `[assets/rave-custom.css](mdc:assets/rave-custom.css)` within `@media screen and (max-width: 749px)`)**: 
+        *   The `header.header--mobile-left` element is styled with `display: flex !important; justify-content: space-between !important; align-items: center !important;`.
+        *   The logo container (`.header__heading`) has `order: 1 !important; margin-right: auto !important; justify-self: start !important; margin-left: 0 !important;` to force it left.
+        *   The `header-drawer` (containing the hamburger icon) has `order: 2 !important;`.
+        *   The entire `header.header` element (which contains the logo and hamburger) has `position: relative; z-index: 101;` and a `background-color` (e.g., `rgb(var(--color-background))`) to ensure it stays visually above the unfolding menu panel.
+
+## Mobile Menu Panel (`#menu-drawer.menu-drawer`)
+
+*   **Appearance:** Slides down from directly beneath the header bar.
+*   **Animation:** Achieved using a `max-height` transition. The panel is `position: fixed;`.
+    *   Closed state: `max-height: 0; visibility: hidden; overflow: hidden;`.
+    *   Open state: `max-height: calc(100vh - var(--header-bottom-position)); visibility: visible;`.
+*   **Positioning:** 
+    *   `top: var(--header-bottom-position);` (Dynamically set by Dawn's JS to be the bottom edge of the visible header bar).
+    *   `height` is effectively controlled by `max-height` to fill the space below the header.
+    *   `z-index: 100;` (below the main header bar, which is `z-index: 101`).
+*   **Styling:**
+    *   Background: White (uses `var(--rave-color-background-main, #FFFFFF) !important;`).
+    *   Item Separators: Each `<li>` has a `border-bottom` using `var(--rave-color-primary-text)`.
+    *   Active/Hover/Focus Item Style: Underlined text (`text-decoration: underline !important;`), transparent background.
+*   **Overlay Removal:** Dawn's default `summary::before` overlay (for side drawers) is hidden with `display: none !important;` for `.js header-drawer > details[open] > summary.header__icon--menu::before` because it conflicts with the full-screen top-slide menu.
+
+## General Header Customizations
+
+*   **Icons Hidden:** Default Shopify header icons (search, account, cart) are hidden by commenting out the `<div class="header__icons">...</div>` block in `[sections/header.liquid](mdc:sections/header.liquid)`.

.cursor/rules/project-overview.mdc

@@ -0,0 +1,28 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Project Overview
+
+**Goal:** Migrate the Readymag site `rave-yoga.com` to Shopify using the Dawn theme (v15.3.0), aiming for a pixel-perfect replication of the design. The initial focus has been on replicating the header.
+
+**Key Technologies:**
+*   Shopify Liquid for templating and logic.
+*   CSS (within the context of Dawn's SCSS structure, but primarily custom CSS additions).
+*   Custom JavaScript for any behaviors not covered by theme settings or Liquid.
+*   Shopify Theme Customizer for settings and content.
+
+**Primary Custom Files & Starting Points:**
+*   Main custom styles: `[assets/rave-custom.css](mdc:assets/rave-custom.css)`
+*   Custom JavaScript: `[assets/rave-custom.js](mdc:assets/rave-custom.js)`
+*   Custom CSS Variables: `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`
+*   Theme settings additions: `[config/settings_schema.json](mdc:config/settings_schema.json)`
+*   Main layout file: `[layout/theme.liquid](mdc:layout/theme.liquid)` (for including custom assets)
+*   Header section: `[sections/header.liquid](mdc:sections/header.liquid)` (heavily customized)
+
+**Development Approach:**
+*   Follow the "Super-Prompt 3" workflow (Technical PM/Lead Dev, sprint-based).
+*   Utilize Shopify CLI for local development (e.g., `shopify theme dev --store YOUR_STORE.myshopify.com`).
+*   Maintain a `[CUSTOMIZATIONS.md](mdc:CUSTOMIZATIONS.md)` file for logging significant changes.
+*   Prioritize theme update safety by isolating custom CSS/JS, using CSS variables, and commenting Liquid changes.

.cursor/rules/styling-conventions.mdc

@@ -0,0 +1,46 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Styling Conventions and Brand Assets
+
+This rule outlines the primary styling conventions, brand assets (colors, fonts), and CSS structure used in the Rave Yoga Shopify theme customization.
+
+## CSS Variables and Custom Properties
+
+*   **Central Definition:** Custom CSS variables for the Rave Yoga brand are centrally defined in `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`.
+*   **Source of Values:** These variables often pull their values from theme settings configured in the Shopify Customizer, specifically under "Rave Brand Settings" (added via `[config/settings_schema.json](mdc:config/settings_schema.json)`).
+*   **Mapping to Dawn:** `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` also maps these custom Rave brand variables to Dawn's standard global CSS variables (e.g., `--color-text`, `--color-background`, `--color-button`) to ensure brand consistency throughout the theme.
+*   **Usage:** All custom CSS written in `[assets/rave-custom.css](mdc:assets/rave-custom.css)` should prioritize using these defined CSS variables (e.g., `var(--rave-color-primary-text)`) rather than hardcoding hex values.
+
+## Brand Colors
+
+These are the primary brand colors, accessible via their respective CSS variables defined in `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`:
+
+*   **Primary Text:** `#3D2120` (variable: `--rave-color-primary-text`)
+*   **Main Background:** `#FFFFFF` (variable: `--rave-color-background-main`)
+*   **Secondary Text:** `#555555` (variable: `--rave-color-secondary-text`)
+*   **Accent Color:** `#412F26` (variable: `--rave-color-accent`)
+*   **Button Text:** `#FFFFFF` (variable: `--rave-color-button-text` - typically used with the accent color as button background)
+
+## Typography
+
+*   **Primary Font Stack:** "Inter" (including its fallbacks like `sans-serif`).
+*   **Theme Setting:** The "Inter" font is set globally via the Shopify Theme Customizer (Theme Settings -> Typography).
+*   **CSS Variables:** `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` captures the theme's font choices into variables like `--rave-font-stack-primary` and `--rave-font-stack-secondary`, which are then mapped to Dawn's `--font-heading-family` and `--font-body-family`.
+
+## Breakpoints and Responsive Design
+
+*   **Approach:** Mobile-first.
+*   **Key Breakpoints Used in Custom CSS:**
+    *   **Mobile:** Styles typically apply by default, or are scoped within `@media screen and (max-width: 749px) { ... }`.
+    *   **Tablet (Implied):** Styles for viewports between `750px` and `989px` are handled by styles that apply from `min-width: 750px` but are overridden by `min-width: 990px` desktop styles if necessary.
+    *   **Desktop:** Styles are typically scoped within `@media screen and (min-width: 990px) { ... }`. This is Dawn's primary desktop breakpoint.
+
+## CSS File Structure (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`)
+
+*   The file is intended to be organized with clear comments:
+    1.  Global Resets or Overrides (use sparingly).
+    2.  Rave Specific Reusable Utility Classes.
+    3.  Component/Section Specific Styles (e.g., `/* == HEADER == */`, `/* == FOOTER == */`, `/* == MOBILE MENU == */`).