<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ $alternate_title := replace .File.BaseFileName "_" " " | title }}
<title>{{ .Title  | default $alternate_title }}</title>
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Basket functionality via https://useshoppingcart.com/ -->
{{ with resources.Get "index.jsx" }}
{{ $options := dict "defines" (dict "process.env.NODE_ENV" `"production"` "process.env.REACT_APP_STRIPE_API_PUBLIC" (printf `"%s"` $.Site.Params.stripe) "process.env.CURRENCY" (printf `"%s"` $.Site.Params.currency) "process.env.BaseURL" (printf `"%s"` $.Site.BaseURL) ) }}
{{ $script := . | js.Build $options }}
<script src="{{ $script.RelPermalink }}" defer></script>
{{ end }}

{{ if .Params.icon }}
<link rel="icon" href="{{ .Params.icon }}" sizes="any" type="image/svg+xml">
{{ end }}
{{ template "_internal/google_analytics_async.html" . }}
{{ range .AlternativeOutputFormats -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
<link rel="stylesheet" href="/lite.css">
<style>
/* https://css-tricks.com/designing-a-product-page-layout-with-flexbox/ */
.products {
  display: flex;
  flex-wrap: wrap;
}

.product {
  padding: 2%;
  flex-grow: 1;
  flex-basis: 16%;
  display: flex; /* so child elements can use flexbox stuff too! */
}

.product img {
  max-width: 100%;
}
</style>
</head>
{{ partial "breadcrumb.html" . }}
<article>
