@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  src: url('/assets/fonts/inter.woff2') format('woff2-variations');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  src: url('/assets/fonts/inter-italic.woff2') format('woff2-variations');
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  --filter-shadow: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));

  /* Standalone Colors */
  --color-white: hsl(0 0% 100%);
  --color-black: hsl(0 0% 0%);

  /* Main Neutral */
  --color-main-50: hsl(0 0% 98%);
  --color-main-100: hsl(0 0% 90%);
  --color-main-200: hsl(0 0% 80%);
  --color-main-300: hsl(0 0% 65%);
  --color-main-400: hsl(0 0% 45%);
  --color-main-500: hsl(0 0% 20%);
  --color-main-600: hsl(0 0% 15%);
  --color-main-700: hsl(0 0% 10%);
  --color-main-800: hsl(0 0% 5%);
  --color-main-900: hsl(0 0% 2%);

  /* Primary Brand */
  --color-primary-100: hsl(248 32% 92%);
  --color-primary-300: hsl(248 32% 70%);
  --color-primary-400: hsl(248 32% 50%);
  --color-primary-500: hsl(248 32% 25%);
  --color-primary-700: hsl(248 32% 15%);
  --color-primary-900: hsl(248 32% 5%);

  /* Accent / CTA */
  --color-accent-300: hsl(16 96% 88%);
  --color-accent-400: hsl(16 96% 68%);
  --color-accent-500: hsl(16 96% 48%);

  /* Warning / Caution */
  --color-warning-100: hsl(42 85% 92%);
  --color-warning-500: hsl(42 85% 50%);
  --color-warning-600: hsl(42 85% 40%);
  --color-warning-700: hsl(42 85% 30%);

  /* Success */
  --color-success-100: hsl(145 65% 94%);
  --color-success-500: hsl(145 65% 40%);
  --color-success-600: hsl(145 65% 32%);
  --color-success-700: hsl(145 65% 20%);

  /* Error - Red (updated) */
  --color-error-100: hsl(0 60% 96%);
  --color-error-300: hsl(0 60% 75%);
  --color-error-500: hsl(0 60% 41%);
  --color-error-600: hsl(0 60% 32%);
  --color-error-700: hsl(0 60% 24%);

  /* Text Sizes */
  --text-size-s: clamp(0.769rem, 0.654rem + 0.385vw, 0.962rem);
  --text-size-m: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  --text-size-l: clamp(1.3rem, 1.105rem + 0.65vw, 1.625rem);
  --text-size-xl: clamp(1.69rem, 1.437rem + 0.845vw, 2.113rem);
  --text-size-xxl: clamp(2.197rem, 1.867rem + 1.099vw, 2.746rem);

  /* Spacing Sizes */
  --space-1: clamp(4px, 3.4px + 0.125vw, 5px);
  --space-2: clamp(8px, 6.8px + 0.25vw, 10px);
  --space-3: clamp(12px, 10.2px + 0.375vw, 15px);
  --space-4: clamp(16px, 13.6px + 0.5vw, 20px);
  --space-5: clamp(20px, 17px + 0.625vw, 25px);
  --space-6: clamp(24px, 20.4px + 0.75vw, 30px);
  --space-7: clamp(28px, 23.8px + 0.875vw, 35px);
  --space-8: clamp(32px, 27.2px + 1vw, 40px);
  --space-9: clamp(36px, 30.6px + 1.125vw, 45px);
  --space-10: clamp(40px, 34px + 1.25vw, 50px);
  --space-11: clamp(44px, 37.4px + 1.375vw, 55px);
  --space-12: clamp(48px, 40.8px + 1.5vw, 60px);
  --space-13: clamp(52px, 44.2px + 1.625vw, 65px);
  --space-14: clamp(56px, 47.6px + 1.75vw, 70px);
  --space-15: clamp(60px, 51px + 1.875vw, 75px);
  --space-16: clamp(64px, 54.4px + 2vw, 80px);
}

html {
  box-sizing: border-box;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background: var(--color-white);
  color: var(--color-main-500);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-primary-500);
  text-decoration: underline 0.02rem;
  text-underline-offset: 0.1rem;

  &:focus {
    outline: none;
  }

  &:focus-visible {
    text-decoration: underline 0.1rem;
  }
}

/* ---- main layout -------------------------------------------------------- */

.main-layout {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  min-block-size: 100vh;
  margin: 0;

  .main-frame {
    align-self: start;
    display: block;
    flex: 1 1 auto;
    inline-size: 100%;
    margin-block: 0;
    margin-inline: auto;
    padding: 0;
  }

  .main-footer {
    background-color: var(--color-main-50);
    border-block-start: 1px solid var(--color-main-100);
    flex: 0 0 auto;
    inline-size: 100%;
    margin: 0;
    padding: 0;

    .footer-qr {
      inline-size: min(calc(11.25rem + 2 * var(--space-4)), 100%);
      margin-block: 0;
      margin-inline: auto;
      padding: var(--space-4);
      padding-block-end: 0;

      img {
        block-size: auto;
        display: block;
        inline-size: 100%;
      }
    }
  }
}

/* ---- header ------------------------------------------------------------- */

.header {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  padding-block-start: var(--space-4);

  .link {
    align-items: center;
    display: flex;
    filter: var(--filter-shadow);
    flex-flow: row nowrap;
    gap: var(--space-2);
    margin-block: 0;
    padding: var(--space-4);
    text-decoration: none;

    .logo {
      block-size: var(--text-size-xxl);
      border-radius: 0.25rem;
      display: block;
      flex: none;
      inline-size: auto;
    }

    .title {
      color: var(--color-primary-500);
      font-size: var(--text-size-xxl);
      font-weight: 500;
      line-height: 1;
      margin: 0;
      padding: 0;

      span {
        color: var(--color-accent-500);
      }
    }
  }
}

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

.footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: min(60rem, 100%);
  justify-content: center;
  margin-block: 0;
  margin-inline: auto;
  padding: var(--space-4);
}

.footer a.logo {
  align-items: center;
  display: flex;
  filter: var(--filter-shadow);
  flex-flow: row nowrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  text-decoration: none;
}

.footer a.logo img {
  block-size: var(--text-size-xl);
  border-radius: 0.25rem;
  display: block;
  flex: none;
  inline-size: auto;
}

.footer a.logo .title {
  color: var(--color-primary-700);
  font-size: var(--text-size-xl);
  font-weight: 500;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.footer a.logo .title span {
  color: var(--color-accent-500);
}

.footer .copy {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
  margin: 0;
}

.footer .copy p {
  color: var(--color-main-700);
  font-size: var(--text-size-s);
  font-weight: 300;
  inline-size: 100%;
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  text-align: left;
}

@media (min-width: 40rem) {
  .footer {
    flex-direction: row;
  }
}

/* ---- markdown content ------------------------------------------------------------- */

.markdown {
  display: flow-root; /* force new formatting context */
  font-size: var(--text-size-m);
  font-weight: 400;
  inline-size: min(60rem, 100%);
  line-height: 1.6;
  letter-spacing: 0;
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--space-4);
  padding-inline: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  h1 {
    font-size: var(--text-size-xxl);
    font-weight: 600;
    margin-block-start: var(--space-2);
    margin-block-end: var(--space-6);
    margin-inline: 0;
    letter-spacing: 0;
    line-height: 1.2;
    padding-block: 0;
    padding-inline: var(--space-4);
  }

  h2 {
    font-size: var(--text-size-l);
    font-weight: 600;
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-4);
    margin-inline: 0;
    letter-spacing: 0;
    line-height: 1.3;
    padding-block: 0;
    padding-inline: var(--space-4);
  }

  h3 {
    font-size: var(--text-size-m);
    font-weight: 600;
    margin-block: var(--space-4);
    margin-inline: 0;
    letter-spacing: 0;
    line-height: 1.5;
    padding-block: 0;
    padding-inline: var(--space-4);
  }

  h4 {
    font-size: var(--text-size-m);
    font-weight: 500;
    margin-block: var(--space-4);
    margin-inline: 0;
    letter-spacing: 0;
    line-height: 1.5;
    padding-block: 0;
    padding-inline: var(--space-4);
  }

  p {
    font-size: var(--text-size-m);
    font-weight: 400;
    margin-block: var(--space-4);
    margin-inline: 0;
    letter-spacing: 0;
    line-height: 1.5;
    padding-block: 0;
    padding-inline: var(--space-4);
  }

  hr {
    border: none;
    block-size: 0;
    background: none;
    border-block-start: 2px dashed var(--color-main-100);
    inline-size: 100%;
    margin: 0;
    padding: 0;
  }

  ul,
  ol {
    font-size: var(--text-size-m);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    margin-block: var(--space-4);
    padding-block: 0;
    padding-inline: var(--space-4);

    li {
      margin-block: 0;
      margin-inline-start: var(--space-4);
      margin-inline-end: 0;
      padding: 0;
    }
  }

  ul {
    list-style-type: square;
  }
}

/* ---- shoplet ------------------------------------------------------------ */

.shoplet {
  /* inline-size: min(48rem, 100%);
  margin-inline: auto; */
  margin: 0;
  padding: 0;
}

.shoplet-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-main-100);
  min-height: var(--space-14);

  .shoplet-title {
    flex: 1;
    margin: 0;
    font-size: var(--text-size-m);
    font-weight: 600;
    color: var(--color-main-500);
  }
}

.shoplet-main {
  display: block;
  inline-size: min(48rem, 100%);
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--space-4);
  padding-inline: 0;

  .shoplet-description {
    color: var(--color-main-500);
    font-size: var(--text-size-m);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    padding: var(--space-4);

    p {
      margin: 0;
      padding: 0;
    }
  }

  .shoplet-category {
    h2 {
      color: var(--color-primary-400);
      font-size: var(--text-size-m);
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1;
      margin: 0;
      padding: var(--space-4);
      text-transform: uppercase;
    }
  }

  .shoplet-products {
    margin: 0;
    padding: 0;
    padding-block-end: var(--space-4);
  }

  .shoplet-product {
    align-items: center;
    border-block-end: 1px solid var(--color-main-100);
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    padding: var(--space-4);

    .shoplet-product-info {
      flex: 1 1 auto;

      h3 {
        color: var(--color-main-500);
        font-size: var(--text-size-m);
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        padding: 0;
      }

      p {
        color: var(--color-main-400);
        font-size: var(--text-size-s);
        font-weight: 400;
        line-height: 1.4;
        margin: 0;
        padding: 0;
      }
    }

    .shoplet-product-price {
      align-self: center;
      flex: none;
      font-size: var(--text-size-m);
      font-weight: 600;
      text-align: end;
      white-space: nowrap;
    }
  }

  button {
    align-items: center;
    appearance: none;
    background-color: var(--color-primary-400);
    block-size: 2rem;
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    flex: none;
    font-size: 1.25rem;
    inline-size: 2rem;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    transition: background-color 0.15s ease;

    &::after {
      content: '+';
      display: block;
      font-weight: 300;
      text-indent: 0;
    }

    &:hover {
      background-color: var(--color-primary-300);
    }

    &:active {
      background-color: var(--color-primary-500);
    }
  }
}

.shoplet-footer-line {
  color: var(--color-main-400);
  font-size: var(--text-size-s);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0;
  padding: var(--space-4);
  text-align: center;
  text-transform: uppercase;
}

/* ---- frontpage -------------------------------------------------------------- */

.front {
  display: grid;
  grid-template-columns: 1fr min(24rem, 100%) 1fr;
  grid-template-rows: 1fr min-content 2fr;
  inline-size: 100%;
  min-block-size: 100vh;
}

.plate {
  align-items: center;
  display: flex;
  filter: var(--filter-shadow);
  flex-direction: column;
  gap: 24px;
  grid-column: 2;
  grid-row: 2;
  justify-content: center;
  inline-size: 100%;
  margin: 0;
  padding: 24px;

  .logo {
    border-radius: 0.5rem;
    display: block;
    inline-size: min(12rem, 100%);
    height: auto;
  }

  .title {
    color: var(--color-primary-500);
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;

    span {
      color: var(--color-accent-500);
    }
  }
}