diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js
index 29b71ee..bb05d6e 100644
--- a/src/alpaca-map-marker.js
+++ b/src/alpaca-map-marker.js
@@ -21,147 +21,6 @@ export default class AlpacaMapMarker extends LitElement {
     } /* If a property changes the element re-renders */,
   };
 
-  static styles = [
-    css`
-      /********* FARM MARKERS *********/
-      /* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */
-
-      /* Farm markers */
-
-      .farm-marker {
-        padding: 0.75rem;
-        background-color: white;
-        color: var(--almost-black);
-        transition: all 0.3s ease-out;
-        width: auto;
-        max-width: 15rem;
-        border-radius: 1rem;
-        border-width: 0.2rem;
-        border-style: solid;
-
-        &.public {
-          border-color: var(--public-farm);
-        }
-
-        &.private {
-          border-color: var(--private-farm);
-        }
-
-        .summary {
-          display: flex;
-          gap: 0.5rem;
-          align-items: center;
-          font-size: 1.5rem;
-        }
-
-        .count {
-          font-weight: bolder;
-        }
-
-        .more-info {
-          display: flex;
-          border-radius: 0.5rem;
-          flex: 1;
-          flex-direction: column;
-
-          &:not(.highlight) {
-            display: none;
-          }
-        }
-
-        .city {
-          border-radius: 10px;
-          padding: 0.2rem 0.5rem;
-          border: 1px solid var(--gray-100);
-          max-width: fit-content;
-        }
-
-        .address {
-          font-size: 1rem;
-          font-style: normal;
-          margin-top: 1rem;
-        }
-
-        .farm-marker-link {
-          font-size: 1rem;
-          font-style: normal;
-          margin: 1rem 0 0.5rem 0;
-          border-radius: 1rem;
-          padding: 1rem 0.5rem;
-          border: 0.125rem solid var(--gray-500);
-          box-shadow: 0 0.25rem 0 0.125rem var(--gray-200);
-
-          .text {
-            margin: 0 0 0 1rem;
-          }
-        }
-
-        .farm-marker-link:hover {
-          border-color: var(--pink);
-          box-shadow: 0 0.25rem 0 0.125rem var(--gray-400);
-        }
-
-        .directions,
-        .city address {
-          display: flex;
-          flex-basis: auto;
-          align-items: center;
-          padding: 0 0.25rem 0 0;
-        }
-
-        /* Icons */
-
-        .icon {
-          &.link-arrow {
-            margin-left: 0.5rem;
-          }
-        }
-
-        &.public .icon {
-          color: var(--green);
-        }
-
-        &.private .icon {
-          color: var(--brown);
-        }
-      }
-
-      .farm-marker::after {
-        /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        content: "";
-        height: 0;
-        left: 50%;
-        position: absolute;
-        top: 100%;
-        transform: translateX(-50%) translateY(calc(0.1em * -1));
-        /* translateY inspired from hotels.com */
-        width: 0;
-      }
-
-      .farm-marker.public::after {
-        border-top: 8px solid var(--green);
-      }
-
-      .farm-marker.private::after {
-        border-top: 8px solid var(--brown);
-      }
-
-      /********* Links *********/
-
-      a {
-        color: var(--dark-blue);
-      }
-
-      a:hover {
-        color: var(--pale-blue);
-        text-decoration: underline;
-        text-decoration-thickness: 0.5em;
-      }
-    `,
-  ];
-
   constructor() {
     super();
     this.name;
@@ -180,6 +39,12 @@ export default class AlpacaMapMarker extends LitElement {
     super.connectedCallback();
   }
 
+  createRenderRoot() {
+    // Turns off shadow DOM.
+    // Since AlpacaMapMarker is not used externally, only by AlpacaMap then we want to inherit all styling, so turn off shadow DOM.
+    return this;
+  }
+
   render() {
     return html` <div class="farm-marker ${this.category} ${this.highlight}">
       <div class="summary">
diff --git a/src/alpaca-map.js b/src/alpaca-map.js
index 96e6503..611e805 100644
--- a/src/alpaca-map.js
+++ b/src/alpaca-map.js
@@ -4,6 +4,7 @@ import { MarkerClusterer } from "@googlemaps/markerclusterer";
 import { Loader } from "@googlemaps/js-api-loader";
 
 import STYLED_MAP_TYPE from "./styles-map.js";
+import stylesMapMarker from "./styles-map-marker.js";
 import "./alpaca-map-marker.js";
 import "./alpaca-map-icon.js";
 
@@ -215,6 +216,7 @@ export default class AlpacaMap extends LitElement {
         background-color: var(--pale-blue);
       }
     `,
+    stylesMapMarker,
   ];
 
   constructor() {
diff --git a/src/styles-map-marker.js b/src/styles-map-marker.js
new file mode 100644
index 0000000..ff82b8b
--- /dev/null
+++ b/src/styles-map-marker.js
@@ -0,0 +1,130 @@
+import { css } from "lit";
+
+/**
+ *  Map marker styling
+ *
+ *  Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css
+ *
+ */
+
+export default css`
+  .farm-marker {
+    padding: 0.75rem;
+    background-color: white;
+    color: var(--almost-black);
+    transition: all 0.3s ease-out;
+    width: auto;
+    max-width: 15rem;
+    border-radius: 1rem;
+    border-width: 0.2rem;
+    border-style: solid;
+
+    &.public {
+      border-color: var(--public-farm);
+    }
+
+    &.private {
+      border-color: var(--private-farm);
+    }
+
+    .summary {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      font-size: 1.5rem;
+    }
+
+    .count {
+      font-weight: bolder;
+    }
+
+    .more-info {
+      display: flex;
+      border-radius: 0.5rem;
+      flex: 1;
+      flex-direction: column;
+
+      &:not(.highlight) {
+        display: none;
+      }
+    }
+
+    .city {
+      border-radius: 10px;
+      padding: 0.2rem 0.5rem;
+      border: 1px solid var(--gray-100);
+      max-width: fit-content;
+    }
+
+    .address {
+      font-size: 1rem;
+      font-style: normal;
+      margin-top: 1rem;
+    }
+
+    .farm-marker-link {
+      font-size: 1rem;
+      font-style: normal;
+      margin: 1rem 0 0.5rem 0;
+      border-radius: 1rem;
+      padding: 1rem 0.5rem;
+      border: 0.125rem solid var(--gray-500);
+      box-shadow: 0 0.25rem 0 0.125rem var(--gray-200);
+
+      .text {
+        margin: 0 0 0 1rem;
+      }
+    }
+
+    .farm-marker-link:hover {
+      border-color: var(--pink);
+      box-shadow: 0 0.25rem 0 0.125rem var(--gray-400);
+    }
+
+    .directions,
+    .city address {
+      display: flex;
+      flex-basis: auto;
+      align-items: center;
+      padding: 0 0.25rem 0 0;
+    }
+
+    /* Icons */
+
+    .icon {
+      &.link-arrow {
+        margin-left: 0.5rem;
+      }
+    }
+
+    &.public .icon {
+      color: var(--green);
+    }
+
+    &.private .icon {
+      color: var(--brown);
+    }
+  }
+
+  .farm-marker::after {
+    /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+    height: 0;
+    left: 50%;
+    position: absolute;
+    top: 100%;
+    transform: translateX(-50%) translateY(calc(0.1em * -1));
+    /* translateY inspired from hotels.com */
+    width: 0;
+  }
+
+  .farm-marker.public::after {
+    border-top: 8px solid var(--green);
+  }
+
+  .farm-marker.private::after {
+    border-top: 8px solid var(--brown);
+  }
+`;