/**
 * Provides styling for UX.
 */

#block-gin-content,
#block-gin-primary-local-tasks,
.gin--edit-form .page-wrapper__node-edit-form .node-form {
  /*@apply max-w-none !important;*/
}

.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto
}

.hero-content-wrapper {
  position: absolute;
  top: 0px;
  display: grid;
  height: 100%;
  width: 100%;
  .field--name-field-hero-content.field__item {
    align-self: center
  }
  .field--name-field-hero-content.field__item {
    justify-self: center
  }
  .field--name-field-hero-content.field__item {
    padding: 32px
  }
  .field--name-field-hero-content.field__item {
    &, & a {
      background-color: transparent !important
    }
  }
}

.card-content-wrapper {
  &:has(div[class*=" position-"]) {
    top: 0px
  }
  &:has(div[class*=" position-"]) {
    display: grid
  }
  &:has(div[class*=" position-"]) {
    .field--name-field-card-content.field__item {
      position: absolute
    }
    .field--name-field-card-content.field__item {
      align-self: center
    }
    .field--name-field-card-content.field__item {
      justify-self: center
    }
    .field--name-field-card-content.field__item {
      padding: 32px
    }
    .field--name-field-card-content.field__item {
      &, & a {
        background-color: transparent !important
      }
    }
  }
}

.paragraph--type--section {
  .layout__region {
    display: grid
  }
  .layout__region {
    &:has(.paragraph--type--carousel) {
      display: block !important
    }
  }
}

.position-x-left {
  justify-items: start !important;
  justify-self: start !important
}

.position-x-center {
  justify-items: center !important;
  justify-self: center !important
}

.position-x-right {
  justify-items: end !important;
  justify-self: end !important
}

.position-y-top {
  align-self: flex-start !important
}

.position-y-middle {
  align-self: center !important
}

.position-y-bottom {
  align-self: flex-end !important
}

.padding-pt-xs {
  padding-top: 16px
}

.padding-pr-xs {
  padding-right: 16px
}

.padding-pb-xs {
  padding-bottom: 16px
}

.padding-pl-xs {
  padding-left: 16px
}

.padding-pt-sm {
  padding-top: 32px
}

.padding-pr-sm {
  padding-right: 32px
}

.padding-pb-sm {
  padding-bottom: 32px
}

.padding-pl-sm {
  padding-left: 32px
}

.padding-pt-lg {
  padding-top: 64px
}

.padding-pr-lg {
  padding-right: 64px
}

.padding-pb-lg {
  padding-bottom: 64px
}

.padding-pl-lg {
  padding-left: 64px
}

.padding-pt-xl {
  padding-top: 128px
}

.padding-pr-xl {
  padding-right: 128px
}

.padding-pb-xl {
  padding-bottom: 128px
}

.padding-pl-xl {
  padding-left: 128px
}

.margin-mt-xs {
  margin-top: 16px
}

.margin-mr-xs {
  margin-right: 16px
}

.margin-mb-xs {
  margin-bottom: 16px
}

.margin-ml-xs {
  margin-left: 16px
}

.margin-mt-sm {
  margin-top: 32px
}

.margin-mr-sm {
  margin-right: 32px
}

.margin-mb-sm {
  margin-bottom: 32px
}

.margin-ml-sm {
  margin-left: 32px
}

.margin-mt-lg {
  margin-top: 64px
}

.margin-mr-lg {
  margin-right: 64px
}

.margin-mb-lg {
  margin-bottom: 64px
}

.margin-ml-lg {
  margin-left: 64px
}

.margin-mt-xl {
  margin-top: 128px
}

.margin-mr-xl {
  margin-right: 128px
}

.margin-mb-xl {
  margin-bottom: 128px
}

.margin-ml-xl {
  margin-left: 128px
}

/**
 * Provides styling for CKEditor implementations.
 */

/**
 * Define font sizes.
 */

.text-xs {
  font-size: 12px
}

.text-sm {
  font-size: 14px
}

.text-base {
  font-size: 16px
}

.text-lg {
  font-size: 18px
}

.text-xl {
  font-size: 20px
}

.text-2xl {
  font-size: 24px
}

.text-3xl {
  font-size: 30px
}

.text-4xl {
  font-size: 32px
}

.text-5xl {
  font-size: 40px
}

.text-6xl {
  font-size: 48px
}

.text-7xl {
  font-size: 72px
}

.text-8xl {
  font-size: 96px
}

.text-9xl {
  font-size: 128px
}

/**
 * Define font families.
 */

.font-sans {
  font-family: 'futura-pt'
}

.font-serif {
  font-family: 'adobe-garamond-pro'
}

/**
 * Provides styling for Style Selector implementations.
 */

.light,
.light a {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity))
}

.dark,
.dark a {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.decorative-desert-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(224 207 181 / var(--tw-bg-opacity))
}

.decorative-linen {
  --tw-bg-opacity: 1;
  background-color: rgb(252 240 231 / var(--tw-bg-opacity))
}

.decorative-wisp-pink {
  --tw-bg-opacity: 1;
  background-color: rgb(252 245 245 / var(--tw-bg-opacity))
}

/**
 * Provides styling for the Card: Product component.
 */

.paragraph--type--card-product {
  text-align: center;
  .field--name-product {
    font-weight: 700
  }
  .field--name-compare-at-price,
  .field--name-price {
    display: inline
  }
  .field--name-compare-at-price {
    font-weight: 200
  }
  .field--name-compare-at-price {
    text-decoration-line: line-through
  }
  &.paragraph--view-mode--preview {
    text-align: left
  }
  &.paragraph--view-mode--preview {
    .field--name-image {
      float: left
    }
    .field--name-image {
      margin-right: 1rem
    }
    .field--name-image {
      & img {
        max-width: 100px
      }
    }
  }
}

/**
 * Provides styling for the Form component.
 */

.paragraph--type--form.paragraph--view-mode--default {
  width: 100%;
  text-align: center
}

/**
 * Provides styling for the Promotion: Mailing List Signup component.
 */

.paragraph--type--form.paragraph--view-mode--default {
  width: 100%;
  text-align: center
}

/**
 * Provides styling for the Site Banner: Message component.
 */

.paragraph--type--site-banner-message {
  .field--name-field-site-banner-msg-content {
    margin-bottom: 1rem
  }
  .field--name-field-site-banner-msg-content {
    padding: 0.25rem
  }
}