/*
  This handles the portion tagged 'main'.  On the products page,
  the navigation will be handled with navigation.css despite
  being between the main tag.
*/

main {
  grid-area: main;
  background-color: var(--color-orig-0);
  color: var(--color-orig-1);
  border-radius: 8px;
  margin: 10px 15px;
  padding: 10px;
  text-align: center;
}

address {
  display: inline-block;
  text-align: left;
}

.data {
  margin: 3px 0 20px 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  background-color: var(--color-orig-0);
  justify-content: flex-start;
}

.productInfo {
  margin: 3px 0 20px 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  background-color: var(--color-orig-0);
  justify-content: flex-start;
}

.title {
  margin: 2px;
  padding: 0;
  flex-basis: 100%;
  text-align: center;
  vertical-align: center;
  font-size: 1.8vmin;
  font-style: italic;
  font-weight: bold;
  max-height: 2rem;
}

.dLeft, .dRight {
  height: min-content;
}

.dLeft > .image {
  flex: 1;
}

.dRight > .description {
  flex: 3;
}

.dLeft > .description {
  flex: 3;
}

.dRight > .image {
  flex: 1;
}

.description {
  margin: 1.8vmin 0 0 0;
  font-size: 1.65vmin;
  justify-content: flex-start;
  text-align: justify;
}

.heading {
  margin: 1.8vmin 0 0 0;
  font-size: 1.8vmin;
  font-weight: bolder;
  line-height: 25px;
  color: var(--color-orig-2);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}

.description + .heading {
  text-align: left;
}

.synopsis + .heading {
  text-align: center;
  font-style: normal;
}

.gallery {
  margin: 3px;
  padding: 0;
  width: 100%;
  height: 100%;
}

.gallery ul {
  display: flex;
  flex-wrap: wrap;
}

.gallery ul li {
  flex-grow: 1;
}

.gallery ul li:last-child {
  flex-grow: 10;
}

.image {
  margin: 18px;
  padding: 2px;
  background-color: var(--color-orig-0);
  display: block;
  border-radius: 10px;
  filter: drop-shadow(12px 12px 6px rgba(0, 0, 0, 0.5));
}

figcaption {
  color: var(--color-orig-2);
}

figure.product {
  margin: 18px;
  padding: 2px;
  display: block;
  border-radius: 10px;
}

.data figcaption {
  font-size: 1.45vmin;
  font-weight: normal;
  font-style: italic;
}

.gallery figcaption {
  font-size: 2.4vmin;
  font-weight: bold;
  font-style: italic;
}

.gallery img {
  max-width: 100%;
  height: auto;
  margin: 2px;
  object-fit: cover;
  vertical-align: bottom;
}

.synopsis p {
  margin-top: 0.5rem;
  font-size: 1.6vmin;
  text-align: left;
  font-style: italic;
}

.cart {
  width: 100%;
  margin: 0 0 1rem 5rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: auto;
  grid-row: auto;
  grid-gap: 5rem;
  grid-template-areas:
    "prod count cost form";
  align-content: center;
  font-size: 1.8vmin;
}

.cart .productName {
  grid-area: prod;
  margin: 0;
  font-size: 1.5vmin;
  justify-content: left;
}

.cart .count {
  grid-area: count;
  margin: 0;
  font-size: 1.5vmin;
  justify-content: right;
}

.cart .cost {
  grid-area: cost;
  margin: 0;
  font-size: 2vmin;
  font-weight: bolder;
  justify-content: right;
}

.cart form {
  grid-area: form;
  margin: 0;
  justify-content: right;
}