@runwell/shopify-toolkit 0.16.1 → 0.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,40 @@
1
+ /* Runwell editorial block. Eyebrow + serif heading + lede + optional
2
+ 3-up card grid. Used across editorial sections (Approach, Press,
3
+ Partnerships, etc.). Tenants override colors/fonts in brand CSS. */
4
+
5
+ .runwell-editorial-section {
6
+ padding: clamp(4rem, 9vw, 7rem) 6vw;
7
+ }
8
+
9
+ .runwell-editorial-section > * {
10
+ max-width: 1400px;
11
+ }
12
+
13
+ .runwell-editorial-section__eyebrow {
14
+ font-family: var(--font-body-family, sans-serif);
15
+ font-size: var(--runwell-eyebrow-size);
16
+ font-weight: 700;
17
+ letter-spacing: 0.18em;
18
+ text-transform: uppercase;
19
+ opacity: 0.65;
20
+ margin-bottom: 0.8rem;
21
+ }
22
+
23
+ .runwell-editorial-section__heading {
24
+ font-family: var(--font-heading-family, serif);
25
+ font-style: normal;
26
+ font-weight: 400;
27
+ font-size: var(--runwell-h2-size);
28
+ line-height: 1.1;
29
+ margin: 0 0 1rem 0;
30
+ max-width: 22ch;
31
+ }
32
+
33
+ .runwell-editorial-section__lede {
34
+ font-family: var(--font-body-family, sans-serif);
35
+ font-size: calc(var(--font-body-scale) * clamp(1.7rem, 1.9vw, 2.1rem));
36
+ line-height: 1.55;
37
+ max-width: 60ch;
38
+ opacity: 0.85;
39
+ margin-bottom: 2.5rem;
40
+ }
@@ -6,6 +6,9 @@
6
6
  "files": {
7
7
  "sections": [
8
8
  "sections/runwell-editorial-block.liquid"
9
+ ],
10
+ "assets": [
11
+ "assets/runwell-editorial-block.css"
9
12
  ]
10
13
  },
11
14
  "config": {
@@ -37,4 +40,4 @@
37
40
  }
38
41
  }
39
42
  }
40
- }
43
+ }
@@ -2,6 +2,7 @@
2
2
  Runwell editorial section: eyebrow + serif italic heading + lede + body.
3
3
  Used for the homepage section flow (Approach, Press, Partnering equivalents).
4
4
  {%- endcomment -%}
5
+ {{ 'runwell-editorial-block.css' | asset_url | stylesheet_tag }}
5
6
 
6
7
  <section
7
8
  class="runwell-editorial-section"
@@ -0,0 +1,114 @@
1
+ /* Runwell exit-intent popup. Modal layout with eyebrow + h2 + lede +
2
+ email capture form. Tenants override colors via brand CSS. */
3
+
4
+ .runwell-exit {
5
+ position: fixed;
6
+ inset: 0;
7
+ z-index: 999;
8
+ display: none;
9
+ align-items: center;
10
+ justify-content: center;
11
+ padding: 1.5rem;
12
+ }
13
+
14
+ .runwell-exit.is-open {
15
+ display: flex;
16
+ }
17
+
18
+ .runwell-exit__backdrop {
19
+ position: absolute;
20
+ inset: 0;
21
+ background: rgba(0, 0, 0, 0.55);
22
+ backdrop-filter: blur(4px);
23
+ }
24
+
25
+ .runwell-exit__panel {
26
+ position: relative;
27
+ background: #FFFFFF;
28
+ color: var(--runwell-primary, #1A1A1A);
29
+ max-width: 480px;
30
+ width: 100%;
31
+ padding: 3rem 2.5rem 2.5rem;
32
+ border-radius: 8px;
33
+ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
34
+ }
35
+
36
+ .runwell-exit__close {
37
+ position: absolute;
38
+ top: 0.6rem;
39
+ right: 0.9rem;
40
+ background: transparent;
41
+ border: 0;
42
+ font-size: calc(var(--font-body-scale) * 2rem);
43
+ font-weight: 300;
44
+ color: currentColor;
45
+ cursor: pointer;
46
+ line-height: 1;
47
+ }
48
+
49
+ .runwell-exit__eyebrow {
50
+ font-size: var(--runwell-eyebrow-size);
51
+ letter-spacing: 0.2em;
52
+ text-transform: uppercase;
53
+ font-weight: 700;
54
+ margin: 0 0 0.8rem 0;
55
+ opacity: 0.6;
56
+ }
57
+
58
+ .runwell-exit__heading {
59
+ font-family: var(--font-heading-family, serif);
60
+ font-style: normal;
61
+ font-weight: 400;
62
+ font-size: var(--runwell-h3-size);
63
+ line-height: 1.1;
64
+ margin: 0 0 0.8rem 0;
65
+ }
66
+
67
+ .runwell-exit__lede {
68
+ font-size: var(--runwell-body-size);
69
+ line-height: 1.55;
70
+ margin: 0 0 1.6rem 0;
71
+ opacity: 0.85;
72
+ }
73
+
74
+ .runwell-exit__form {
75
+ display: flex;
76
+ gap: 0.5rem;
77
+ flex-wrap: wrap;
78
+ }
79
+
80
+ .runwell-exit__form input[type="email"] {
81
+ flex: 1;
82
+ min-width: 200px;
83
+ padding: 0.85rem 1rem;
84
+ border: 1px solid rgba(0, 0, 0, 0.25);
85
+ border-radius: 4px;
86
+ font-size: var(--runwell-body-size);
87
+ background: #FFFFFF;
88
+ }
89
+
90
+ .runwell-exit__cta {
91
+ background: var(--runwell-primary, #1A1A1A);
92
+ color: #FFFFFF;
93
+ border: 0;
94
+ padding: 0.85rem 1.4rem;
95
+ font-weight: 700;
96
+ font-size: var(--runwell-body-size);
97
+ border-radius: 4px;
98
+ cursor: pointer;
99
+ }
100
+
101
+ .runwell-exit__success {
102
+ margin: 0.8rem 0 0;
103
+ font-weight: 600;
104
+ }
105
+
106
+ .runwell-exit__fineprint {
107
+ font-size: var(--runwell-eyebrow-size);
108
+ margin-top: 1rem;
109
+ opacity: 0.6;
110
+ }
111
+
112
+ body.runwell-exit-open {
113
+ overflow: hidden;
114
+ }
@@ -8,7 +8,8 @@
8
8
  "sections/runwell-exit-intent.liquid"
9
9
  ],
10
10
  "assets": [
11
- "assets/runwell-exit-intent.js"
11
+ "assets/runwell-exit-intent.js",
12
+ "assets/runwell-exit-intent.css"
12
13
  ]
13
14
  },
14
15
  "config": {
@@ -30,4 +31,4 @@
30
31
  }
31
32
  }
32
33
  }
33
- }
34
+ }
@@ -4,6 +4,7 @@
4
4
  (desktop) or after 30 seconds (mobile fallback). Suppresses with a
5
5
  localStorage cookie for 30 days after dismiss or sign-up.
6
6
  {%- endcomment -%}
7
+ {{ 'runwell-exit-intent.css' | asset_url | stylesheet_tag }}
7
8
 
8
9
  <div class="runwell-exit" data-runwell-exit-intent aria-hidden="true" role="dialog" aria-labelledby="runwell-exit-title">
9
10
  <div class="runwell-exit__backdrop" data-runwell-exit-close></div>
@@ -0,0 +1,83 @@
1
+ /* Runwell FAQ accordion. Editorial layout with eyebrow + h2 + accordion list.
2
+ Section colors come from Theme Editor inline style on <section>; tenants
3
+ may override colors / fonts via their brand stylesheet. */
4
+
5
+ .runwell-faq {
6
+ padding: clamp(4rem, 8vw, 6rem) 6vw;
7
+ }
8
+
9
+ .runwell-faq__inner {
10
+ max-width: 820px;
11
+ margin: 0 auto;
12
+ }
13
+
14
+ .runwell-faq__eyebrow {
15
+ font-family: var(--font-body-family, sans-serif);
16
+ font-size: var(--runwell-eyebrow-size);
17
+ letter-spacing: 0.2em;
18
+ text-transform: uppercase;
19
+ font-weight: 700;
20
+ margin: 0 0 0.8rem 0;
21
+ opacity: 0.6;
22
+ }
23
+
24
+ .runwell-faq__heading {
25
+ font-family: var(--font-heading-family, serif);
26
+ font-style: normal;
27
+ font-weight: 400;
28
+ font-size: var(--runwell-h2-size);
29
+ line-height: 1.1;
30
+ margin: 0 0 2rem 0;
31
+ }
32
+
33
+ .runwell-faq__list {
34
+ display: flex;
35
+ flex-direction: column;
36
+ }
37
+
38
+ .runwell-faq__item {
39
+ border-top: 1px solid currentColor;
40
+ border-color: rgba(0, 0, 0, 0.12);
41
+ padding: 1rem 0;
42
+ }
43
+
44
+ .runwell-faq__item[open] {
45
+ padding-bottom: 1.4rem;
46
+ }
47
+
48
+ .runwell-faq__item:last-child {
49
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
50
+ }
51
+
52
+ .runwell-faq__q {
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ cursor: pointer;
57
+ list-style: none;
58
+ font-family: var(--font-heading-family, serif);
59
+ font-size: var(--runwell-h4-size);
60
+ padding: 0.7rem 0;
61
+ }
62
+
63
+ .runwell-faq__q::-webkit-details-marker {
64
+ display: none;
65
+ }
66
+
67
+ .runwell-faq__icon {
68
+ font-size: calc(var(--font-body-scale) * 1.4rem);
69
+ font-weight: 300;
70
+ transition: transform 0.2s ease;
71
+ }
72
+
73
+ .runwell-faq__item[open] .runwell-faq__icon {
74
+ transform: rotate(45deg);
75
+ }
76
+
77
+ .runwell-faq__a {
78
+ margin-top: 0.6rem;
79
+ font-size: var(--runwell-body-size);
80
+ line-height: 1.6;
81
+ max-width: 60ch;
82
+ opacity: 0.85;
83
+ }
@@ -6,6 +6,9 @@
6
6
  "files": {
7
7
  "sections": [
8
8
  "sections/runwell-faq.liquid"
9
+ ],
10
+ "assets": [
11
+ "assets/runwell-faq.css"
9
12
  ]
10
13
  },
11
14
  "config": {
@@ -32,4 +35,4 @@
32
35
  }
33
36
  }
34
37
  }
35
- }
38
+ }
@@ -3,6 +3,7 @@
3
3
  HelpCenter, etc. Uses native HTML <details> elements so it works
4
4
  without any JS.
5
5
  {%- endcomment -%}
6
+ {{ 'runwell-faq.css' | asset_url | stylesheet_tag }}
6
7
 
7
8
  <section
8
9
  class="runwell-faq"
@@ -0,0 +1,125 @@
1
+ /* Runwell how-it-works. Editorial 2-column (image + steps) on desktop,
2
+ stacks on mobile. Tenants may override colors/fonts via brand CSS. */
3
+
4
+ .runwell-how {
5
+ padding: clamp(4rem, 9vw, 7rem) 0;
6
+ }
7
+
8
+ .runwell-how__inner {
9
+ max-width: 1400px;
10
+ margin: 0 auto;
11
+ padding: 0 6vw;
12
+ display: grid;
13
+ grid-template-columns: 1fr;
14
+ gap: clamp(2rem, 5vw, 4rem);
15
+ align-items: center;
16
+ }
17
+
18
+ @media (min-width: 900px) {
19
+ .runwell-how__inner {
20
+ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
21
+ gap: clamp(3rem, 6vw, 6rem);
22
+ }
23
+ }
24
+
25
+ .runwell-how__media img {
26
+ width: 100%;
27
+ height: auto;
28
+ aspect-ratio: 4/5;
29
+ object-fit: cover;
30
+ border-radius: 8px;
31
+ display: block;
32
+ }
33
+
34
+ .runwell-how__eyebrow {
35
+ font-family: var(--font-body-family, sans-serif);
36
+ font-size: var(--runwell-eyebrow-size);
37
+ font-weight: 700;
38
+ letter-spacing: 0.2em;
39
+ text-transform: uppercase;
40
+ opacity: 0.65;
41
+ margin-bottom: 0.8rem;
42
+ }
43
+
44
+ .runwell-how__heading {
45
+ font-family: var(--font-heading-family, serif);
46
+ font-style: normal;
47
+ font-weight: 400;
48
+ font-size: var(--runwell-h2-size);
49
+ line-height: 1.05;
50
+ margin: 0 0 1rem 0;
51
+ max-width: 18ch;
52
+ }
53
+
54
+ .runwell-how__lede {
55
+ font-family: var(--font-body-family, sans-serif);
56
+ font-size: var(--runwell-lede-size);
57
+ line-height: 1.6;
58
+ max-width: 50ch;
59
+ margin: 0 0 2rem 0;
60
+ opacity: 0.85;
61
+ }
62
+
63
+ .runwell-how__steps {
64
+ display: flex;
65
+ flex-direction: column;
66
+ gap: 1.6rem;
67
+ margin: 2rem 0;
68
+ padding: 0;
69
+ list-style: none;
70
+ }
71
+
72
+ .runwell-how__step {
73
+ display: grid;
74
+ grid-template-columns: auto 1fr;
75
+ gap: 1rem;
76
+ align-items: start;
77
+ }
78
+
79
+ .runwell-how__step-number {
80
+ font-family: var(--font-heading-family, serif);
81
+ font-style: italic;
82
+ font-size: calc(var(--font-heading-scale) * 1.6rem);
83
+ line-height: 1;
84
+ opacity: 0.55;
85
+ min-width: 2.5ch;
86
+ }
87
+
88
+ .runwell-how__step-title {
89
+ font-family: var(--font-heading-family, serif);
90
+ font-weight: 400;
91
+ font-size: var(--runwell-h4-size);
92
+ line-height: 1.2;
93
+ margin: 0 0 0.4rem 0;
94
+ }
95
+
96
+ .runwell-how__step-body {
97
+ font-family: var(--font-body-family, sans-serif);
98
+ font-size: var(--runwell-body-size);
99
+ line-height: 1.55;
100
+ opacity: 0.8;
101
+ margin: 0;
102
+ }
103
+
104
+ .runwell-how__cta {
105
+ display: inline-block;
106
+ margin-top: 1.6rem;
107
+ font-family: var(--font-body-family, sans-serif);
108
+ font-weight: 700;
109
+ font-size: var(--runwell-cta-size);
110
+ letter-spacing: 0.04em;
111
+ text-decoration: underline;
112
+ text-underline-offset: 4px;
113
+ }
114
+
115
+ .runwell-how__card {
116
+ display: flex;
117
+ flex-direction: column;
118
+ }
119
+
120
+ .runwell-how__card-text {
121
+ font-family: var(--font-body-family, sans-serif);
122
+ font-size: var(--runwell-body-size);
123
+ line-height: 1.55;
124
+ opacity: 0.8;
125
+ }
@@ -6,6 +6,9 @@
6
6
  "files": {
7
7
  "sections": [
8
8
  "sections/runwell-how-it-works.liquid"
9
+ ],
10
+ "assets": [
11
+ "assets/runwell-how-it-works.css"
9
12
  ]
10
13
  },
11
14
  "config": {
@@ -54,4 +57,4 @@
54
57
  }
55
58
  }
56
59
  }
57
- }
60
+ }
@@ -4,6 +4,7 @@
4
4
  Mirrors v1 .conciergeSection / "Nationwide Access to Concierge Care"
5
5
  but pivoted to wellness curation flow.
6
6
  {%- endcomment -%}
7
+ {{ 'runwell-how-it-works.css' | asset_url | stylesheet_tag }}
7
8
 
8
9
  <section
9
10
  class="runwell-how"
@@ -0,0 +1,110 @@
1
+ /* Runwell loyalty tier card. Customer-account block: eyebrow + tier name +
2
+ perk line + progress bar to next tier + perks list. Tenants override
3
+ colors/fonts via brand CSS. */
4
+
5
+ .runwell-tier {
6
+ padding: clamp(3rem, 6vw, 5rem) 6vw;
7
+ }
8
+
9
+ .runwell-tier__inner {
10
+ max-width: 720px;
11
+ margin: 0 auto;
12
+ }
13
+
14
+ .runwell-tier__header {
15
+ margin-bottom: 2rem;
16
+ }
17
+
18
+ .runwell-tier__eyebrow {
19
+ font-family: var(--font-body-family, sans-serif);
20
+ font-size: var(--runwell-eyebrow-size);
21
+ font-weight: 700;
22
+ letter-spacing: 0.2em;
23
+ text-transform: uppercase;
24
+ opacity: 0.6;
25
+ margin: 0 0 0.6rem 0;
26
+ }
27
+
28
+ .runwell-tier__name {
29
+ font-family: var(--font-heading-family, serif);
30
+ font-style: normal;
31
+ font-weight: 400;
32
+ font-size: var(--runwell-h2-size);
33
+ line-height: 1.05;
34
+ margin: 0 0 0.6rem 0;
35
+ }
36
+
37
+ .runwell-tier__perk {
38
+ font-family: var(--font-body-family, sans-serif);
39
+ font-size: var(--runwell-body-size);
40
+ line-height: 1.55;
41
+ opacity: 0.85;
42
+ margin: 0;
43
+ }
44
+
45
+ .runwell-tier__progress {
46
+ margin: 1.6rem 0 2rem;
47
+ }
48
+
49
+ .runwell-tier__progress-label {
50
+ font-family: var(--font-body-family, sans-serif);
51
+ font-size: var(--runwell-body-size);
52
+ margin: 0 0 0.6rem 0;
53
+ opacity: 0.85;
54
+ }
55
+
56
+ .runwell-tier__progress-label strong {
57
+ font-weight: 700;
58
+ }
59
+
60
+ .runwell-tier__progress-track {
61
+ width: 100%;
62
+ height: 6px;
63
+ background: rgba(0, 0, 0, 0.08);
64
+ border-radius: 999px;
65
+ overflow: hidden;
66
+ }
67
+
68
+ .runwell-tier__progress-fill {
69
+ height: 100%;
70
+ background: currentColor;
71
+ opacity: 0.85;
72
+ transition: width 0.4s ease;
73
+ }
74
+
75
+ .runwell-tier__topped {
76
+ font-family: var(--font-heading-family, serif);
77
+ font-style: italic;
78
+ font-size: var(--runwell-lede-size);
79
+ line-height: 1.5;
80
+ margin: 1.4rem 0 2rem 0;
81
+ opacity: 0.85;
82
+ }
83
+
84
+ .runwell-tier__perks-list {
85
+ list-style: none;
86
+ padding: 0;
87
+ margin: 0;
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 0.6rem;
91
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
92
+ padding-top: 1.2rem;
93
+ }
94
+
95
+ .runwell-tier__perks-list li {
96
+ font-family: var(--font-body-family, sans-serif);
97
+ font-size: var(--runwell-body-size);
98
+ line-height: 1.5;
99
+ opacity: 0.85;
100
+ position: relative;
101
+ padding-left: 1.4rem;
102
+ }
103
+
104
+ .runwell-tier__perks-list li::before {
105
+ content: "·";
106
+ position: absolute;
107
+ left: 0.4rem;
108
+ font-weight: 700;
109
+ opacity: 0.6;
110
+ }
@@ -4,6 +4,7 @@
4
4
  Shopify Flow workflows that auto-tag customers (see admin_steps).
5
5
  Replaces Smile.io / Yotpo Loyalty / LoyaltyLion display layer.
6
6
  {%- endcomment -%}
7
+ {{ 'runwell-loyalty-tiers.css' | asset_url | stylesheet_tag }}
7
8
 
8
9
  {%- if customer != blank -%}
9
10
  {%- assign spend = customer.total_spent | divided_by: 100.0 -%}
@@ -0,0 +1,88 @@
1
+ /* Runwell recently-viewed. Eyebrow + heading + 4-up product card grid.
2
+ Cards are anchor links built by runwell-recently-viewed.js. Tenants
3
+ override colors/fonts via brand CSS. */
4
+
5
+ .runwell-rv {
6
+ padding: clamp(3rem, 7vw, 5rem) 6vw;
7
+ }
8
+
9
+ .runwell-rv__inner {
10
+ max-width: 1400px;
11
+ margin: 0 auto;
12
+ }
13
+
14
+ .runwell-rv__eyebrow {
15
+ font-family: var(--font-body-family, sans-serif);
16
+ font-size: var(--runwell-eyebrow-size);
17
+ font-weight: 700;
18
+ letter-spacing: 0.2em;
19
+ text-transform: uppercase;
20
+ opacity: 0.6;
21
+ margin: 0 0 0.6rem 0;
22
+ }
23
+
24
+ .runwell-rv__heading {
25
+ font-family: var(--font-heading-family, serif);
26
+ font-style: normal;
27
+ font-weight: 400;
28
+ font-size: var(--runwell-h2-size);
29
+ line-height: 1.1;
30
+ margin: 0 0 2rem 0;
31
+ }
32
+
33
+ .runwell-rv__grid {
34
+ display: grid;
35
+ grid-template-columns: repeat(2, minmax(0, 1fr));
36
+ gap: clamp(1rem, 2vw, 2rem);
37
+ }
38
+
39
+ @media (min-width: 750px) {
40
+ .runwell-rv__grid {
41
+ grid-template-columns: repeat(4, minmax(0, 1fr));
42
+ }
43
+ }
44
+
45
+ .runwell-rv__card {
46
+ display: block;
47
+ text-decoration: none;
48
+ color: inherit;
49
+ }
50
+
51
+ .runwell-rv__media {
52
+ aspect-ratio: 4/5;
53
+ overflow: hidden;
54
+ background: rgba(0, 0, 0, 0.04);
55
+ margin-bottom: 0.8rem;
56
+ border-radius: 4px;
57
+ }
58
+
59
+ .runwell-rv__media img {
60
+ width: 100%;
61
+ height: 100%;
62
+ object-fit: cover;
63
+ display: block;
64
+ transition: transform 0.4s ease;
65
+ }
66
+
67
+ .runwell-rv__card:hover .runwell-rv__media img {
68
+ transform: scale(1.03);
69
+ }
70
+
71
+ .runwell-rv__noimg {
72
+ width: 100%;
73
+ height: 100%;
74
+ }
75
+
76
+ .runwell-rv__title {
77
+ font-family: var(--font-heading-family, serif);
78
+ font-weight: 400;
79
+ font-size: var(--runwell-h4-size);
80
+ line-height: 1.3;
81
+ margin-bottom: 0.3rem;
82
+ }
83
+
84
+ .runwell-rv__price {
85
+ font-family: var(--font-body-family, sans-serif);
86
+ font-size: var(--runwell-body-size);
87
+ opacity: 0.85;
88
+ }
@@ -3,6 +3,7 @@
3
3
  PDP visits) and renders up to 4 cards. Native replacement for the
4
4
  recently-viewed feature in Vitals / similar apps.
5
5
  {%- endcomment -%}
6
+ {{ 'runwell-recently-viewed.css' | asset_url | stylesheet_tag }}
6
7
 
7
8
  <section
8
9
  class="runwell-rv"
@@ -0,0 +1,196 @@
1
+ /* Runwell PDP reviews. Heading + summary stars + review list + write-review
2
+ accordion form. Reads from product metafield (default ns 'runwell').
3
+ Tenants override colors/fonts via brand CSS. */
4
+
5
+ .runwell-reviews {
6
+ padding: clamp(3rem, 7vw, 5rem) 6vw;
7
+ }
8
+
9
+ .runwell-reviews__inner {
10
+ max-width: 820px;
11
+ margin: 0 auto;
12
+ }
13
+
14
+ .runwell-reviews__header {
15
+ margin-bottom: 2rem;
16
+ }
17
+
18
+ .runwell-reviews__heading {
19
+ font-family: var(--font-heading-family, serif);
20
+ font-style: normal;
21
+ font-weight: 400;
22
+ font-size: var(--runwell-h2-size);
23
+ line-height: 1.1;
24
+ margin: 0 0 0.8rem 0;
25
+ }
26
+
27
+ .runwell-reviews__summary {
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 0.8rem;
31
+ }
32
+
33
+ .runwell-reviews__stars {
34
+ font-size: calc(var(--font-body-scale) * 1.4rem);
35
+ letter-spacing: 0.05em;
36
+ color: currentColor;
37
+ }
38
+
39
+ .runwell-reviews__count {
40
+ font-family: var(--font-body-family, sans-serif);
41
+ font-size: var(--runwell-meta-size);
42
+ opacity: 0.7;
43
+ letter-spacing: 0.04em;
44
+ }
45
+
46
+ .runwell-reviews__list {
47
+ list-style: none;
48
+ padding: 0;
49
+ margin: 0;
50
+ display: flex;
51
+ flex-direction: column;
52
+ }
53
+
54
+ .runwell-reviews__item {
55
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
56
+ padding: 1.4rem 0;
57
+ }
58
+
59
+ .runwell-reviews__item:last-child {
60
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
61
+ }
62
+
63
+ .runwell-reviews__row {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 0.8rem;
67
+ margin-bottom: 0.6rem;
68
+ }
69
+
70
+ .runwell-reviews__verified {
71
+ font-family: var(--font-body-family, sans-serif);
72
+ font-size: var(--runwell-eyebrow-size);
73
+ font-weight: 700;
74
+ letter-spacing: 0.18em;
75
+ text-transform: uppercase;
76
+ opacity: 0.6;
77
+ }
78
+
79
+ .runwell-reviews__body {
80
+ font-family: var(--font-body-family, sans-serif);
81
+ font-size: var(--runwell-body-size);
82
+ line-height: 1.6;
83
+ margin: 0 0 0.6rem 0;
84
+ max-width: 60ch;
85
+ }
86
+
87
+ .runwell-reviews__meta {
88
+ font-family: var(--font-body-family, sans-serif);
89
+ font-size: var(--runwell-meta-size);
90
+ opacity: 0.7;
91
+ margin: 0;
92
+ }
93
+
94
+ .runwell-reviews__meta strong {
95
+ font-weight: 700;
96
+ }
97
+
98
+ .runwell-reviews__empty {
99
+ font-family: var(--font-body-family, sans-serif);
100
+ font-size: var(--runwell-body-size);
101
+ line-height: 1.6;
102
+ opacity: 0.85;
103
+ padding: 1rem 0;
104
+ }
105
+
106
+ .runwell-reviews__empty a {
107
+ color: inherit;
108
+ text-decoration: underline;
109
+ text-underline-offset: 4px;
110
+ }
111
+
112
+ .runwell-reviews__write {
113
+ margin-top: 2rem;
114
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
115
+ padding-top: 1.2rem;
116
+ }
117
+
118
+ .runwell-reviews__write summary {
119
+ cursor: pointer;
120
+ font-family: var(--font-body-family, sans-serif);
121
+ font-size: var(--runwell-cta-size);
122
+ font-weight: 700;
123
+ letter-spacing: 0.04em;
124
+ text-transform: uppercase;
125
+ list-style: none;
126
+ padding: 0.6rem 0;
127
+ }
128
+
129
+ .runwell-reviews__write summary::-webkit-details-marker {
130
+ display: none;
131
+ }
132
+
133
+ .runwell-reviews__form {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 0.8rem;
137
+ margin-top: 1rem;
138
+ }
139
+
140
+ .runwell-reviews__form label {
141
+ display: flex;
142
+ flex-direction: column;
143
+ gap: 0.4rem;
144
+ font-family: var(--font-body-family, sans-serif);
145
+ font-size: var(--runwell-eyebrow-size);
146
+ font-weight: 700;
147
+ letter-spacing: 0.18em;
148
+ text-transform: uppercase;
149
+ opacity: 0.7;
150
+ }
151
+
152
+ .runwell-reviews__form input,
153
+ .runwell-reviews__form select,
154
+ .runwell-reviews__form textarea {
155
+ font-family: var(--font-body-family, sans-serif);
156
+ font-size: var(--runwell-body-size);
157
+ font-weight: 400;
158
+ letter-spacing: normal;
159
+ text-transform: none;
160
+ opacity: 1;
161
+ padding: 0.85rem 1rem;
162
+ border: 1px solid rgba(0, 0, 0, 0.25);
163
+ border-radius: 4px;
164
+ background: #FFFFFF;
165
+ color: inherit;
166
+ }
167
+
168
+ .runwell-reviews__form textarea {
169
+ resize: vertical;
170
+ min-height: 6rem;
171
+ }
172
+
173
+ .runwell-reviews__form button {
174
+ align-self: flex-start;
175
+ padding: 0.85rem 1.6rem;
176
+ background: currentColor;
177
+ color: #FFFFFF;
178
+ border: 0;
179
+ border-radius: 4px;
180
+ font-family: var(--font-body-family, sans-serif);
181
+ font-size: var(--runwell-body-size);
182
+ font-weight: 700;
183
+ letter-spacing: 0.04em;
184
+ cursor: pointer;
185
+ }
186
+
187
+ .runwell-reviews__form button > * {
188
+ color: #FFFFFF;
189
+ }
190
+
191
+ .runwell-reviews__success {
192
+ margin-top: 0.6rem;
193
+ font-family: var(--font-body-family, sans-serif);
194
+ font-size: var(--runwell-body-size);
195
+ font-weight: 600;
196
+ }
@@ -6,6 +6,7 @@
6
6
  Falls back to a "no reviews yet" state with a mailto CTA pointing
7
7
  to shop.email (merchant configures in Shopify admin > settings).
8
8
  {%- endcomment -%}
9
+ {{ 'runwell-reviews.css' | asset_url | stylesheet_tag }}
9
10
 
10
11
  {%- if product != blank -%}
11
12
  {%- assign ns = section.settings.metafield_namespace | default: 'runwell' -%}
@@ -0,0 +1,157 @@
1
+ /* Runwell wishlist. Two surfaces:
2
+ 1. .runwell-wishlist-icon: heart toggle button on cards/PDP.
3
+ 2. .runwell-wishlist: dedicated /pages/wishlist grid with empty state.
4
+ Tenants override colors/fonts via brand CSS. */
5
+
6
+ /* Heart icon button (rendered into card-product / main-product) */
7
+
8
+ .runwell-wishlist-icon {
9
+ display: inline-flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ width: 36px;
13
+ height: 36px;
14
+ padding: 0;
15
+ background: rgba(255, 255, 255, 0.85);
16
+ border: 0;
17
+ border-radius: 999px;
18
+ color: currentColor;
19
+ cursor: pointer;
20
+ transition: background 0.2s ease, transform 0.2s ease;
21
+ }
22
+
23
+ .runwell-wishlist-icon:hover {
24
+ background: rgba(255, 255, 255, 1);
25
+ transform: scale(1.05);
26
+ }
27
+
28
+ .runwell-wishlist-icon.is-saved svg path {
29
+ fill: currentColor;
30
+ }
31
+
32
+ .runwell-wishlist-icon svg {
33
+ display: block;
34
+ }
35
+
36
+ /* Wishlist page */
37
+
38
+ .runwell-wishlist {
39
+ padding: clamp(3rem, 7vw, 5rem) 6vw;
40
+ }
41
+
42
+ .runwell-wishlist__inner {
43
+ max-width: 1400px;
44
+ margin: 0 auto;
45
+ }
46
+
47
+ .runwell-wishlist__heading {
48
+ font-family: var(--font-heading-family, serif);
49
+ font-style: normal;
50
+ font-weight: 400;
51
+ font-size: var(--runwell-h1-size);
52
+ line-height: 1.05;
53
+ margin: 0 0 2rem 0;
54
+ }
55
+
56
+ .runwell-wishlist__empty {
57
+ text-align: center;
58
+ padding: 3rem 0;
59
+ }
60
+
61
+ .runwell-wishlist__empty p {
62
+ font-family: var(--font-body-family, sans-serif);
63
+ font-size: var(--runwell-lede-size);
64
+ line-height: 1.55;
65
+ opacity: 0.85;
66
+ margin: 0 0 1.4rem 0;
67
+ }
68
+
69
+ .runwell-wishlist__cta {
70
+ display: inline-block;
71
+ padding: 0.85rem 1.6rem;
72
+ background: currentColor;
73
+ color: #FFFFFF;
74
+ border: 0;
75
+ border-radius: 4px;
76
+ font-family: var(--font-body-family, sans-serif);
77
+ font-size: var(--runwell-body-size);
78
+ font-weight: 700;
79
+ letter-spacing: 0.04em;
80
+ text-decoration: none;
81
+ }
82
+
83
+ .runwell-wishlist__cta > * {
84
+ color: #FFFFFF;
85
+ }
86
+
87
+ .runwell-wishlist__grid {
88
+ display: grid;
89
+ grid-template-columns: repeat(2, minmax(0, 1fr));
90
+ gap: clamp(1rem, 2vw, 2rem);
91
+ }
92
+
93
+ @media (min-width: 750px) {
94
+ .runwell-wishlist__grid {
95
+ grid-template-columns: repeat(4, minmax(0, 1fr));
96
+ }
97
+ }
98
+
99
+ .runwell-wishlist__card {
100
+ position: relative;
101
+ display: block;
102
+ text-decoration: none;
103
+ color: inherit;
104
+ }
105
+
106
+ .runwell-wishlist__media {
107
+ aspect-ratio: 4/5;
108
+ overflow: hidden;
109
+ background: rgba(0, 0, 0, 0.04);
110
+ margin-bottom: 0.8rem;
111
+ border-radius: 4px;
112
+ }
113
+
114
+ .runwell-wishlist__media img {
115
+ width: 100%;
116
+ height: 100%;
117
+ object-fit: cover;
118
+ display: block;
119
+ transition: transform 0.4s ease;
120
+ }
121
+
122
+ .runwell-wishlist__card:hover .runwell-wishlist__media img {
123
+ transform: scale(1.03);
124
+ }
125
+
126
+ .runwell-wishlist__title {
127
+ font-family: var(--font-heading-family, serif);
128
+ font-weight: 400;
129
+ font-size: var(--runwell-h4-size);
130
+ line-height: 1.3;
131
+ margin-bottom: 0.3rem;
132
+ }
133
+
134
+ .runwell-wishlist__price {
135
+ font-family: var(--font-body-family, sans-serif);
136
+ font-size: var(--runwell-body-size);
137
+ opacity: 0.85;
138
+ margin-bottom: 0.6rem;
139
+ }
140
+
141
+ .runwell-wishlist__remove {
142
+ background: transparent;
143
+ border: 0;
144
+ padding: 0;
145
+ font-family: var(--font-body-family, sans-serif);
146
+ font-size: var(--runwell-eyebrow-size);
147
+ font-weight: 700;
148
+ letter-spacing: 0.18em;
149
+ text-transform: uppercase;
150
+ opacity: 0.6;
151
+ cursor: pointer;
152
+ color: inherit;
153
+ }
154
+
155
+ .runwell-wishlist__remove:hover {
156
+ opacity: 1;
157
+ }
@@ -2,6 +2,7 @@
2
2
  Runwell wishlist page section. Drop into a Shopify Page template
3
3
  (e.g. templates/page.wishlist.json).
4
4
  {%- endcomment -%}
5
+ {{ 'runwell-wishlist.css' | asset_url | stylesheet_tag }}
5
6
 
6
7
  <section class="runwell-wishlist" data-runwell-wishlist-page>
7
8
  <div class="runwell-wishlist__inner">
@@ -2,6 +2,7 @@
2
2
  Runwell wishlist heart button. Drop into card-product or main-product.
3
3
  Caller sets handle via {% render 'runwell-wishlist-icon', handle: card_product.handle %}
4
4
  {%- endcomment -%}
5
+ {{ 'runwell-wishlist.css' | asset_url | stylesheet_tag }}
5
6
 
6
7
  <button
7
8
  type="button"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@runwell/shopify-toolkit",
3
- "version": "0.16.1",
3
+ "version": "0.17.1",
4
4
  "description": "Reusable Shopify theme modules from Runwell. Replaces typically app-driven features (reviews, wishlist, urgency, FAQ, post-purchase upsell, exit popups, free-ship progress, sticky ATC, testimonials, badges, bundles) with native Liquid + JS + CSS that ship across multiple client themes via a config-driven sync CLI.",
5
5
  "type": "module",
6
6
  "main": "lib/index.js",