* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a:link, a:visited {
  text-decoration: none;
  color: inherit;
}
body {
  margin: auto;
  padding: 0;
  max-width: min(100vw, 100rem);
  min-height: 100vh;
  overflow-x: hidden;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
	grid-template-rows: auto 1fr min-content;
	box-shadow: 0 0 25px 0 var(--shadow-0);
	font-family: MerriweatherSans, Calibri, sans-serif;
  line-height: 3rex;
  font-weight: var(--regular);
  word-spacing: 0.1em;
  text-wrap: pretty;
  hyphens: manual;
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: contextual;
  color: var(--text-0);
  background-color: transparent;
}
header, footer {
	width: 100%;
  z-index: 5;
  display: flex;
  flex-flow: row nowrap;
  place-content: flex-start;
  place-items: center;
  gap: 3rem;
  padding: 1rem var(--lr-min);
  background-image: var(--gradient-0);
  box-shadow: 0 0 25px 0 var(--shadow-0);
  text-align: center;
  color: white;
  a:link, a:visited {
    color: white;
  }
  > * {
    flex:  0 1 auto;
  }
  svg#ewelogo {
    height: 3em;
    width: 5rem;
    .e {fill: var(--ewe);}
    .w {fill: white;}
  }
}
main {
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2rem 1rem;
  grid-auto-rows: min-content;
  padding: 2rem 0;
  border-left: thin solid var(--border-0); 
  border-right: thin solid var(--border-0); 
  background-color: var(--canvas-1);
  background-image: var(--gradient-5);
  > * {
    grid-column: span 6;
    min-width: 3rem;
  }
  *[grid='666'] {
    grid-column: span 1;
    height: 1rem;
    border: thin dotted blue;
  }
}
main.catalog, main.product, main.item {
  padding: 2rem var(--lr-min);
  gap: 2rem var(--lr-min);
}
::marker {
  font-weight: var(--bold);
  color: var(--ewe);
}
h1, h2, h3, h4, h5, h6, summary {
  font-weight: var(--semibold);
  line-height: 1.2em;
}
h1 {
  font-size: 1.8rem; 
  display:flex;
  flex-flow: row wrap;
  gap: 0 3rem;
}
h2 {font-size: 1.5rem; margin-top: 1lh;}
h3 {font-size: 1.2rem;}
figcaption > h3 {
  margin-top: 1lh;
}
h4, summary {font-size: 1.1rem;}
h5, h6 {font-size: 0.8rem}
ul {
  list-style: square inside;
}
p, li {
  line-height: 1.5rem;
  margin: 0.75rem 0;
}
img[form="32"] {
  aspect-ratio: 16/9;
  object-fit: cover;
}