Use layout groups

src/routes/(shop)/shop/+layout.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/shop";
+    @import "../../../style/pages/shop";
 </style>
 
 <script lang="ts">

src/routes/(site)/[country]/[location]/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../../style/pages/location";
+    @import "../../../../style/pages/location";
 </style>
 
 <script lang="ts">

src/routes/(site)/[country]/[location]/[photo]/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../../../style/pages/viewer";
+    @import "../../../../../style/pages/viewer";
 </style>
 
 <script lang="ts">

src/routes/(site)/about/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/about";
+    @import "../../../style/pages/about";
 </style>
 
 <script lang="ts">

src/routes/(site)/credits/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/credits";
+    @import "../../../style/pages/credits";
 </style>
 
 <script lang="ts">

src/routes/(site)/locations/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/explore";
+    @import "../../../style/pages/explore";
 </style>
 
 <script lang="ts">

src/routes/(site)/photos/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/photos";
+    @import "../../../style/pages/photos";
 </style>
 
 <script lang="ts">

src/routes/(site)/subscribe/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/subscribe";
+    @import "../../../style/pages/subscribe";
 </style>
 
 <script lang="ts">

src/routes/(site)/terms/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/terms";
+    @import "../../../style/pages/terms";
 </style>
 
 <script lang="ts">