Updated product page, trying to fix tina vars

layouts/page/shop.html

@@ -6,6 +6,7 @@
     <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
     <link href="/css/minicart.css" rel="stylesheet" />
     <link href="/css/drop-in.css" rel="stylesheet" />
+    <link href="/css/shop.css" rel="stylesheet" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
@@ -21,9 +22,9 @@
         <script>
           (function() {
             window.commercelayerConfig = {
-              clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
+              clientId: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
               slug: 'ahmza',
-              scope: 'market:15644',
+              scope: 'market:15657',
               returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
             }
           }());
@@ -74,10 +75,10 @@
               </div>
               <div class=prodStock>
                 <cl-availability code="{{ .Params.code }}">
-                  <cl-availability-status type="available" style="color: green;">
+                  <cl-availability-status type="available">
                     • in stock
                   </cl-availability-status>
-                  <cl-availability-status type="unavailable" style="color: red;">
+                  <cl-availability-status type="unavailable">
                     • out of stock
                   </cl-availability-status>
                 </cl-availability>
@@ -91,83 +92,6 @@
           {{ end }}
         </div>
 
-      <style>
-        .main {
-          position: relative;
-          min-height: calc(100vh - var(--header-height) - var(--footer-height));
-          max-width: calc(1024px + var(--gap) * 2);
-          margin: auto;
-          padding var(--gap)
-
-        }
-        .productList {
-          display: inline-grid;
-          grid-template-columns: auto auto auto;
-          grid-auto-rows: 400px;
-          grid-gap: 30px 10px;
-          margin-top: 10px;
-        }
-        .product {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          background-color: var(--entry);
-          border: 1px solid var(--border);
-          border-radius: var(--radius);
-          text-align: center;
-          padding: var(--gap);
-        }
-        img{
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .prodImage {
-          display:block;
-          width: 100%;
-          height: auto;
-          max-height: 100%;
-          border-radius: var(--radius);
-          overflow-clip-margin: content-box;
-          overflow: clip;
-          padding-bottom: 10px
-        }
-        .shop-nav {
-          list-style-type: none;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-          max-width: calc(var(--nav-width) + var(--gap) * 2);
-          margin-inline-start: auto;
-          margin-inline-end: auto;
-        }
-        .shop-nav li {
-          padding-right:10px;
-          font-size: 16px;
-        }
-
-        @media only screen and (min-width: 608px) {
-          .productList {
-            grid-template-columns: auto auto auto;
-          }
-        }
-
-        @media only screen and (min-width: 609px) {
-          .productList {
-            grid-template-columns: auto auto auto auto;
-          }
-          .shop-nav {
-            justify-content: flex-end
-          }
-        }
-
-        @media only screen and (min-width: 992px) {
-          .productList {
-            grid-template-columns: auto auto auto auto auto;
-          }
-        }
-
-      </style>
-
     </main>
     {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
 </body>