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..300d678
--- /dev/null
+++ b/components/block-buy-buttons/assets/block-buy-buttons.css
@@ -0,0 +1,44 @@
+:host {
+  display: block;
+}
+
+.shopify-payment-button {
+  margin-top: var(--size-3);
+
+  @media only screen and (min-width: 769px) {
+    margin-top: var(--size-5);
+  }
+}
+
+.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 {
+    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/block-buy-buttons.liquid b/components/block-buy-buttons/block-buy-buttons.liquid
index a9b7aa0..b46ca03 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">
+    {% render 'styles-component', styles: 'button' %}
+    {{ '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 0166be9..0000000
--- a/components/block-buy-buttons/main.css
+++ /dev/null
@@ -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-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..11e24d5 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,29 @@
   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>
-
-  <button type="submit" name="checkout" class="button">
-    {{ 'actions.checkout' | t }}
-  </button>
+<block-cart-checkout-button {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {% render 'styles-component' %}
+    {{ 'block-cart-checkout-button' | asset_url | stylesheet_tag }}
 
-  {%- 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 class="shipping-copy">
+      {%- if taxes_included -%}
+        {{ 'info.shipping_at_checkout_taxes_included' | t }}
+      {%- else -%}
+        {{ 'info.shipping_at_checkout' | t }}
+      {%- endif -%}
     </div>
-  {%- endif -%}
-</div>
+
+    <button type="submit" name="checkout" class="button">
+      {{ 'actions.checkout' | t }}
+    </button>
+
+    {%- 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..983dc70 100644
--- a/components/block-cart-note/block-cart-note.liquid
+++ b/components/block-cart-note/block-cart-note.liquid
@@ -15,15 +15,19 @@
 %}
 
 <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">
+      {% render 'styles-component' %}
+      {{ '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..ea41de6 100644
--- a/components/block-cart-totals/block-cart-totals.liquid
+++ b/components/block-cart-totals/block-cart-totals.liquid
@@ -9,18 +9,21 @@
   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">
+      {% render 'styles-component' %}
+      {{ '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/main.css b/components/block-image/assets/block-image.css
similarity index 68%
rename from components/block-image/main.css
rename to components/block-image/assets/block-image.css
index 24d9061..24c20f6 100644
--- a/components/block-image/main.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 3b4af14..bc8ecd1 100644
--- a/components/block-image/block-image.liquid
+++ b/components/block-image/block-image.liquid
@@ -23,12 +23,17 @@
   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 class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {% render 'styles-component' %}
+    {{ 'block-image.css' | asset_url | stylesheet_tag }}
+
+    {%- 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/styles/modules/model-viewer.css b/components/block-model/assets/block-model.css
similarity index 65%
rename from styles/modules/model-viewer.css
rename to components/block-model/assets/block-model.css
index ec7cf01..a7e124c 100644
--- a/styles/modules/model-viewer.css
+++ b/components/block-model/assets/block-model.css
@@ -1,3 +1,10 @@
+model-viewer,
+model-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .shopify-model-viewer-ui,
 .shopify-model-viewer-ui model-viewer {
   display: block;
diff --git a/components/block-model/block-model.liquid b/components/block-model/block-model.liquid
index 8baa35d..b4426c4 100644
--- a/components/block-model/block-model.liquid
+++ b/components/block-model/block-model.liquid
@@ -21,32 +21,34 @@
 %}
 
 <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 class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {% render 'styles-component' %}
+      {{ 'block-model.css' | asset_url | 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>
+      {% 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 -%}
+    </template>
+  </block-model>
 
   <template data-island>
     <script type="module">
diff --git a/components/block-model/main.css b/components/block-model/main.css
deleted file mode 100644
index 63ebfa1..0000000
--- a/components/block-model/main.css
+++ /dev/null
@@ -1,6 +0,0 @@
-model-viewer,
-model-media {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
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..70ccde4 100644
--- a/components/block-price/block-price.liquid
+++ b/components/block-price/block-price.liquid
@@ -32,68 +32,73 @@
   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">
+    {% render 'styles-component' %}
+    {{ '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..6f279b2 100644
--- a/components/block-rich-text/block-rich-text.liquid
+++ b/components/block-rich-text/block-rich-text.liquid
@@ -22,30 +22,35 @@
   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">
+    {% render 'styles-component' %}
+    {{ '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" part="title">
+        {{ 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..156a72c 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">
+    {% render 'styles-component' %}
+    {{ '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/block-variant-picker.liquid b/components/block-variant-picker/block-variant-picker.liquid
index 0ad1235..fe29eb7 100644
--- a/components/block-variant-picker/block-variant-picker.liquid
+++ b/components/block-variant-picker/block-variant-picker.liquid
@@ -23,15 +23,26 @@
     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">
+      {% render 'styles-component' %}
+
+      <style>
+        :host {
+          display: grid;
+          gap: var(--size-6);
+        }
+      </style>
+
+      {%- 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-variant-picker/main.css b/components/block-variant-picker/main.css
deleted file mode 100644
index 6a0bc97..0000000
--- a/components/block-variant-picker/main.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.block-variant-picker {
-  display: grid;
-  gap: var(--size-6);
-}
diff --git a/components/block-video/main.css b/components/block-video/assets/block-video.css
similarity index 94%
rename from components/block-video/main.css
rename to components/block-video/assets/block-video.css
index ca20358..f848b4c 100644
--- a/components/block-video/main.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 b5a07ae..670e7da 100644
--- a/components/block-video/block-video.liquid
+++ b/components/block-video/block-video.liquid
@@ -32,54 +32,58 @@
 %}
 
 <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>
+  <block-video {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {% render 'styles-component' %}
+      {{ 'block-video.css' | asset_url | stylesheet_tag }}
+
+      <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>
 
   {% if video != blank or external_video != blank %}
     <template data-island>
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..42ebb18 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">
+      {% render 'styles-component' %}
+      {{ '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..4eb6104 100644
--- a/components/cart-status-notifier/cart-status-notifier.liquid
+++ b/components/cart-status-notifier/cart-status-notifier.liquid
@@ -13,11 +13,17 @@
 -%}
 
 <is-land {{ hydration }}>
-  <cart-status-notifier class="status" hidden>
-    {%- render 'icon', name: 'alert' -%}
-    <span></span>
-  </cart-status-notifier>
+  <cart-status-notifier>
+    <template shadowrootmode="open">
+      {% render 'styles-component' %}
+      {{ '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/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/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/icon.liquid b/components/icon/icon.liquid
index 3089168..e7ed826 100644
--- a/components/icon/icon.liquid
+++ b/components/icon/icon.liquid
@@ -35,6 +35,7 @@
   <x-icon
     src="{{ url }}"
     name="{{ name }}"
+    style="display: flex;"
   >
   </x-icon>
 
diff --git a/components/icon/main.css b/components/icon/main.css
deleted file mode 100644
index 0150ced..0000000
--- a/components/icon/main.css
+++ /dev/null
@@ -1,3 +0,0 @@
-x-icon {
-  display: flex;
-}
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..bbd38af 100644
--- a/components/line-item-quantity/line-item-quantity.liquid
+++ b/components/line-item-quantity/line-item-quantity.liquid
@@ -17,8 +17,13 @@
 
 <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">
+      {% render 'styles-component' %}
+      {{ '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..7c40c24 100644
--- a/components/line-item/line-item.liquid
+++ b/components/line-item/line-item.liquid
@@ -10,38 +10,43 @@
   {%- 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>
-
-    {%- 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 -%}
+{%- 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">
+    {% render 'styles-component' %}
+    {{ 'line-item.css' | asset_url | stylesheet_tag }}
+
+    <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..ea1d201 100644
--- a/components/product-description/product-description.liquid
+++ b/components/product-description/product-description.liquid
@@ -16,6 +16,12 @@
   endunless
 -%}
 
-<div class="rte clearfix">
-  {{- description -}}
-</div>
+<product-description>
+  <template shadowrootmode="open">
+    {% render 'styles-component' %}
+
+    <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..5307e76 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);
@@ -15,8 +11,10 @@
   scroll-padding-left: var(--page-width-padding);
   scroll-padding-right: var(--page-width-padding);
   scroll-behavior: smooth;
+}
 
-  @media (--medium-up) {
+@media only screen and (min-width: 769px) {
+  :host {
     grid-auto-flow: row;
     padding-left: 0;
     padding-right: 0;
@@ -28,8 +26,10 @@
   aspect-ratio: 1 / 1;
   scroll-snap-align: center;
   overflow: clip;
+}
 
-  @media (--medium-up) {
+@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 53e9675..4e67ffa 100644
--- a/components/product-media-gallery/product-media-gallery.liquid
+++ b/components/product-media-gallery/product-media-gallery.liquid
@@ -14,30 +14,35 @@
 -%}
 
 <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">
+    {% render 'styles-component' %}
+    {{ '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..df7e1df 100644
--- a/components/section-header/section-header.liquid
+++ b/components/section-header/section-header.liquid
@@ -18,39 +18,44 @@
   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">
+    {% render 'styles-component' %}
+    {{ '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..c7ab961 100644
--- a/components/section-main-cart/section-main-cart.liquid
+++ b/components/section-main-cart/section-main-cart.liquid
@@ -29,51 +29,56 @@
   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">
+    {% render 'styles-component', styles: 'buttons, typography' %}
+    {{ '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 75%
rename from components/section-main-product/main.css
rename to components/section-main-product/assets/section-main-product.css
index a414d58..69ff8ae 100644
--- a/components/section-main-product/main.css
+++ b/components/section-main-product/assets/section-main-product.css
@@ -1,20 +1,16 @@
-@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%;
     }
   }
diff --git a/components/section-main-product/section-main-product.liquid b/components/section-main-product/section-main-product.liquid
index 9465b39..6b8584c 100644
--- a/components/section-main-product/section-main-product.liquid
+++ b/components/section-main-product/section-main-product.liquid
@@ -29,23 +29,28 @@
   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">
+    {% render 'styles-component' %}
+    {{ '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/main.css b/components/section-media-with-text/assets/media-with-text.css
similarity index 72%
rename from components/section-media-with-text/main.css
rename to components/section-media-with-text/assets/media-with-text.css
index e250f67..f87103e 100644
--- a/components/section-media-with-text/main.css
+++ b/components/section-media-with-text/assets/media-with-text.css
@@ -1,18 +1,8 @@
-@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;
   flex-direction: column;
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     display: grid;
     justify-content: space-between;
 
@@ -42,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%;
     }
@@ -58,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']) {
@@ -70,7 +60,7 @@
     }
   }
 
-  @media (--medium-up) {
+  @media only screen and (min-width: 769px) {
     padding: var(--size-7-5) var(--size-14);
   }
 
@@ -82,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 9b90bd6..667f565 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,31 @@
   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">
+    {% render 'styles-component' %}
+    {{ 'media-with-text.css' | asset_url | 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/components/styles-component/assets/aspect-ratio.css
similarity index 62%
rename from styles/helpers/aspect-ratio.css
rename to components/styles-component/assets/aspect-ratio.css
index c61e3e2..0177603 100644
--- a/styles/helpers/aspect-ratio.css
+++ b/components/styles-component/assets/aspect-ratio.css
@@ -1,19 +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;
 }
diff --git a/styles/vendor/normalize.css b/components/styles-component/assets/base.css
similarity index 72%
rename from styles/vendor/normalize.css
rename to components/styles-component/assets/base.css
index b0cad2e..57c2b56 100644
--- a/styles/vendor/normalize.css
+++ b/components/styles-component/assets/base.css
@@ -1,14 +1,19 @@
+:host {
+  font: var(--body-font-style) var(--body-font-weight) var(--text-base) / 1.65 var(--body-font-family);
+}
+
 *,
 input,
 :before,
-:after {
+:after,
+:host {
   box-sizing: border-box;
 }
 
-html,
-body {
-  padding: 0;
-  margin: 0;
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: inherit;
 }
 
 article,
diff --git a/styles/modules/button.css b/components/styles-component/assets/button.css
similarity index 67%
rename from styles/modules/button.css
rename to components/styles-component/assets/button.css
index 953ffc6..f142092 100644
--- a/styles/modules/button.css
+++ b/components/styles-component/assets/button.css
@@ -2,8 +2,8 @@
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
-  background-color: rgb(var(--color-foreground));
-  color: rgb(var(--color-background));
+  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);
diff --git a/styles/helpers/color-schemes.css b/components/styles-component/assets/color-schemes.css
similarity index 51%
rename from styles/helpers/color-schemes.css
rename to components/styles-component/assets/color-schemes.css
index 1c59208..70f7a22 100644
--- a/styles/helpers/color-schemes.css
+++ b/components/styles-component/assets/color-schemes.css
@@ -1,23 +1,35 @@
-[data-color-scheme='scheme-1'] {
+[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'] {
+[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'] {
+[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/styles/layout/page-width.css b/components/styles-component/assets/page-width.css
similarity index 83%
rename from styles/layout/page-width.css
rename to components/styles-component/assets/page-width.css
index affb57b..d43eff2 100644
--- a/styles/layout/page-width.css
+++ b/components/styles-component/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/styles-component/assets/placeholder-svg.css
similarity index 100%
rename from styles/helpers/placeholder-svg.css
rename to components/styles-component/assets/placeholder-svg.css
diff --git a/styles/helpers/position.css b/components/styles-component/assets/position.css
similarity index 100%
rename from styles/helpers/position.css
rename to components/styles-component/assets/position.css
diff --git a/styles/modules/rte.css b/components/styles-component/assets/rte.css
similarity index 92%
rename from styles/modules/rte.css
rename to components/styles-component/assets/rte.css
index df659e9..d20b51c 100644
--- a/styles/modules/rte.css
+++ b/components/styles-component/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/styles-component/assets/select.css
similarity index 100%
rename from styles/modules/select.css
rename to components/styles-component/assets/select.css
diff --git a/styles/modules/table.css b/components/styles-component/assets/table.css
similarity index 76%
rename from styles/modules/table.css
rename to components/styles-component/assets/table.css
index 7778c0f..0bc462e 100644
--- a/styles/modules/table.css
+++ b/components/styles-component/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/styles-component/assets/typography.css
similarity index 78%
rename from styles/helpers/typography.css
rename to components/styles-component/assets/typography.css
index ba1a67a..ee0a21d 100644
--- a/styles/helpers/typography.css
+++ b/components/styles-component/assets/typography.css
@@ -2,7 +2,11 @@ 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%;
@@ -141,21 +145,21 @@ h6 {
 
 .h1,
 .rte :where(h1) {
-  font-size: var(--size-10);
+  font-size: var(--text-5xl);
   line-height: 1.1;
 
-  @media (--medium-up) {
-    font-size: var(--size-16);
+  @media only screen and (min-width: 769px) {
+    font-size: var(--text-8xl);
   }
 }
 
 .h2,
 .rte :where(h2) {
-  font-size: var(--size-9);
+  font-size: var(--text-4xl);
   line-height: 1.1;
 
-  @media (--medium-up) {
-    font-size: var(--size-14);
+  @media only screen and (min-width: 769px) {
+    font-size: var(--text-7xl);
   }
 }
 
@@ -164,7 +168,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 +178,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 +188,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 +198,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/styles/helpers/visibility.css b/components/styles-component/assets/util.css
similarity index 53%
rename from styles/helpers/visibility.css
rename to components/styles-component/assets/util.css
index 4e926da..ba5994b 100644
--- a/styles/helpers/visibility.css
+++ b/components/styles-component/assets/util.css
@@ -1,4 +1,14 @@
-.visually-hidden {
+.clearfix::after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+[hidden] {
+  display: none;
+}
+
+[visually-hidden] {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
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/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..04171e4 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">
+    {% render 'styles-component' %}
+    {{ '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..2528680 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">
+    {% render 'styles-component' %}
 
-  <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/base.css b/styles/base.css
deleted file mode 100644
index 6c052f4..0000000
--- a/styles/base.css
+++ /dev/null
@@ -1,18 +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;
-}
diff --git a/styles/helpers/clearfix.css b/styles/helpers/clearfix.css
deleted file mode 100644
index 435086d..0000000
--- a/styles/helpers/clearfix.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.clearfix::after {
-  clear: both;
-  content: '';
-  display: table;
-}
diff --git a/styles/helpers/display.css b/styles/helpers/display.css
deleted file mode 100644
index aaa3d95..0000000
--- a/styles/helpers/display.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.hide {
-  display: none;
-}
diff --git a/styles/layout/breakpoints.css b/styles/layout/breakpoints.css
deleted file mode 100644
index 4fc70a7..0000000
--- a/styles/layout/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);