From c461e636620692ad201553dfc73a756d2d8ccd56 Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Fri, 24 May 2024 22:10:31 -0400
Subject: [PATCH 1/7] First updates

---
 .../assets/block-buy-buttons.css              |  45 +++++++
 components/block-buy-buttons/main.css         |  45 -------
 .../{main.css => assets/block-image.css}      |   0
 components/block-image/block-image.liquid     |  26 ++--
 .../{main.css => assets/block-model.css}      |   0
 .../block-model/assets/model-viewer.css       |   1 +
 components/block-model/block-model.liquid     |  70 ++++++-----
 .../{main.css => assets/block-video.css}      |   0
 components/block-video/block-video.liquid     | 116 +++++++++---------
 .../{main.css => assets/media-with-text.css}  |   8 --
 .../section-media-with-text.liquid            |  49 +++++---
 styles/helpers/aspect-ratio.css               |   2 +
 12 files changed, 193 insertions(+), 169 deletions(-)
 create mode 100644 components/block-buy-buttons/assets/block-buy-buttons.css
 rename components/block-image/{main.css => assets/block-image.css} (100%)
 rename components/block-model/{main.css => assets/block-model.css} (100%)
 create mode 120000 components/block-model/assets/model-viewer.css
 rename components/block-video/{main.css => assets/block-video.css} (100%)
 rename components/section-media-with-text/{main.css => assets/media-with-text.css} (81%)

diff --git a/components/block-buy-buttons/assets/block-buy-buttons.css b/components/block-buy-buttons/assets/block-buy-buttons.css
new file mode 100644
index 0000000..0166be9
--- /dev/null
+++ b/components/block-buy-buttons/assets/block-buy-buttons.css
@@ -0,0 +1,45 @@
+@import '../../styles/layout/breakpoints.css';
+@import '../../styles/modules/button.css';
+
+.block-buy-buttons {
+  display: block;
+
+  .shopify-payment-button {
+    margin-top: var(--size-3);
+
+    @media (--medium-up) {
+      margin-top: var(--size-5);
+    }
+  }
+
+  .shopify-payment-button__button {
+    font: inherit;
+    border-radius: var(--radius-xs);
+    overflow: hidden;
+    min-height: var(--size-14);
+    border-radius: var(--radius-xs);
+    background: #141811;
+    font-size: var(--size-4);
+
+    &:hover {
+      background-color: #000;
+    }
+  }
+}
+
+.block-buy-buttons__submit {
+  background-color: transparent;
+  border-radius: var(--radius-xs);
+  border: 1px solid #141811;
+  color: #141811;
+
+  &.button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.block-buy-buttons__submit[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/components/block-buy-buttons/main.css b/components/block-buy-buttons/main.css
index 0166be9..e69de29 100644
--- a/components/block-buy-buttons/main.css
+++ b/components/block-buy-buttons/main.css
@@ -1,45 +0,0 @@
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/modules/button.css';
-
-.block-buy-buttons {
-  display: block;
-
-  .shopify-payment-button {
-    margin-top: var(--size-3);
-
-    @media (--medium-up) {
-      margin-top: var(--size-5);
-    }
-  }
-
-  .shopify-payment-button__button {
-    font: inherit;
-    border-radius: var(--radius-xs);
-    overflow: hidden;
-    min-height: var(--size-14);
-    border-radius: var(--radius-xs);
-    background: #141811;
-    font-size: var(--size-4);
-
-    &:hover {
-      background-color: #000;
-    }
-  }
-}
-
-.block-buy-buttons__submit {
-  background-color: transparent;
-  border-radius: var(--radius-xs);
-  border: 1px solid #141811;
-  color: #141811;
-
-  &.button {
-    width: 100%;
-    justify-content: center;
-  }
-}
-
-.block-buy-buttons__submit[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
diff --git a/components/block-image/main.css b/components/block-image/assets/block-image.css
similarity index 100%
rename from components/block-image/main.css
rename to components/block-image/assets/block-image.css
diff --git a/components/block-image/block-image.liquid b/components/block-image/block-image.liquid
index 3b4af14..cea77f3 100644
--- a/components/block-image/block-image.liquid
+++ b/components/block-image/block-image.liquid
@@ -23,12 +23,20 @@
   endif
 %}
 
-<div class="block-image aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
-  {%- liquid
-    if image != blank
-      echo image | image_url: width: 800 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes
-    else
-      echo 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg'
-    endif
-  -%}
-</div>
+<block-image>
+  <template shadowrootmode="open">
+    {{ 'aspect-ratio.css' | stylesheet_tag }}
+    {{ 'placeholder-svg.css' | stylesheet_tag }}
+    {{ 'block-image.css' | stylesheet_tag }}
+
+    <div class="block-image aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+      {%- liquid
+        if image != blank
+          echo image | image_url: width: 800 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes
+        else
+          echo 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg'
+        endif
+      -%}
+    </div>
+  </template>
+</block-image>
diff --git a/components/block-model/main.css b/components/block-model/assets/block-model.css
similarity index 100%
rename from components/block-model/main.css
rename to components/block-model/assets/block-model.css
diff --git a/components/block-model/assets/model-viewer.css b/components/block-model/assets/model-viewer.css
new file mode 120000
index 0000000..9df5483
--- /dev/null
+++ b/components/block-model/assets/model-viewer.css
@@ -0,0 +1 @@
+../../../styles/modules/model-viewer.css
\ No newline at end of file
diff --git a/components/block-model/block-model.liquid b/components/block-model/block-model.liquid
index 8baa35d..318b7c5 100644
--- a/components/block-model/block-model.liquid
+++ b/components/block-model/block-model.liquid
@@ -20,37 +20,45 @@
   assign hydration = hydration | default: 'on:visible'
 %}
 
-<is-land {{ hydration }}>
-  <div
-    class="aspect-ratio--{{ media_crop }}"
-    {{ block.shopify_attributes }}
-  >
-    {% if product != blank %}
-      {% if media %}
-        <link
-          rel="stylesheet"
-          href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
-          media="print"
-          onload="this.media='all'; this.onload = null"
-        >
+<block-model>
+  <template shadowrootmode="open">
+    {{ 'aspect-ratio.css' | stylesheet_tag }}
+    {{ 'placeholder-svg.css' | stylesheet_tag }}
+    {{ 'model-viewer.css' | stylesheet_tag }}
+    {{ 'block-model.css' | stylesheet_tag }}
 
-        <model-media
-          handle="{{ product.handle }}"
-          {% if autoplay %}
-            autoplay
-          {% endif %}
-        >
-          {{ media | model_viewer_tag: image_size: '2048x', reveal: 'interaction', toggleable: true }}
-        </model-media>
-      {% endif %}
-    {%- else -%}
-      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
-    {%- endif -%}
-  </div>
+    <is-land {{ hydration }}>
+      <div
+        class="aspect-ratio--{{ media_crop }}"
+        {{ block.shopify_attributes }}
+      >
+        {% if product != blank %}
+          {% if media %}
+            <link
+              rel="stylesheet"
+              href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
+              media="print"
+              onload="this.media='all'; this.onload = null"
+            >
 
-  <template data-island>
-    <script type="module">
-      import 'components/block-model'
-    </script>
+            <model-media
+              handle="{{ product.handle }}"
+              {% if autoplay %}
+                autoplay
+              {% endif %}
+            >
+              {{ media | model_viewer_tag: image_size: '2048x', reveal: 'interaction', toggleable: true }}
+            </model-media>
+          {% endif %}
+        {%- else -%}
+          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
+        {%- endif -%}
+      </div>
+      <template data-island>
+        <script type="module">
+          import 'components/block-model'
+        </script>
+      </template>
+    </is-land>
   </template>
-</is-land>
+</block-model>
diff --git a/components/block-video/main.css b/components/block-video/assets/block-video.css
similarity index 100%
rename from components/block-video/main.css
rename to components/block-video/assets/block-video.css
diff --git a/components/block-video/block-video.liquid b/components/block-video/block-video.liquid
index b5a07ae..409b4d5 100644
--- a/components/block-video/block-video.liquid
+++ b/components/block-video/block-video.liquid
@@ -31,61 +31,65 @@
   endif
 %}
 
-<is-land {{ hydration }}>
-  <div
-    class="block-video aspect-ratio--{{ media_crop }}"
-    {{ block.shopify_attributes }}
-  >
-    {%- if video != blank -%}
-      <video-media
-        {% if autoplay %}
-          autoplay
-        {% endif %}
+<block-video>
+  <template shadowrootmode="open">
+    <is-land {{ hydration }}>
+      <div
+        class="block-video aspect-ratio--{{ media_crop }}"
+        {{ block.shopify_attributes }}
       >
-        {{
-          video
-          | video_tag:
-            controls: show_controls,
-            playsinline: true,
-            muted: autoplay,
-            loop: autoplay,
-            preload: 'metadata',
-            image_size: '500x'
-        }}
-      </video-media>
-    {%- elsif external_video != blank -%}
-      <video-media
-        host="{{ external_video_host }}"
-        {% if autoplay %}
-          autoplay
-        {% endif %}
-      >
-        <template>
-          {%- if external_video_host == 'youtube' -%}
-            <iframe
-              src="https://www.youtube.com/embed/{{ external_video_id }}?playsinline=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if mute_video %}mute=1&{% endif %}{% if loop %}loop=1&{% endif %}playlist={{ external_video_id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}"
-              allow="autoplay; encrypted-media"
-              allowfullscreen="allowfullscreen"
-            ></iframe>
-          {%- elsif external_video_host == 'vimeo' -%}
-            <iframe
-              src="https://player.vimeo.com/video/{{ external_video_id }}?autopause=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if loop %}loop=1&{% endif %}{% if mute_video %}muted=1&{% endif %}transparent=0&responsive=1&portrait=0&title=0&byline=0"
-              allow="autoplay; encrypted-media;"
-              allowfullscreen="allowfullscreen"
-            ></iframe>
-          {%- endif -%}
-        </template>
-      </video-media>
-    {%- else -%}
-      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
-    {%- endif -%}
-  </div>
+        {%- if video != blank -%}
+          <video-media
+            {% if autoplay %}
+              autoplay
+            {% endif %}
+          >
+            {{
+              video
+              | video_tag:
+                controls: show_controls,
+                playsinline: true,
+                muted: autoplay,
+                loop: autoplay,
+                preload: 'metadata',
+                image_size: '500x'
+            }}
+          </video-media>
+        {%- elsif external_video != blank -%}
+          <video-media
+            host="{{ external_video_host }}"
+            {% if autoplay %}
+              autoplay
+            {% endif %}
+          >
+            <template>
+              {%- if external_video_host == 'youtube' -%}
+                <iframe
+                  src="https://www.youtube.com/embed/{{ external_video_id }}?playsinline=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if mute_video %}mute=1&{% endif %}{% if loop %}loop=1&{% endif %}playlist={{ external_video_id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}"
+                  allow="autoplay; encrypted-media"
+                  allowfullscreen="allowfullscreen"
+                ></iframe>
+              {%- elsif external_video_host == 'vimeo' -%}
+                <iframe
+                  src="https://player.vimeo.com/video/{{ external_video_id }}?autopause=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if loop %}loop=1&{% endif %}{% if mute_video %}muted=1&{% endif %}transparent=0&responsive=1&portrait=0&title=0&byline=0"
+                  allow="autoplay; encrypted-media;"
+                  allowfullscreen="allowfullscreen"
+                ></iframe>
+              {%- endif -%}
+            </template>
+          </video-media>
+        {%- else -%}
+          {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
+        {%- endif -%}
+      </div>
 
-  {% if video != blank or external_video != blank %}
-    <template data-island>
-      <script type="module">
-        import 'components/block-video'
-      </script>
-    </template>
-  {% endif %}
-</is-land>
+      {% if video != blank or external_video != blank %}
+        <template data-island>
+          <script type="module">
+            import 'components/block-video'
+          </script>
+        </template>
+      {% endif %}
+    </is-land>
+  </template>
+</block-video>
diff --git a/components/section-media-with-text/main.css b/components/section-media-with-text/assets/media-with-text.css
similarity index 81%
rename from components/section-media-with-text/main.css
rename to components/section-media-with-text/assets/media-with-text.css
index e250f67..1fc1e93 100644
--- a/components/section-media-with-text/main.css
+++ b/components/section-media-with-text/assets/media-with-text.css
@@ -1,12 +1,4 @@
-@import '../../styles/vendor/normalize.css';
 @import '../../styles/layout/breakpoints.css';
-@import '../../styles/helpers/aspect-ratio.css';
-@import '../../styles/helpers/color-schemes.css';
-@import '../../styles/helpers/placeholder-svg.css';
-@import '../../styles/helpers/position.css';
-@import '../../styles/modules/model-viewer.css';
-@import '../../styles/layout/page-width.css';
-@import '../../styles/base.css';
 
 .media-with-text {
   display: flex;
diff --git a/components/section-media-with-text/section-media-with-text.liquid b/components/section-media-with-text/section-media-with-text.liquid
index 9b90bd6..3a90e90 100644
--- a/components/section-media-with-text/section-media-with-text.liquid
+++ b/components/section-media-with-text/section-media-with-text.liquid
@@ -36,25 +36,34 @@
   assign content_position = content_position | default: section.settings.content_position | default: 'center'
   assign color_scheme = color_scheme | default: section.settings.color_scheme | default: 'scheme-1'
 %}
+<section-media-with-text>
+  <template shadowrootmode="open">
+    {{ 'normalize.css' | stylesheet_tag }}
+    {{ 'color-schemes.css' | stylesheet_tag }}
+    {{ 'position.css' | stylesheet_tag }}
+    {{ 'page-width.css' | stylesheet_tag }}
+    {{ 'media-with-text.css' | stylesheet_tag }}
 
-<section
-  class="media-with-text page-width"
-  data-media-layout="{{ layout }}"
-  data-media-width="{{ media_width }}"
-  {% unless full_width %}
-    data-page-width
-  {% endunless %}
-  data-color-scheme="{{ color_scheme }}"
->
-  <div
-    class="media-with-text__text"
-    data-text="{{ content_alignment }}"
-    data-justify="{{ content_position }}"
-  >
-    {% render 'block-rich-text' %}
-  </div>
+    <section
+      class="media-with-text page-width"
+      data-media-layout="{{ layout }}"
+      data-media-width="{{ media_width }}"
+      {% unless full_width %}
+        data-page-width
+      {% endunless %}
+      data-color-scheme="{{ color_scheme }}"
+    >
+      <div
+        class="media-with-text__text"
+        data-text="{{ content_alignment }}"
+        data-justify="{{ content_position }}"
+      >
+        {% render 'block-rich-text' %}
+      </div>
 
-  <div class="media-with-text__media">
-    {{- slot -}}
-  </div>
-</section>
+      <div class="media-with-text__media">
+        {{- slot -}}
+      </div>
+    </section>
+  </template>
+</section-media-with-text>
diff --git a/styles/helpers/aspect-ratio.css b/styles/helpers/aspect-ratio.css
index c61e3e2..f14ffc4 100644
--- a/styles/helpers/aspect-ratio.css
+++ b/styles/helpers/aspect-ratio.css
@@ -17,3 +17,5 @@
 .aspect-ratio--square {
   aspect-ratio: 1 / 1;
 }
+
+SOMETHING
\ No newline at end of file

From 240bcc3087c328b976741dc955a85177db4c5863 Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Wed, 29 May 2024 13:02:23 -0400
Subject: [PATCH 2/7] Update files with declarative shadow dom

---
 .../assets/block-buy-buttons.css              |  37 +++---
 .../block-buy-buttons.liquid                  |  60 +++++----
 components/block-buy-buttons/main.css         |   0
 .../block-cart-checkout-button.css}           |   8 +-
 .../block-cart-checkout-button.liquid         |  40 +++---
 .../{main.css => assets/block-cart-note.css}  |   2 +-
 .../block-cart-note/block-cart-note.liquid    |  19 +--
 .../block-cart-totals.css}                    |   2 +-
 .../block-cart-totals.liquid                  |  28 ++--
 components/block-image/assets/block-image.css |  10 +-
 components/block-image/block-image.liquid     |  24 ++--
 .../block-model/assets/model-viewer.css       |   1 -
 components/block-model/block-model.liquid     |  74 +++++------
 .../{main.css => assets/block-price.css}      |  17 +--
 components/block-price/block-price.liquid     | 108 ++++++++--------
 .../setup/test/block-price.spec.js            |   2 +-
 .../block-product-description.liquid          |   4 +-
 .../{main.css => assets/block-rich-text.css}  |  16 +--
 .../block-rich-text/block-rich-text.liquid    |  60 +++++----
 .../{main.css => assets/block-title.css}      |  10 +-
 components/block-title/block-title.liquid     |  43 ++++---
 .../block-variant-picker.css}                 |   2 +-
 .../block-variant-picker.liquid               |  22 ++--
 components/block-video/assets/block-video.css |   2 +-
 components/block-video/block-video.liquid     | 120 +++++++++---------
 .../{main.css => assets/cart-icon.css}        |   0
 components/cart-icon/cart-icon.liquid         |  35 +++--
 .../cart-status-notifier.css}                 |   0
 .../cart-status-notifier.liquid               |  13 +-
 .../css-variables/assets}/aspect-ratio.css    |   7 +-
 .../css-variables/assets}/base.css            |  11 ++
 .../css-variables/assets}/button.css          |   0
 .../css-variables/assets}/clearfix.css        |   0
 .../css-variables/assets}/color-schemes.css   |   0
 .../css-variables/assets}/display.css         |   0
 .../css-variables/assets}/model-viewer.css    |   0
 .../css-variables/assets}/normalize.css       |   0
 .../css-variables/assets}/page-width.css      |   4 +-
 .../css-variables/assets}/placeholder-svg.css |   0
 .../css-variables/assets}/position.css        |   0
 .../css-variables/assets}/rte.css             |   6 +-
 .../css-variables/assets}/select.css          |   0
 .../css-variables/assets}/table.css           |  12 +-
 .../css-variables/assets}/typography.css      |  12 +-
 .../css-variables/assets/visibility.css       |   1 +
 .../assets/alert.svg                          |   0
 components/{cart-icon => icon}/assets/bag.svg |   0
 .../assets/caret.svg                          |   0
 .../{cart-icon => icon}/assets/cart.svg       |   0
 components/icon/{main.css => assets/icon.css} |   0
 components/icon/icon.liquid                   |   3 +
 .../line-item-quantity.css}                   |   6 +-
 .../line-item-quantity.liquid                 |   8 +-
 .../{main.css => assets/line-item.css}        |  10 +-
 components/line-item/line-item.liquid         |  66 +++++-----
 components/price/price.liquid                 |   2 +-
 components/product-description/main.css       |   4 -
 .../product-description.liquid                |  14 +-
 .../product-media-gallery.css}                |  10 +-
 .../product-media-gallery.liquid              |  52 ++++----
 .../{main.css => assets/section-header.css}   |  12 +-
 .../section-header/section-header.liquid      |  72 ++++++-----
 .../section-main-cart.css}                    |   7 +-
 .../section-main-cart.liquid                  |  90 +++++++------
 .../section-main-product.css}                 |  16 +--
 .../section-main-product.liquid               |  34 +++--
 .../assets/media-with-text.css                |  12 +-
 .../section-media-with-text.liquid            |  10 +-
 .../{main.css => assets/variant-button.css}   |   3 -
 .../variant-button/variant-button.liquid      | 101 ++++++++-------
 components/variant-dropdown/main.css          |   1 -
 .../variant-dropdown/variant-dropdown.liquid  |  52 ++++----
 styles/{layout => }/breakpoints.css           |   0
 styles/helpers/visibility.css                 |  10 --
 74 files changed, 734 insertions(+), 673 deletions(-)
 delete mode 100644 components/block-buy-buttons/main.css
 rename components/block-cart-checkout-button/{main.css => assets/block-cart-checkout-button.css} (68%)
 rename components/block-cart-note/{main.css => assets/block-cart-note.css} (92%)
 rename components/block-cart-totals/{main.css => assets/block-cart-totals.css} (86%)
 delete mode 120000 components/block-model/assets/model-viewer.css
 rename components/block-price/{main.css => assets/block-price.css} (63%)
 rename components/block-rich-text/{main.css => assets/block-rich-text.css} (60%)
 rename components/block-title/{main.css => assets/block-title.css} (59%)
 rename components/block-variant-picker/{main.css => assets/block-variant-picker.css} (63%)
 rename components/cart-icon/{main.css => assets/cart-icon.css} (100%)
 rename components/cart-status-notifier/{main.css => assets/cart-status-notifier.css} (100%)
 rename {styles/helpers => components/css-variables/assets}/aspect-ratio.css (62%)
 rename {styles => components/css-variables/assets}/base.css (56%)
 rename {styles/modules => components/css-variables/assets}/button.css (100%)
 rename {styles/helpers => components/css-variables/assets}/clearfix.css (100%)
 rename {styles/helpers => components/css-variables/assets}/color-schemes.css (100%)
 rename {styles/helpers => components/css-variables/assets}/display.css (100%)
 rename {styles/modules => components/css-variables/assets}/model-viewer.css (100%)
 rename {styles/vendor => components/css-variables/assets}/normalize.css (100%)
 rename {styles/layout => components/css-variables/assets}/page-width.css (83%)
 rename {styles/helpers => components/css-variables/assets}/placeholder-svg.css (100%)
 rename {styles/helpers => components/css-variables/assets}/position.css (100%)
 rename {styles/modules => components/css-variables/assets}/rte.css (92%)
 rename {styles/modules => components/css-variables/assets}/select.css (100%)
 rename {styles/modules => components/css-variables/assets}/table.css (76%)
 rename {styles/helpers => components/css-variables/assets}/typography.css (89%)
 create mode 100644 components/css-variables/assets/visibility.css
 rename components/{cart-status-notifier => icon}/assets/alert.svg (100%)
 rename components/{cart-icon => icon}/assets/bag.svg (100%)
 rename components/{variant-dropdown => icon}/assets/caret.svg (100%)
 rename components/{cart-icon => icon}/assets/cart.svg (100%)
 rename components/icon/{main.css => assets/icon.css} (100%)
 rename components/line-item-quantity/{main.css => assets/line-item-quantity.css} (86%)
 rename components/line-item/{main.css => assets/line-item.css} (73%)
 delete mode 100644 components/product-description/main.css
 rename components/product-media-gallery/{main.css => assets/product-media-gallery.css} (78%)
 rename components/section-header/{main.css => assets/section-header.css} (84%)
 rename components/section-main-cart/{main.css => assets/section-main-cart.css} (65%)
 rename components/section-main-product/{main.css => assets/section-main-product.css} (66%)
 rename components/variant-button/{main.css => assets/variant-button.css} (94%)
 delete mode 100644 components/variant-dropdown/main.css
 rename styles/{layout => }/breakpoints.css (100%)
 delete mode 100644 styles/helpers/visibility.css

diff --git a/components/block-buy-buttons/assets/block-buy-buttons.css b/components/block-buy-buttons/assets/block-buy-buttons.css
index 0166be9..005e951 100644
--- a/components/block-buy-buttons/assets/block-buy-buttons.css
+++ b/components/block-buy-buttons/assets/block-buy-buttons.css
@@ -1,29 +1,26 @@
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/modules/button.css';
-
-.block-buy-buttons {
+:host {
   display: block;
+}
 
-  .shopify-payment-button {
-    margin-top: var(--size-3);
+.shopify-payment-button {
+  margin-top: var(--size-3);
 
-    @media (--medium-up) {
-      margin-top: var(--size-5);
-    }
+  @media only screen and (min-width: 769px) {
+    margin-top: var(--size-5);
   }
+}
 
-  .shopify-payment-button__button {
-    font: inherit;
-    border-radius: var(--radius-xs);
-    overflow: hidden;
-    min-height: var(--size-14);
-    border-radius: var(--radius-xs);
-    background: #141811;
-    font-size: var(--size-4);
+.shopify-payment-button__button {
+  font: inherit;
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+  min-height: var(--size-14);
+  border-radius: var(--radius-xs);
+  background: #141811;
+  font-size: var(--size-4);
 
-    &:hover {
-      background-color: #000;
-    }
+  &:hover {
+    background-color: #000;
   }
 }
 
diff --git a/components/block-buy-buttons/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index a9b7aa0..15014b3 100644
--- a/components/block-buy-buttons/block-buy-buttons.liquid
+++ b/components/block-buy-buttons/block-buy-buttons.liquid
@@ -36,46 +36,50 @@
 -%}
 
 <block-buy-buttons
-  class="block-buy-buttons"
   data-section-id="{{ section.id }}"
   {% if show_dynamic_checkout %}
     data-show-dynamic-checkout=""
   {% endif %}
   {{ block.shopify_attributes }}
 >
-  <div role="alert" hidden>
-    <span></span>
-  </div>
+  <template shadowrootmode="open">
+    {{ 'button.css' | asset_url | stylesheet_tag }}
+    {{ 'block-buy-buttons.css' | asset_url | stylesheet_tag }}
 
-  {%- form 'product', product, id: form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
-    <input
-      type="hidden"
-      name="id"
-      value="{{ product.selected_or_first_available_variant.id }}"
-      {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
-        disabled
-      {% endif %}
-    >
-    <div>
-      <button
-        id="ProductSubmitButton-{{ section.id }}"
-        type="submit"
-        name="add"
-        class="button block-buy-buttons__submit"
+    <div role="alert" hidden>
+      <span></span>
+    </div>
+
+    {%- form 'product', product, id: form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
+      <input
+        type="hidden"
+        name="id"
+        value="{{ product.selected_or_first_available_variant.id }}"
         {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
           disabled
         {% endif %}
       >
-        <span>
-          {{- button_text -}}
-        </span>
-      </button>
+      <div>
+        <button
+          id="ProductSubmitButton-{{ section.id }}"
+          type="submit"
+          name="add"
+          class="button block-buy-buttons__submit"
+          {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+            disabled
+          {% endif %}
+        >
+          <span>
+            {{- button_text -}}
+          </span>
+        </button>
 
-      {%- if show_dynamic_checkout -%}
-        {{- form | payment_button -}}
-      {%- endif -%}
-    </div>
-  {%- endform -%}
+        {%- if show_dynamic_checkout -%}
+          {{- form | payment_button -}}
+        {%- endif -%}
+      </div>
+    {%- endform -%}
+  </template>
 
   <script type="application/json">
     {
diff --git a/components/block-buy-buttons/main.css b/components/block-buy-buttons/main.css
deleted file mode 100644
index e69de29..0000000
diff --git a/components/block-cart-checkout-button/main.css b/components/block-cart-checkout-button/assets/block-cart-checkout-button.css
similarity index 68%
rename from components/block-cart-checkout-button/main.css
rename to components/block-cart-checkout-button/assets/block-cart-checkout-button.css
index 87d81d9..0e4c021 100644
--- a/components/block-cart-checkout-button/main.css
+++ b/components/block-cart-checkout-button/assets/block-cart-checkout-button.css
@@ -1,4 +1,4 @@
-.cart-checkout-button {
+:host {
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -6,16 +6,16 @@
   gap: var(--size-4);
 }
 
-.cart-checkout-button__shipping-copy {
+.shipping-copy {
   font-size: 0.75rem;
 }
 
-.cart-checkout-button button {
+.button {
   width: 100%;
   justify-content: center;
 }
 
-.cart-checkout-button__payment-types {
+.payment-types {
   display: flex;
   gap: var(--size-1);
   justify-content: center;
diff --git a/components/block-cart-checkout-button/block-cart-checkout-button.liquid b/components/block-cart-checkout-button/block-cart-checkout-button.liquid
index 1d5d8ee..9030658 100644
--- a/components/block-cart-checkout-button/block-cart-checkout-button.liquid
+++ b/components/block-cart-checkout-button/block-cart-checkout-button.liquid
@@ -13,24 +13,26 @@
   assign taxes_included = taxes_included | default: cart.taxes_included, allow_false: true
 %}
 
-<div class="cart-checkout-button" {{ block.shopify_attributes }}>
-  <div class="cart-checkout-button__shipping-copy">
-    {%- if taxes_included -%}
-      {{ 'info.shipping_at_checkout_taxes_included' | t }}
-    {%- else -%}
-      {{ 'info.shipping_at_checkout' | t }}
-    {%- endif -%}
-  </div>
+<block-cart-checkout-button {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    <div class="shipping-copy">
+      {%- if taxes_included -%}
+        {{ 'info.shipping_at_checkout_taxes_included' | t }}
+      {%- else -%}
+        {{ 'info.shipping_at_checkout' | t }}
+      {%- endif -%}
+    </div>
 
-  <button type="submit" name="checkout" class="button">
-    {{ 'actions.checkout' | t }}
-  </button>
+    <button type="submit" name="checkout" class="button">
+      {{ 'actions.checkout' | t }}
+    </button>
 
-  {%- if shop.enabled_currencies.size > 0 -%}
-    <div class="cart-checkout-button__payment-types">
-      {%- for type in shop.enabled_payment_types -%}
-        {{- type | payment_type_svg_tag -}}
-      {%- endfor -%}
-    </div>
-  {%- endif -%}
-</div>
+    {%- if shop.enabled_currencies.size > 0 -%}
+      <div class="payment-types">
+        {%- for type in shop.enabled_payment_types -%}
+          {{- type | payment_type_svg_tag -}}
+        {%- endfor -%}
+      </div>
+    {%- endif -%}
+  </template>
+</block-cart-checkout-button>
diff --git a/components/block-cart-note/main.css b/components/block-cart-note/assets/block-cart-note.css
similarity index 92%
rename from components/block-cart-note/main.css
rename to components/block-cart-note/assets/block-cart-note.css
index e6bf9f8..e0a4dd3 100644
--- a/components/block-cart-note/main.css
+++ b/components/block-cart-note/assets/block-cart-note.css
@@ -1,4 +1,4 @@
-cart-note {
+:host {
   display: block;
 }
 
diff --git a/components/block-cart-note/block-cart-note.liquid b/components/block-cart-note/block-cart-note.liquid
index 929aa68..fde7e32 100644
--- a/components/block-cart-note/block-cart-note.liquid
+++ b/components/block-cart-note/block-cart-note.liquid
@@ -15,15 +15,18 @@
 %}
 
 <is-land {{ hydration }}>
-  <cart-note {{ block.shopify_attributes }}>
-    <textarea
-      name="note"
-      class="cart-note"
-      placeholder="{{ 'actions.add_order_note' | t }}"
-      rows="5"
-    >{{- note -}}</textarea>
-  </cart-note>
+  <block-cart-note {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {{ 'block-cart-note.css' | asset_url | stylesheet_tag }}
 
+      <textarea
+        name="note"
+        class="cart-note"
+        placeholder="{{ 'actions.add_order_note' | t }}"
+        rows="5"
+      >{{- note -}}</textarea>
+    </template>
+  </block-cart-note>
   <template data-island>
     <script type="module">
       import 'components/block-cart-note'
diff --git a/components/block-cart-totals/main.css b/components/block-cart-totals/assets/block-cart-totals.css
similarity index 86%
rename from components/block-cart-totals/main.css
rename to components/block-cart-totals/assets/block-cart-totals.css
index cae7bd0..05e0f9e 100644
--- a/components/block-cart-totals/main.css
+++ b/components/block-cart-totals/assets/block-cart-totals.css
@@ -1,4 +1,4 @@
-.cart-totals {
+:host {
   display: flex;
   justify-content: space-between;
   font-size: 1.125rem;
diff --git a/components/block-cart-totals/block-cart-totals.liquid b/components/block-cart-totals/block-cart-totals.liquid
index 40e6463..29ad531 100644
--- a/components/block-cart-totals/block-cart-totals.liquid
+++ b/components/block-cart-totals/block-cart-totals.liquid
@@ -9,18 +9,20 @@
   assign hydration = hydration | default: 'on:visible'
 %}
 
-<div class="cart-totals" {{ block.shopify_attributes }}>
-  <span>{{ 'labels.total' | t }}</span>
+<is-land {{ hydration }}>
+  <block-cart-totals {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {{ 'block-cart-totals.css' | asset_url | stylesheet_tag }}
 
-  <is-land {{ hydration }}>
-    <cart-total-price class="cart-totals__price">
-      {{- cart.total_price | money -}}
-    </cart-total-price>
-
-    <template data-island>
-      <script type="module">
-        import 'components/block-cart-totals'
-      </script>
+      <span>{{ 'labels.total' | t }}</span>
+      <cart-total-price>
+        {{- cart.total_price | money -}}
+      </cart-total-price>
     </template>
-  </is-land>
-</div>
+  </block-cart-totals>
+  <template data-island>
+    <script type="module">
+      import 'components/block-cart-totals'
+    </script>
+  </template>
+</is-land>
diff --git a/components/block-image/assets/block-image.css b/components/block-image/assets/block-image.css
index 24d9061..24c20f6 100644
--- a/components/block-image/assets/block-image.css
+++ b/components/block-image/assets/block-image.css
@@ -1,15 +1,11 @@
-.block-image {
-  position: relative;
-  height: 100%;
-}
-
-.block-image {
+:host {
   display: block;
+  position: relative;
   width: 100%;
   height: 100%;
 }
 
-.block-image > * {
+:host > svg {
   display: block;
   width: 100%;
   height: 100%;
diff --git a/components/block-image/block-image.liquid b/components/block-image/block-image.liquid
index cea77f3..55a7cf2 100644
--- a/components/block-image/block-image.liquid
+++ b/components/block-image/block-image.liquid
@@ -23,20 +23,18 @@
   endif
 %}
 
-<block-image>
+<block-image class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {{ 'aspect-ratio.css' | stylesheet_tag }}
-    {{ 'placeholder-svg.css' | stylesheet_tag }}
-    {{ 'block-image.css' | stylesheet_tag }}
+    {{ 'aspect-ratio.css' | asset_url | stylesheet_tag }}
+    {{ 'placeholder-svg.css' | asset_url | stylesheet_tag }}
+    {{ 'block-image.css' | asset_url | stylesheet_tag }}
 
-    <div class="block-image aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
-      {%- liquid
-        if image != blank
-          echo image | image_url: width: 800 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes
-        else
-          echo 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg'
-        endif
-      -%}
-    </div>
+    {%- liquid
+      if image != blank
+        echo image | image_url: width: 800 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes
+      else
+        echo 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg'
+      endif
+    -%}
   </template>
 </block-image>
diff --git a/components/block-model/assets/model-viewer.css b/components/block-model/assets/model-viewer.css
deleted file mode 120000
index 9df5483..0000000
--- a/components/block-model/assets/model-viewer.css
+++ /dev/null
@@ -1 +0,0 @@
-../../../styles/modules/model-viewer.css
\ No newline at end of file
diff --git a/components/block-model/block-model.liquid b/components/block-model/block-model.liquid
index 318b7c5..d2cfaaf 100644
--- a/components/block-model/block-model.liquid
+++ b/components/block-model/block-model.liquid
@@ -20,45 +20,41 @@
   assign hydration = hydration | default: 'on:visible'
 %}
 
-<block-model>
-  <template shadowrootmode="open">
-    {{ 'aspect-ratio.css' | stylesheet_tag }}
-    {{ 'placeholder-svg.css' | stylesheet_tag }}
-    {{ 'model-viewer.css' | stylesheet_tag }}
-    {{ 'block-model.css' | stylesheet_tag }}
+<is-land {{ hydration }}>
+  <block-model class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {{ 'aspect-ratio.css' | asset_url | stylesheet_tag }}
+      {{ 'placeholder-svg.css' | asset_url | stylesheet_tag }}
+      {{ 'model-viewer.css' | asset_url | stylesheet_tag }}
+      {{ 'block-model.css' | asset_url | stylesheet_tag }}
 
-    <is-land {{ hydration }}>
-      <div
-        class="aspect-ratio--{{ media_crop }}"
-        {{ block.shopify_attributes }}
-      >
-        {% if product != blank %}
-          {% if media %}
-            <link
-              rel="stylesheet"
-              href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
-              media="print"
-              onload="this.media='all'; this.onload = null"
-            >
+      {% if product != blank %}
+        {% if media %}
+          <link
+            rel="stylesheet"
+            href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
+            media="print"
+            onload="this.media='all'; this.onload = null"
+          >
 
-            <model-media
-              handle="{{ product.handle }}"
-              {% if autoplay %}
-                autoplay
-              {% endif %}
-            >
-              {{ media | model_viewer_tag: image_size: '2048x', reveal: 'interaction', toggleable: true }}
-            </model-media>
-          {% endif %}
-        {%- else -%}
-          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
-        {%- endif -%}
-      </div>
-      <template data-island>
-        <script type="module">
-          import 'components/block-model'
-        </script>
-      </template>
-    </is-land>
+          <model-media
+            handle="{{ product.handle }}"
+            {% if autoplay %}
+              autoplay
+            {% endif %}
+          >
+            {{ media | model_viewer_tag: image_size: '2048x', reveal: 'interaction', toggleable: true }}
+          </model-media>
+        {% endif %}
+      {%- else -%}
+        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
+      {%- endif -%}
+    </template>
+  </block-model>
+
+  <template data-island>
+    <script type="module">
+      import 'components/block-model'
+    </script>
   </template>
-</block-model>
+</is-land>
diff --git a/components/block-price/main.css b/components/block-price/assets/block-price.css
similarity index 63%
rename from components/block-price/main.css
rename to components/block-price/assets/block-price.css
index 9d5a692..069b48c 100644
--- a/components/block-price/main.css
+++ b/components/block-price/assets/block-price.css
@@ -1,22 +1,19 @@
-@import '../../styles/helpers/visibility.css';
-@import '../../styles/helpers/typography.css';
-
-.block-price {
+:host {
   display: grid;
   gap: var(--size-2);
 }
 
-.block-price__label {
+label {
   font-size: var(--size-3-5);
 }
 
-.block-price__regular {
+.regular {
   [data-on-sale] & {
     display: none;
   }
 }
 
-.block-price__save {
+.save {
   display: none;
 
   [data-on-sale] & {
@@ -24,7 +21,7 @@
   }
 }
 
-.block-price__sale {
+.sale {
   display: none;
 
   [data-on-sale] & {
@@ -33,7 +30,7 @@
   }
 }
 
-.block-price__unit-price {
+.unit-price {
   display: none;
 
   [data-unit-price] & {
@@ -41,7 +38,7 @@
   }
 }
 
-.block-price__container {
+.container {
   display: flex;
   gap: var(--size-2);
   margin: 0;
diff --git a/components/block-price/block-price.liquid b/components/block-price/block-price.liquid
index 46616da..d27dfcb 100644
--- a/components/block-price/block-price.liquid
+++ b/components/block-price/block-price.liquid
@@ -32,68 +32,74 @@
   endif
 -%}
 
-<block-price class="block-price" data-section-id="{{ section.id }}" {{ block.shopify_attributes }}>
-  <span class="block-price__label">
-    {{- 'labels.price' | t -}}
-  </span>
-  <div
-    class="block-price__container heading-font-stack h4"
-    data-price-container
-    {% unless available %}
-      data-sold-out=""
-    {% endunless %}
-    {% if compare_at_price > price %}
-      data-on-sale=""
-    {% endif %}
-    {% if target.unit_price_measurement %}
-      data-unit-price=""
-    {% endif %}
-  >
-    <div class="block-price__regular">
-      <span class="visually-hidden">{{ 'labels.regular_price' | t }}</span>
-      <span>
-        {%- render 'price', price: price -%}
-      </span>
-    </div>
+<block-price data-section-id="{{ section.id }}" {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {{ 'typography.css' | asset_url | stylesheet_tag }}
+    {{ 'visibility.css' | asset_url | stylesheet_tag }}
+    {{ 'block-price.css' | asset_url | stylesheet_tag }}
 
-    <div class="block-price__sale">
-      {%- unless product.price_varies == false and product.compare_at_price_varies %}
-        <span class="visually-hidden">{{ 'labels.regular_price' | t }}</span>
+    <span class="label">
+      {{- 'labels.price' | t -}}
+    </span>
+    <div
+      class="container h4"
+      data-price-container
+      {% unless available %}
+        data-sold-out=""
+      {% endunless %}
+      {% if compare_at_price > price %}
+        data-on-sale=""
+      {% endif %}
+      {% if target.unit_price_measurement %}
+        data-unit-price=""
+      {% endif %}
+    >
+      <div class="regular">
+        <span visually-hidden>{{ 'labels.regular_price' | t }}</span>
         <span>
-          <s>
-            {%- render 'price', price: compare_at_price -%}
-          </s>
+          {%- render 'price', price: price -%}
         </span>
-      {%- endunless -%}
+      </div>
 
-      <span class="visually-hidden">{{ 'labels.sale_price' | t }}</span>
+      <div class="sale">
+        {%- unless product.price_varies == false and product.compare_at_price_varies %}
+          <span visually-hidden>{{ 'labels.regular_price' | t }}</span>
+          <span>
+            <s>
+              {%- render 'price', price: compare_at_price -%}
+            </s>
+          </span>
+        {%- endunless -%}
 
-      <span>
-        {%- render 'price', price: price -%}
-      </span>
-    </div>
+        <span visually-hidden>{{ 'labels.sale_price' | t }}</span>
 
-    <small class="block-price__unit-price">
-      <span>
         <span>
-          {%- render 'price', price: target.unit_price -%}
+          {%- render 'price', price: price -%}
         </span>
-        <span>/</span>
+      </div>
+
+      <small class="unit-price">
         <span>
-          {%- if target.unit_price_measurement.reference_value != 1 -%}
-            {{- target.unit_price_measurement.reference_value -}}
-          {%- endif -%}
-          {{ target.unit_price_measurement.reference_unit }}
+          <span>
+            {%- render 'price', price: target.unit_price -%}
+          </span>
+          <span>/</span>
+          <span>
+            {%- if target.unit_price_measurement.reference_value != 1 -%}
+              {{- target.unit_price_measurement.reference_value -}}
+            {%- endif -%}
+            {{ target.unit_price_measurement.reference_unit }}
+          </span>
         </span>
-      </span>
-    </small>
+      </small>
 
-    {%- if product_save_amount -%}
-      <span class="block-price__save">
-        {{- 'info.save_amount' | t: saved_amount: saved_amount -}}
-      </span>
-    {%- endif -%}
-  </div>
+      {%- if product_save_amount -%}
+        <span class="save">
+          {{- 'info.save_amount' | t: saved_amount: saved_amount -}}
+        </span>
+      {%- endif -%}
+    </div>
+  </template>
 </block-price>
 
 <script type="module">
diff --git a/components/block-price/setup/test/block-price.spec.js b/components/block-price/setup/test/block-price.spec.js
index 29f35ff..4920761 100644
--- a/components/block-price/setup/test/block-price.spec.js
+++ b/components/block-price/setup/test/block-price.spec.js
@@ -14,7 +14,7 @@ test('block-price', async ({ page }) => {
       `<block-price data-section-id="${sectionId}">
         <div class="block-price__container heading-font-stack h4" data-price-container>
           <span aria-hidden="true">$100<sup>00</sup></span>
-          <span class="visually-hidden">$100.00</span>
+          <span hidden>$100.00</span>
         </div>
       </block-price>`,
       'text/html'
diff --git a/components/block-product-description/block-product-description.liquid b/components/block-product-description/block-product-description.liquid
index 30af0ba..dfbd98f 100644
--- a/components/block-product-description/block-product-description.liquid
+++ b/components/block-product-description/block-product-description.liquid
@@ -13,6 +13,6 @@
   assign product = product | default: section.settings.product
 %}
 
-<div {{ block.shopify_attributes }}>
+<block-product-description {{ block.shopify_attributes }}>
   {%- render 'product-description', product: product -%}
-</div>
+</block-product-description>
diff --git a/components/block-rich-text/main.css b/components/block-rich-text/assets/block-rich-text.css
similarity index 60%
rename from components/block-rich-text/main.css
rename to components/block-rich-text/assets/block-rich-text.css
index c4a7aaa..4fda05e 100644
--- a/components/block-rich-text/main.css
+++ b/components/block-rich-text/assets/block-rich-text.css
@@ -1,32 +1,30 @@
-@import '../../styles/modules/button.css';
-
-.rich-text {
+:host {
   display: flex;
   flex-direction: column;
   row-gap: var(--size-5);
 }
 
-.rich-text > * {
+:host > * {
   margin-bottom: 0;
 }
 
-.rich-text__subheading {
+.subheading {
   font-size: var(--size-3-5);
   text-transform: uppercase;
 }
 
-.rich-text__text {
+.text {
   line-height: 1.5;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     font-size: var(--size-3-5);
   }
 }
 
-.rich-text__text p {
+.text p {
   margin-top: 0;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     font-size: var(--size-3-5);
   }
 }
diff --git a/components/block-rich-text/block-rich-text.liquid b/components/block-rich-text/block-rich-text.liquid
index 328f209..ecd42bc 100644
--- a/components/block-rich-text/block-rich-text.liquid
+++ b/components/block-rich-text/block-rich-text.liquid
@@ -22,30 +22,36 @@
   assign button_link = button_link | default: section.settings.button_link
 %}
 
-<div class="rich-text">
-  {%- if subheading != blank -%}
-    <p class="rich-text__subheading">
-      {{ subheading | escape }}
-    </p>
-  {%- endif -%}
-
-  {%- if heading != blank -%}
-    <h2 class="{{ heading_size }} rich-text__heading">
-      {{ heading }}
-    </h2>
-  {%- endif -%}
-
-  {%- if text != blank -%}
-    <div class="rte rich-text__text">
-      {{ text }}
-    </div>
-  {%- endif -%}
-
-  {%- if button_text != blank -%}
-    <div class="rich-text__button">
-      <a href="{{ button_link | default: "#" }}" class="button">
-        {{ button_text | escape }}
-      </a>
-    </div>
-  {%- endif -%}
-</div>
+<block-rich-text {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {{ 'button.css' | asset_url | stylesheet_tag }}
+    {{ 'rte.css' | asset_url | stylesheet_tag }}
+    {{ 'block-rich-text.css' | asset_url | stylesheet_tag }}
+
+    {%- if subheading != blank -%}
+      <p class="subheading">
+        {{ subheading | escape }}
+      </p>
+    {%- endif -%}
+
+    {%- if heading != blank -%}
+      <h2 class="{{ heading_size }} heading">
+        {{ heading }}
+      </h2>
+    {%- endif -%}
+
+    {%- if text != blank -%}
+      <div class="rte text">
+        {{ text }}
+      </div>
+    {%- endif -%}
+
+    {%- if button_text != blank -%}
+      <div>
+        <a href="{{ button_link | default: "#" }}" class="button">
+          {{ button_text | escape }}
+        </a>
+      </div>
+    {%- endif -%}
+  </template>
+</block-rich-text>
diff --git a/components/block-title/main.css b/components/block-title/assets/block-title.css
similarity index 59%
rename from components/block-title/main.css
rename to components/block-title/assets/block-title.css
index 6f7ce9e..1547aab 100644
--- a/components/block-title/main.css
+++ b/components/block-title/assets/block-title.css
@@ -1,18 +1,16 @@
-@import '../../styles/helpers/typography.css';
-
-.block-title__heading {
+.heading {
   &.h2 {
     margin-bottom: var(--size-2);
     font-size: var(--size-6);
 
-    @media (--medium-up) {
+    @media only screen and (min-width: 769px) {
       font-size: var(--size-8);
     }
   }
 }
 
-.block-title__sku,
-.block-title__vendor {
+.sku,
+.vendor {
   display: inline-block;
   margin-right: var(--size-5);
   font-size: var(--size-3-5);
diff --git a/components/block-title/block-title.liquid b/components/block-title/block-title.liquid
index f4ca4fa..d134317 100644
--- a/components/block-title/block-title.liquid
+++ b/components/block-title/block-title.liquid
@@ -22,24 +22,29 @@
   assign vendor_url = collection_for_vendor.url | default: vendor_url_default
 -%}
 
-<div class="block-title" data-section-id="{{ section.id }}" {{ block.shopify_attributes }}>
-  <h1 class="h2 block-title__heading">
-    {{- title -}}
-  </h1>
+<block-title {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {{ 'typography.css' | asset_url | stylesheet_tag }}
+    {{ 'block-title.css' | asset_url | stylesheet_tag }}
 
-  {%- if vendor_enable or sku_enable -%}
-    <div>
-      {%- if vendor_enable -%}
-        <a class="block-title__vendor" href="{{ vendor_url }}">
-          {{- product.vendor -}}
-        </a>
-      {%- endif -%}
+    <h1 class="h2 heading">
+      {{- title -}}
+    </h1>
 
-      {%- if sku_enable -%}
-        <div class="block-title__sku">
-          {%- render 'variant-sku' -%}
-        </div>
-      {%- endif -%}
-    </div>
-  {%- endif -%}
-</div>
+    {%- if vendor_enable or sku_enable -%}
+      <div>
+        {%- if vendor_enable -%}
+          <a class="vendor" href="{{ vendor_url }}">
+            {{- product.vendor -}}
+          </a>
+        {%- endif -%}
+
+        {%- if sku_enable -%}
+          <div class="sku">
+            {%- render 'variant-sku' -%}
+          </div>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+  </template>
+</block-title>
diff --git a/components/block-variant-picker/main.css b/components/block-variant-picker/assets/block-variant-picker.css
similarity index 63%
rename from components/block-variant-picker/main.css
rename to components/block-variant-picker/assets/block-variant-picker.css
index 6a0bc97..494bab9 100644
--- a/components/block-variant-picker/main.css
+++ b/components/block-variant-picker/assets/block-variant-picker.css
@@ -1,4 +1,4 @@
-.block-variant-picker {
+:host {
   display: grid;
   gap: var(--size-6);
 }
diff --git a/components/block-variant-picker/block-variant-picker.liquid b/components/block-variant-picker/block-variant-picker.liquid
index 0ad1235..a38d95c 100644
--- a/components/block-variant-picker/block-variant-picker.liquid
+++ b/components/block-variant-picker/block-variant-picker.liquid
@@ -23,15 +23,19 @@
     update-url="{{ update_url }}"
     {{ block.shopify_attributes }}
   >
-    {%- liquid
-      for option in product.options_with_values
-        if block.settings.picker_type == 'button'
-          render 'variant-button', option: option
-        else
-          render 'variant-dropdown', option: option
-        endif
-      endfor
-    -%}
+    <template shadowrootmode="open">
+      {{ 'block-variant-picker.css' | asset_url | stylesheet_tag }}
+
+      {%- liquid
+        for option in product.options_with_values
+          if block.settings.picker_type == 'button'
+            render 'variant-button', option: option
+          else
+            render 'variant-dropdown', option: option
+          endif
+        endfor
+      -%}
+    </template>
 
     <script type="application/json">
       {{ product.variants | json }}
diff --git a/components/block-video/assets/block-video.css b/components/block-video/assets/block-video.css
index ca20358..f848b4c 100644
--- a/components/block-video/assets/block-video.css
+++ b/components/block-video/assets/block-video.css
@@ -1,4 +1,4 @@
-.block-video {
+:host {
   position: relative;
   height: 100%;
   width: 100%;
diff --git a/components/block-video/block-video.liquid b/components/block-video/block-video.liquid
index 409b4d5..dcc58bd 100644
--- a/components/block-video/block-video.liquid
+++ b/components/block-video/block-video.liquid
@@ -31,65 +31,63 @@
   endif
 %}
 
-<block-video>
-  <template shadowrootmode="open">
-    <is-land {{ hydration }}>
-      <div
-        class="block-video aspect-ratio--{{ media_crop }}"
-        {{ block.shopify_attributes }}
-      >
-        {%- if video != blank -%}
-          <video-media
-            {% if autoplay %}
-              autoplay
-            {% endif %}
-          >
-            {{
-              video
-              | video_tag:
-                controls: show_controls,
-                playsinline: true,
-                muted: autoplay,
-                loop: autoplay,
-                preload: 'metadata',
-                image_size: '500x'
-            }}
-          </video-media>
-        {%- elsif external_video != blank -%}
-          <video-media
-            host="{{ external_video_host }}"
-            {% if autoplay %}
-              autoplay
-            {% endif %}
-          >
-            <template>
-              {%- if external_video_host == 'youtube' -%}
-                <iframe
-                  src="https://www.youtube.com/embed/{{ external_video_id }}?playsinline=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if mute_video %}mute=1&{% endif %}{% if loop %}loop=1&{% endif %}playlist={{ external_video_id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}"
-                  allow="autoplay; encrypted-media"
-                  allowfullscreen="allowfullscreen"
-                ></iframe>
-              {%- elsif external_video_host == 'vimeo' -%}
-                <iframe
-                  src="https://player.vimeo.com/video/{{ external_video_id }}?autopause=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if loop %}loop=1&{% endif %}{% if mute_video %}muted=1&{% endif %}transparent=0&responsive=1&portrait=0&title=0&byline=0"
-                  allow="autoplay; encrypted-media;"
-                  allowfullscreen="allowfullscreen"
-                ></iframe>
-              {%- endif -%}
-            </template>
-          </video-media>
-        {%- else -%}
-          {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
-        {%- endif -%}
-      </div>
+<is-land {{ hydration }}>
+  <block-video class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {{ 'aspect-ratio.css' | asset_url | stylesheet_tag }}
+      {{ 'block-video.css' | asset_url | stylesheet_tag }}
 
-      {% if video != blank or external_video != blank %}
-        <template data-island>
-          <script type="module">
-            import 'components/block-video'
-          </script>
-        </template>
-      {% endif %}
-    </is-land>
-  </template>
-</block-video>
+      {%- if video != blank -%}
+        <video-media
+          {% if autoplay %}
+            autoplay
+          {% endif %}
+        >
+          {{
+            video
+            | video_tag:
+              controls: show_controls,
+              playsinline: true,
+              muted: autoplay,
+              loop: autoplay,
+              preload: 'metadata',
+              image_size: '500x'
+          }}
+        </video-media>
+      {%- elsif external_video != blank -%}
+        <video-media
+          host="{{ external_video_host }}"
+          {% if autoplay %}
+            autoplay
+          {% endif %}
+        >
+          <template>
+            {%- if external_video_host == 'youtube' -%}
+              <iframe
+                src="https://www.youtube.com/embed/{{ external_video_id }}?playsinline=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if mute_video %}mute=1&{% endif %}{% if loop %}loop=1&{% endif %}playlist={{ external_video_id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}"
+                allow="autoplay; encrypted-media"
+                allowfullscreen="allowfullscreen"
+              ></iframe>
+            {%- elsif external_video_host == 'vimeo' -%}
+              <iframe
+                src="https://player.vimeo.com/video/{{ external_video_id }}?autopause=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if loop %}loop=1&{% endif %}{% if mute_video %}muted=1&{% endif %}transparent=0&responsive=1&portrait=0&title=0&byline=0"
+                allow="autoplay; encrypted-media;"
+                allowfullscreen="allowfullscreen"
+              ></iframe>
+            {%- endif -%}
+          </template>
+        </video-media>
+      {%- else -%}
+        {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
+      {%- endif -%}
+    </template>
+  </block-video>
+
+  {% if video != blank or external_video != blank %}
+    <template data-island>
+      <script type="module">
+        import 'components/block-video'
+      </script>
+    </template>
+  {% endif %}
+</is-land>
diff --git a/components/cart-icon/main.css b/components/cart-icon/assets/cart-icon.css
similarity index 100%
rename from components/cart-icon/main.css
rename to components/cart-icon/assets/cart-icon.css
diff --git a/components/cart-icon/cart-icon.liquid b/components/cart-icon/cart-icon.liquid
index dfe8054..198307a 100644
--- a/components/cart-icon/cart-icon.liquid
+++ b/components/cart-icon/cart-icon.liquid
@@ -17,21 +17,28 @@
 -%}
 
 <is-land on:idle>
-  <a href="{{ routes.cart_url }}" class="cart-icon">
-    {%- render 'icon', name: name -%}
+  <cart-icon>
+    <template shadowrootmode="open">
+      {{ 'base.css' | asset_url | stylesheet_tag }}
+      {{ 'cart-icon.css' | asset_url | stylesheet_tag }}
 
-    <div class="cart-count">
-      <cart-count
-        class="cart-count__text"
-        aria-hidden="true"
-        {% if cart.item_count == 0 %}
-          hidden
-        {% endif %}
-      >
-        {{- cart.item_count -}}
-      </cart-count>
-    </div>
-  </a>
+      <a href="{{ routes.cart_url }}" class="cart-icon">
+        {%- render 'icon', name: name -%}
+
+        <div class="cart-count">
+          <cart-count
+            class="cart-count__text"
+            aria-hidden="true"
+            {% if cart.item_count == 0 %}
+              hidden
+            {% endif %}
+          >
+            {{- cart.item_count -}}
+          </cart-count>
+        </div>
+      </a>
+    </template>
+  </cart-icon>
 
   <template data-island>
     <script type="module">
diff --git a/components/cart-status-notifier/main.css b/components/cart-status-notifier/assets/cart-status-notifier.css
similarity index 100%
rename from components/cart-status-notifier/main.css
rename to components/cart-status-notifier/assets/cart-status-notifier.css
diff --git a/components/cart-status-notifier/cart-status-notifier.liquid b/components/cart-status-notifier/cart-status-notifier.liquid
index 80afa0c..367548e 100644
--- a/components/cart-status-notifier/cart-status-notifier.liquid
+++ b/components/cart-status-notifier/cart-status-notifier.liquid
@@ -13,11 +13,16 @@
 -%}
 
 <is-land {{ hydration }}>
-  <cart-status-notifier class="status" hidden>
-    {%- render 'icon', name: 'alert' -%}
-    <span></span>
-  </cart-status-notifier>
+  <cart-status-notifier>
+    <template shadowrootmode="open">
+      {{ 'cart-status-notifier.css' | asset_url | stylesheet_tag }}
 
+      <cart-status-notifier class="status" hidden>
+        {%- render 'icon', name: 'alert' -%}
+        <span></span>
+      </cart-status-notifier>
+    </template>
+  </cart-status-notifier>
   <template data-island>
     <script type="module">
       import 'components/cart-status-notifier'
diff --git a/styles/helpers/aspect-ratio.css b/components/css-variables/assets/aspect-ratio.css
similarity index 62%
rename from styles/helpers/aspect-ratio.css
rename to components/css-variables/assets/aspect-ratio.css
index f14ffc4..0177603 100644
--- a/styles/helpers/aspect-ratio.css
+++ b/components/css-variables/assets/aspect-ratio.css
@@ -1,21 +1,24 @@
+:host(.aspect-ratio--4-3),
 .aspect-ratio--4-3 {
   aspect-ratio: 4 / 3;
 }
 
+:host(.aspect-ratio--16-9),
 .aspect-ratio--16-9 {
   aspect-ratio: 16 / 9;
 }
 
+:host(.aspect-ratio--portrait),
 .aspect-ratio--portrait {
   aspect-ratio: 3 / 4;
 }
 
+:host(.aspect-ratio--landscape),
 .aspect-ratio--landscape {
   aspect-ratio: 4 / 3;
 }
 
+:host(.aspect-ratio--square),
 .aspect-ratio--square {
   aspect-ratio: 1 / 1;
 }
-
-SOMETHING
\ No newline at end of file
diff --git a/styles/base.css b/components/css-variables/assets/base.css
similarity index 56%
rename from styles/base.css
rename to components/css-variables/assets/base.css
index 6c052f4..250571a 100644
--- a/styles/base.css
+++ b/components/css-variables/assets/base.css
@@ -16,3 +16,14 @@ body {
 [hidden] {
   display: none;
 }
+
+[visually-hidden] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
diff --git a/styles/modules/button.css b/components/css-variables/assets/button.css
similarity index 100%
rename from styles/modules/button.css
rename to components/css-variables/assets/button.css
diff --git a/styles/helpers/clearfix.css b/components/css-variables/assets/clearfix.css
similarity index 100%
rename from styles/helpers/clearfix.css
rename to components/css-variables/assets/clearfix.css
diff --git a/styles/helpers/color-schemes.css b/components/css-variables/assets/color-schemes.css
similarity index 100%
rename from styles/helpers/color-schemes.css
rename to components/css-variables/assets/color-schemes.css
diff --git a/styles/helpers/display.css b/components/css-variables/assets/display.css
similarity index 100%
rename from styles/helpers/display.css
rename to components/css-variables/assets/display.css
diff --git a/styles/modules/model-viewer.css b/components/css-variables/assets/model-viewer.css
similarity index 100%
rename from styles/modules/model-viewer.css
rename to components/css-variables/assets/model-viewer.css
diff --git a/styles/vendor/normalize.css b/components/css-variables/assets/normalize.css
similarity index 100%
rename from styles/vendor/normalize.css
rename to components/css-variables/assets/normalize.css
diff --git a/styles/layout/page-width.css b/components/css-variables/assets/page-width.css
similarity index 83%
rename from styles/layout/page-width.css
rename to components/css-variables/assets/page-width.css
index affb57b..d43eff2 100644
--- a/styles/layout/page-width.css
+++ b/components/css-variables/assets/page-width.css
@@ -9,7 +9,7 @@
   padding-block-start: var(--size-10);
   padding-block-end: var(--size-10);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     padding-block-start: var(--size-16);
     padding-block-end: var(--size-16);
   }
@@ -21,7 +21,7 @@
   gap: var(--size-6);
 }
 
-@media (--small) {
+@media only screen and (max-width: 768px) {
   .page-width--flush-small {
     padding: 0;
   }
diff --git a/styles/helpers/placeholder-svg.css b/components/css-variables/assets/placeholder-svg.css
similarity index 100%
rename from styles/helpers/placeholder-svg.css
rename to components/css-variables/assets/placeholder-svg.css
diff --git a/styles/helpers/position.css b/components/css-variables/assets/position.css
similarity index 100%
rename from styles/helpers/position.css
rename to components/css-variables/assets/position.css
diff --git a/styles/modules/rte.css b/components/css-variables/assets/rte.css
similarity index 92%
rename from styles/modules/rte.css
rename to components/css-variables/assets/rte.css
index df659e9..d20b51c 100644
--- a/styles/modules/rte.css
+++ b/components/css-variables/assets/rte.css
@@ -1,7 +1,7 @@
 .rte {
   margin-bottom: calc(var(--gutter) / 4);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     margin-bottom: calc(var(--gutter) / 2);
   }
 
@@ -19,7 +19,7 @@
   & table {
     margin-bottom: var(--size-3-5);
 
-    @media (--medium-up) {
+    @media only screen and (min-width: 769px) {
       margin-bottom: var(--size-6);
     }
 
@@ -93,7 +93,7 @@
 .rte--block {
   margin-bottom: var(--size-2);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     margin-bottom: var(--size-3);
   }
 }
diff --git a/styles/modules/select.css b/components/css-variables/assets/select.css
similarity index 100%
rename from styles/modules/select.css
rename to components/css-variables/assets/select.css
diff --git a/styles/modules/table.css b/components/css-variables/assets/table.css
similarity index 76%
rename from styles/modules/table.css
rename to components/css-variables/assets/table.css
index 7778c0f..0bc462e 100644
--- a/styles/modules/table.css
+++ b/components/css-variables/assets/table.css
@@ -6,7 +6,7 @@ table {
 table thead {
   display: none;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     display: table-header-group;
   }
 }
@@ -24,19 +24,19 @@ table th {
 table tbody td:last-child {
   font-size: var(--size-4);
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     display: none;
   }
 }
 
-@media (--medium-up) {
+@media only screen and (min-width: 769px) {
   table thead th:last-child,
   table tbody td:last-child {
     text-align: end;
   }
 }
 
-@media (--small) {
+@media only screen and (max-width: 768px) {
   table tbody td:nth-child(2) {
     display: none;
   }
@@ -46,7 +46,7 @@ table tr td {
   padding-block-start: var(--size-4);
   padding-block-end: var(--size-4);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     padding-inline-end: var(--size-4);
   }
 }
@@ -56,7 +56,7 @@ table tr td:last-child {
 }
 
 table td:first-child {
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     width: 60%;
   }
 }
diff --git a/styles/helpers/typography.css b/components/css-variables/assets/typography.css
similarity index 89%
rename from styles/helpers/typography.css
rename to components/css-variables/assets/typography.css
index ba1a67a..07ff1a4 100644
--- a/styles/helpers/typography.css
+++ b/components/css-variables/assets/typography.css
@@ -144,7 +144,7 @@ h6 {
   font-size: var(--size-10);
   line-height: 1.1;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     font-size: var(--size-16);
   }
 }
@@ -154,7 +154,7 @@ h6 {
   font-size: var(--size-9);
   line-height: 1.1;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     font-size: var(--size-14);
   }
 }
@@ -164,7 +164,7 @@ h6 {
   font-size: var(--size-8);
   line-height: 1.2;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     font-size: var(--size-12);
   }
 }
@@ -174,7 +174,7 @@ h6 {
   font-size: var(--size-7);
   line-height: 1.3;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     font-size: var(--size-11);
   }
 }
@@ -184,7 +184,7 @@ h6 {
   font-size: var(--size-8);
   line-height: 1.4;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     font-size: var(--size-10);
   }
 }
@@ -194,7 +194,7 @@ h6 {
   font-size: var(--size-7);
   line-height: 1.4;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     font-size: var(--size-9);
   }
 }
diff --git a/components/css-variables/assets/visibility.css b/components/css-variables/assets/visibility.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/components/css-variables/assets/visibility.css
@@ -0,0 +1 @@
+
diff --git a/components/cart-status-notifier/assets/alert.svg b/components/icon/assets/alert.svg
similarity index 100%
rename from components/cart-status-notifier/assets/alert.svg
rename to components/icon/assets/alert.svg
diff --git a/components/cart-icon/assets/bag.svg b/components/icon/assets/bag.svg
similarity index 100%
rename from components/cart-icon/assets/bag.svg
rename to components/icon/assets/bag.svg
diff --git a/components/variant-dropdown/assets/caret.svg b/components/icon/assets/caret.svg
similarity index 100%
rename from components/variant-dropdown/assets/caret.svg
rename to components/icon/assets/caret.svg
diff --git a/components/cart-icon/assets/cart.svg b/components/icon/assets/cart.svg
similarity index 100%
rename from components/cart-icon/assets/cart.svg
rename to components/icon/assets/cart.svg
diff --git a/components/icon/main.css b/components/icon/assets/icon.css
similarity index 100%
rename from components/icon/main.css
rename to components/icon/assets/icon.css
diff --git a/components/icon/icon.liquid b/components/icon/icon.liquid
index 3089168..9887845 100644
--- a/components/icon/icon.liquid
+++ b/components/icon/icon.liquid
@@ -36,6 +36,9 @@
     src="{{ url }}"
     name="{{ name }}"
   >
+    <template shadowrootmode="open">
+      {{ 'icon.css' | asset_url | stylesheet_tag }}
+    </template>
   </x-icon>
 
   <template data-island>
diff --git a/components/line-item-quantity/main.css b/components/line-item-quantity/assets/line-item-quantity.css
similarity index 86%
rename from components/line-item-quantity/main.css
rename to components/line-item-quantity/assets/line-item-quantity.css
index 9f01a29..9dfce81 100644
--- a/components/line-item-quantity/main.css
+++ b/components/line-item-quantity/assets/line-item-quantity.css
@@ -1,7 +1,7 @@
 .line-item__quantity {
   margin-top: var(--size-5);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     display: none;
   }
 }
@@ -12,7 +12,7 @@
   gap: var(--size-2);
   width: 0;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     .line-item__quantity & {
       display: flex;
       gap: var(--size-3);
@@ -33,7 +33,7 @@
   border-width: 1px;
   outline: none;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     .line-item__quantity & {
       width: var(--size-10);
       padding-block-start: var(--size-1);
diff --git a/components/line-item-quantity/line-item-quantity.liquid b/components/line-item-quantity/line-item-quantity.liquid
index 63195af..8c34cd2 100644
--- a/components/line-item-quantity/line-item-quantity.liquid
+++ b/components/line-item-quantity/line-item-quantity.liquid
@@ -17,8 +17,12 @@
 
 <is-land {{ hydration }}>
   <line-item-quantity class="line-item-quantity" index="{{ line_item.index | plus: 1 }}" section-id="{{ section.id }}">
-    <input type="text" inputmode="numeric" value="{{ line_item.quantity }}" min="1">
-    {{ 'actions.remove' | t | link_to: line_item.url_to_remove, class: 'line-item-quantity__remove' }}
+    <template shadowrootmode="open">
+      {{ 'line-item-quantity.css' | asset_url | stylesheet_tag }}
+
+      <input type="text" inputmode="numeric" value="{{ line_item.quantity }}" min="1">
+      {{ 'actions.remove' | t | link_to: line_item.url_to_remove, class: 'line-item-quantity__remove' }}
+    </template>
   </line-item-quantity>
 
   <template data-island>
diff --git a/components/line-item/main.css b/components/line-item/assets/line-item.css
similarity index 73%
rename from components/line-item/main.css
rename to components/line-item/assets/line-item.css
index f60f4be..629d893 100644
--- a/components/line-item/main.css
+++ b/components/line-item/assets/line-item.css
@@ -1,4 +1,4 @@
-.line-item__image {
+.image {
   position: relative;
   width: 100px;
   height: auto;
@@ -9,21 +9,21 @@
   gap: var(--size-8);
   align-items: start;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     align-items: center;
   }
 }
 
-.line-item__info {
+.info {
   display: grid;
   justify-items: start;
 }
 
-.line-item__title {
+.title {
   font-size: var(--size-4);
 }
 
-.line-item__variants {
+.variants {
   margin-top: var(--size-3);
   font-size: 0.75rem;
 }
diff --git a/components/line-item/line-item.liquid b/components/line-item/line-item.liquid
index 14b4ef1..ac55760 100644
--- a/components/line-item/line-item.liquid
+++ b/components/line-item/line-item.liquid
@@ -10,38 +10,42 @@
   {%- endfor -%}
 {%- endcomment -%}
 
-<div class="line-item">
-  {%- liquid
-    assign loading = 'lazy'
-
-    if section.index == 1 and line_item.index == 0
-      assign loading = 'eager'
-    endif
-
-    if line_item.image != blank
-      echo line_item.image | image_url: width: line_item.image.width | image_tag: loading: loading, sizes: '100px', widths: '100, 200', class: 'line-item__image'
-    endif
-  -%}
-
-  <div class="line-item__info">
-    <a href="{{ line_item.url }}" class="line-item__title">
-      {{ line_item.product.title | default: line_item.title }}
-    </a>
-
-    <div class="line-item__price">
-      {%- render 'price', price: line_item.final_price -%}
-    </div>
+{%- liquid
+  assign loading = 'lazy'
+
+  if section.index == 1 and line_item.index == 0
+    assign loading = 'eager'
+  endif
+
+  if line_item.image != blank
+    echo line_item.image | image_url: width: line_item.image.width | image_tag: loading: loading, sizes: '100px', widths: '100, 200', class: 'image'
+  endif
+-%}
+
+<line-item class="line-item">
+  <template shadowrootmode="open">
+    {{ 'line-item.css' | asset_url | stylesheet_tag }}
 
-    {%- unless line_item.product.has_only_default_variant or line_item.gift_card -%}
-      <div class="line-item__variants">
-        {%- for option in line_item.options_with_values -%}
-          <div>{{ option.name }}: {{ option.value }}</div>
-        {%- endfor -%}
+    <div class="info">
+      <a href="{{ line_item.url }}" class="title">
+        {{ line_item.product.title | default: line_item.title }}
+      </a>
+
+      <div class="price">
+        {%- render 'price', price: line_item.final_price -%}
       </div>
-    {%- endunless -%}
 
-    <div class="line-item__quantity">
-      {%- render 'line-item-quantity', line_item: line_item -%}
+      {%- unless line_item.product.has_only_default_variant or line_item.gift_card -%}
+        <div class="variants">
+          {%- for option in line_item.options_with_values -%}
+            <div>{{ option.name }}: {{ option.value }}</div>
+          {%- endfor -%}
+        </div>
+      {%- endunless -%}
+
+      <div class="quantity">
+        {%- render 'line-item-quantity', line_item: line_item -%}
+      </div>
     </div>
-  </div>
-</div>
+  </template>
+</line-item>
diff --git a/components/price/price.liquid b/components/price/price.liquid
index 320767d..e92624a 100644
--- a/components/price/price.liquid
+++ b/components/price/price.liquid
@@ -24,4 +24,4 @@
 -%}
 
 <span aria-hidden="true">{{ formatted_price }}</span>
-<span class="visually-hidden">{{ price | money }}</span>
+<span hidden>{{ price | money }}</span>
diff --git a/components/product-description/main.css b/components/product-description/main.css
deleted file mode 100644
index efa3559..0000000
--- a/components/product-description/main.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/modules/rte.css';
-@import '../../styles/helpers/clearfix.css';
-@import '../../styles/helpers/typography.css';
diff --git a/components/product-description/product-description.liquid b/components/product-description/product-description.liquid
index 424bcb2..3a246a3 100644
--- a/components/product-description/product-description.liquid
+++ b/components/product-description/product-description.liquid
@@ -16,6 +16,14 @@
   endunless
 -%}
 
-<div class="rte clearfix">
-  {{- description -}}
-</div>
+<product-description>
+  <template shadowrootmode="open">
+    {{ 'rte.css' | asset_url | stylesheet_tag }}
+    {{ 'clearfix.css' | asset_url | stylesheet_tag }}
+    {{ 'typography.css' | asset_url | stylesheet_tag }}
+
+    <div class="rte clearfix">
+      {{- description -}}
+    </div>
+  </template>
+</product-description>
diff --git a/components/product-media-gallery/main.css b/components/product-media-gallery/assets/product-media-gallery.css
similarity index 78%
rename from components/product-media-gallery/main.css
rename to components/product-media-gallery/assets/product-media-gallery.css
index 75e0ecb..fa042cf 100644
--- a/components/product-media-gallery/main.css
+++ b/components/product-media-gallery/assets/product-media-gallery.css
@@ -1,8 +1,4 @@
-@import '../../styles/vendor/normalize.css';
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/base.css';
-
-.product-media-gallery {
+:host {
   display: grid;
   grid-auto-flow: column;
   gap: var(--size-4);
@@ -16,7 +12,7 @@
   scroll-padding-right: var(--page-width-padding);
   scroll-behavior: smooth;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     grid-auto-flow: row;
     padding-left: 0;
     padding-right: 0;
@@ -29,7 +25,7 @@
   scroll-snap-align: center;
   overflow: clip;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     width: 100%;
   }
 }
diff --git a/components/product-media-gallery/product-media-gallery.liquid b/components/product-media-gallery/product-media-gallery.liquid
index 53e9675..f75ae24 100644
--- a/components/product-media-gallery/product-media-gallery.liquid
+++ b/components/product-media-gallery/product-media-gallery.liquid
@@ -14,30 +14,36 @@
 -%}
 
 <product-media-gallery class="product-media-gallery">
-  {%- for media in product.media -%}
-    <div class="product-media-gallery__item" data-section-id="{{ section.id}}" data-media-id="{{ media.id }}">
-      <div class="media">
-        {%- liquid
-          assign preload = false
-
-          if default_media == media
-            assign preload = true
-          endif
-
-          case media.media_type
-            when 'image'
-              render 'block-image', image: media, preload: preload, sizes: sizes
-            when 'video'
-              render 'block-video', video: media, autoplay: true
-            when 'external_video'
-              render 'block-video', external_video: media, autoplay: true
-            when 'model'
-              render 'block-model', model: media, autoplay: true
-          endcase
-        -%}
+  <template shadowrootmode="open">
+    {{ 'base.css' | asset_url | stylesheet_tag }}
+    {{ 'normalize.css' | asset_url | stylesheet_tag }}
+    {{ 'product-media-gallery.css' | asset_url | stylesheet_tag }}
+
+    {%- for media in product.media -%}
+      <div class="product-media-gallery__item" data-section-id="{{ section.id}}" data-media-id="{{ media.id }}">
+        <div class="media">
+          {%- liquid
+            assign preload = false
+
+            if default_media == media
+              assign preload = true
+            endif
+
+            case media.media_type
+              when 'image'
+                render 'block-image', image: media, preload: preload, sizes: sizes
+              when 'video'
+                render 'block-video', video: media, autoplay: true
+              when 'external_video'
+                render 'block-video', external_video: media, autoplay: true
+              when 'model'
+                render 'block-model', model: media, autoplay: true
+            endcase
+          -%}
+        </div>
       </div>
-    </div>
-  {%- endfor -%}
+    {%- endfor -%}
+  </template>
 </product-media-gallery>
 
 <script type="module">
diff --git a/components/section-header/main.css b/components/section-header/assets/section-header.css
similarity index 84%
rename from components/section-header/main.css
rename to components/section-header/assets/section-header.css
index 797c5cd..755d914 100644
--- a/components/section-header/main.css
+++ b/components/section-header/assets/section-header.css
@@ -1,5 +1,3 @@
-@import '../../styles/helpers/color-schemes.css';
-
 .main-header {
   display: grid;
   column-gap: var(--size-6);
@@ -7,12 +5,12 @@
   align-items: center;
   padding: var(--size-4) 0;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     grid-template-areas: 'logo icons' 'menu menu';
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     gap: var(--size-12);
     grid-template-areas: 'logo menu icons';
     grid-template-columns: auto minmax(0, 1fr) minmax(0, max-content);
@@ -20,7 +18,7 @@
 }
 
 .main-header--logo-left-menu-center {
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     grid-template-columns: minmax(0, 1fr) fit-content(50%) minmax(0, 1fr);
 
     .main-header__menu {
@@ -44,7 +42,7 @@
   display: inline-flex;
   flex-wrap: wrap;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     margin: 0 calc(-1 * var(--size-3));
   }
 }
@@ -54,7 +52,7 @@
   text-transform: uppercase;
   padding: var(--size-2) var(--size-3);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     padding: var(--size-4) var(--size-5);
   }
 }
diff --git a/components/section-header/section-header.liquid b/components/section-header/section-header.liquid
index fdbc193..d9bfdd8 100644
--- a/components/section-header/section-header.liquid
+++ b/components/section-header/section-header.liquid
@@ -18,39 +18,45 @@
   assign main_menu = linklists[menu_link_list]
 -%}
 
-<div data-color-scheme="{{ color_scheme }}">
-  <div class="page-width">
-    <header class="main-header main-header--{{ menu_position | replace: '_', '-' }}">
-      {%- if request.page_type == 'index' -%}
-        <h1 class="main-header__logo">
-          <a href="{{ routes.root_url }}">
-            {{ shop.name }}
-          </a>
-        </h1>
-      {%- else -%}
-        <a href="{{ routes.root_url }}" class="main-header__logo">
-          {{ shop.name }}
-        </a>
-      {%- endif -%}
-
-      <div class="main-header__menu">
-        {%- for link in main_menu.links -%}
-          <a
-            href="{{ link.url }}"
-            class="main-header__menu-link {% if link.active %}main-header__menu-link--active{% endif %}"
-          >
-            {{ link.title }}
-          </a>
-        {%- endfor -%}
-      </div>
+<section-header data-color-scheme="{{ color_scheme }}">
+  <template shadowrootmode="open">
+    {{ 'color-schemes.css' | asset_url | stylesheet_tag }}
+    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {{ 'section-header.css' | asset_url | stylesheet_tag }}
 
-      <div class="main-header__icons">
-        {%- if slot_icons != blank -%}
-          {{ slot_icons }}
+    <div class="page-width">
+      <header class="main-header main-header--{{ menu_position | replace: '_', '-' }}">
+        {%- if request.page_type == 'index' -%}
+          <h1 class="main-header__logo">
+            <a href="{{ routes.root_url }}">
+              {{ shop.name }}
+            </a>
+          </h1>
         {%- else -%}
-          {%- render 'cart-icon' -%}
+          <a href="{{ routes.root_url }}" class="main-header__logo">
+            {{ shop.name }}
+          </a>
         {%- endif -%}
-      </div>
-    </header>
-  </div>
-</div>
+
+        <div class="main-header__menu">
+          {%- for link in main_menu.links -%}
+            <a
+              href="{{ link.url }}"
+              class="main-header__menu-link {% if link.active %}main-header__menu-link--active{% endif %}"
+            >
+              {{ link.title }}
+            </a>
+          {%- endfor -%}
+        </div>
+
+        <div class="main-header__icons">
+          {%- if slot_icons != blank -%}
+            {{ slot_icons }}
+          {%- else -%}
+            {%- render 'cart-icon' -%}
+          {%- endif -%}
+        </div>
+      </header>
+    </div>
+  </template>
+</section-header>
diff --git a/components/section-main-cart/main.css b/components/section-main-cart/assets/section-main-cart.css
similarity index 65%
rename from components/section-main-cart/main.css
rename to components/section-main-cart/assets/section-main-cart.css
index a3cd15d..4f41ea6 100644
--- a/components/section-main-cart/main.css
+++ b/components/section-main-cart/assets/section-main-cart.css
@@ -1,7 +1,4 @@
-@import '../../styles/vendor/normalize.css';
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/layout/page-width.css';
-@import '../../styles/modules/table.css';
+
 
 .main-cart {
   display: grid;
@@ -9,7 +6,7 @@
   font-size: 0.875rem;
   padding-block-end: var(--size-16);
 
-  @media (--large-up) {
+  @media only screen and (min-width: 1024px); {
     gap: var(--size-10);
     grid-template-columns: 62.5% 1fr;
     align-items: start;
diff --git a/components/section-main-cart/section-main-cart.liquid b/components/section-main-cart/section-main-cart.liquid
index 14d1750..758a650 100644
--- a/components/section-main-cart/section-main-cart.liquid
+++ b/components/section-main-cart/section-main-cart.liquid
@@ -29,51 +29,61 @@
   assign color_scheme = color_scheme | default: section.settings.color_scheme | default: 'scheme-1'
 -%}
 
-<section data-color-scheme="{{ color_scheme }}">
-  <div class="page-width">
-    {%- if cart.item_count == 0 -%}
-      <div class="page-empty page-padding">
-        <h1 class="text-3xl">{{ 'labels.cart' | t }}</h1>
-        {{ 'info.cart_empty' | t }}
+<section-main-cart data-color-scheme="{{ color_scheme }}">
+  <template shadowrootmode="open">
+    {{ 'normalize.css' | asset_url | stylesheet_tag }}
+    {{ 'breakpoints.css' | asset_url | stylesheet_tag }}
+    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {{ 'button.css' | asset_url | stylesheet_tag }}
+    {{ 'typography.css' | asset_url | stylesheet_tag }}
+    {{ 'table.css' | asset_url | stylesheet_tag }}
+    {{ 'section-main-cart.css' | asset_url | stylesheet_tag }}
 
-        <a href="{{ routes.root_url }}" class="button">
-          {{ 'actions.continue_shopping' | t }}
-        </a>
-      </div>
-    {%- else -%}
-      <div class="page-padding text-center">
-        <h1 class="text-3xl">{{ 'labels.cart' | t }}</h1>
-      </div>
+    <div class="page-width">
+      {%- if cart.item_count == 0 -%}
+        <div class="page-empty page-padding">
+          <h1 class="text-3xl">{{ 'labels.cart' | t }}</h1>
+          {{ 'info.cart_empty' | t }}
 
-      <div class="main-cart">
-        <table>
-          <thead>
-            <tr>
-              <th>{{ 'labels.product' | t }}</th>
-              <th>{{ 'labels.quantity' | t }}</th>
-              <th>{{ 'labels.total' | t }}</th>
-            </tr>
-          </thead>
+          <a href="{{ routes.root_url }}" class="button">
+            {{ 'actions.continue_shopping' | t }}
+          </a>
+        </div>
+      {%- else -%}
+        <div class="page-padding text-center">
+          <h1 class="text-3xl">{{ 'labels.cart' | t }}</h1>
+        </div>
 
-          <tbody>
-            {%- for line_item in cart.items -%}
+        <div class="main-cart">
+          <table>
+            <thead>
               <tr>
-                <td>{%- render 'line-item', line_item: line_item -%}</td>
-                <td>{%- render 'line-item-quantity', line_item: line_item -%}</td>
-                <td>{%- render 'line-item-price', line_item: line_item -%}</td>
+                <th>{{ 'labels.product' | t }}</th>
+                <th>{{ 'labels.quantity' | t }}</th>
+                <th>{{ 'labels.total' | t }}</th>
               </tr>
-            {%- endfor -%}
-          </tbody>
-        </table>
+            </thead>
+
+            <tbody>
+              {%- for line_item in cart.items -%}
+                <tr>
+                  <td>{%- render 'line-item', line_item: line_item -%}</td>
+                  <td>{%- render 'line-item-quantity', line_item: line_item -%}</td>
+                  <td>{%- render 'line-item-price', line_item: line_item -%}</td>
+                </tr>
+              {%- endfor -%}
+            </tbody>
+          </table>
 
-        <div class="cart-blocks">
-          {%- render 'cart-status-notifier' -%}
+          <div class="cart-blocks">
+            {%- render 'cart-status-notifier' -%}
 
-          <form action="{{ routes.cart_url }}" method="POST" class="cart-blocks__form">
-            {{- slot -}}
-          </form>
+            <form action="{{ routes.cart_url }}" method="POST" class="cart-blocks__form">
+              {{- slot -}}
+            </form>
+          </div>
         </div>
-      </div>
-    {%- endif -%}
-  </div>
-</section>
+      {%- endif -%}
+    </div>
+  </template>
+</section-main-cart>
diff --git a/components/section-main-product/main.css b/components/section-main-product/assets/section-main-product.css
similarity index 66%
rename from components/section-main-product/main.css
rename to components/section-main-product/assets/section-main-product.css
index a414d58..701c6d4 100644
--- a/components/section-main-product/main.css
+++ b/components/section-main-product/assets/section-main-product.css
@@ -1,31 +1,27 @@
-@import '../../styles/vendor/normalize.css';
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/layout/page-width.css';
-
-.main-product {
+:host {
   display: grid;
   width: 100%;
   gap: var(--size-8);
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     gap: var(--size-10);
     grid-template-columns: 60% 1fr;
     padding-top: var(--size-16);
   }
 
   &[data-image-position='right'] {
-    @media (--medium-up) {
+    @media only screen and (min-width: 769px) {
       grid-template-columns: 1fr 60%;
     }
   }
 }
 
-.main-product__media-gallery {
+.media-gallery {
   display: grid;
   width: 100%;
 }
 
-.main-product__info {
+.info {
   padding: var(--size-7) var(--size-5);
   display: flex;
   flex-direction: column;
@@ -34,7 +30,7 @@
   top: 0;
   align-self: flex-start;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     padding: var(--size-12) 0 var(--size-10) 0;
     gap: var(--size-8);
   }
diff --git a/components/section-main-product/section-main-product.liquid b/components/section-main-product/section-main-product.liquid
index 9465b39..b150352 100644
--- a/components/section-main-product/section-main-product.liquid
+++ b/components/section-main-product/section-main-product.liquid
@@ -29,23 +29,29 @@
   assign color_scheme = color_scheme | default: section.settings.color_scheme | default: 'scheme-1'
 %}
 
-<section
-  class="main-product page-width page-width--flush-small"
+<section-main-product
+  class="page-width page-width--flush-small"
   data-color-scheme="{{ color_scheme }}"
   data-image-position="{{ image_position }}"
 >
-  <div class="main-product__media-gallery">
-    {%- if slot_product_gallery != blank -%}
-      {{ slot_product_gallery }}
-    {%- else -%}
-      {%- render 'product-media-gallery' -%}
-    {%- endif -%}
-  </div>
-
-  <div class="main-product__info">
-    {{- slot_product_blocks -}}
-  </div>
-</section>
+  <template shadowrootmode="open">
+    {{ 'normalize.css' | asset_url | stylesheet_tag }}
+    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
+
+    <div class="main-product__media-gallery">
+      {%- if slot_product_gallery != blank -%}
+        {{ slot_product_gallery }}
+      {%- else -%}
+        {%- render 'product-media-gallery' -%}
+      {%- endif -%}
+    </div>
+
+    <div class="main-product__info">
+      {{- slot_product_blocks -}}
+    </div>
+  </template>
+</section-main-product>
 
 <script type="application/ld+json">
   {{ product | structured_data }}
diff --git a/components/section-media-with-text/assets/media-with-text.css b/components/section-media-with-text/assets/media-with-text.css
index 1fc1e93..f87103e 100644
--- a/components/section-media-with-text/assets/media-with-text.css
+++ b/components/section-media-with-text/assets/media-with-text.css
@@ -1,10 +1,8 @@
-@import '../../styles/layout/breakpoints.css';
-
 .media-with-text {
   display: flex;
   flex-direction: column;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     display: grid;
     justify-content: space-between;
 
@@ -34,7 +32,7 @@
 }
 
 .media-with-text__media {
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     .media-with-text[data-media-width='33'].page-width & {
       width: 50%;
     }
@@ -50,7 +48,7 @@
   flex-direction: column;
   padding: var(--size-7-5) var(--size-5);
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     order: 1;
 
     .media-with-text:has(&[data-text='center']) {
@@ -62,7 +60,7 @@
     }
   }
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     padding: var(--size-7-5) var(--size-14);
   }
 
@@ -74,7 +72,7 @@
 .media-with-text__media {
   overflow: hidden;
 
-  @media (--small) {
+  @media only screen and (max-width: 768px) {
     .media-with-text.page-width & {
       padding-top: var(--size-5);
     }
diff --git a/components/section-media-with-text/section-media-with-text.liquid b/components/section-media-with-text/section-media-with-text.liquid
index 3a90e90..ddf5a32 100644
--- a/components/section-media-with-text/section-media-with-text.liquid
+++ b/components/section-media-with-text/section-media-with-text.liquid
@@ -38,11 +38,11 @@
 %}
 <section-media-with-text>
   <template shadowrootmode="open">
-    {{ 'normalize.css' | stylesheet_tag }}
-    {{ 'color-schemes.css' | stylesheet_tag }}
-    {{ 'position.css' | stylesheet_tag }}
-    {{ 'page-width.css' | stylesheet_tag }}
-    {{ 'media-with-text.css' | stylesheet_tag }}
+    {{ 'normalize.css' | asset_url | stylesheet_tag }}
+    {{ 'color-schemes.css' | asset_url | stylesheet_tag }}
+    {{ 'position.css' | asset_url | stylesheet_tag }}
+    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {{ 'media-with-text.css' | asset_url | stylesheet_tag }}
 
     <section
       class="media-with-text page-width"
diff --git a/components/variant-button/main.css b/components/variant-button/assets/variant-button.css
similarity index 94%
rename from components/variant-button/main.css
rename to components/variant-button/assets/variant-button.css
index 19dc73d..f7204c3 100644
--- a/components/variant-button/main.css
+++ b/components/variant-button/assets/variant-button.css
@@ -1,6 +1,3 @@
-@import '../../styles/layout/breakpoints.css';
-@import '../../styles/helpers/visibility';
-
 .variant-button {
   --label-bottom-margin: var(--size-3);
 
diff --git a/components/variant-button/variant-button.liquid b/components/variant-button/variant-button.liquid
index 10a499d..3fbcfec 100644
--- a/components/variant-button/variant-button.liquid
+++ b/components/variant-button/variant-button.liquid
@@ -21,54 +21,61 @@
   assign form_id = 'product-form-' | append: section.id
 -%}
 
-<fieldset class="variant-button">
-  <legend class="variant-button__label">
-    {{ option.name }}
-  </legend>
+<variant-button>
+  <template shadowrootmode="open">
+    {{ 'visibility.css' | asset_url | stylesheet_tag }}
+    {{ 'variant-button.css' | asset_url | stylesheet_tag }}
 
-  {%- for value in option.values -%}
-    {%- liquid
-      assign option_disabled = true
+    <fieldset class="variant-button">
+      <legend class="variant-button__label">
+        {{ option.name }}
+      </legend>
 
-      for option1_name in variants_option1_arr
-        case option.position
-          when 1
-            if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
-              assign option_disabled = false
-            endif
-          when 2
-            if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
-              assign option_disabled = false
-            endif
-          when 3
-            if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
-              assign option_disabled = false
-            endif
-        endcase
-      endfor
+      {%- for value in option.values -%}
+        {%- liquid
+          assign option_disabled = true
 
-      assign id = section.id | append: '-' | append: option.position | append: '-' | append: forloop.index0
-    -%}
+          for option1_name in variants_option1_arr
+            case option.position
+              when 1
+                if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
+                  assign option_disabled = false
+                endif
+              when 2
+                if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
+                  assign option_disabled = false
+                endif
+              when 3
+                if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
+                  assign option_disabled = false
+                endif
+            endcase
+          endfor
 
-    <input
-      class="visually-hidden"
-      type="radio"
-      form="{{ form_id }}"
-      {% if option.selected_value == value %}
-        checked="checked"
-      {% endif %}
-      {% if option_disabled %}
-        data-disabled=""
-      {% endif %}
-      value="{{ value | escape }}"
-      name="{{ option.name }}"
-      id="{{ id }}"
-    >
-    <label
-      for="{{ id }}"
-      class="variant__button-label"
-    >
-      {{- value | escape -}}
-    </label>
-  {%- endfor -%}
-</fieldset>
+          assign id = section.id | append: '-' | append: option.position | append: '-' | append: forloop.index0
+        -%}
+
+        <input
+          hidden
+          type="radio"
+          form="{{ form_id }}"
+          {% if option.selected_value == value %}
+            checked="checked"
+          {% endif %}
+          {% if option_disabled %}
+            data-disabled=""
+          {% endif %}
+          value="{{ value | escape }}"
+          name="{{ option.name }}"
+          id="{{ id }}"
+        >
+        <label
+          for="{{ id }}"
+          class="variant__button-label"
+        >
+          {{- value | escape -}}
+        </label>
+      {%- endfor -%}
+    </fieldset>
+  </template>
+</variant-button>
diff --git a/components/variant-dropdown/main.css b/components/variant-dropdown/main.css
deleted file mode 100644
index d199502..0000000
--- a/components/variant-dropdown/main.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/modules/select.css';
diff --git a/components/variant-dropdown/variant-dropdown.liquid b/components/variant-dropdown/variant-dropdown.liquid
index d010aa5..6767c0e 100644
--- a/components/variant-dropdown/variant-dropdown.liquid
+++ b/components/variant-dropdown/variant-dropdown.liquid
@@ -12,29 +12,33 @@
   {%- endfor -%}
 {%- endcomment -%}
 
-<div class="variant-dropdown">
-  <label for="Option-{{ section.id }}-{{ forloop.index0 }}">
-    {{- option.name -}}
-  </label>
+<variant-dropdown>
+  <template shadowrootmode="open">
+    {{ 'select.css' | asset_url | stylesheet_tag }}
 
-  <div class="select">
-    <select
-      id="Option-{{ section.id }}-{{ forloop.index0 }}"
-      name="options[{{ option.name | escape }}]"
-      form="{{ product_form_id }}"
-    >
-      {%- for value in option.values -%}
-        <option
-          value="{{ value | escape }}"
-          {% if option.selected_value == value %}
-            selected="selected"
-          {% endif %}
-        >
-          {{- value -}}
-        </option>
-      {%- endfor -%}
-    </select>
+    <label for="Option-{{ section.id }}-{{ forloop.index0 }}">
+      {{- option.name -}}
+    </label>
 
-    {%- render 'icon', name: 'caret' -%}
-  </div>
-</div>
+    <div class="select">
+      <select
+        id="Option-{{ section.id }}-{{ forloop.index0 }}"
+        name="options[{{ option.name | escape }}]"
+        form="{{ product_form_id }}"
+      >
+        {%- for value in option.values -%}
+          <option
+            value="{{ value | escape }}"
+            {% if option.selected_value == value %}
+              selected="selected"
+            {% endif %}
+          >
+            {{- value -}}
+          </option>
+        {%- endfor -%}
+      </select>
+
+      {%- render 'icon', name: 'caret' -%}
+    </div>
+  </template>
+</variant-dropdown>
diff --git a/styles/layout/breakpoints.css b/styles/breakpoints.css
similarity index 100%
rename from styles/layout/breakpoints.css
rename to styles/breakpoints.css
diff --git a/styles/helpers/visibility.css b/styles/helpers/visibility.css
deleted file mode 100644
index 4e926da..0000000
--- a/styles/helpers/visibility.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}

From bb0c65f52bbbe6932d9b479ecaaa0d14f1a8afcc Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Mon, 3 Jun 2024 14:15:44 -0400
Subject: [PATCH 3/7] More updates

---
 .../assets/block-buy-buttons.css              | 13 +++
 .../block-buy-buttons.liquid                  | 12 ++-
 .../block-cart-checkout-button.liquid         |  3 +
 .../block-cart-note/block-cart-note.liquid    |  1 +
 .../block-cart-totals.liquid                  |  1 +
 components/block-image/block-image.liquid     |  3 +-
 components/block-model/block-model.liquid     |  4 +-
 components/block-price/block-price.liquid     |  3 +-
 .../block-rich-text/block-rich-text.liquid    |  3 +-
 components/block-title/block-title.liquid     |  2 +-
 .../assets/block-variant-picker.css           |  4 -
 .../block-variant-picker.liquid               |  9 +-
 components/block-video/block-video.liquid     |  2 +-
 components/cart-icon/cart-icon.liquid         |  2 +-
 .../cart-status-notifier.liquid               |  1 +
 .../assets/aspect-ratio.css                   |  0
 .../assets/base.css}                          | 35 +++++++-
 components/component-styles/assets/button.css | 16 ++++
 .../assets/clearfix.css                       |  0
 .../assets/color-schemes.css                  |  0
 .../assets/display.css                        |  0
 .../assets/model-viewer.css                   |  0
 .../assets/page-width.css                     |  0
 .../assets/placeholder-svg.css                |  0
 .../assets/position.css                       |  0
 .../assets/rte.css                            |  0
 .../assets/select.css                         |  0
 .../assets/table.css                          |  0
 components/component-styles/assets/theme.css  |  5 ++
 .../assets/typography.css                     |  0
 .../component-styles/assets/variables.css     | 70 +++++++++++++++
 .../assets/visibility.css                     |  0
 .../component-styles/component-styles.liquid  | 51 +++++++++++
 components/css-variables/assets/base.css      | 29 ------
 components/css-variables/assets/button.css    | 11 ---
 components/css-variables/css-variables.liquid | 90 -------------------
 components/icon/assets/icon.css               |  3 -
 components/icon/icon.liquid                   |  5 +-
 .../line-item-quantity.liquid                 |  1 +
 components/line-item/line-item.liquid         |  1 +
 .../product-description.liquid                |  4 +-
 .../product-media-gallery.liquid              |  3 +-
 .../section-header/section-header.liquid      |  3 +-
 .../section-main-cart.liquid                  |  7 +-
 .../section-main-product.liquid               |  3 +-
 .../section-media-with-text.liquid            |  5 +-
 .../variant-button/variant-button.liquid      |  2 +-
 .../variant-dropdown/variant-dropdown.liquid  |  2 +-
 styles/breakpoints.css                        |  3 -
 49 files changed, 233 insertions(+), 179 deletions(-)
 delete mode 100644 components/block-variant-picker/assets/block-variant-picker.css
 rename components/{css-variables => component-styles}/assets/aspect-ratio.css (100%)
 rename components/{css-variables/assets/normalize.css => component-styles/assets/base.css} (55%)
 create mode 100644 components/component-styles/assets/button.css
 rename components/{css-variables => component-styles}/assets/clearfix.css (100%)
 rename components/{css-variables => component-styles}/assets/color-schemes.css (100%)
 rename components/{css-variables => component-styles}/assets/display.css (100%)
 rename components/{css-variables => component-styles}/assets/model-viewer.css (100%)
 rename components/{css-variables => component-styles}/assets/page-width.css (100%)
 rename components/{css-variables => component-styles}/assets/placeholder-svg.css (100%)
 rename components/{css-variables => component-styles}/assets/position.css (100%)
 rename components/{css-variables => component-styles}/assets/rte.css (100%)
 rename components/{css-variables => component-styles}/assets/select.css (100%)
 rename components/{css-variables => component-styles}/assets/table.css (100%)
 create mode 100644 components/component-styles/assets/theme.css
 rename components/{css-variables => component-styles}/assets/typography.css (100%)
 create mode 100644 components/component-styles/assets/variables.css
 rename components/{css-variables => component-styles}/assets/visibility.css (100%)
 create mode 100644 components/component-styles/component-styles.liquid
 delete mode 100644 components/css-variables/assets/base.css
 delete mode 100644 components/css-variables/assets/button.css
 delete mode 100644 components/css-variables/css-variables.liquid
 delete mode 100644 components/icon/assets/icon.css
 delete mode 100644 styles/breakpoints.css

diff --git a/components/block-buy-buttons/assets/block-buy-buttons.css b/components/block-buy-buttons/assets/block-buy-buttons.css
index 005e951..e311571 100644
--- a/components/block-buy-buttons/assets/block-buy-buttons.css
+++ b/components/block-buy-buttons/assets/block-buy-buttons.css
@@ -40,3 +40,16 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
+
+:host-context()
+
+:root {
+  --background-color: var(--my-custom-background);
+}
+
+
+body.dark-mode block-buy-button {
+  --background-color: var(--my-custom-background);
+}
+
+block-buy-button[section-id]
\ No newline at end of file
diff --git a/components/block-buy-buttons/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index 15014b3..da689e6 100644
--- a/components/block-buy-buttons/block-buy-buttons.liquid
+++ b/components/block-buy-buttons/block-buy-buttons.liquid
@@ -43,9 +43,19 @@
   {{ block.shopify_attributes }}
 >
   <template shadowrootmode="open">
-    {{ 'button.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles', styles: 'button' %}
     {{ 'block-buy-buttons.css' | asset_url | stylesheet_tag }}
 
+    <style>
+      :host {
+        --block-buy-button-background-color: var(
+          --block-buy-button-background-color,
+          {{block.settings.background_color}},
+          --background-color,
+        );
+      }
+    </style>
+
     <div role="alert" hidden>
       <span></span>
     </div>
diff --git a/components/block-cart-checkout-button/block-cart-checkout-button.liquid b/components/block-cart-checkout-button/block-cart-checkout-button.liquid
index 9030658..b2f7544 100644
--- a/components/block-cart-checkout-button/block-cart-checkout-button.liquid
+++ b/components/block-cart-checkout-button/block-cart-checkout-button.liquid
@@ -15,6 +15,9 @@
 
 <block-cart-checkout-button {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
+    {% render 'component-styles' %}
+    {{ 'block-cart-checkout-button' | asset_url | stylesheet_tag }}
+
     <div class="shipping-copy">
       {%- if taxes_included -%}
         {{ 'info.shipping_at_checkout_taxes_included' | t }}
diff --git a/components/block-cart-note/block-cart-note.liquid b/components/block-cart-note/block-cart-note.liquid
index fde7e32..785fe0f 100644
--- a/components/block-cart-note/block-cart-note.liquid
+++ b/components/block-cart-note/block-cart-note.liquid
@@ -17,6 +17,7 @@
 <is-land {{ hydration }}>
   <block-cart-note {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
+      {% render 'component-styles' %}
       {{ 'block-cart-note.css' | asset_url | stylesheet_tag }}
 
       <textarea
diff --git a/components/block-cart-totals/block-cart-totals.liquid b/components/block-cart-totals/block-cart-totals.liquid
index 29ad531..76cf300 100644
--- a/components/block-cart-totals/block-cart-totals.liquid
+++ b/components/block-cart-totals/block-cart-totals.liquid
@@ -12,6 +12,7 @@
 <is-land {{ hydration }}>
   <block-cart-totals {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
+      {% render 'component-styles' %}
       {{ 'block-cart-totals.css' | asset_url | stylesheet_tag }}
 
       <span>{{ 'labels.total' | t }}</span>
diff --git a/components/block-image/block-image.liquid b/components/block-image/block-image.liquid
index 55a7cf2..88a0c4d 100644
--- a/components/block-image/block-image.liquid
+++ b/components/block-image/block-image.liquid
@@ -25,8 +25,7 @@
 
 <block-image class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {{ 'aspect-ratio.css' | asset_url | stylesheet_tag }}
-    {{ 'placeholder-svg.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'block-image.css' | asset_url | stylesheet_tag }}
 
     {%- liquid
diff --git a/components/block-model/block-model.liquid b/components/block-model/block-model.liquid
index d2cfaaf..be1dda1 100644
--- a/components/block-model/block-model.liquid
+++ b/components/block-model/block-model.liquid
@@ -23,9 +23,7 @@
 <is-land {{ hydration }}>
   <block-model class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
-      {{ 'aspect-ratio.css' | asset_url | stylesheet_tag }}
-      {{ 'placeholder-svg.css' | asset_url | stylesheet_tag }}
-      {{ 'model-viewer.css' | asset_url | stylesheet_tag }}
+      {% render 'component-styles' %}
       {{ 'block-model.css' | asset_url | stylesheet_tag }}
 
       {% if product != blank %}
diff --git a/components/block-price/block-price.liquid b/components/block-price/block-price.liquid
index d27dfcb..818d5aa 100644
--- a/components/block-price/block-price.liquid
+++ b/components/block-price/block-price.liquid
@@ -34,8 +34,7 @@
 
 <block-price data-section-id="{{ section.id }}" {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {{ 'typography.css' | asset_url | stylesheet_tag }}
-    {{ 'visibility.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'block-price.css' | asset_url | stylesheet_tag }}
 
     <span class="label">
diff --git a/components/block-rich-text/block-rich-text.liquid b/components/block-rich-text/block-rich-text.liquid
index ecd42bc..8245a5a 100644
--- a/components/block-rich-text/block-rich-text.liquid
+++ b/components/block-rich-text/block-rich-text.liquid
@@ -24,8 +24,7 @@
 
 <block-rich-text {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {{ 'button.css' | asset_url | stylesheet_tag }}
-    {{ 'rte.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'block-rich-text.css' | asset_url | stylesheet_tag }}
 
     {%- if subheading != blank -%}
diff --git a/components/block-title/block-title.liquid b/components/block-title/block-title.liquid
index d134317..72a330a 100644
--- a/components/block-title/block-title.liquid
+++ b/components/block-title/block-title.liquid
@@ -24,7 +24,7 @@
 
 <block-title {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {{ 'typography.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'block-title.css' | asset_url | stylesheet_tag }}
 
     <h1 class="h2 heading">
diff --git a/components/block-variant-picker/assets/block-variant-picker.css b/components/block-variant-picker/assets/block-variant-picker.css
deleted file mode 100644
index 494bab9..0000000
--- a/components/block-variant-picker/assets/block-variant-picker.css
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-  display: grid;
-  gap: var(--size-6);
-}
diff --git a/components/block-variant-picker/block-variant-picker.liquid b/components/block-variant-picker/block-variant-picker.liquid
index a38d95c..87660ca 100644
--- a/components/block-variant-picker/block-variant-picker.liquid
+++ b/components/block-variant-picker/block-variant-picker.liquid
@@ -24,7 +24,14 @@
     {{ block.shopify_attributes }}
   >
     <template shadowrootmode="open">
-      {{ 'block-variant-picker.css' | asset_url | stylesheet_tag }}
+      {% render 'component-styles' %}
+
+      <style>
+        :host {
+          display: grid;
+          gap: var(--size-6);
+        }
+      </style>
 
       {%- liquid
         for option in product.options_with_values
diff --git a/components/block-video/block-video.liquid b/components/block-video/block-video.liquid
index dcc58bd..6a743e2 100644
--- a/components/block-video/block-video.liquid
+++ b/components/block-video/block-video.liquid
@@ -34,7 +34,7 @@
 <is-land {{ hydration }}>
   <block-video class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
-      {{ 'aspect-ratio.css' | asset_url | stylesheet_tag }}
+      {% render 'component-styles' %}
       {{ 'block-video.css' | asset_url | stylesheet_tag }}
 
       {%- if video != blank -%}
diff --git a/components/cart-icon/cart-icon.liquid b/components/cart-icon/cart-icon.liquid
index 198307a..0375128 100644
--- a/components/cart-icon/cart-icon.liquid
+++ b/components/cart-icon/cart-icon.liquid
@@ -19,7 +19,7 @@
 <is-land on:idle>
   <cart-icon>
     <template shadowrootmode="open">
-      {{ 'base.css' | asset_url | stylesheet_tag }}
+      {% render 'component-styles' %}
       {{ 'cart-icon.css' | asset_url | stylesheet_tag }}
 
       <a href="{{ routes.cart_url }}" class="cart-icon">
diff --git a/components/cart-status-notifier/cart-status-notifier.liquid b/components/cart-status-notifier/cart-status-notifier.liquid
index 367548e..f592831 100644
--- a/components/cart-status-notifier/cart-status-notifier.liquid
+++ b/components/cart-status-notifier/cart-status-notifier.liquid
@@ -15,6 +15,7 @@
 <is-land {{ hydration }}>
   <cart-status-notifier>
     <template shadowrootmode="open">
+      {% render 'component-styles' %}
       {{ 'cart-status-notifier.css' | asset_url | stylesheet_tag }}
 
       <cart-status-notifier class="status" hidden>
diff --git a/components/css-variables/assets/aspect-ratio.css b/components/component-styles/assets/aspect-ratio.css
similarity index 100%
rename from components/css-variables/assets/aspect-ratio.css
rename to components/component-styles/assets/aspect-ratio.css
diff --git a/components/css-variables/assets/normalize.css b/components/component-styles/assets/base.css
similarity index 55%
rename from components/css-variables/assets/normalize.css
rename to components/component-styles/assets/base.css
index b0cad2e..ae08257 100644
--- a/components/css-variables/assets/normalize.css
+++ b/components/component-styles/assets/base.css
@@ -1,16 +1,34 @@
 *,
 input,
 :before,
-:after {
+:after,
+:host {
   box-sizing: border-box;
 }
 
+html {
+  touch-action: manipulation;
+}
+
+html[dir='rtl'] {
+  direction: rtl;
+}
+
 html,
 body {
+  background-color: rgb(243 243 243);
+  color: rgb(18 18 18);
+  line-height: 1.4;
   padding: 0;
   margin: 0;
 }
 
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: inherit;
+}
+
 article,
 aside,
 details,
@@ -43,3 +61,18 @@ input[type='search']::-webkit-search-cancel-button,
 input[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
+[hidden] {
+  display: none;
+}
+
+[visually-hidden] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
diff --git a/components/component-styles/assets/button.css b/components/component-styles/assets/button.css
new file mode 100644
index 0000000..d08e3e5
--- /dev/null
+++ b/components/component-styles/assets/button.css
@@ -0,0 +1,16 @@
+:host {
+  --button-color: var(--button-color, --color-background, #fff);
+  --button-color-background: var(--button-color-background, --color-foreground, #ccc);
+}
+
+.button {
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+  background-color: rgb(var(--button-color-background));
+  color: rgb(var(--button-color));
+  text-decoration: none;
+  font-size: var(--size-4);
+  padding: var(--size-3) var(--size-6);
+  border-radius: var(--radius-xs);
+}
diff --git a/components/css-variables/assets/clearfix.css b/components/component-styles/assets/clearfix.css
similarity index 100%
rename from components/css-variables/assets/clearfix.css
rename to components/component-styles/assets/clearfix.css
diff --git a/components/css-variables/assets/color-schemes.css b/components/component-styles/assets/color-schemes.css
similarity index 100%
rename from components/css-variables/assets/color-schemes.css
rename to components/component-styles/assets/color-schemes.css
diff --git a/components/css-variables/assets/display.css b/components/component-styles/assets/display.css
similarity index 100%
rename from components/css-variables/assets/display.css
rename to components/component-styles/assets/display.css
diff --git a/components/css-variables/assets/model-viewer.css b/components/component-styles/assets/model-viewer.css
similarity index 100%
rename from components/css-variables/assets/model-viewer.css
rename to components/component-styles/assets/model-viewer.css
diff --git a/components/css-variables/assets/page-width.css b/components/component-styles/assets/page-width.css
similarity index 100%
rename from components/css-variables/assets/page-width.css
rename to components/component-styles/assets/page-width.css
diff --git a/components/css-variables/assets/placeholder-svg.css b/components/component-styles/assets/placeholder-svg.css
similarity index 100%
rename from components/css-variables/assets/placeholder-svg.css
rename to components/component-styles/assets/placeholder-svg.css
diff --git a/components/css-variables/assets/position.css b/components/component-styles/assets/position.css
similarity index 100%
rename from components/css-variables/assets/position.css
rename to components/component-styles/assets/position.css
diff --git a/components/css-variables/assets/rte.css b/components/component-styles/assets/rte.css
similarity index 100%
rename from components/css-variables/assets/rte.css
rename to components/component-styles/assets/rte.css
diff --git a/components/css-variables/assets/select.css b/components/component-styles/assets/select.css
similarity index 100%
rename from components/css-variables/assets/select.css
rename to components/component-styles/assets/select.css
diff --git a/components/css-variables/assets/table.css b/components/component-styles/assets/table.css
similarity index 100%
rename from components/css-variables/assets/table.css
rename to components/component-styles/assets/table.css
diff --git a/components/component-styles/assets/theme.css b/components/component-styles/assets/theme.css
new file mode 100644
index 0000000..8317649
--- /dev/null
+++ b/components/component-styles/assets/theme.css
@@ -0,0 +1,5 @@
+/* 
+A place for you to add theme specific styles
+You should add this file to the ignore list in the shopify.config.toml
+so that any customizations don't get erased
+*/
diff --git a/components/css-variables/assets/typography.css b/components/component-styles/assets/typography.css
similarity index 100%
rename from components/css-variables/assets/typography.css
rename to components/component-styles/assets/typography.css
diff --git a/components/component-styles/assets/variables.css b/components/component-styles/assets/variables.css
new file mode 100644
index 0000000..541befc
--- /dev/null
+++ b/components/component-styles/assets/variables.css
@@ -0,0 +1,70 @@
+:host {
+  --size-0-5: var(--size-0-5, 0.125rem); /* 2px */
+  --size-1: var(--size-1, 0.25rem); /* 4px */
+  --size-1-5: var(--size-1-5, 0.375rem); /* 6px */
+  --size-2: var(--size-2, 0.5rem); /* 8px */
+  --size-2-5: var(--size-2-5, 0.625rem); /* 10px */
+  --size-3: var(--size-3, 0.75rem); /* 12px */
+  --size-3-5: var(--size-3-5, 0.875rem); /* 14px */
+  --size-4: var(--size-4, 1rem); /* 16px */
+  --size-4-5: var(--size-4-5, 1.125rem); /* 18px */
+  --size-5: var(--size-5, 1.25rem); /* 20px */
+  --size-5-5: var(--size-5-5, 1.375rem); /* 22px */
+  --size-6: var(--size-6, 1.5rem); /* 24px */
+  --size-6-5: var(--size-6-5, 1.625rem); /* 26px */
+  --size-7: var(--size-7, 1.75rem); /* 28px */
+  --size-7-5: var(--size-7-5, 1.875rem); /* 30px */
+  --size-8: var(--size-8, 2rem); /* 32px */
+  --size-8-5: var(--size-8-5, 2.125rem); /* 34px */
+  --size-9: var(--size-9, 2.25rem); /* 36px */
+  --size-9-5: var(--size-9-5, 2.375rem); /* 38px */
+  --size-10: var(--size-10, 2.5rem); /* 40px */
+  --size-11: var(--size-11, 2.75rem); /* 44px */
+  --size-12: var(--size-12, 3rem); /* 48px */
+  --size-14: var(--size-14, 3.5rem); /* 56px */
+  --size-16: var(--size-16, 4rem); /* 64px */
+  --size-18: var(--size-18, 4.5rem); /* 72px */
+  --size-20: var(--size-20, 5rem); /* 80px */
+  --size-24: var(--size-24, 6rem); /* 96px */
+  --size-28: var(--size-28, 7rem); /* 112px */
+  --size-32: var(--size-32, 8rem); /* 128px */
+}
+/* Layout */
+:host {
+  --page-width: var(--page-width, 1500px);
+  --page-width-padding: var(--page-width-padding, --size-10);
+}
+
+@media screen and (max-width: 768px) {
+  :root {
+    --page-width-padding: var(--size-5);
+  }
+}
+
+:host {
+  --text-xs: var(--text-xs, --size-3);
+  --text-sm: var(--text-sm, --size-3-5);
+  --text-base: var(--text-base, --size-4);
+  --text-lg: var(--text-lg, --size-4-5);
+  --text-xl: var(--text-xl, --size-5);
+  --text-2xl: var(--text-2xl, --size-6);
+  --text-3xl: var(--text-3xl, --size-8);
+  --text-4xl: var(--text-4xl, --size-9);
+  --text-5xl: var(--text-5xl, --size-10);
+  --text-6xl: var(--text-6xl, --size-12);
+  --text-7xl: var(--text-7xl, --size-14);
+  --text-8xl: var(--text-8xl, --size-16);
+  --text-9xl: var(--text-9xl, --size-20);
+}
+
+:host {
+  /* Border radiuses */
+  --radius-xs: var(--radius-xs, --size-1 0.25rem);
+  --radius-sm: var(--radius-sm, --size-2 0.5rem);
+  --radius-md: var(--radius-md, --size-3 0.75rem);
+  --radius-lg: var(--radius-lg, --size-4 1rem);
+  --radius-xl: var(--radius-xl, --size-6 1.5rem);
+  --radius-2xl: var(--radius-2xl, --size-8 2rem);
+  --radius-rounded: var(--radius-rounded, 9999px);
+  --radius-none: var(--radius-none, 0);
+}
diff --git a/components/css-variables/assets/visibility.css b/components/component-styles/assets/visibility.css
similarity index 100%
rename from components/css-variables/assets/visibility.css
rename to components/component-styles/assets/visibility.css
diff --git a/components/component-styles/component-styles.liquid b/components/component-styles/component-styles.liquid
new file mode 100644
index 0000000..e8cdf6c
--- /dev/null
+++ b/components/component-styles/component-styles.liquid
@@ -0,0 +1,51 @@
+{%- comment -%}
+  Renders the list of CSS token variables
+
+  Usage:
+  {% render 'component-styles' %}
+{%- endcomment -%}
+
+{%- assign styles = styles | split: ', ' %}
+
+{% render 'font-faces' %}
+
+{%- style -%}
+  /* ASSUMED TO BE NEEDED FOR EVERY COMPONENT */
+  @import url('{{ 'variables.css' |  asset_url}}');
+  @import url('{{ 'base.css' |  asset_url}}');
+
+  /* SELECTIVE STYLES IF SPECIFIED PER COMPONENT */
+  @import url('{{ 'aspect-ratio.css' |  asset_url}}');
+  @import url('{{ 'button.css' |  asset_url}}');
+  @import url('{{ 'clearfix.css' |  asset_url}}');
+  @import url('{{ 'color-schemes.css' |  asset_url}}');
+  @import url('{{ 'display.css' |  asset_url}}');
+  @import url('{{ 'model-viewer.css' |  asset_url}}');
+  @import url('{{ 'page-width.css' |  asset_url}}');
+  @import url('{{ 'placeholder-svg.css' |  asset_url}}');
+  @import url('{{ 'position.css' |  asset_url}}');
+  @import url('{{ 'rte.css' |  asset_url}}');
+  @import url('{{ 'select.css' |  asset_url}}');
+  @import url('{{ 'table.css' |  asset_url}}');
+  @import url('{{ 'typography.css' |  asset_url}}');
+  @import url('{{ 'visibility.css' |  asset_url}}');
+
+  /* GLOBAL THEME-LEVEL OVERRIDES */
+  @import url('{{ 'theme.css' |  asset_url}}');
+
+  :root {
+    --heading-font-family: {{ settings.heading_font.family }}, {{ settings.heading_font.fallback_families }};
+    --heading-font-weight: {{ settings.heading_font.weight }};
+    --heading-font-style: {{ settings.heading_font.style }};
+    --body-font-family: {{ settings.body_font.family }}, {{ settings.body_font.fallback_families }};
+    --body-font-weight: {{ settings.body_font.weight }};
+    --body-font-style: {{ settings.body_font.style }};
+
+    --color-scheme-1-bg: {{ settings.color_scheme_1_bg.rgb }};
+    --color-scheme-1-text: {{ settings.color_scheme_1_text.rgb }};
+    --color-scheme-2-bg: {{ settings.color_scheme_2_bg.rgb }};
+    --color-scheme-2-text: {{ settings.color_scheme_2_text.rgb }};
+    --color-scheme-3-bg: {{ settings.color_scheme_3_bg.rgb }};
+    --color-scheme-3-text: {{ settings.color_scheme_3_text.rgb }};
+  } */
+{%- endstyle -%}
diff --git a/components/css-variables/assets/base.css b/components/css-variables/assets/base.css
deleted file mode 100644
index 250571a..0000000
--- a/components/css-variables/assets/base.css
+++ /dev/null
@@ -1,29 +0,0 @@
-html {
-  touch-action: manipulation;
-}
-
-html[dir='rtl'] {
-  direction: rtl;
-}
-
-html,
-body {
-  background-color: rgb(243 243 243);
-  color: rgb(18 18 18);
-  line-height: 1.4;
-}
-
-[hidden] {
-  display: none;
-}
-
-[visually-hidden] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
diff --git a/components/css-variables/assets/button.css b/components/css-variables/assets/button.css
deleted file mode 100644
index 953ffc6..0000000
--- a/components/css-variables/assets/button.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.button {
-  cursor: pointer;
-  display: inline-flex;
-  width: fit-content;
-  background-color: rgb(var(--color-foreground));
-  color: rgb(var(--color-background));
-  text-decoration: none;
-  font-size: var(--size-4);
-  padding: var(--size-3) var(--size-6);
-  border-radius: var(--radius-xs);
-}
diff --git a/components/css-variables/css-variables.liquid b/components/css-variables/css-variables.liquid
deleted file mode 100644
index e54d4d7..0000000
--- a/components/css-variables/css-variables.liquid
+++ /dev/null
@@ -1,90 +0,0 @@
-{%- comment -%}
-  Renders the list of CSS token variables
-
-  Usage:
-  {% render 'css-variables' %}
-{%- endcomment -%}
-
-{%- style -%}
-  :root {
-    --size-0-5: 0.125rem; /* 2px */
-    --size-1: 0.25rem; /* 4px */
-    --size-1-5: 0.375rem; /* 6px */
-    --size-2: 0.5rem; /* 8px */
-    --size-2-5: 0.625rem; /* 10px */
-    --size-3: 0.75rem; /* 12px */
-    --size-3-5: 0.875rem; /* 14px */
-    --size-4: 1rem; /* 16px */
-    --size-4-5: 1.125rem; /* 18px */
-    --size-5: 1.25rem; /* 20px */
-    --size-5-5: 1.375rem; /* 22px */
-    --size-6: 1.5rem; /* 24px */
-    --size-6-5: 1.625rem; /* 26px */
-    --size-7: 1.75rem; /* 28px */
-    --size-7-5: 1.875rem; /* 30px */
-    --size-8: 2rem; /* 32px */
-    --size-8-5: 2.125rem; /* 34px */
-    --size-9: 2.25rem; /* 36px */
-    --size-9-5: 2.375rem; /* 38px */
-    --size-10: 2.5rem; /* 40px */
-    --size-11: 2.75rem; /* 44px */
-    --size-12: 3rem; /* 48px */
-    --size-14: 3.5rem; /* 56px */
-    --size-16: 4rem; /* 64px */
-    --size-18: 4.5rem; /* 72px */
-    --size-20: 5rem; /* 80px */
-    --size-24: 6rem; /* 96px */
-    --size-28: 7rem; /* 112px */
-    --size-32: 8rem; /* 128px */
-
-    /* Layout */
-    --page-width: 1500px;
-    --page-width-padding: var(--size-10);
-
-    /* Typography */
-    --heading-font-family: {{ settings.heading_font.family }}, {{ settings.heading_font.fallback_families }};
-    --heading-font-weight: {{ settings.heading_font.weight }};
-    --heading-font-style: {{ settings.heading_font.style }};
-    --body-font-family: {{ settings.body_font.family }}, {{ settings.body_font.fallback_families }};
-    --body-font-weight: {{ settings.body_font.weight }};
-    --body-font-style: {{ settings.body_font.style }};
-
-    --text-xs: 0.75rem;
-    --text-sm: 0.875rem;
-    --text-base: 1rem;
-    --text-lg: 1.125rem;
-    --text-xl: 1.25rem;
-    --text-2xl: 1.5rem;
-    --text-3xl: 2rem;
-    --text-4xl: 2.25rem;
-    --text-5xl: 2.5rem;
-    --text-6xl: 3rem;
-    --text-7xl: 3.5rem;
-    --text-8xl: 4rem;
-    --text-9xl: 5rem;
-
-    /* Border radiuses */
-    --radius-xs: 0.25rem;
-    --radius-sm: 0.5rem;
-    --radius-md: 0.75rem;
-    --radius-lg: 1rem;
-    --radius-xl: 1.5rem;
-    --radius-2xl: 2rem;
-    --radius-rounded: 9999px;
-    --radius-none: 0;
-
-    /* Color schemes */
-    --color-scheme-1-bg: {{ settings.color_scheme_1_bg.rgb }};
-    --color-scheme-1-text: {{ settings.color_scheme_1_text.rgb }};
-    --color-scheme-2-bg: {{ settings.color_scheme_2_bg.rgb }};
-    --color-scheme-2-text: {{ settings.color_scheme_2_text.rgb }};
-    --color-scheme-3-bg: {{ settings.color_scheme_3_bg.rgb }};
-    --color-scheme-3-text: {{ settings.color_scheme_3_text.rgb }};
-  }
-
-  @media screen and (max-width: 768px) {
-    :root {
-      --page-width-padding: var(--size-5);
-    }
-  }
-{%- endstyle -%}
diff --git a/components/icon/assets/icon.css b/components/icon/assets/icon.css
deleted file mode 100644
index 0150ced..0000000
--- a/components/icon/assets/icon.css
+++ /dev/null
@@ -1,3 +0,0 @@
-x-icon {
-  display: flex;
-}
diff --git a/components/icon/icon.liquid b/components/icon/icon.liquid
index 9887845..582a685 100644
--- a/components/icon/icon.liquid
+++ b/components/icon/icon.liquid
@@ -35,10 +35,9 @@
   <x-icon
     src="{{ url }}"
     name="{{ name }}"
+    style="display: flex;"
   >
-    <template shadowrootmode="open">
-      {{ 'icon.css' | asset_url | stylesheet_tag }}
-    </template>
+    <template shadowrootmode="open"> </template>
   </x-icon>
 
   <template data-island>
diff --git a/components/line-item-quantity/line-item-quantity.liquid b/components/line-item-quantity/line-item-quantity.liquid
index 8c34cd2..84e2428 100644
--- a/components/line-item-quantity/line-item-quantity.liquid
+++ b/components/line-item-quantity/line-item-quantity.liquid
@@ -18,6 +18,7 @@
 <is-land {{ hydration }}>
   <line-item-quantity class="line-item-quantity" index="{{ line_item.index | plus: 1 }}" section-id="{{ section.id }}">
     <template shadowrootmode="open">
+      {% render 'component-styles' %}
       {{ 'line-item-quantity.css' | asset_url | stylesheet_tag }}
 
       <input type="text" inputmode="numeric" value="{{ line_item.quantity }}" min="1">
diff --git a/components/line-item/line-item.liquid b/components/line-item/line-item.liquid
index ac55760..4615a56 100644
--- a/components/line-item/line-item.liquid
+++ b/components/line-item/line-item.liquid
@@ -24,6 +24,7 @@
 
 <line-item class="line-item">
   <template shadowrootmode="open">
+    {% render 'component-styles' %}
     {{ 'line-item.css' | asset_url | stylesheet_tag }}
 
     <div class="info">
diff --git a/components/product-description/product-description.liquid b/components/product-description/product-description.liquid
index 3a246a3..1ad2e74 100644
--- a/components/product-description/product-description.liquid
+++ b/components/product-description/product-description.liquid
@@ -18,9 +18,7 @@
 
 <product-description>
   <template shadowrootmode="open">
-    {{ 'rte.css' | asset_url | stylesheet_tag }}
-    {{ 'clearfix.css' | asset_url | stylesheet_tag }}
-    {{ 'typography.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
 
     <div class="rte clearfix">
       {{- description -}}
diff --git a/components/product-media-gallery/product-media-gallery.liquid b/components/product-media-gallery/product-media-gallery.liquid
index f75ae24..366a032 100644
--- a/components/product-media-gallery/product-media-gallery.liquid
+++ b/components/product-media-gallery/product-media-gallery.liquid
@@ -15,8 +15,7 @@
 
 <product-media-gallery class="product-media-gallery">
   <template shadowrootmode="open">
-    {{ 'base.css' | asset_url | stylesheet_tag }}
-    {{ 'normalize.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'product-media-gallery.css' | asset_url | stylesheet_tag }}
 
     {%- for media in product.media -%}
diff --git a/components/section-header/section-header.liquid b/components/section-header/section-header.liquid
index d9bfdd8..16240fa 100644
--- a/components/section-header/section-header.liquid
+++ b/components/section-header/section-header.liquid
@@ -20,8 +20,7 @@
 
 <section-header data-color-scheme="{{ color_scheme }}">
   <template shadowrootmode="open">
-    {{ 'color-schemes.css' | asset_url | stylesheet_tag }}
-    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'section-header.css' | asset_url | stylesheet_tag }}
 
     <div class="page-width">
diff --git a/components/section-main-cart/section-main-cart.liquid b/components/section-main-cart/section-main-cart.liquid
index 758a650..e88a50d 100644
--- a/components/section-main-cart/section-main-cart.liquid
+++ b/components/section-main-cart/section-main-cart.liquid
@@ -31,12 +31,7 @@
 
 <section-main-cart data-color-scheme="{{ color_scheme }}">
   <template shadowrootmode="open">
-    {{ 'normalize.css' | asset_url | stylesheet_tag }}
-    {{ 'breakpoints.css' | asset_url | stylesheet_tag }}
-    {{ 'page-width.css' | asset_url | stylesheet_tag }}
-    {{ 'button.css' | asset_url | stylesheet_tag }}
-    {{ 'typography.css' | asset_url | stylesheet_tag }}
-    {{ 'table.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles', styles: 'buttons, typography' %}
     {{ 'section-main-cart.css' | asset_url | stylesheet_tag }}
 
     <div class="page-width">
diff --git a/components/section-main-product/section-main-product.liquid b/components/section-main-product/section-main-product.liquid
index b150352..86dd1b0 100644
--- a/components/section-main-product/section-main-product.liquid
+++ b/components/section-main-product/section-main-product.liquid
@@ -35,8 +35,7 @@
   data-image-position="{{ image_position }}"
 >
   <template shadowrootmode="open">
-    {{ 'normalize.css' | asset_url | stylesheet_tag }}
-    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
 
     <div class="main-product__media-gallery">
diff --git a/components/section-media-with-text/section-media-with-text.liquid b/components/section-media-with-text/section-media-with-text.liquid
index ddf5a32..086790a 100644
--- a/components/section-media-with-text/section-media-with-text.liquid
+++ b/components/section-media-with-text/section-media-with-text.liquid
@@ -38,10 +38,7 @@
 %}
 <section-media-with-text>
   <template shadowrootmode="open">
-    {{ 'normalize.css' | asset_url | stylesheet_tag }}
-    {{ 'color-schemes.css' | asset_url | stylesheet_tag }}
-    {{ 'position.css' | asset_url | stylesheet_tag }}
-    {{ 'page-width.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'media-with-text.css' | asset_url | stylesheet_tag }}
 
     <section
diff --git a/components/variant-button/variant-button.liquid b/components/variant-button/variant-button.liquid
index 3fbcfec..040a5b2 100644
--- a/components/variant-button/variant-button.liquid
+++ b/components/variant-button/variant-button.liquid
@@ -23,7 +23,7 @@
 
 <variant-button>
   <template shadowrootmode="open">
-    {{ 'visibility.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
     {{ 'variant-button.css' | asset_url | stylesheet_tag }}
 
     <fieldset class="variant-button">
diff --git a/components/variant-dropdown/variant-dropdown.liquid b/components/variant-dropdown/variant-dropdown.liquid
index 6767c0e..d2000c7 100644
--- a/components/variant-dropdown/variant-dropdown.liquid
+++ b/components/variant-dropdown/variant-dropdown.liquid
@@ -14,7 +14,7 @@
 
 <variant-dropdown>
   <template shadowrootmode="open">
-    {{ 'select.css' | asset_url | stylesheet_tag }}
+    {% render 'component-styles' %}
 
     <label for="Option-{{ section.id }}-{{ forloop.index0 }}">
       {{- option.name -}}
diff --git a/styles/breakpoints.css b/styles/breakpoints.css
deleted file mode 100644
index 4fc70a7..0000000
--- a/styles/breakpoints.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@custom-media --small only screen and (max-width: 768px);
-@custom-media --medium-up only screen and (min-width: 769px);
-@custom-media --large-up only screen and (min-width: 1024px);

From e9976020c09891e6818c4b602df1d559948113e6 Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Mon, 3 Jun 2024 23:15:45 -0400
Subject: [PATCH 4/7] Refine styles

---
 .../block-buy-buttons.liquid                  |  2 +-
 components/block-model/assets/block-model.css |  9 +++
 components/component-styles/assets/base.css   | 15 ----
 .../component-styles/assets/clearfix.css      |  5 --
 .../component-styles/assets/color-schemes.css |  9 +++
 .../component-styles/assets/display.css       |  3 -
 .../component-styles/assets/model-viewer.css  |  8 ---
 .../component-styles/assets/page-width.css    | 11 +++
 .../assets/{variables.css => size.css}        | 27 --------
 .../component-styles/assets/typography.css    | 30 +++++++-
 components/component-styles/assets/util.css   | 20 ++++++
 .../component-styles/assets/visibility.css    |  1 -
 .../component-styles/component-styles.liquid  | 68 ++++++++++---------
 13 files changed, 114 insertions(+), 94 deletions(-)
 delete mode 100644 components/component-styles/assets/clearfix.css
 delete mode 100644 components/component-styles/assets/display.css
 delete mode 100644 components/component-styles/assets/model-viewer.css
 rename components/component-styles/assets/{variables.css => size.css} (70%)
 create mode 100644 components/component-styles/assets/util.css
 delete mode 100644 components/component-styles/assets/visibility.css

diff --git a/components/block-buy-buttons/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index da689e6..799683b 100644
--- a/components/block-buy-buttons/block-buy-buttons.liquid
+++ b/components/block-buy-buttons/block-buy-buttons.liquid
@@ -11,7 +11,7 @@
 
 {%- liquid
   assign form_id = 'product-form-' | append: section.id
-
+  # param
   assign show_dynamic_checkout = false
 
   if block.settings.show_dynamic_checkout
diff --git a/components/block-model/assets/block-model.css b/components/block-model/assets/block-model.css
index 63ebfa1..a7e124c 100644
--- a/components/block-model/assets/block-model.css
+++ b/components/block-model/assets/block-model.css
@@ -4,3 +4,12 @@ model-media {
   width: 100%;
   height: 100%;
 }
+
+.shopify-model-viewer-ui,
+.shopify-model-viewer-ui model-viewer {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/components/component-styles/assets/base.css b/components/component-styles/assets/base.css
index ae08257..87a0830 100644
--- a/components/component-styles/assets/base.css
+++ b/components/component-styles/assets/base.css
@@ -61,18 +61,3 @@ input[type='search']::-webkit-search-cancel-button,
 input[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-
-[hidden] {
-  display: none;
-}
-
-[visually-hidden] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
diff --git a/components/component-styles/assets/clearfix.css b/components/component-styles/assets/clearfix.css
deleted file mode 100644
index 435086d..0000000
--- a/components/component-styles/assets/clearfix.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.clearfix::after {
-  clear: both;
-  content: '';
-  display: table;
-}
diff --git a/components/component-styles/assets/color-schemes.css b/components/component-styles/assets/color-schemes.css
index 1c59208..1ff8746 100644
--- a/components/component-styles/assets/color-schemes.css
+++ b/components/component-styles/assets/color-schemes.css
@@ -1,3 +1,12 @@
+:host {
+  --color-scheme-1-bg: var(--color-scheme-1-bg, 255, 255, 255); /* Default to white */
+  --color-scheme-1-text: var(--color-scheme-1-text, 0, 0, 0); /* Default to black */
+  --color-scheme-2-bg: var(--color-scheme-2-bg, 240, 240, 240); /* Default to light grey */
+  --color-scheme-2-text: var(--color-scheme-2-text, 0, 0, 0); /* Default to black */
+  --color-scheme-3-bg: var(--color-scheme-3-bg, 0, 0, 0); /* Default to black */
+  --color-scheme-3-text: var(--color-scheme-3-text, 255, 255, 255); /* Default to white */
+}
+
 [data-color-scheme='scheme-1'] {
   --color-background: var(--color-scheme-1-bg);
   --color-foreground: var(--color-scheme-1-text);
diff --git a/components/component-styles/assets/display.css b/components/component-styles/assets/display.css
deleted file mode 100644
index aaa3d95..0000000
--- a/components/component-styles/assets/display.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.hide {
-  display: none;
-}
diff --git a/components/component-styles/assets/model-viewer.css b/components/component-styles/assets/model-viewer.css
deleted file mode 100644
index ec7cf01..0000000
--- a/components/component-styles/assets/model-viewer.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.shopify-model-viewer-ui,
-.shopify-model-viewer-ui model-viewer {
-  display: block;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
diff --git a/components/component-styles/assets/page-width.css b/components/component-styles/assets/page-width.css
index d43eff2..11f8cec 100644
--- a/components/component-styles/assets/page-width.css
+++ b/components/component-styles/assets/page-width.css
@@ -1,3 +1,14 @@
+:host {
+  --page-width: var(--page-width, 1500px);
+  --page-width-padding: var(--page-width-padding, --size-10);
+}
+
+@media screen and (max-width: 768px) {
+  :root {
+    --page-width-padding: var(--size-5);
+  }
+}
+
 .page-width,
 [data-page-width] {
   padding-inline: var(--page-width-padding);
diff --git a/components/component-styles/assets/variables.css b/components/component-styles/assets/size.css
similarity index 70%
rename from components/component-styles/assets/variables.css
rename to components/component-styles/assets/size.css
index 541befc..a6ab8a9 100644
--- a/components/component-styles/assets/variables.css
+++ b/components/component-styles/assets/size.css
@@ -29,33 +29,6 @@
   --size-28: var(--size-28, 7rem); /* 112px */
   --size-32: var(--size-32, 8rem); /* 128px */
 }
-/* Layout */
-:host {
-  --page-width: var(--page-width, 1500px);
-  --page-width-padding: var(--page-width-padding, --size-10);
-}
-
-@media screen and (max-width: 768px) {
-  :root {
-    --page-width-padding: var(--size-5);
-  }
-}
-
-:host {
-  --text-xs: var(--text-xs, --size-3);
-  --text-sm: var(--text-sm, --size-3-5);
-  --text-base: var(--text-base, --size-4);
-  --text-lg: var(--text-lg, --size-4-5);
-  --text-xl: var(--text-xl, --size-5);
-  --text-2xl: var(--text-2xl, --size-6);
-  --text-3xl: var(--text-3xl, --size-8);
-  --text-4xl: var(--text-4xl, --size-9);
-  --text-5xl: var(--text-5xl, --size-10);
-  --text-6xl: var(--text-6xl, --size-12);
-  --text-7xl: var(--text-7xl, --size-14);
-  --text-8xl: var(--text-8xl, --size-16);
-  --text-9xl: var(--text-9xl, --size-20);
-}
 
 :host {
   /* Border radiuses */
diff --git a/components/component-styles/assets/typography.css b/components/component-styles/assets/typography.css
index 07ff1a4..d89f2af 100644
--- a/components/component-styles/assets/typography.css
+++ b/components/component-styles/assets/typography.css
@@ -1,8 +1,36 @@
+:host {
+  --text-xs: var(--text-xs, --size-3);
+  --text-sm: var(--text-sm, --size-3-5);
+  --text-base: var(--text-base, --size-4);
+  --text-lg: var(--text-lg, --size-4-5);
+  --text-xl: var(--text-xl, --size-5);
+  --text-2xl: var(--text-2xl, --size-6);
+  --text-3xl: var(--text-3xl, --size-8);
+  --text-4xl: var(--text-4xl, --size-9);
+  --text-5xl: var(--text-5xl, --size-10);
+  --text-6xl: var(--text-6xl, --size-12);
+  --text-7xl: var(--text-7xl, --size-14);
+  --text-8xl: var(--text-8xl, --size-16);
+  --text-9xl: var(--text-9xl, --size-20);
+
+  --heading-font-family: var(--heading-font-family, Georgia, 'Times New Roman', Times, serif);
+  --heading-font-weight: var(--heading-font-weight, 700); /* Bold weight */
+  --heading-font-style: var(--heading-font-style, normal); /* Normal style */
+
+  --body-font-family: var(--body-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  --body-font-weight: var(--body-font-weight, 400); /* Normal weight */
+  --body-font-style: var(--body-font-style, normal); /* Normal style */
+}
+
 body,
 input,
 textarea,
 select {
-  font: var(--body-font-style) var(--body-font-weight) var(--text-base) / 1.65 var(--body-font-family);
+  font-family: var(--body-font-family);
+  font-weight: var(--body-font-weight);
+  font-style: var(--body-font-style);
+  font-size: var(--text-base); /* Assuming --text-base is defined elsewhere */
+  line-height: 1.65;
   letter-spacing: 0.05em;
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%;
diff --git a/components/component-styles/assets/util.css b/components/component-styles/assets/util.css
new file mode 100644
index 0000000..ba5994b
--- /dev/null
+++ b/components/component-styles/assets/util.css
@@ -0,0 +1,20 @@
+.clearfix::after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+[hidden] {
+  display: none;
+}
+
+[visually-hidden] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
diff --git a/components/component-styles/assets/visibility.css b/components/component-styles/assets/visibility.css
deleted file mode 100644
index 8b13789..0000000
--- a/components/component-styles/assets/visibility.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/components/component-styles/component-styles.liquid b/components/component-styles/component-styles.liquid
index e8cdf6c..594253d 100644
--- a/components/component-styles/component-styles.liquid
+++ b/components/component-styles/component-styles.liquid
@@ -1,51 +1,53 @@
 {%- comment -%}
   Renders the list of CSS token variables
 
+  Accepts:
+  - styles [''] - List of optional stylesheets to include. Defaults to all.
+
   Usage:
   {% render 'component-styles' %}
 {%- endcomment -%}
 
-{%- assign styles = styles | split: ', ' %}
+{%- capture required_styles -%}
+  size,
+  base,
+  util
+{%- endcapture -%}
+
+{%- capture optional_styles -%}
+  aspect-ratio,
+  button,
+  color-schemes,
+  page-width,
+  placeholder-svg,
+  position,
+  rte,
+  select,
+  table,
+  typography,
+  util
+{%- endcapture -%}
+
+{% assign styles = styles | split: ', ' %}
+{% assign load_all = styles == blank %}
+{% assign required_styles_array = required_styles | split: ', ' %}
+{% assign optional_styles_array = optional_styles | split: ', ' %}
 
 {% render 'font-faces' %}
 
 {%- style -%}
   /* ASSUMED TO BE NEEDED FOR EVERY COMPONENT */
-  @import url('{{ 'variables.css' |  asset_url}}');
-  @import url('{{ 'base.css' |  asset_url}}');
+  {% for style in required_styles_array %}
+    @import url('{{ style | append: ".css" | asset_url }}');
+  {% endfor %}
 
   /* SELECTIVE STYLES IF SPECIFIED PER COMPONENT */
-  @import url('{{ 'aspect-ratio.css' |  asset_url}}');
-  @import url('{{ 'button.css' |  asset_url}}');
-  @import url('{{ 'clearfix.css' |  asset_url}}');
-  @import url('{{ 'color-schemes.css' |  asset_url}}');
-  @import url('{{ 'display.css' |  asset_url}}');
-  @import url('{{ 'model-viewer.css' |  asset_url}}');
-  @import url('{{ 'page-width.css' |  asset_url}}');
-  @import url('{{ 'placeholder-svg.css' |  asset_url}}');
-  @import url('{{ 'position.css' |  asset_url}}');
-  @import url('{{ 'rte.css' |  asset_url}}');
-  @import url('{{ 'select.css' |  asset_url}}');
-  @import url('{{ 'table.css' |  asset_url}}');
-  @import url('{{ 'typography.css' |  asset_url}}');
-  @import url('{{ 'visibility.css' |  asset_url}}');
+  {% for style in optional_styles_array %}
+    {% if load_all or styles contains style %}
+      @import url('{{ style | append: ".css" | asset_url }}');
+    {% endif %}
+  {% endfor %}
 
   /* GLOBAL THEME-LEVEL OVERRIDES */
   @import url('{{ 'theme.css' |  asset_url}}');
-
-  :root {
-    --heading-font-family: {{ settings.heading_font.family }}, {{ settings.heading_font.fallback_families }};
-    --heading-font-weight: {{ settings.heading_font.weight }};
-    --heading-font-style: {{ settings.heading_font.style }};
-    --body-font-family: {{ settings.body_font.family }}, {{ settings.body_font.fallback_families }};
-    --body-font-weight: {{ settings.body_font.weight }};
-    --body-font-style: {{ settings.body_font.style }};
-
-    --color-scheme-1-bg: {{ settings.color_scheme_1_bg.rgb }};
-    --color-scheme-1-text: {{ settings.color_scheme_1_text.rgb }};
-    --color-scheme-2-bg: {{ settings.color_scheme_2_bg.rgb }};
-    --color-scheme-2-text: {{ settings.color_scheme_2_text.rgb }};
-    --color-scheme-3-bg: {{ settings.color_scheme_3_bg.rgb }};
-    --color-scheme-3-text: {{ settings.color_scheme_3_text.rgb }};
-  } */
 {%- endstyle -%}

From 6aff3580d57c1d4bb526ca9e508bfc9132b51341 Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Tue, 4 Jun 2024 21:23:18 -0400
Subject: [PATCH 5/7] Remove junk example code

---
 .../block-buy-buttons/assets/block-buy-buttons.css  | 13 -------------
 .../block-buy-buttons/block-buy-buttons.liquid      | 10 ----------
 2 files changed, 23 deletions(-)

diff --git a/components/block-buy-buttons/assets/block-buy-buttons.css b/components/block-buy-buttons/assets/block-buy-buttons.css
index e311571..005e951 100644
--- a/components/block-buy-buttons/assets/block-buy-buttons.css
+++ b/components/block-buy-buttons/assets/block-buy-buttons.css
@@ -40,16 +40,3 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
-
-:host-context()
-
-:root {
-  --background-color: var(--my-custom-background);
-}
-
-
-body.dark-mode block-buy-button {
-  --background-color: var(--my-custom-background);
-}
-
-block-buy-button[section-id]
\ No newline at end of file
diff --git a/components/block-buy-buttons/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index 799683b..5b38348 100644
--- a/components/block-buy-buttons/block-buy-buttons.liquid
+++ b/components/block-buy-buttons/block-buy-buttons.liquid
@@ -46,16 +46,6 @@
     {% render 'component-styles', styles: 'button' %}
     {{ 'block-buy-buttons.css' | asset_url | stylesheet_tag }}
 
-    <style>
-      :host {
-        --block-buy-button-background-color: var(
-          --block-buy-button-background-color,
-          {{block.settings.background_color}},
-          --background-color,
-        );
-      }
-    </style>
-
     <div role="alert" hidden>
       <span></span>
     </div>

From 25a07cbaec2de787a00459b2859f02068b673878 Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Thu, 6 Jun 2024 06:47:06 -0400
Subject: [PATCH 6/7] More updates to get things working

---
 .../assets/block-buy-buttons.css              |  2 +
 .../block-buy-buttons.liquid                  |  2 +-
 .../block-cart-checkout-button.liquid         |  2 +-
 .../block-cart-note/block-cart-note.liquid    |  2 +-
 .../block-cart-totals.liquid                  |  2 +-
 components/block-image/block-image.liquid     |  2 +-
 components/block-model/block-model.liquid     |  2 +-
 components/block-price/block-price.liquid     |  2 +-
 .../block-rich-text/block-rich-text.liquid    |  4 +-
 components/block-title/block-title.liquid     |  2 +-
 .../block-variant-picker.liquid               |  2 +-
 components/block-video/block-video.liquid     | 92 ++++++++++---------
 components/cart-icon/cart-icon.liquid         |  2 +-
 .../cart-status-notifier.liquid               |  2 +-
 components/component-styles/assets/button.css | 16 ----
 .../component-styles/assets/color-schemes.css | 32 -------
 components/component-styles/assets/size.css   | 43 ---------
 components/component-styles/assets/theme.css  |  5 -
 .../component-styles/component-styles.liquid  | 53 -----------
 components/icon/icon.liquid                   |  1 -
 .../line-item-quantity.liquid                 |  2 +-
 components/line-item/line-item.liquid         |  2 +-
 .../product-description.liquid                |  2 +-
 .../assets/product-media-gallery.css          |  8 +-
 .../product-media-gallery.liquid              |  2 +-
 .../section-header/section-header.liquid      |  2 +-
 .../section-main-cart.liquid                  |  2 +-
 .../assets/section-main-product.css           |  6 +-
 .../section-main-product.liquid               |  2 +-
 .../section-media-with-text.liquid            |  2 +-
 .../assets/aspect-ratio.css                   |  0
 .../assets/base.css                           | 21 +----
 components/styles-component/assets/button.css | 11 +++
 .../styles-component/assets/color-schemes.css | 35 +++++++
 .../assets/page-width.css                     | 11 ---
 .../assets/placeholder-svg.css                |  0
 .../assets/position.css                       |  0
 .../assets/rte.css                            |  0
 .../assets/select.css                         |  0
 .../assets/table.css                          |  0
 .../assets/typography.css                     | 32 +------
 .../assets/util.css                           |  0
 .../styles-component/styles-component.liquid  | 37 ++++++++
 components/styles-head/assets/custom.css      |  4 +
 .../styles-head/assets/design-tokens.css      | 85 +++++++++++++++++
 components/styles-head/assets/theme.css       | 13 +++
 .../styles-head.liquid}                       | 33 +++++--
 .../variant-button/variant-button.liquid      |  2 +-
 .../variant-dropdown/variant-dropdown.liquid  |  2 +-
 49 files changed, 297 insertions(+), 289 deletions(-)
 delete mode 100644 components/component-styles/assets/button.css
 delete mode 100644 components/component-styles/assets/color-schemes.css
 delete mode 100644 components/component-styles/assets/size.css
 delete mode 100644 components/component-styles/assets/theme.css
 delete mode 100644 components/component-styles/component-styles.liquid
 rename components/{component-styles => styles-component}/assets/aspect-ratio.css (100%)
 rename components/{component-styles => styles-component}/assets/base.css (74%)
 create mode 100644 components/styles-component/assets/button.css
 create mode 100644 components/styles-component/assets/color-schemes.css
 rename components/{component-styles => styles-component}/assets/page-width.css (71%)
 rename components/{component-styles => styles-component}/assets/placeholder-svg.css (100%)
 rename components/{component-styles => styles-component}/assets/position.css (100%)
 rename components/{component-styles => styles-component}/assets/rte.css (100%)
 rename components/{component-styles => styles-component}/assets/select.css (100%)
 rename components/{component-styles => styles-component}/assets/table.css (100%)
 rename components/{component-styles => styles-component}/assets/typography.css (69%)
 rename components/{component-styles => styles-component}/assets/util.css (100%)
 create mode 100644 components/styles-component/styles-component.liquid
 create mode 100644 components/styles-head/assets/custom.css
 create mode 100644 components/styles-head/assets/design-tokens.css
 create mode 100644 components/styles-head/assets/theme.css
 rename components/{font-faces/font-faces.liquid => styles-head/styles-head.liquid} (51%)

diff --git a/components/block-buy-buttons/assets/block-buy-buttons.css b/components/block-buy-buttons/assets/block-buy-buttons.css
index 005e951..300d678 100644
--- a/components/block-buy-buttons/assets/block-buy-buttons.css
+++ b/components/block-buy-buttons/assets/block-buy-buttons.css
@@ -11,12 +11,14 @@
 }
 
 .shopify-payment-button__button {
+  width: 100%;
   font: inherit;
   border-radius: var(--radius-xs);
   overflow: hidden;
   min-height: var(--size-14);
   border-radius: var(--radius-xs);
   background: #141811;
+  color: white;
   font-size: var(--size-4);
 
   &:hover {
diff --git a/components/block-buy-buttons/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index 5b38348..5fa3550 100644
--- a/components/block-buy-buttons/block-buy-buttons.liquid
+++ b/components/block-buy-buttons/block-buy-buttons.liquid
@@ -43,7 +43,7 @@
   {{ block.shopify_attributes }}
 >
   <template shadowrootmode="open">
-    {% render 'component-styles', styles: 'button' %}
+    {% render 'styles-component', styles: 'button' %}
     {{ 'block-buy-buttons.css' | asset_url | stylesheet_tag }}
 
     <div role="alert" hidden>
diff --git a/components/block-cart-checkout-button/block-cart-checkout-button.liquid b/components/block-cart-checkout-button/block-cart-checkout-button.liquid
index b2f7544..11e24d5 100644
--- a/components/block-cart-checkout-button/block-cart-checkout-button.liquid
+++ b/components/block-cart-checkout-button/block-cart-checkout-button.liquid
@@ -15,7 +15,7 @@
 
 <block-cart-checkout-button {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'block-cart-checkout-button' | asset_url | stylesheet_tag }}
 
     <div class="shipping-copy">
diff --git a/components/block-cart-note/block-cart-note.liquid b/components/block-cart-note/block-cart-note.liquid
index 785fe0f..983dc70 100644
--- a/components/block-cart-note/block-cart-note.liquid
+++ b/components/block-cart-note/block-cart-note.liquid
@@ -17,7 +17,7 @@
 <is-land {{ hydration }}>
   <block-cart-note {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'block-cart-note.css' | asset_url | stylesheet_tag }}
 
       <textarea
diff --git a/components/block-cart-totals/block-cart-totals.liquid b/components/block-cart-totals/block-cart-totals.liquid
index 76cf300..ea41de6 100644
--- a/components/block-cart-totals/block-cart-totals.liquid
+++ b/components/block-cart-totals/block-cart-totals.liquid
@@ -12,7 +12,7 @@
 <is-land {{ hydration }}>
   <block-cart-totals {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'block-cart-totals.css' | asset_url | stylesheet_tag }}
 
       <span>{{ 'labels.total' | t }}</span>
diff --git a/components/block-image/block-image.liquid b/components/block-image/block-image.liquid
index 88a0c4d..bc8ecd1 100644
--- a/components/block-image/block-image.liquid
+++ b/components/block-image/block-image.liquid
@@ -25,7 +25,7 @@
 
 <block-image class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'block-image.css' | asset_url | stylesheet_tag }}
 
     {%- liquid
diff --git a/components/block-model/block-model.liquid b/components/block-model/block-model.liquid
index be1dda1..b4426c4 100644
--- a/components/block-model/block-model.liquid
+++ b/components/block-model/block-model.liquid
@@ -23,7 +23,7 @@
 <is-land {{ hydration }}>
   <block-model class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'block-model.css' | asset_url | stylesheet_tag }}
 
       {% if product != blank %}
diff --git a/components/block-price/block-price.liquid b/components/block-price/block-price.liquid
index 818d5aa..70ccde4 100644
--- a/components/block-price/block-price.liquid
+++ b/components/block-price/block-price.liquid
@@ -34,7 +34,7 @@
 
 <block-price data-section-id="{{ section.id }}" {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'block-price.css' | asset_url | stylesheet_tag }}
 
     <span class="label">
diff --git a/components/block-rich-text/block-rich-text.liquid b/components/block-rich-text/block-rich-text.liquid
index 8245a5a..6f279b2 100644
--- a/components/block-rich-text/block-rich-text.liquid
+++ b/components/block-rich-text/block-rich-text.liquid
@@ -24,7 +24,7 @@
 
 <block-rich-text {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'block-rich-text.css' | asset_url | stylesheet_tag }}
 
     {%- if subheading != blank -%}
@@ -34,7 +34,7 @@
     {%- endif -%}
 
     {%- if heading != blank -%}
-      <h2 class="{{ heading_size }} heading">
+      <h2 class="{{ heading_size }} heading" part="title">
         {{ heading }}
       </h2>
     {%- endif -%}
diff --git a/components/block-title/block-title.liquid b/components/block-title/block-title.liquid
index 72a330a..156a72c 100644
--- a/components/block-title/block-title.liquid
+++ b/components/block-title/block-title.liquid
@@ -24,7 +24,7 @@
 
 <block-title {{ block.shopify_attributes }}>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'block-title.css' | asset_url | stylesheet_tag }}
 
     <h1 class="h2 heading">
diff --git a/components/block-variant-picker/block-variant-picker.liquid b/components/block-variant-picker/block-variant-picker.liquid
index 87660ca..fe29eb7 100644
--- a/components/block-variant-picker/block-variant-picker.liquid
+++ b/components/block-variant-picker/block-variant-picker.liquid
@@ -24,7 +24,7 @@
     {{ block.shopify_attributes }}
   >
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
 
       <style>
         :host {
diff --git a/components/block-video/block-video.liquid b/components/block-video/block-video.liquid
index 6a743e2..670e7da 100644
--- a/components/block-video/block-video.liquid
+++ b/components/block-video/block-video.liquid
@@ -32,54 +32,56 @@
 %}
 
 <is-land {{ hydration }}>
-  <block-video class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+  <block-video {{ block.shopify_attributes }}>
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'block-video.css' | asset_url | stylesheet_tag }}
 
-      {%- if video != blank -%}
-        <video-media
-          {% if autoplay %}
-            autoplay
-          {% endif %}
-        >
-          {{
-            video
-            | video_tag:
-              controls: show_controls,
-              playsinline: true,
-              muted: autoplay,
-              loop: autoplay,
-              preload: 'metadata',
-              image_size: '500x'
-          }}
-        </video-media>
-      {%- elsif external_video != blank -%}
-        <video-media
-          host="{{ external_video_host }}"
-          {% if autoplay %}
-            autoplay
-          {% endif %}
-        >
-          <template>
-            {%- if external_video_host == 'youtube' -%}
-              <iframe
-                src="https://www.youtube.com/embed/{{ external_video_id }}?playsinline=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if mute_video %}mute=1&{% endif %}{% if loop %}loop=1&{% endif %}playlist={{ external_video_id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}"
-                allow="autoplay; encrypted-media"
-                allowfullscreen="allowfullscreen"
-              ></iframe>
-            {%- elsif external_video_host == 'vimeo' -%}
-              <iframe
-                src="https://player.vimeo.com/video/{{ external_video_id }}?autopause=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if loop %}loop=1&{% endif %}{% if mute_video %}muted=1&{% endif %}transparent=0&responsive=1&portrait=0&title=0&byline=0"
-                allow="autoplay; encrypted-media;"
-                allowfullscreen="allowfullscreen"
-              ></iframe>
-            {%- endif -%}
-          </template>
-        </video-media>
-      {%- else -%}
-        {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
-      {%- endif -%}
+      <div class="aspect-ratio--{{ media_crop }}">
+        {%- if video != blank -%}
+          <video-media
+            {% if autoplay %}
+              autoplay
+            {% endif %}
+          >
+            {{
+              video
+              | video_tag:
+                controls: show_controls,
+                playsinline: true,
+                muted: autoplay,
+                loop: autoplay,
+                preload: 'metadata',
+                image_size: '500x'
+            }}
+          </video-media>
+        {%- elsif external_video != blank -%}
+          <video-media
+            host="{{ external_video_host }}"
+            {% if autoplay %}
+              autoplay
+            {% endif %}
+          >
+            <template>
+              {%- if external_video_host == 'youtube' -%}
+                <iframe
+                  src="https://www.youtube.com/embed/{{ external_video_id }}?playsinline=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if mute_video %}mute=1&{% endif %}{% if loop %}loop=1&{% endif %}playlist={{ external_video_id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}"
+                  allow="autoplay; encrypted-media"
+                  allowfullscreen="allowfullscreen"
+                ></iframe>
+              {%- elsif external_video_host == 'vimeo' -%}
+                <iframe
+                  src="https://player.vimeo.com/video/{{ external_video_id }}?autopause=1&{% if autoplay %}autoplay=1&{% endif %}{% unless show_controls %}controls=0&{% endunless %}{% if loop %}loop=1&{% endif %}{% if mute_video %}muted=1&{% endif %}transparent=0&responsive=1&portrait=0&title=0&byline=0"
+                  allow="autoplay; encrypted-media;"
+                  allowfullscreen="allowfullscreen"
+                ></iframe>
+              {%- endif -%}
+            </template>
+          </video-media>
+        {%- else -%}
+          {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
+        {%- endif -%}
+      </div>
     </template>
   </block-video>
 
diff --git a/components/cart-icon/cart-icon.liquid b/components/cart-icon/cart-icon.liquid
index 0375128..42ebb18 100644
--- a/components/cart-icon/cart-icon.liquid
+++ b/components/cart-icon/cart-icon.liquid
@@ -19,7 +19,7 @@
 <is-land on:idle>
   <cart-icon>
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'cart-icon.css' | asset_url | stylesheet_tag }}
 
       <a href="{{ routes.cart_url }}" class="cart-icon">
diff --git a/components/cart-status-notifier/cart-status-notifier.liquid b/components/cart-status-notifier/cart-status-notifier.liquid
index f592831..4eb6104 100644
--- a/components/cart-status-notifier/cart-status-notifier.liquid
+++ b/components/cart-status-notifier/cart-status-notifier.liquid
@@ -15,7 +15,7 @@
 <is-land {{ hydration }}>
   <cart-status-notifier>
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'cart-status-notifier.css' | asset_url | stylesheet_tag }}
 
       <cart-status-notifier class="status" hidden>
diff --git a/components/component-styles/assets/button.css b/components/component-styles/assets/button.css
deleted file mode 100644
index d08e3e5..0000000
--- a/components/component-styles/assets/button.css
+++ /dev/null
@@ -1,16 +0,0 @@
-:host {
-  --button-color: var(--button-color, --color-background, #fff);
-  --button-color-background: var(--button-color-background, --color-foreground, #ccc);
-}
-
-.button {
-  cursor: pointer;
-  display: inline-flex;
-  width: fit-content;
-  background-color: rgb(var(--button-color-background));
-  color: rgb(var(--button-color));
-  text-decoration: none;
-  font-size: var(--size-4);
-  padding: var(--size-3) var(--size-6);
-  border-radius: var(--radius-xs);
-}
diff --git a/components/component-styles/assets/color-schemes.css b/components/component-styles/assets/color-schemes.css
deleted file mode 100644
index 1ff8746..0000000
--- a/components/component-styles/assets/color-schemes.css
+++ /dev/null
@@ -1,32 +0,0 @@
-:host {
-  --color-scheme-1-bg: var(--color-scheme-1-bg, 255, 255, 255); /* Default to white */
-  --color-scheme-1-text: var(--color-scheme-1-text, 0, 0, 0); /* Default to black */
-  --color-scheme-2-bg: var(--color-scheme-2-bg, 240, 240, 240); /* Default to light grey */
-  --color-scheme-2-text: var(--color-scheme-2-text, 0, 0, 0); /* Default to black */
-  --color-scheme-3-bg: var(--color-scheme-3-bg, 0, 0, 0); /* Default to black */
-  --color-scheme-3-text: var(--color-scheme-3-text, 255, 255, 255); /* Default to white */
-}
-
-[data-color-scheme='scheme-1'] {
-  --color-background: var(--color-scheme-1-bg);
-  --color-foreground: var(--color-scheme-1-text);
-
-  background-color: rgb(var(--color-background));
-  color: rgb(var(--color-foreground));
-}
-
-[data-color-scheme='scheme-2'] {
-  --color-background: var(--color-scheme-2-bg);
-  --color-foreground: var(--color-scheme-2-text);
-
-  background-color: rgb(var(--color-background));
-  color: rgb(var(--color-foreground));
-}
-
-[data-color-scheme='scheme-3'] {
-  --color-background: var(--color-scheme-3-bg);
-  --color-foreground: var(--color-scheme-3-text);
-
-  background-color: rgb(var(--color-background));
-  color: rgb(var(--color-foreground));
-}
diff --git a/components/component-styles/assets/size.css b/components/component-styles/assets/size.css
deleted file mode 100644
index a6ab8a9..0000000
--- a/components/component-styles/assets/size.css
+++ /dev/null
@@ -1,43 +0,0 @@
-:host {
-  --size-0-5: var(--size-0-5, 0.125rem); /* 2px */
-  --size-1: var(--size-1, 0.25rem); /* 4px */
-  --size-1-5: var(--size-1-5, 0.375rem); /* 6px */
-  --size-2: var(--size-2, 0.5rem); /* 8px */
-  --size-2-5: var(--size-2-5, 0.625rem); /* 10px */
-  --size-3: var(--size-3, 0.75rem); /* 12px */
-  --size-3-5: var(--size-3-5, 0.875rem); /* 14px */
-  --size-4: var(--size-4, 1rem); /* 16px */
-  --size-4-5: var(--size-4-5, 1.125rem); /* 18px */
-  --size-5: var(--size-5, 1.25rem); /* 20px */
-  --size-5-5: var(--size-5-5, 1.375rem); /* 22px */
-  --size-6: var(--size-6, 1.5rem); /* 24px */
-  --size-6-5: var(--size-6-5, 1.625rem); /* 26px */
-  --size-7: var(--size-7, 1.75rem); /* 28px */
-  --size-7-5: var(--size-7-5, 1.875rem); /* 30px */
-  --size-8: var(--size-8, 2rem); /* 32px */
-  --size-8-5: var(--size-8-5, 2.125rem); /* 34px */
-  --size-9: var(--size-9, 2.25rem); /* 36px */
-  --size-9-5: var(--size-9-5, 2.375rem); /* 38px */
-  --size-10: var(--size-10, 2.5rem); /* 40px */
-  --size-11: var(--size-11, 2.75rem); /* 44px */
-  --size-12: var(--size-12, 3rem); /* 48px */
-  --size-14: var(--size-14, 3.5rem); /* 56px */
-  --size-16: var(--size-16, 4rem); /* 64px */
-  --size-18: var(--size-18, 4.5rem); /* 72px */
-  --size-20: var(--size-20, 5rem); /* 80px */
-  --size-24: var(--size-24, 6rem); /* 96px */
-  --size-28: var(--size-28, 7rem); /* 112px */
-  --size-32: var(--size-32, 8rem); /* 128px */
-}
-
-:host {
-  /* Border radiuses */
-  --radius-xs: var(--radius-xs, --size-1 0.25rem);
-  --radius-sm: var(--radius-sm, --size-2 0.5rem);
-  --radius-md: var(--radius-md, --size-3 0.75rem);
-  --radius-lg: var(--radius-lg, --size-4 1rem);
-  --radius-xl: var(--radius-xl, --size-6 1.5rem);
-  --radius-2xl: var(--radius-2xl, --size-8 2rem);
-  --radius-rounded: var(--radius-rounded, 9999px);
-  --radius-none: var(--radius-none, 0);
-}
diff --git a/components/component-styles/assets/theme.css b/components/component-styles/assets/theme.css
deleted file mode 100644
index 8317649..0000000
--- a/components/component-styles/assets/theme.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* 
-A place for you to add theme specific styles
-You should add this file to the ignore list in the shopify.config.toml
-so that any customizations don't get erased
-*/
diff --git a/components/component-styles/component-styles.liquid b/components/component-styles/component-styles.liquid
deleted file mode 100644
index 594253d..0000000
--- a/components/component-styles/component-styles.liquid
+++ /dev/null
@@ -1,53 +0,0 @@
-{%- comment -%}
-  Renders the list of CSS token variables
-
-  Accepts:
-  - styles [''] - List of optional stylesheets to include. Defaults to all.
-
-  Usage:
-  {% render 'component-styles' %}
-{%- endcomment -%}
-
-{%- capture required_styles -%}
-  size,
-  base,
-  util
-{%- endcapture -%}
-
-{%- capture optional_styles -%}
-  aspect-ratio,
-  button,
-  color-schemes,
-  page-width,
-  placeholder-svg,
-  position,
-  rte,
-  select,
-  table,
-  typography,
-  util
-{%- endcapture -%}
-
-{% assign styles = styles | split: ', ' %}
-{% assign load_all = styles == blank %}
-{% assign required_styles_array = required_styles | split: ', ' %}
-{% assign optional_styles_array = optional_styles | split: ', ' %}
-
-{% render 'font-faces' %}
-
-{%- style -%}
-  /* ASSUMED TO BE NEEDED FOR EVERY COMPONENT */
-  {% for style in required_styles_array %}
-    @import url('{{ style | append: ".css" | asset_url }}');
-  {% endfor %}
-
-  /* SELECTIVE STYLES IF SPECIFIED PER COMPONENT */
-  {% for style in optional_styles_array %}
-    {% if load_all or styles contains style %}
-      @import url('{{ style | append: ".css" | asset_url }}');
-    {% endif %}
-  {% endfor %}
-
-  /* GLOBAL THEME-LEVEL OVERRIDES */
-  @import url('{{ 'theme.css' |  asset_url}}');
-{%- endstyle -%}
diff --git a/components/icon/icon.liquid b/components/icon/icon.liquid
index 582a685..e7ed826 100644
--- a/components/icon/icon.liquid
+++ b/components/icon/icon.liquid
@@ -37,7 +37,6 @@
     name="{{ name }}"
     style="display: flex;"
   >
-    <template shadowrootmode="open"> </template>
   </x-icon>
 
   <template data-island>
diff --git a/components/line-item-quantity/line-item-quantity.liquid b/components/line-item-quantity/line-item-quantity.liquid
index 84e2428..bbd38af 100644
--- a/components/line-item-quantity/line-item-quantity.liquid
+++ b/components/line-item-quantity/line-item-quantity.liquid
@@ -18,7 +18,7 @@
 <is-land {{ hydration }}>
   <line-item-quantity class="line-item-quantity" index="{{ line_item.index | plus: 1 }}" section-id="{{ section.id }}">
     <template shadowrootmode="open">
-      {% render 'component-styles' %}
+      {% render 'styles-component' %}
       {{ 'line-item-quantity.css' | asset_url | stylesheet_tag }}
 
       <input type="text" inputmode="numeric" value="{{ line_item.quantity }}" min="1">
diff --git a/components/line-item/line-item.liquid b/components/line-item/line-item.liquid
index 4615a56..7c40c24 100644
--- a/components/line-item/line-item.liquid
+++ b/components/line-item/line-item.liquid
@@ -24,7 +24,7 @@
 
 <line-item class="line-item">
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'line-item.css' | asset_url | stylesheet_tag }}
 
     <div class="info">
diff --git a/components/product-description/product-description.liquid b/components/product-description/product-description.liquid
index 1ad2e74..ea1d201 100644
--- a/components/product-description/product-description.liquid
+++ b/components/product-description/product-description.liquid
@@ -18,7 +18,7 @@
 
 <product-description>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
 
     <div class="rte clearfix">
       {{- description -}}
diff --git a/components/product-media-gallery/assets/product-media-gallery.css b/components/product-media-gallery/assets/product-media-gallery.css
index fa042cf..5307e76 100644
--- a/components/product-media-gallery/assets/product-media-gallery.css
+++ b/components/product-media-gallery/assets/product-media-gallery.css
@@ -11,8 +11,10 @@
   scroll-padding-left: var(--page-width-padding);
   scroll-padding-right: var(--page-width-padding);
   scroll-behavior: smooth;
+}
 
-  @media only screen and (min-width: 769px) {
+@media only screen and (min-width: 769px) {
+  :host {
     grid-auto-flow: row;
     padding-left: 0;
     padding-right: 0;
@@ -24,8 +26,10 @@
   aspect-ratio: 1 / 1;
   scroll-snap-align: center;
   overflow: clip;
+}
 
-  @media only screen and (min-width: 769px) {
+@media only screen and (min-width: 769px) {
+  .product-media-gallery__item {
     width: 100%;
   }
 }
diff --git a/components/product-media-gallery/product-media-gallery.liquid b/components/product-media-gallery/product-media-gallery.liquid
index 366a032..4e67ffa 100644
--- a/components/product-media-gallery/product-media-gallery.liquid
+++ b/components/product-media-gallery/product-media-gallery.liquid
@@ -15,7 +15,7 @@
 
 <product-media-gallery class="product-media-gallery">
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'product-media-gallery.css' | asset_url | stylesheet_tag }}
 
     {%- for media in product.media -%}
diff --git a/components/section-header/section-header.liquid b/components/section-header/section-header.liquid
index 16240fa..df7e1df 100644
--- a/components/section-header/section-header.liquid
+++ b/components/section-header/section-header.liquid
@@ -20,7 +20,7 @@
 
 <section-header data-color-scheme="{{ color_scheme }}">
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'section-header.css' | asset_url | stylesheet_tag }}
 
     <div class="page-width">
diff --git a/components/section-main-cart/section-main-cart.liquid b/components/section-main-cart/section-main-cart.liquid
index e88a50d..c7ab961 100644
--- a/components/section-main-cart/section-main-cart.liquid
+++ b/components/section-main-cart/section-main-cart.liquid
@@ -31,7 +31,7 @@
 
 <section-main-cart data-color-scheme="{{ color_scheme }}">
   <template shadowrootmode="open">
-    {% render 'component-styles', styles: 'buttons, typography' %}
+    {% render 'styles-component', styles: 'buttons, typography' %}
     {{ 'section-main-cart.css' | asset_url | stylesheet_tag }}
 
     <div class="page-width">
diff --git a/components/section-main-product/assets/section-main-product.css b/components/section-main-product/assets/section-main-product.css
index 701c6d4..69ff8ae 100644
--- a/components/section-main-product/assets/section-main-product.css
+++ b/components/section-main-product/assets/section-main-product.css
@@ -16,12 +16,12 @@
   }
 }
 
-.media-gallery {
+.main-product__media-gallery {
   display: grid;
   width: 100%;
 }
 
-.info {
+.main-product__info {
   padding: var(--size-7) var(--size-5);
   display: flex;
   flex-direction: column;
@@ -30,7 +30,7 @@
   top: 0;
   align-self: flex-start;
 
-  @media only screen and (min-width: 769px) {
+  @media (--medium-up) {
     padding: var(--size-12) 0 var(--size-10) 0;
     gap: var(--size-8);
   }
diff --git a/components/section-main-product/section-main-product.liquid b/components/section-main-product/section-main-product.liquid
index 86dd1b0..6b8584c 100644
--- a/components/section-main-product/section-main-product.liquid
+++ b/components/section-main-product/section-main-product.liquid
@@ -35,7 +35,7 @@
   data-image-position="{{ image_position }}"
 >
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
 
     <div class="main-product__media-gallery">
diff --git a/components/section-media-with-text/section-media-with-text.liquid b/components/section-media-with-text/section-media-with-text.liquid
index 086790a..667f565 100644
--- a/components/section-media-with-text/section-media-with-text.liquid
+++ b/components/section-media-with-text/section-media-with-text.liquid
@@ -38,7 +38,7 @@
 %}
 <section-media-with-text>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'media-with-text.css' | asset_url | stylesheet_tag }}
 
     <section
diff --git a/components/component-styles/assets/aspect-ratio.css b/components/styles-component/assets/aspect-ratio.css
similarity index 100%
rename from components/component-styles/assets/aspect-ratio.css
rename to components/styles-component/assets/aspect-ratio.css
diff --git a/components/component-styles/assets/base.css b/components/styles-component/assets/base.css
similarity index 74%
rename from components/component-styles/assets/base.css
rename to components/styles-component/assets/base.css
index 87a0830..57c2b56 100644
--- a/components/component-styles/assets/base.css
+++ b/components/styles-component/assets/base.css
@@ -1,3 +1,7 @@
+:host {
+  font: var(--body-font-style) var(--body-font-weight) var(--text-base) / 1.65 var(--body-font-family);
+}
+
 *,
 input,
 :before,
@@ -6,23 +10,6 @@ input,
   box-sizing: border-box;
 }
 
-html {
-  touch-action: manipulation;
-}
-
-html[dir='rtl'] {
-  direction: rtl;
-}
-
-html,
-body {
-  background-color: rgb(243 243 243);
-  color: rgb(18 18 18);
-  line-height: 1.4;
-  padding: 0;
-  margin: 0;
-}
-
 :host *,
 :host *::before,
 :host *::after {
diff --git a/components/styles-component/assets/button.css b/components/styles-component/assets/button.css
new file mode 100644
index 0000000..f142092
--- /dev/null
+++ b/components/styles-component/assets/button.css
@@ -0,0 +1,11 @@
+.button {
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+  background-color: rgb(var(--color-button-background));
+  color: rgb(var(--color-button-text));
+  text-decoration: none;
+  font-size: var(--size-4);
+  padding: var(--size-3) var(--size-6);
+  border-radius: var(--radius-xs);
+}
diff --git a/components/styles-component/assets/color-schemes.css b/components/styles-component/assets/color-schemes.css
new file mode 100644
index 0000000..70f7a22
--- /dev/null
+++ b/components/styles-component/assets/color-schemes.css
@@ -0,0 +1,35 @@
+[data-color-scheme='scheme-1'],
+:host([data-color-scheme='scheme-1']) {
+  --color-background: var(--color-scheme-1-bg);
+  --color-foreground: var(--color-scheme-1-text);
+
+  --color-button-text: var(--color-scheme-1-bg);
+  --color-button-background: var(--color-scheme-1-text);
+
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-foreground));
+}
+
+[data-color-scheme='scheme-2'],
+:host([data-color-scheme='scheme-2']) {
+  --color-background: var(--color-scheme-2-bg);
+  --color-foreground: var(--color-scheme-2-text);
+
+  --color-button-text: var(--color-scheme-2-bg);
+  --color-button-background: var(--color-scheme-2-text);
+
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-foreground));
+}
+
+[data-color-scheme='scheme-3'],
+:host([data-color-scheme='scheme-3']) {
+  --color-background: var(--color-scheme-3-bg);
+  --color-foreground: var(--color-scheme-3-text);
+
+  --color-button-text: var(--color-scheme-3-bg);
+  --color-button-background: var(--color-scheme-3-text);
+
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-foreground));
+}
diff --git a/components/component-styles/assets/page-width.css b/components/styles-component/assets/page-width.css
similarity index 71%
rename from components/component-styles/assets/page-width.css
rename to components/styles-component/assets/page-width.css
index 11f8cec..d43eff2 100644
--- a/components/component-styles/assets/page-width.css
+++ b/components/styles-component/assets/page-width.css
@@ -1,14 +1,3 @@
-:host {
-  --page-width: var(--page-width, 1500px);
-  --page-width-padding: var(--page-width-padding, --size-10);
-}
-
-@media screen and (max-width: 768px) {
-  :root {
-    --page-width-padding: var(--size-5);
-  }
-}
-
 .page-width,
 [data-page-width] {
   padding-inline: var(--page-width-padding);
diff --git a/components/component-styles/assets/placeholder-svg.css b/components/styles-component/assets/placeholder-svg.css
similarity index 100%
rename from components/component-styles/assets/placeholder-svg.css
rename to components/styles-component/assets/placeholder-svg.css
diff --git a/components/component-styles/assets/position.css b/components/styles-component/assets/position.css
similarity index 100%
rename from components/component-styles/assets/position.css
rename to components/styles-component/assets/position.css
diff --git a/components/component-styles/assets/rte.css b/components/styles-component/assets/rte.css
similarity index 100%
rename from components/component-styles/assets/rte.css
rename to components/styles-component/assets/rte.css
diff --git a/components/component-styles/assets/select.css b/components/styles-component/assets/select.css
similarity index 100%
rename from components/component-styles/assets/select.css
rename to components/styles-component/assets/select.css
diff --git a/components/component-styles/assets/table.css b/components/styles-component/assets/table.css
similarity index 100%
rename from components/component-styles/assets/table.css
rename to components/styles-component/assets/table.css
diff --git a/components/component-styles/assets/typography.css b/components/styles-component/assets/typography.css
similarity index 69%
rename from components/component-styles/assets/typography.css
rename to components/styles-component/assets/typography.css
index d89f2af..ee0a21d 100644
--- a/components/component-styles/assets/typography.css
+++ b/components/styles-component/assets/typography.css
@@ -1,27 +1,3 @@
-:host {
-  --text-xs: var(--text-xs, --size-3);
-  --text-sm: var(--text-sm, --size-3-5);
-  --text-base: var(--text-base, --size-4);
-  --text-lg: var(--text-lg, --size-4-5);
-  --text-xl: var(--text-xl, --size-5);
-  --text-2xl: var(--text-2xl, --size-6);
-  --text-3xl: var(--text-3xl, --size-8);
-  --text-4xl: var(--text-4xl, --size-9);
-  --text-5xl: var(--text-5xl, --size-10);
-  --text-6xl: var(--text-6xl, --size-12);
-  --text-7xl: var(--text-7xl, --size-14);
-  --text-8xl: var(--text-8xl, --size-16);
-  --text-9xl: var(--text-9xl, --size-20);
-
-  --heading-font-family: var(--heading-font-family, Georgia, 'Times New Roman', Times, serif);
-  --heading-font-weight: var(--heading-font-weight, 700); /* Bold weight */
-  --heading-font-style: var(--heading-font-style, normal); /* Normal style */
-
-  --body-font-family: var(--body-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-  --body-font-weight: var(--body-font-weight, 400); /* Normal weight */
-  --body-font-style: var(--body-font-style, normal); /* Normal style */
-}
-
 body,
 input,
 textarea,
@@ -169,21 +145,21 @@ h6 {
 
 .h1,
 .rte :where(h1) {
-  font-size: var(--size-10);
+  font-size: var(--text-5xl);
   line-height: 1.1;
 
   @media only screen and (min-width: 769px) {
-    font-size: var(--size-16);
+    font-size: var(--text-8xl);
   }
 }
 
 .h2,
 .rte :where(h2) {
-  font-size: var(--size-9);
+  font-size: var(--text-4xl);
   line-height: 1.1;
 
   @media only screen and (min-width: 769px) {
-    font-size: var(--size-14);
+    font-size: var(--text-7xl);
   }
 }
 
diff --git a/components/component-styles/assets/util.css b/components/styles-component/assets/util.css
similarity index 100%
rename from components/component-styles/assets/util.css
rename to components/styles-component/assets/util.css
diff --git a/components/styles-component/styles-component.liquid b/components/styles-component/styles-component.liquid
new file mode 100644
index 0000000..a2fb93a
--- /dev/null
+++ b/components/styles-component/styles-component.liquid
@@ -0,0 +1,37 @@
+{%- comment -%}
+  Renders the list of CSS token variables
+
+  Usage:
+  {% render 'styles-component' %}
+{%- endcomment -%}
+
+{%- capture styles -%}
+  base,
+  util,
+  aspect-ratio,
+  button,
+  color-schemes,
+  page-width,
+  placeholder-svg,
+  position,
+  rte,
+  select,
+  table,
+  typography,
+  util
+{%- endcapture -%}
+
+{% assign styles = styles | split: ',' %}
+
+<style>
+  /* Shared styles */
+  {%- for style in styles -%}
+      @import url('{{ style | append: ".css" | asset_url }}');
+  {%- endfor -%}
+
+  /* Theme project level overrides */
+  @import url('{{ 'theme.css' |  asset_url }}');
+
+  /* Store install level overrides */
+  @import url('{{ 'custom.css' |  asset_url }}');
+</style>
diff --git a/components/styles-head/assets/custom.css b/components/styles-head/assets/custom.css
new file mode 100644
index 0000000..056f7e5
--- /dev/null
+++ b/components/styles-head/assets/custom.css
@@ -0,0 +1,4 @@
+/* 
+ * A place for store owners to add custom css for their particular
+ * store, outside of the theme versioning. 
+ */
diff --git a/components/styles-head/assets/design-tokens.css b/components/styles-head/assets/design-tokens.css
new file mode 100644
index 0000000..30a3380
--- /dev/null
+++ b/components/styles-head/assets/design-tokens.css
@@ -0,0 +1,85 @@
+:root {
+  /* Sizes */
+  --size-0-5: 0.125rem; /* 2px */
+  --size-1: 0.25rem; /* 4px */
+  --size-1-5: 0.375rem; /* 6px */
+  --size-2: 0.5rem; /* 8px */
+  --size-2-5: 0.625rem; /* 10px */
+  --size-3: 0.75rem; /* 12px */
+  --size-3-5: 0.875rem; /* 14px */
+  --size-4: 1rem; /* 16px */
+  --size-4-5: 1.125rem; /* 18px */
+  --size-5: 1.25rem; /* 20px */
+  --size-5-5: 1.375rem; /* 22px */
+  --size-6: 1.5rem; /* 24px */
+  --size-6-5: 1.625rem; /* 26px */
+  --size-7: 1.75rem; /* 28px */
+  --size-7-5: 1.875rem; /* 30px */
+  --size-8: 2rem; /* 32px */
+  --size-8-5: 2.125rem; /* 34px */
+  --size-9: 2.25rem; /* 36px */
+  --size-9-5: 2.375rem; /* 38px */
+  --size-10: 2.5rem; /* 40px */
+  --size-11: 2.75rem; /* 44px */
+  --size-12: 3rem; /* 48px */
+  --size-14: 3.5rem; /* 56px */
+  --size-16: 4rem; /* 64px */
+  --size-18: 4.5rem; /* 72px */
+  --size-20: 5rem; /* 80px */
+  --size-24: 6rem; /* 96px */
+  --size-28: 7rem; /* 112px */
+  --size-32: 8rem; /* 128px */
+
+  /* Layout */
+  --page-width: 1500px;
+  --page-width-padding: var(--size-10);
+
+  /* Typography */
+  --heading-font-family: Georgia, 'Times New Roman', Times, serif;
+  --heading-font-weight: 700;
+  --heading-font-style: normal;
+
+  --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --body-font-weight: 400;
+  --body-font-style: normal;
+
+  --text-xs: var(--size-3);
+  --text-sm: var(--size-3-5);
+  --text-base: var(--size-4);
+  --text-lg: var(--size-4-5);
+  --text-xl: var(--size-5);
+  --text-2xl: var(--size-6);
+  --text-3xl: var(--size-8);
+  --text-4xl: var(--size-9);
+  --text-5xl: var(--size-10);
+  --text-6xl: var(--size-12);
+  --text-7xl: var(--size-14);
+  --text-8xl: var(--size-16);
+  --text-9xl: var(--size-20);
+
+  /* Border radiuses */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-2xl: 2rem;
+  --radius-rounded: 9999px;
+  --radius-none: 0;
+
+  /* Color schemes */
+  --color-scheme-1-bg: rgb(255, 255, 255);
+  --color-scheme-1-text: rgb(0, 0, 0);
+  --color-scheme-2-bg: rgb(240, 240, 240);
+  --color-scheme-2-text: rgb(0, 0, 0);
+  --color-scheme-3-bg: rgb(0, 0, 0);
+  --color-scheme-3-text: rgb(255, 255, 255);
+
+  /* Buttons */
+}
+
+@media screen and (max-width: 768px) {
+  :root {
+    --page-width-padding: var(--size-5);
+  }
+}
diff --git a/components/styles-head/assets/theme.css b/components/styles-head/assets/theme.css
new file mode 100644
index 0000000..5a08c91
--- /dev/null
+++ b/components/styles-head/assets/theme.css
@@ -0,0 +1,13 @@
+/* 
+ * A place for you to add theme specific styles
+ * You should add this file to the ignore list in the shopify.config.toml
+ * so that any customizations don't get erased
+ */
+
+:host-context(block-rich-text) .h2 {
+  font-size: var(--size-20);
+}
+
+section-media-with-text {
+  color: red;
+}
diff --git a/components/font-faces/font-faces.liquid b/components/styles-head/styles-head.liquid
similarity index 51%
rename from components/font-faces/font-faces.liquid
rename to components/styles-head/styles-head.liquid
index ef7bc51..9ba00b7 100644
--- a/components/font-faces/font-faces.liquid
+++ b/components/styles-head/styles-head.liquid
@@ -1,15 +1,26 @@
-{%- comment -%}
-  Renders the font-face declarations for the given fonts (expects heading and body fonts)
-
-  Accepts:
-  - heading_font {font} - The font to use for headings
-  - body_font {font} - The font to use for body text
-
-  Usage:
-  {% render 'font-faces', heading_font: settings.heading_font, body_font: settings.body_font %}
-{%- endcomment -%}
+{{ 'design-tokens.css' | asset_url | stylesheet_tag }}
+{{ 'theme.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
+  :root {
+    /* Typography */
+    --heading-font-family: {{ settings.heading_font.family }}, {{ settings.heading_font.fallback_families }};
+    --heading-font-weight: {{ settings.heading_font.weight }};
+    --heading-font-style: {{ settings.heading_font.style }};
+    --body-font-family: {{ settings.body_font.family }}, {{ settings.body_font.fallback_families }};
+    --body-font-weight: {{ settings.body_font.weight }};
+    --body-font-style: {{ settings.body_font.style }};
+
+    /* Color schemes */
+    --color-scheme-1-bg: {{ settings.color_scheme_1_bg.rgb }};
+    --color-scheme-1-text: {{ settings.color_scheme_1_text.rgb }};
+    --color-scheme-2-bg: {{ settings.color_scheme_2_bg.rgb }};
+    --color-scheme-2-text: {{ settings.color_scheme_2_text.rgb }};
+    --color-scheme-3-bg: {{ settings.color_scheme_3_bg.rgb }};
+    --color-scheme-3-text: {{ settings.color_scheme_3_text.rgb }};
+  }
+
+  /* Font Faces */
   {%- liquid
     assign heading_font = heading_font | default: settings.heading_font
     assign body_font = body_font | default: settings.body_font
@@ -45,3 +56,5 @@
     endif
   -%}
 {%- endstyle -%}
+
+{{ 'custom.css' | asset_url | stylesheet_tag }}
diff --git a/components/variant-button/variant-button.liquid b/components/variant-button/variant-button.liquid
index 040a5b2..04171e4 100644
--- a/components/variant-button/variant-button.liquid
+++ b/components/variant-button/variant-button.liquid
@@ -23,7 +23,7 @@
 
 <variant-button>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
     {{ 'variant-button.css' | asset_url | stylesheet_tag }}
 
     <fieldset class="variant-button">
diff --git a/components/variant-dropdown/variant-dropdown.liquid b/components/variant-dropdown/variant-dropdown.liquid
index d2000c7..2528680 100644
--- a/components/variant-dropdown/variant-dropdown.liquid
+++ b/components/variant-dropdown/variant-dropdown.liquid
@@ -14,7 +14,7 @@
 
 <variant-dropdown>
   <template shadowrootmode="open">
-    {% render 'component-styles' %}
+    {% render 'styles-component' %}
 
     <label for="Option-{{ section.id }}-{{ forloop.index0 }}">
       {{- option.name -}}

From bbcd487378dac6016805bc0b9a53aaf36a757341 Mon Sep 17 00:00:00 2001
From: Thomas Kelly <thomas@archetypethemes.co>
Date: Thu, 6 Jun 2024 15:24:41 -0400
Subject: [PATCH 7/7] Remove junk comment

---
 components/block-buy-buttons/block-buy-buttons.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/block-buy-buttons/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index 5fa3550..b46ca03 100644
--- a/components/block-buy-buttons/block-buy-buttons.liquid
+++ b/components/block-buy-buttons/block-buy-buttons.liquid
@@ -11,7 +11,7 @@
 
 {%- liquid
   assign form_id = 'product-form-' | append: section.id
-  # param
+
   assign show_dynamic_checkout = false
 
   if block.settings.show_dynamic_checkout