/** Shopify CDN: Minification failed

Line 160:5 Cannot use type selector "--2-col" directly after nesting selector "&"
Line 164:5 Cannot use type selector "--3-col" directly after nesting selector "&"
Line 168:5 Cannot use type selector "--4-col" directly after nesting selector "&"

**/
@layer base, layout, components, utilities;

@layer base {
  :root {
    --color-brand-primary: #802260;
    --color-brand-accent: #F5E777;
    --color-brand-olive: #4A5D23;
    --color-action: #BC098B;

    --color-white: #FFFFFF;
    --color-neutral--lite: #DDDDDD;
    --color-neutral: #B4B4B4;
    --color-black: #000000;
    --color-foreground: #535353;
    --color-background: #FFFFFF;

    --font-heading--family: 'Cabin', sans-serif;
    --font-heading--style: normal;
    --font-heading--weight: 700;
    --font-primary--family: 'Cabin', sans-serif;

    --page-width: 90rem;
    --page-margin: 0px;

    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 999px;
    --breakpoint-wide: 1500px;

    --style-border-radius-inputs: 4px;
  }

  * {
    box-sizing: border-box;
    margin: 0;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    display: flex;
    flex-direction: column;
    font-family: var(--font-primary--family);
    min-height: 100vh;
  }

  html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
    overflow: hidden;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    height: auto;
    max-width: 100%;
  }

  input,
  textarea,
  select {
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }

  select {
    background-color: var(--color-background);
    color: currentcolor;
  }

  dialog {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  p {
    text-wrap: pretty;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  h2 {
    font-weight: normal;
  }

  p:empty {
    display: none;
  }

  :is(p, h1, h2, h3, h4, h5, h6):first-child,
  :empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  :is(p, h1, h2, h3, h4, h5, h6):last-child,
  :where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
    margin-block-end: 0;
  }
}

@layer layout {
  .shopify-section {
    --content-width: min(
      calc(var(--page-width) - var(--page-margin) * 2),
      calc(100% - var(--page-margin) * 2)
    );
    --content-margin: minmax(var(--page-margin), 1fr);
    --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

    display: grid;
    grid-template-columns: var(--content-grid);
    position: relative;
    width: 100%;

    & > * {
      grid-column: 2;
    }

    @media (min-width: 768px) {
      padding: 0 1rem;
    }

    @media (min-width: --breakpoint-wide) {
      padding: 0;
    }
  }

  .main-content {
    flex: 1;
  }

  .grid {
    display: grid;
    gap: 1rem;

    @media (min-width: 768px) {
      gap: 1.5rem;
    }

    @media (min-width: 1024px) {
      gap: 2rem;
    }

    &--2-col {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    &--3-col {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    &--4-col {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
  }
}

@layer components {
  .pagination {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: center;
    text-align: center;

    & .page {
      align-items: center;
      background: var(--color-neutral--lite);
      border: 1px solid var(--color-neutral);
      border-radius: var(--style-border-radius-inputs);
      display: inline-flex;
      flex: 0 0 auto;
      justify-content: center;
      min-height: 2.5rem;
      min-width: 2.5rem;
      padding: 0.25rem;
      transition: all 0.2s ease;

      &:hover {
        background-color: var(--color-action);
        border-color: var(--color-brand-primary);
        color: var(--color-white);

        & a {
          color: var(--color-white);
        }
      }

      & a {
        color: var(--color-foreground);
        text-decoration: none;
        transition: all 0.2s ease;
      }
    }

    & .page.current {
      background-color: var(--color-brand-accent);
      border-color: var(--color-neutral);
      color: var(--color-black);
    }

    & .disabled {
      & span {
        color: var(--color-neutral);
        cursor: not-allowed;
        opacity: 0.5;
      }
    }

    & .prev,
    & .next {
      & a {
        color: var(--color-black);
        min-width: auto;

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

  .card {
    border: 1px dashed black;
    border-radius: 8px;
    padding: 2rem;
  }
}

@layer utilities {
  .full-width {
    grid-column: 1 / -1;
  }

  .spacing--panel {
    padding: 2rem;

    @media (min-width: 768px) {
      padding: 3rem;
    }
  }

  .spacing--section {
    margin-bottom: 2rem;

    @media (min-width: 768px) {
      margin-bottom: 3rem;
    }
  }

  [x-cloak] {
    display: none !important;
  }

  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}