/* Shop styles. Plain CSS (custom properties + native nesting), no build step.
   Ported from the former sass/bourbon/neat sources (compiled output of 2021-04). */

:root {
  --font-system: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI",
    "Lucida Grande", "Helvetica Neue", Helvetica, "Fira Sans", Roboto, Noto, "Droid Sans",
    Cantarell, Oxygen, Ubuntu, "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  --font-sans: Nunito, sans-serif;
  --font-heading: "Varela Round", sans-serif;

  --text: #333;
  --white: #fff;
  --action: #1565c0;
  --action-hover: #11519a;
  --link-hover: #104c90;
  --border: #ddd;
  --border-hover: #b1b1b1;
  --surface: #f7f7f7;
  --red: #c00;
  --red-hover: #900;
  --brand-red: #d40000;

  --radius: 3px;
  --spacing: 1.5em;
  --small-spacing: 0.75em;
  --max-width: 1200px;
  --gutter: 2.3576520234%;
  --nav-height: 60px;
}

/* --- base ------------------------------------------------------------------ */

html { box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; }
html, body { height: 100%; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;

  @media print { font-size: 12px; }
}

main { padding: 1em; }
figure { margin: 0; }
img, picture { margin: 0; max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-system);
  font-size: 1.25em;
  line-height: 1.2;
  margin: 0 0 var(--small-spacing);
}

h1, h2, h3 { font-family: var(--font-heading); margin: 0; }

h1 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
  @media (min-width: 600px) { font-size: 2.4em; }
}

h2 {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.4em;
  margin-bottom: 0.9em;
  @media (min-width: 600px) { font-size: 1.4em; }
}

h3 {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.3em;
  margin-bottom: 0.4em;
}

p {
  margin: 0 0 var(--spacing);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.05em;
  font-weight: 300;
  line-height: 1.4em;

  & span {
    font-family: var(--font-heading);
    font-size: 0.8em;
    text-transform: uppercase;
  }
}

a {
  color: var(--action);
  text-decoration: none;
  transition: color 150ms ease;

  &:hover, &:focus, &:active { color: var(--link-hover); }
}

hr {
  width: 3em;
  border: 0;
  border-bottom: 1px solid var(--border);
  margin: var(--spacing) 0;
}

code {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: 4.5px;
  font-family: monaco, monospace;
  font-size: 0.7em;
  font-style: normal;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

/* --- buttons --------------------------------------------------------------- */

button, [type=button], [type=reset], [type=submit], .button {
  appearance: none;
  background-color: var(--action);
  border: 0;
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-system);
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: var(--small-spacing) var(--spacing);
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;

  &:hover, &:focus { background-color: var(--action-hover); color: var(--white); }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    &:hover { background-color: var(--action); }
  }
}

/* Page heading with a primary action on the right. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  margin-bottom: var(--spacing);

  & h2 { margin: 0; }
}

.button--warn {
  background-color: var(--red);
  &:hover, &:focus { background-color: var(--red-hover); }
}

.button--secondary {
  background-color: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--action);
  &:hover, &:focus { background-color: var(--surface); color: var(--link-hover); }
}

/* Row actions in tables. */
.button--small {
  font-size: 0.7em;
  line-height: 1.5;
  margin: 0 0.25em 0.3em 0;
  padding: 0.3em 1em;
}

.text-right { text-align: right; }

/* Inline SVG icons inside buttons (replaces font-awesome). */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* --- forms ----------------------------------------------------------------- */

fieldset { background-color: transparent; border: 0; margin: 0; padding: 0; }
legend { font-weight: 600; margin-bottom: calc(var(--small-spacing) / 2); padding: 0; }
label { display: block; font-weight: 600; margin-bottom: calc(var(--small-spacing) / 2); }
.control-label--inline { display: inline-block; }

input, select, textarea {
  display: block;
  font-family: var(--font-system);
  font-size: 1em;
}

:is([type=color], [type=date], [type=datetime-local], [type=datetime], [type=email],
    [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text],
    [type=time], [type=url], [type=week], input:not([type]), textarea) {
  appearance: none;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.06);
  margin-bottom: var(--small-spacing);
  padding: calc(var(--small-spacing) / 1.5);
  transition: border-color 150ms ease;
  width: 100%;

  &:hover { border-color: var(--border-hover); }

  &:focus {
    border-color: var(--action);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.06), 0 0 5px rgb(18 89 169 / 0.7);
    outline: 0;
  }

  &:disabled {
    background-color: #f2f2f2;
    cursor: not-allowed;
    &:hover { border: 1px solid var(--border); }
  }

  &::placeholder { color: #858585; }
}

textarea { resize: vertical; }
[type=checkbox], [type=radio] { display: inline; margin-right: calc(var(--small-spacing) / 2); }
[type=file], select { margin-bottom: var(--small-spacing); width: 100%; }

.line-item-form input[type=number] { width: 10ch; display: inline; }

/* --- layout grid (was neat span-columns: 12 cols, 2.36% gutter) ----------- */

.cart, .form-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
}

/* width of n of 12 columns */
.cart-items, .cart-details, .form-group--medium { flex: 0 0 calc((100% - var(--gutter)) / 2); }
.form-group--small { flex: 0 0 calc((100% - 3 * var(--gutter)) / 4); }
.form-group--medium-large { flex: 0 0 calc((100% - 3 * var(--gutter)) / 4 * 3 + 2 * var(--gutter)); }

.page-body {
  flex: 1;
  overflow-y: auto;
  & .wrap { padding-bottom: 1em; min-height: calc(100vh - 120px); }
}

.main__wrapper {
  padding-top: 1em;
  max-width: var(--max-width);
  margin-inline: auto;
}

.carts { margin-left: 1em; }

/* --- tables ---------------------------------------------------------------- */

table {
  border: 1px solid var(--border);
  border-collapse: separate;
  border-radius: var(--radius);
  border-spacing: 0;
  margin: var(--small-spacing) 0;
  width: 100%;
}

th {
  border-bottom: 1px solid #a6a6a6;
  font-weight: 600;
  padding: var(--small-spacing) 0;
  text-align: left;
}

td {
  border-bottom: 1px solid var(--border);
  padding: var(--small-spacing) 0;
}

th, td, tr { vertical-align: middle; }

table thead th {
  background-color: var(--white);
  border-bottom: 0;
  border-left: 1px solid var(--border);
  padding: 0.75em 1em;
  &:first-child { border-left: 0; }
}

table thead:first-of-type tr:first-child {
  & > th:first-child { border-top-left-radius: var(--radius); }
  & > th:last-child { border-top-right-radius: var(--radius); }
}

table tbody {
  background-color: #fcfcfc;

  & tr:hover > :is(td, th) { background-color: #efefef; }
  & tr:nth-child(even) { background-color: var(--surface); }
  & tr:nth-child(even):hover > td { background-color: #eaeaea; }

  & td {
    border-bottom: 0;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    padding: 0.75em 1em;
    &:first-child { border-left: 0; }
  }

  & td button {
    display: inline-block;
    font-size: 0.7em;
    line-height: 1.5;
    margin-bottom: 0.3em;
    margin-right: 0.5em;
    outline: 0;
    padding: 0.3em 1em;
    width: 100%;

    @media (min-width: 600px) { margin-bottom: 0; width: auto; }
  }
}

table tbody:last-child tr:last-child {
  & > td:first-child { border-bottom-left-radius: var(--radius); }
  & > td:last-child { border-bottom-right-radius: var(--radius); }
}

/* --- products / cards / grid ----------------------------------------------- */

.ribbon-box { position: relative; z-index: 10000; }

.ribbon-wrapper {
  height: 250px;
  width: 250px;
  overflow: hidden;
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: 10000;

  & .ribbon {
    box-shadow: 0 0 3px rgb(0 0 0 / 0.3);
    font-size: 1em;
    line-height: 2em;
    padding: 2px 7px;
    position: relative;
    text-align: center;
    top: 40px;
    left: -60px;
    transform: rotate(-45deg);
    width: 250px;
    z-index: 10000;
  }

  & .ribbon--red { background-color: var(--red); color: var(--white); }
  & .ribbon--yellow { background-color: yellow; color: var(--text); }
}

.product {
  display: flex;
  background: #eaeaea;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--spacing);
  cursor: pointer;

  &:last-child { margin-bottom: 0; }

  & .product__image {
    flex: 0 0 250px;
    height: 250px;
    background-color: var(--red);

    & img {
      border-bottom-left-radius: var(--radius);
      border-top-left-radius: var(--radius);
      transition: all 0.2s ease-in-out;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .product__content { padding: 1em; flex: 1 1 auto; }

  &:is(:hover, :focus) img { opacity: 0.7; }
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px #e6e6e6;
  cursor: pointer;
  flex: 1 1 15em;
  margin: 0 1em var(--spacing);
  position: relative;
  transition: all 0.2s ease-in-out;

  & .card-image {
    background-color: var(--red);
    height: 150px;
    overflow: hidden;

    & img {
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
      transition: all 0.2s ease-in-out;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .card-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 700;
    line-height: 1.5em;
    padding: 0.5em 0.75em;
    transition: all 0.2s ease-in-out;
  }

  & .card-copy {
    font-size: 0.9em;
    line-height: 1.5em;
    padding: 0.75em;
    & p { margin: 0 0 0.75em; }
  }

  &:is(:hover, :focus) img { opacity: 0.7; }
}

.grid-items {
  display: flex;
  flex-wrap: wrap;

  & .grid-item {
    background: #3567a0;
    border: 0 solid var(--white);
    border-width: 0 4.5px 9px;
    cursor: pointer;
    height: 14em;
    outline: 0;
    overflow: hidden;
    padding: 2em;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    width: 100%;

    @media (min-width: 900px) { width: calc(100% / 3); }

    & img { display: block; height: 3em; margin: 0 auto 1em; }
    & h1 { color: var(--white); font-size: 1.3em; margin-bottom: 0.4em; }

    & p {
      color: var(--white);
      line-height: 1.5em;
      margin: auto;
      font-weight: 400;
      @media (min-width: 600px) { max-width: 70%; }
    }
  }

  & .grid-item-image {
    background-color: #3567a0;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.media {
  border-bottom: 1px solid rgb(51 51 51 / 0.1);
  display: table;
  margin-bottom: var(--spacing);
  padding-bottom: 1em;
  width: 100%;

  & .media-content {
    display: table-cell;
    vertical-align: top;
    width: 100%;

    & h1 { font-size: 1em; margin: 0 0 0.5em; }
    & p { line-height: 1.5em; margin-bottom: 0.5em; }
  }
}

/* --- navigation ------------------------------------------------------------ */

header.navigation {
  background-color: var(--white);
  border-bottom: 1px solid #e6e6e6;
  min-height: var(--nav-height);
  width: 100%;
  z-index: 999;

  @media print { display: none; }

  & .navigation-wrapper {
    position: relative;
    z-index: 9999;
    display: flow-root;
  }

  & .logo {
    float: left;
    max-height: var(--nav-height);
    padding-left: 1em;
    padding-right: 2em;
    & img { max-height: var(--nav-height); padding: 0.1em 0; }
  }

  & .navigation-menu-button {
    color: rgb(0 0 0 / 0.7);
    display: block;
    float: right;
    line-height: var(--nav-height);
    margin: 0;
    padding-right: 1em;
    text-decoration: none;
    text-transform: uppercase;

    &:hover, &:focus { color: #000; }
    @media (min-width: 900px) { display: none; }
  }

  & nav {
    float: none;
    min-height: var(--nav-height);
    z-index: 9999999;
    @media (min-width: 900px) { float: right; }
  }

  & ul.navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999;

    &.show { display: block; }
    @media (min-width: 900px) { display: inline; margin: 0; }
  }

  & ul li.nav-link {
    background: var(--white);
    display: block;
    line-height: var(--nav-height);
    overflow: hidden;
    padding-inline: 0.4em;
    text-align: right;
    width: 100%;
    z-index: 9999;

    @media (min-width: 900px) { background: none; display: inline; width: auto; }

    & a {
      color: rgb(0 0 0 / 0.7);
      display: inline-block;
      text-decoration: none;
      &:hover, &:focus { color: #000; }
      @media (min-width: 900px) { padding-inline: 0.5em; }
    }
  }

  & .cart__total { line-height: var(--nav-height); color: var(--white); padding-right: 1em; }
}

/* --- product details in the admin list (native <details>) ----------------- */

/* the whole row toggles (see app.js) */
tr:has(.product-details) { cursor: pointer; }

.product-details {
  & summary { cursor: pointer; color: var(--action); }
  & summary:hover { color: var(--link-hover); }

  & .product-details__body {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-top: var(--small-spacing);
  }

  & img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
  }

  & dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25em 1em;
    margin: 0;
  }

  & dt { font-weight: 600; }
  & dd { margin: 0; }
}

/* --- expander (admin) ------------------------------------------------------ */

.expander {
  width: 60%;

  & .expander-trigger {
    border-bottom: 1px solid var(--border);
    color: var(--action);
    cursor: pointer;
    display: block;
    font-size: 1em;
    margin-bottom: 1em;
    padding-bottom: 0.25em;
    text-decoration: none;
    user-select: none;

    &::before { content: "▼"; font-size: 0.7em; margin-right: 0.5em; }
  }

  & .expander-content p { color: var(--text); line-height: 1.5; }
  & .expander-hidden::before { content: "►"; font-size: 0.7em; }
  & .expander-hidden + .expander-content { display: none; }
}

/* --- footer ---------------------------------------------------------------- */

.page-footer {
  background: var(--brand-red);
  padding: var(--spacing);
  width: 100%;
  display: flex;

  @media print { display: none; }

  & .footer-primary-links { flex: 1; }

  & ul {
    flex: 0 0 auto;
    line-height: 1.5em;
    margin: 0 0 1em;
    padding: 0;
    @media (min-width: 900px) { float: left; line-height: 1.8em; margin-left: 1em; margin-bottom: 0; }

    & li {
      list-style: none;
      padding-right: 1em;
      @media (min-width: 900px) { display: inline; text-align: left; }
    }

    & li a {
      color: var(--white);
      text-decoration: none;
      &:hover, &:focus { color: rgb(255 255 255 / 0.5); }
    }
  }

  & .footer-secondary-links {
    flex: 0 0 auto;
    & li { font-size: 0.8em; }

    & ul.footer-social {
      margin: 1em 0 0;
      @media (min-width: 900px) { float: right; margin-top: 0; }

      & li {
        font-size: 1em;
        float: left;
        line-height: 0;
        margin: 0;
        padding-right: 0.7em;
        &:last-child { padding-right: 0; }
      }

      & img {
        height: 1.6em;
        padding: 1px;
        &:hover, &:focus { opacity: 0.7; }
      }
    }
  }
}

/* --- pagination ------------------------------------------------------------ */

.pagination {
  text-align: center;

  & ul { display: inline; margin: 0; padding: 0; }
  & ul li { display: inline; list-style: none; }
  & ul li .current { padding: 0.375em 0.809em; }

  & ul li a {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    outline: 0;
    padding: 0.375em 0.809em;
    text-decoration: none;
    transition: all 0.2s ease-in-out;

    &:hover, &:focus { background: var(--white); color: var(--action); }
    &:active { background: var(--surface); }
  }

  & ul ul li {
    display: none;
    &:nth-child(-n+3) { display: inline; }
    @media (min-width: 900px) { display: inline; }
  }
}

/* --- flash messages -------------------------------------------------------- */

:is(.flash-error, .flash-notice, .flash-success) {
  background-color: var(--flash-bg);
  color: var(--flash-fg);
  display: block;
  margin-bottom: var(--small-spacing);
  padding: var(--small-spacing);
  text-align: center;

  & a {
    color: var(--flash-link);
    text-decoration: underline;
    &:hover, &:focus { color: var(--flash-link-hover); }
  }
}

.flash-error   { --flash-bg: #fbe3e4; --flash-fg: #645b5b; --flash-link: #4b4444; --flash-link-hover: #191717; }
.flash-notice  { --flash-bg: #e5edf8; --flash-fg: #5c5f63; --flash-link: #45474a; --flash-link-hover: #171819; }
.flash-success { --flash-bg: #e6efc2; --flash-fg: #5c604e; --flash-link: #45483a; --flash-link-hover: #171813; }