first commit

assets/css/template/shop/_layout.scss

@@ -0,0 +1,84 @@
+[data-template="store"] {
+  main {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .p__baseline-big {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  #store__container {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 4);
+    width: 100%;
+    max-width: 1000px;
+
+    .store__product {
+      position: relative;
+      figure {
+        aspect-ratio: 4/3;
+        background-color: var(--color-bg);
+        background-color: var(--data-bg);
+        margin-bottom: calc(var(--spacing) * 0.5);
+        overflow: hidden;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transition: var(--curve) 0.5s;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      .link-block {
+        display: block;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+      }
+
+      &:hover {
+        figure {
+          overflow: hidden;
+        }
+        img {
+          transform: scale(1.05);
+        }
+
+        .line-1 {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    @media #{$small} {
+      .store__product {
+        margin-top: calc(var(--spacing) * 1.5);
+        margin-bottom: calc(var(--spacing) * 0.5);
+      }
+    }
+
+    @media #{$small-up} {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: calc(var(--padding-body) * 0.75);
+      row-gap: calc(var(--spacing) * 2);
+      margin-left: auto;
+      margin-right: auto;
+
+      .store__product {
+        grid-column: span 2;
+      }
+      .store__product:nth-of-type(1),
+      .store__product:nth-of-type(2) {
+        grid-column: span 3;
+      }
+    }
+  }
+}

assets/css/template/shop/_section--product.scss

@@ -0,0 +1,171 @@
+.section__product,
+.store__nav {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.store__nav {
+  padding-top: calc(var(--spacing) * 1);
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  a::before {
+    content: "← ";
+  }
+}
+
+.section__product {
+  figure {
+    aspect-ratio: 1/1;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .product-options__list {
+    list-style: none;
+    display: flex;
+    gap: 2ch;
+
+    li {
+      position: relative;
+
+      input[type="radio"] {
+        position: fixed;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      label {
+        font-family: var(--title);
+        font-size: var(--fs-normal);
+        height: 4ch;
+        width: 4ch;
+        border-radius: 50%;
+        border: var(--border);
+        border-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 0px;
+        cursor: pointer;
+      }
+
+      input[type="radio"]:checked + label {
+        border-color: var(--color-txt);
+      }
+
+      input[type="radio"]:not(:checked) + label:hover {
+        border-color: var(--grey-600);
+        background-color: var(--grey-800);
+      }
+    }
+  }
+
+  .hero {
+    margin-bottom: calc(var(--spacing) * 1);
+    padding-top: calc(var(--spacing) * 0.5);
+    border-top: var(--border-light);
+
+    .p__baseline-big {
+      margin: 0;
+      text-align: left;
+    }
+  }
+
+  .add-to-cart,
+  .product-options {
+    margin: 0;
+    border-bottom: var(--border-light);
+    padding: calc(var(--spacing) * 0.5) 0;
+  }
+
+  .product-options__label {
+    font-weight: 600;
+    margin-bottom: calc(var(--spacing) * 0.25);
+  }
+}
+
+@media #{$small} {
+  .store__nav a {
+    padding-top: 0;
+    font-size: var(--fs-small);
+  }
+
+  .section__product {
+    display: flex;
+    flex-direction: column;
+
+    .col-left {
+      display: contents;
+    }
+
+    .hero {
+      margin-top: calc(var(--spacing) * 0.5);
+      order: 1;
+    }
+    figure {
+      order: 2;
+      margin-bottom: calc(var(--spacing) * 1);
+    }
+
+    .details {
+      order: 3;
+      margin-bottom: calc(var(--spacing) * 1.5);
+    }
+
+    .product-options {
+      border-top: var(--border-light);
+      order: 4;
+    }
+
+    .add-to-cart {
+      order: 5;
+    }
+  }
+}
+
+@media #{$small-up} {
+  .section__product {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    aspect-ratio: 2/1;
+
+    margin-top: calc(var(--spacing) * 0.5);
+    position: relative;
+
+    .col-left {
+      padding-right: var(--padding-body);
+    }
+
+    .details {
+      margin-bottom: calc(var(--spacing) * 3);
+    }
+
+    .add-to-cart,
+    .product-options {
+      width: calc(50% - var(--padding-body));
+    }
+
+    .add-to-cart {
+      position: absolute;
+      bottom: 10px;
+    }
+
+    .product-options {
+      position: absolute;
+      bottom: calc(var(--spacing) * 2);
+      border-top: var(--border-light);
+    }
+  }
+}

assets/css/template/shop/_snipcart.scss

@@ -0,0 +1,3 @@
+.snipcart-modal__container {
+  z-index: 1000;
+}

assets/css/template/shop/_thanks.scss

@@ -0,0 +1,29 @@
+[data-template="thanks"]{
+    .p__baseline-big {
+        margin-top: calc(var(--spacing) * 3);
+        margin-bottom: calc(var(--spacing) * 3);
+        // font-size: var(--fs-x-big);
+    }
+    
+    .p__baseline {
+        // font-size: var(--fs-big);
+        text-align: left;
+        max-width: 800px;
+        margin: var(--spacing) auto;
+
+        a{
+            color: var(--color-accent);
+            text-decoration: none;
+            &:hover{
+                text-decoration: underline;
+            }
+        }
+    }
+
+    #site-footer{
+        border-top: none;
+        margin-top: calc(var(--spacing) * 4);
+
+    }
+
+}