/** Shopify CDN: Minification failed

Line 339:3 Cannot use type selector "input" directly after nesting selector "&"
Line 1620:6 Unexpected ".5"
Line 1808:10 Unexpected ".5"
Line 1850:1 Unexpected "`"
Line 2758:15 Unexpected ".5"

**/
/*******************************
* TABLE OF CONTENTS
********************************
* TEXT UTILITIES
* - Font Weight Modifiers
* - Text Transformation
* - Text Alignment
* - Font Family Selection
* - Text Color Schemes
* - Font Size Presets
* - Line Height Adjustments

* LAYOUT & POSITIONING
* - Display Modes
* - Content Alignment
* - Positioning Types
* - Width Adjustments
* - Height Controls
* - Aspect Ratios
* - Layering (Z-index)

* SPACING SYSTEM
* - Section Spacing
* - Padding Controls
* - Margin Controls
* - Gap Management

* FLEX UTILITIES
* - Flex Containers
* - Flex Directions
* - Content Justification
* - Item Alignment
* - Flex Item Properties
* - Order Controls

* GRID SYSTEM
* - Column Structures
* - Row Structures
* - Responsive Columns

* COLOR & BACKGROUND
* - Background Styles
* - Overlay Effects
* - SVG Fill Colors
* - Border Colors

* BORDER STYLING
* - Border Widths
* - Border Styles
* - Border Radius

* IMAGE HANDLING
* - Image Shapes
* - Object Fitting
* - Object Positioning

* VISUAL UTILITIES
* - Overflow Behavior
* - Opacity Levels
* - Icon Sizing
* - Shadow Effects

* INTERACTIVE UTILITIES
* - Cursor Controls
* - Pointer Events
* - Visibility Toggles

* TRANSITION & ANIMATION
* - Transition Properties
* - Transition Timing
* - Rotation Effects

* RESET & OVERRIDES
* - Property Resets
* - Important Overrides
********************************/

/*******************************
* TEXT UTILITIES
********************************/
/* Font Weight Modifiers */
.weight-normal {
  font-weight: 400;
  font-variation-settings: 'wght' var(--font-weight-normal);
}

.weight-medium {
  font-weight: 400;
  font-variation-settings: 'wght' var(--font-weight-medium);
}

.weight-bold {
  font-weight: 400;
  font-variation-settings: 'wght' var(--font-weight-bold);
}

.weight-black {
  font-weight: 400;
  font-variation-settings: 'wght' var(--font-weight-black);
}

/* Text Transformation */
.transform-uppercase {
  text-transform: uppercase;
}

.transform-lowercase {
  text-transform: lowercase;
}

.transform-capitalize {
  text-transform: capitalize;
}

.transform-none {
  text-transform: none;
}

/* Text Alignment */
.text-align-inherit {
  text-align: inherit;
}

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

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

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

.\!text-right {
  text-align: right !important;
}

.\!text-left {
  text-align: left !important;
}

.\!text-center {
  text-align: center !important;
}

/* Font Family Selection */
.family-heading {
  font-family: var(--font-family-heading);
}

.family-body {
  font-family: var(--font-family-body);
}

.\!family-body {
  font-family: var(--font-family-body) !important;
}

.\!family-heading {
  font-family: var(--font-family-heading) !important;
}

.\*\:family-body {
  * {
    font-family: var(--font-family-body);
  }
}

.\*\:family-heading {
  * {
    font-family: var(--font-family-heading);
  }
}

.\*\:\!family-body {
  * {
    font-family: var(--font-family-body) !important;
  }
}

.\*\:\!family-heading {
  * {
    font-family: var(--font-family-heading) !important;
  }
}

/* Text Color Schemes */
.color-danger {
  color: #ff0000;
}

.color-black {
  color: black;
}

.placeholder\:color-black {
  &::placeholder {
    color: black;
  }
}

.color-overline {
  color: rgb(var(--color-text-overline));
}

.color-title {
  color: rgb(var(--color-text-title));
}

.color-subtitle {
  color: rgb(var(--color-text-subtitle));
}

.color-body {
  color: rgb(var(--color-text-body));
}

.color-link {
  color: rgb(var(--color-text-link));
}

.hover\:color-link {
  &:hover {
    color: rgb(var(--color-text-link));
  }
}

.color-accent {
  color: rgb(var(--color-text-accent));
}

.text-scheme-light {
  color: rgb(var(--color-scheme-light));
}

.text-scheme-dark {
  color: rgb(var(--color-scheme-dark));
}

.text-scheme-accent {
  color: rgb(var(--color-scheme-accent));
}

/* Font Size Presets */
.size-body-normal {
  font-size: 2.1rem;
}

.size-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.size-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.size-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.size-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.size-h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}

.size-h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
}

.\!size-h6 {
  font-size: var(--font-size-h6) !important;
  line-height: var(--line-height-h6) !important;
  letter-spacing: var(--letter-spacing-h6) !important;
}

.size-body-large {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-body-large);
}

.\!size-body-large {
  font-size: var(--font-size-body-large) !important;
  line-height: var(--line-height-body-large) !important;
  letter-spacing: var(--letter-spacing-body-large) !important;
}

.\*\:size-body-large {
  * {
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
    letter-spacing: var(--letter-spacing-body-large);
  }
}

.\*\:\!size-body-large {
  * {
    font-size: var(--font-size-body-large) !important;
    line-height: var(--line-height-body-large) !important;
    letter-spacing: var(--letter-spacing-body-large) !important;
  }
}

input.placeholder\:size-body-large {
  &::placeholder {
    font-size: var(--font-size-body-large) !important;
    line-height: var(--line-height-body-large) !important;
    letter-spacing: var(--letter-spacing-body-large) !important;
  }
}

.placeholder\:size-body-large {
  &input::placeholder {
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
    letter-spacing: var(--letter-spacing-body-large);
  }
}

.size-body-small {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
}

.\!size-body-small {
  font-size: var(--font-size-body-small) !important;
  line-height: var(--line-height-body-small) !important;
  letter-spacing: var(--letter-spacing-body-small) !important;
}

.\*\:size-body-small {
  * {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    letter-spacing: var(--letter-spacing-body-small);
  }
}

.\*\:\!size-body-small {
  * {
    font-size: var(--font-size-body-small) !important;
    line-height: var(--line-height-body-small) !important;
    letter-spacing: var(--letter-spacing-body-small) !important;
  }
}

.size-label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
}

.size-detail {
  font-size: var(--font-size-detail);
  line-height: var(--line-height-detail);
  letter-spacing: var(--letter-spacing-detail);
}

.\!size-detail {
  font-size: var(--font-size-detail) !important;
  line-height: var(--line-height-detail) !important;
  letter-spacing: var(--letter-spacing-detail) !important;
}

@media only screen and (min-width: 990px) {
  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-center {
    text-align: center;
  }

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

  .lg\:size-h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
  }

  .lg\:size-h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
  }

  .lg\:size-h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-h3);
  }

  .lg\:size-h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    letter-spacing: var(--letter-spacing-h4);
  }

  .lg\:size-h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    letter-spacing: var(--letter-spacing-h5);
  }

  .lg\:size-h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
    letter-spacing: var(--letter-spacing-h6);
  }
  
  .lg\:size-body-large {
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
    letter-spacing: var(--letter-spacing-body-large);
  }

  .lg\:size-body-small {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    letter-spacing: var(--letter-spacing-body-small);
  }
  
  .lg\:size-label {
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-label);
  }
  
  .lg\:size-detail {
    font-size: var(--font-size-detail);
    line-height: var(--line-height-detail);
    letter-spacing: var(--letter-spacing-detail);
  }
}

/* Line Height Adjustments */
.line-height-1 {
  line-height: 1;
}

.line-height-0 {
  line-height: 0;
}

/*******************************
* LAYOUT & POSITIONING
********************************/
/* Display Modes */
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.\!grid {
  display: grid !important;
}

.\!block {
  display: block !important;
}

.none {
  display: none;
}

@media only screen and (max-width: 749px) {
  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:none {
    display: none;
  }
}

@media only screen and (min-width: 990px) {
  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:none {
    display: none;
  }

  .lg\:\!grid {
    display: grid !important;
  }
}

/* Content Alignment */
.align-content-left {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.align-content-center {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.align-content-right {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

/* Positioning Types */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.\!absolute {
  position: absolute !important;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

@media only screen and (min-width: 990px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:absolute {
    position: absolute;
  }
}

.right-0 {
  right: 0;
}

.left-0 {
  left: 0;
}

.top-0 {
  top: 0;
}

.top-5 {
  top: calc(var(--theme-spacing) * 5);
}

.top-10 {
  top: calc(var(--theme-spacing) * 10);
}

.top-header-padding-offset {
  top: calc(var(--header-padding) * -1);
}

.bottom-0 {
  bottom: 0;
}

.inset-0 {
  inset: 0;
}

.top-50 {
  top: 50%;
}

.translate-x-50 {
  translate: 50% 0;
}

.translate-x-minus-50 {
  translate: -50% 0;
}

.y-minus-50 {
  translate: 0 -50%;
}

.x-50-y-minus-50 {
  translate: 50% -50%;
}

.x-minus-50-y-minus-50 {
  translate: -50% -50%;
}

.x-50-y-minus-100 {
  translate: 50% -100%;
}

.x-minus-50-y-minus-100 {
  translate: -50% -100%;
}

.left-50 {
  left: 50%;
}

.left-minus-50 {
  left: -50%;
}

@media only screen and (min-width: 990px) {
  .lg\:top-0 {
    top: 0;
  }

  .lg\:bottom-0 {
    bottom: 0;
  }

  .lg\:left-0 {
    left: 0;
  }

  .lg\:right-0 {
    right: 0;
  }

  .lg\:top-5 {
    top: calc(var(--theme-spacing) * 5);
  }

  .lg\:top-10 {
    top: calc(var(--theme-spacing) * 10);
  }

  .lg\:top-2-plus-header {
    top: calc((var(--theme-spacing) * 2) + var(--header-height));
  }

  .lg\:top-5-plus-header {
    top: calc((var(--theme-spacing) * 5) + var(--header-height));
  }

  .lg\:top-10-plus-header {
    top: calc((var(--theme-spacing) * 10) + var(--header-height));
  }

  .lg\:left-0 {
    left: 0;
  }

  .lg\:translate-x-0 {
    translate: 0 0;
  }
}

/* Width Adjustments */
.w-full {
  width: 100%;
}

.w-screen {
  width: 100dvw;
}

.w-50 {
  width: 50%;
}

.lg\:w-50 {
  @media only screen and (min-width: 990px) {
    width: 50%;
  }
}

.w-0 {
  width: 0;
}

.w-3 {
  width: calc(var(--theme-spacing) * 3);
}

.w-8 {
  width: calc(var(--theme-spacing) * 8);
}

.w-15 {
  width: calc(var(--theme-spacing) * 15);
}

.w-16 {
  width: calc(var(--theme-spacing) * 16);
}

.w-25 {
  width: calc(var(--theme-spacing) * 25);
}

.w-auto {
  width: auto;
}

.w-fit {
  width: fit-content;
}

.w-max {
  width: max-content;
}

.w-min {
  width: min-content;
}

.w-2 {
  width: calc(var(--theme-spacing) * 2);
}

.w-10 {
  width: calc(var(--theme-spacing) * 10);
}

.w-12 {
  width: calc(var(--theme-spacing) * 12);
}

.w-18 {
  width: calc(var(--theme-spacing) * 18);
}

.w-24 {
  width: calc(var(--theme-spacing) * 24);
}

.w-25 {
  width: calc(var(--theme-spacing) * 25);
}

.h-3 {
  height: calc(var(--theme-spacing) * 3);
}

.h-4 {
  height: calc(var(--theme-spacing) * 4);
}

.h-5 {
  height: calc(var(--theme-spacing) * 5);
}

.h-6 {
  height: calc(var(--theme-spacing) * 6);
}

.h-9 {
  height: calc(var(--theme-spacing) * 9);
}

.h-10 {
  height: calc(var(--theme-spacing) * 10);
}

.h-15 {
  height: calc(var(--theme-spacing) * 15);
}

.h-16 {
  height: calc(var(--theme-spacing) * 16);
}

.h-18 {
  height: calc(var(--theme-spacing) * 18);
}

.h-24 {
  height: calc(var(--theme-spacing) * 24);
}

.h-25 {
  height: calc(var(--theme-spacing) * 25);
}

.h-em {
  height: 1em;
}

.w-em {
  width: 1em;
}

.h-max {
  height: max-content;
}

.max-h-screen {
  max-height: 100dvh;
}

.min-h-screen {
  min-height: 100dvh;
}

.max-w-full {
  max-width: 100%;
}

.max-w-7 {
  max-width: calc(var(--theme-spacing) * 7);
}

.max-w-750 {
  max-width: 75rem;
}



.max-h-full {
  max-height: 100%;
}

/* Height Controls */
.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-screen {
  height: 100dvh;
}

.h-2 {
  height: calc(var(--theme-spacing) * 2);
}

.h-2\.5 {
  height: calc(var(--theme-spacing) * 2.5);
}

.w-2\.5 {
  width: calc(var(--theme-spacing) * 2.5);
}

.w-4 {
  width: calc(var(--theme-spacing) * 4);
}

.w-5 {
  width: calc(var(--theme-spacing) * 5);
}

.w-9 {
  width: calc(var(--theme-spacing) * 9);
}

/* Aspect Ratios */
.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

/* Layering (Z-index) */
.isolate {
  isolation: isolate;
}

.z-minus-1 {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-10 {
  z-index: 10;
}

@media only screen and (min-width: 990px) {
  .lg\:z-minus-1 {
    z-index: -1;
  }
}

/*******************************
* SPACING SYSTEM
********************************/
/* Section Spacing */
.section-spacing-inline {
  padding-inline: var(--spacing-inline);
}

.section-spacing-block {
  padding-block: var(--spacing-inline);
}

.section-spacing-inset {
  padding: var(--spacing-inline);
}

@media only screen and (min-width: 990px) {
  .lg\:section-spacing-inline {
    padding-inline: var(--spacing-inline);
  } 
}

/* Padding Controls */
.padding-top-0 {
  padding-top: calc(0px + var(--header-offset) + var(--border-top-offset));
}

.padding-top-xs {
  padding-top: calc(var(--spacing-xs) + var(--header-offset) + var(--border-top-offset));
}

.padding-top-sm {
  padding-top: calc(var(--spacing-sm) + var(--header-offset) + var(--border-top-offset));
}

.padding-top-md {
  padding-top: calc(var(--spacing-md) + var(--header-offset) + var(--border-top-offset));
}

.padding-top-normal {
  padding-top: calc(var(--spacing-normal) + var(--header-offset) + var(--border-top-offset));
}

.padding-top-lg {
  padding-top: calc(var(--spacing-lg) + var(--header-offset) + var(--border-top-offset));
}

.padding-top-xl {
  padding-top: calc(var(--spacing-xl) + var(--header-offset) + var(--border-top-offset));
}

.padding-bottom-0 {
  padding-bottom: calc(0px + var(--border-bottom-offset));
}

.padding-bottom-xs {
  padding-bottom: calc(var(--spacing-xs) + var(--border-bottom-offset));
}

.padding-bottom-sm {
  padding-bottom: calc(var(--spacing-sm) + var(--border-bottom-offset));
}

.padding-bottom-md {
  padding-bottom: calc(var(--spacing-md) + var(--border-bottom-offset));
}

.padding-bottom-normal {
  padding-bottom: calc(var(--spacing-normal) + var(--border-bottom-offset));
}

.padding-bottom-lg {
  padding-bottom: calc(var(--spacing-lg) + var(--border-bottom-offset));
}

.padding-bottom-xl {
  padding-bottom: calc(var(--spacing-xl) + var(--border-bottom-offset));
}

.block-padding-inset-3xs {
  padding: var(--gap-3xs);
}

.block-padding-inset-2xs {
  padding: var(--gap-2xs);
}

.block-padding-inset-xs {
  padding: var(--gap-xs);
}

.block-padding-inset-sm {
  padding: var(--gap-sm);
}

.block-padding-inset-md {
  padding: var(--gap-md);
}

.block-padding-inset-lg {
  padding: var(--gap-lg);
}

.block-padding-inset-xl {
  padding: var(--gap-xl);
}

.block-padding-inset-2xl {
  padding: var(--gap-2xl);
}

.block-padding-inset-3xl {
  padding: var(--gap-3xl);
}

.p-0 {
  padding: 0;
}

.p-2 {
  padding: calc(var(--theme-spacing) * 2);
}

.p-2\.5 {
  padding: calc(var(--theme-spacing) * 2.5);
}

.p-4 {
  padding: calc(var(--theme-spacing) * 4);
}

.p-5 {
  padding: calc(var(--theme-spacing) * 5);
}

.p-6 {
  padding: calc(var(--theme-spacing) * 6);
}

.p-8 {
  padding: calc(var(--theme-spacing) * 8);
}

.p-10 {
  padding: calc(var(--theme-spacing) * 10);
}

.p-15 {
  padding: calc(var(--theme-spacing) * 15);
}

.px-1\.5 {
  padding-left: calc(var(--theme-spacing) * 1.5);
  padding-right: calc(var(--theme-spacing) * 1.5);
}

.px-2 {
  padding-left: calc(var(--theme-spacing) * 2);
  padding-right: calc(var(--theme-spacing) * 2);
}

.px-2\.5 {
  padding-left: calc(var(--theme-spacing) * 2.5);
  padding-right: calc(var(--theme-spacing) * 2.5);
}

.px-3 {
  padding-left: calc(var(--theme-spacing) * 3);
  padding-right: calc(var(--theme-spacing) * 3);
}

.px-4 {
  padding-left: calc(var(--theme-spacing) * 4);
  padding-right: calc(var(--theme-spacing) * 4);
}

.px-5 {
  padding-left: calc(var(--theme-spacing) * 5);
  padding-right: calc(var(--theme-spacing) * 5);
}

.px-5\.5 {
  padding-left: calc(var(--theme-spacing) * 5.5);
  padding-right: calc(var(--theme-spacing) * 5.5);
}

.px-6 {
  padding-left: calc(var(--theme-spacing) * 6);
  padding-right: calc(var(--theme-spacing) * 6);
}

.px-10 {
  padding-left: calc(var(--theme-spacing) * 10);
  padding-right: calc(var(--theme-spacing) * 10);
}

.px-11 {
  padding-left: calc(var(--theme-spacing) * 11);
  padding-right: calc(var(--theme-spacing) * 11);
}

.px-15 {
  padding-left: calc(var(--theme-spacing) * 15);
  padding-right: calc(var(--theme-spacing) * 15);
}

.px-8 {
  padding-left: calc(var(--theme-spacing) * 8);
  padding-right: calc(var(--theme-spacing) * 8);
}

.pl-4 {
  padding-left: calc(var(--theme-spacing) * 4);
}

.py-1\.5 {
  padding-top: calc(var(--theme-spacing) * 1.5);
  padding-bottom: calc(var(--theme-spacing) * 1.5);
}

.py-2 {
  padding-top: calc(var(--theme-spacing) * 2);
  padding-bottom: calc(var(--theme-spacing) * 2);
}

.py-2\.5 {
  padding-top: calc(var(--theme-spacing) * 2.5);
  padding-bottom: calc(var(--theme-spacing) * 2.5);
}

.py-4 {
  padding-top: calc(var(--theme-spacing) * 4);
  padding-bottom: calc(var(--theme-spacing) * 4);
}

.py-5 {
  padding-top: calc(var(--theme-spacing) * 5);
  padding-bottom: calc(var(--theme-spacing) * 5);
}

.px-5\.5 {
  padding-top: calc(var(--theme-spacing) * 5.5);
  padding-bottom: calc(var(--theme-spacing) * 5.5);
}

.px-6 {
  padding-top: calc(var(--theme-spacing) * 6);
  padding-bottom: calc(var(--theme-spacing) * 6);
}

.py-8 {
  padding-top: calc(var(--theme-spacing) * 8);
  padding-bottom: calc(var(--theme-spacing) * 8);
}

.px-10 {
  padding-left: calc(var(--theme-spacing) * 10);
  padding-right: calc(var(--theme-spacing) * 10);
}

.py-1\.5 {
  padding-top: calc(var(--theme-spacing) * 1.5);
  padding-bottom: calc(var(--theme-spacing) * 1.5);
}

.py-10 {
  padding-top: calc(var(--theme-spacing) * 10);
  padding-bottom: calc(var(--theme-spacing) * 10);
}

.py-11 {
  padding-top: calc(var(--theme-spacing) * 11);
  padding-bottom: calc(var(--theme-spacing) * 11);
}

.pt-4 {
  padding-top: calc(var(--theme-spacing) * 4);
}

.pt-5 {
  padding-top: calc(var(--theme-spacing) * 5);
}

.pt-10 {
  padding-top: calc(var(--theme-spacing) * 10);
}

.pt-15 {
  padding-top: calc(var(--theme-spacing) * 15);
}

.pb-1 {
  padding-bottom: calc(var(--theme-spacing) * 1);
}

.pb-2 {
  padding-bottom: calc(var(--theme-spacing) * 2);
}

.\!pb-2 {
  padding-bottom: calc(var(--theme-spacing) * 2) !important;
}

.pb-3 {
  padding-bottom: calc(var(--theme-spacing) * 3);
}

.pb-5 {
  padding-bottom: calc(var(--theme-spacing) * 5);
}

.pb-10 {
  padding-bottom: calc(var(--theme-spacing) * 10);
}

.pb-15 {
  padding-bottom: calc(var(--theme-spacing) * 15);
}

@media only screen and (min-width: 990px) {
  .lg\:p-6 {
    padding: calc(var(--theme-spacing) * 6);
  }

  .lg\:p-10 {
    padding: calc(var(--theme-spacing) * 10);
  }

  .lg\:p-15 {
    padding: calc(var(--theme-spacing) * 15);
  }

  .lg\:px-4 {
    padding-left: calc(var(--theme-spacing) * 4);
    padding-right: calc(var(--theme-spacing) * 4);
  }

  .lg\:px-5 {
    padding-left: calc(var(--theme-spacing) * 5);
    padding-right: calc(var(--theme-spacing) * 5);
  }

  .lg\:px-10 {
    padding-left: calc(var(--theme-spacing) * 10);
    padding-right: calc(var(--theme-spacing) * 10);
  }

  .lg\:px-15 {
    padding-left: calc(var(--theme-spacing) * 15);
    padding-right: calc(var(--theme-spacing) * 15);
  }

  .lg\:py-10 {
    padding-top: calc(var(--theme-spacing) * 10);
    padding-bottom: calc(var(--theme-spacing) * 10);
  }

  .lg\:pt-15 {
    padding-top: calc(var(--theme-spacing) * 15);
  }

  .lg\:px-15 {
    padding-left: calc(var(--theme-spacing) * 15);
    padding-right: calc(var(--theme-spacing) * 15);
  }

  .lg\:py-15 {
    padding-top: calc(var(--theme-spacing) * 15);
    padding-bottom: calc(var(--theme-spacing) * 15);
  }
}

/* Margin Controls */
.margin-top-0 {
  margin-top: 0;
}

.margin-top-xs {
  margin-top: var(--spacing-xs);
}

.margin-top-sm {
  margin-top: var(--spacing-sm);
}

.margin-top-md {
  margin-top: var(--spacing-md);
}

.margin-top-normal {
  margin-top: var(--spacing-normal);
}

.margin-top-lg {
  margin-top: var(--spacing-lg);
}

.margin-top-xl {
  margin-top: var(--spacing-xl);
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-bottom-xs {
  margin-bottom: var(--spacing-xs);
}

.margin-bottom-sm {
  margin-bottom: var(--spacing-sm);
}

.margin-bottom-md {
  margin-bottom: var(--spacing-md);
}

.margin-bottom-normal {
  margin-bottom: var(--spacing-normal);
}

.margin-bottom-lg {
  margin-bottom: var(--spacing-lg);
}

.margin-bottom-xl {
  margin-bottom: var(--spacing-xl);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mr-auto {
  margin-left: 0;
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
  margin-right: 0;
}

.ml-2 {
  margin-left: calc(var(--theme-spacing) * 2);
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mt-auto {
  margin-top: auto;
}

.\!mt-auto {
  margin-top: auto !important;
}

.mt-0 {
  margin-top: 0;
}

.\!mt-0 {
  margin-top: 0 !important;
}

.mt-minus-0\.5 {
  margin-top: calc(var(--theme-spacing) * -0.5);
}

.mt-1 {
  margin-top: calc(var(--theme-spacing) * 1);
}

.mt-2 {
  margin-top: calc(var(--theme-spacing) * 2);
}

.mt-2\.5 {
  margin-top: calc(var(--theme-spacing) * 2.5);
}

.mt-3 {
  margin-top: calc(var(--theme-spacing) * 3);
}

.mt-4 {
  margin-top: calc(var(--theme-spacing) * 4);
}

.\!mt-4 {
  margin-top: calc(var(--theme-spacing) * 4) !important;
}

.mt-5 {
  margin-top: calc(var(--theme-spacing) * 5);
}

.\!mt-5 {
  margin-top: calc(var(--theme-spacing) * 5) !important;
}

.mt-6 {
  margin-top: calc(var(--theme-spacing) * 6);
}

.mt-7\.5 {
  margin-top: calc(var(--theme-spacing) * 7.5);
}

.mt-8 {
  margin-top: calc(var(--theme-spacing) * 8);
}

.mt-10 {
  margin-top: calc(var(--theme-spacing) * 10);
}

.mt-12 {
  margin-top: calc(var(--theme-spacing) * 12);
}

.mt-15 {
  margin-top: calc(var(--theme-spacing) * 15);
}

.mt-20 {
  margin-top: calc(var(--theme-spacing) * 20);
}

.mt-27 {
  margin-top: calc(var(--theme-spacing) * 27);
}

.\!mt-10 {
  margin-top: calc(var(--theme-spacing) * 10) !important;
}

.mt-minus-1 {
  margin-top: calc(var(--theme-spacing) * -1);
}

.mt-minus-2 {
  margin-top: calc(var(--theme-spacing) * -2);
}

.mb-minus-0\.5 {
  margin-bottom: calc(var(--theme-spacing) * -0.5);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-0\.5 {
  margin-bottom: calc(var(--theme-spacing) * 0.5);
}

.mt-0\.5 {
  margin-top: calc(var(--theme-spacing) * 0.5);
}

.mb-2 {
  margin-bottom: calc(var(--theme-spacing) * 2);
}

.mb-4 {
  margin-bottom: calc(var(--theme-spacing) * 4);
}

.mb-6 {
  margin-bottom: calc(var(--theme-spacing) * 6);
}

.mb-9 {
  margin-bottom: calc(var(--theme-spacing) * 9);
}

.mb-10 {
  margin-bottom: calc(var(--theme-spacing) * 10);
}

.mb-15 {
  margin-bottom: calc(var(--theme-spacing) * 15);
}

.\!mb-15 {
  margin-bottom: calc(var(--theme-spacing) * 15) !important;
}

.mb-18 {
  margin-bottom: calc(var(--theme-spacing) * 18);
}

.mb-21 {
  margin-bottom: calc(var(--theme-spacing) * 21);
}

.mb-minus-1 {
  margin-bottom: calc(var(--theme-spacing) * -1);
}

.m-0 {
  margin: 0;
}

@media only screen and (max-width: 989px) {
  .sm\:mt-auto {
    margin-top: auto;
  }
}

@media only screen and (min-width: 990px) {
  .lg\:mr-0 {
    margin-right: 0;
  }

  .lg\:ml-0 {
    margin-left: 0;
  }

  .lg\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:\!mt-0 {
    margin-top: 0 !important;
  }

  .lg\:\!mt-15 {
    margin-top: calc(var(--theme-spacing) * 15) !important;
  }

  .lg\:mb-18 {
    margin-bottom: calc(var(--theme-spacing) * 18);
  }
}

/* Gap Management */
.gap-2 {
  gap: calc(var(--theme-spacing) * 2);
}

.gap-2.5 {
  gap: calc(var(--theme-spacing) * 2.5);
}

.gap-3 {
  gap: calc(var(--theme-spacing) * 3);
}

.gap-4 {
  gap: calc(var(--theme-spacing) * 4);
}

.gap-6 {
  gap: calc(var(--theme-spacing) * 6);
}

.gap-7 {
  gap: calc(var(--theme-spacing) * 7);
}

.gap-8 {
  gap: calc(var(--theme-spacing) * 8);
}

.gap-10 {
  gap: calc(var(--theme-spacing) * 10);
}

.gap-15 {
  gap: calc(var(--theme-spacing) * 15);
}

.gap-3xs {
  gap: var(--gap-3xs);
}

.col-gap-3xs {
  column-gap: var(--gap-3xs);
}

.row-gap-3xs {
  row-gap: var(--gap-3xs);
}

.gap-2xs {
  gap: var(--gap-2xs);
}

.col-gap-2xs {
  column-gap: var(--gap-2xs);
}

.row-gap-2xs {
  row-gap: var(--gap-2xs);
}

.gap-xs {
  gap: var(--gap-xs);
}

.col-gap-xs {
  column-gap: var(--gap-xs);
}

.row-gap-xs {
  row-gap: var(--gap-xs);
}

.gap-sm {
  gap: var(--gap-sm);
}

.col-gap-sm {
  column-gap: var(--gap-sm);
}

.row-gap-sm {
  row-gap: var(--gap-sm);
}

.gap-md {
  gap: var(--gap-md);
}

.col-gap-md {
  column-gap: var(--gap-md);
}

.row-gap-md {
  row-gap: var(--gap-md);
}

.gap-lg {
  gap: var(--gap-lg);
}

.col-gap-lg {
  column-gap: var(--gap-lg);
}

.row-gap-lg {
  row-gap: var(--gap-lg);
}

.gap-xl {
  gap: var(--gap-xl);
}

.col-gap-xl {
  column-gap: var(--gap-xl);
}

.row-gap-xl {
  row-gap: var(--gap-xl);
}

.row-gap-10 {
  row-gap: calc(var(--theme-spacing) * 10);
}

.row-gap-15 {
  row-gap: calc(var(--theme-spacing) * 15);
}

.row-gap-20 {
  row-gap: calc(var(--theme-spacing) * 20);
}

.gap-2xl {
  gap: var(--gap-2xl);
}

.col-gap-2xl {
  column-gap: var(--gap-2xl);
}

.row-gap-2xl {
  row-gap: var(--gap-2xl);
}

.gap-3xl {
  gap: var(--gap-3xl);
}

.col-gap-3xl {
  column-gap: var(--gap-3xl);
}

.row-gap-3xl {
  row-gap: var(--gap-3xl);
}

.gap-4xl {
  gap: var(--gap-4xl);
}

.col-gap-4xl {
  column-gap: var(--gap-4xl);
}

.col-gap {
  column-gap: var(--theme-spacing);
}

.col-gap-2 {
  column-gap: calc(var(--theme-spacing) * 2);
}

.col-gap-4 {
  column-gap: calc(var(--theme-spacing) * 4);
}

.col-gap-10 {
  column-gap: calc(var(--theme-spacing) * 10);
}

.col-gap-15 {
  column-gap: calc(var(--theme-spacing) * 15);
}

.col-gap-32 {
  column-gap: calc(var(--theme-spacing) * 32);
}

.row-gap-4xl {
  row-gap: var(--gap-4xl);
}

.row-gap-0.5 {
  row-gap: calc(var(--theme-spacing) * 0.5);
}

.row-gap-1 {
  row-gap: var(--theme-spacing);
}

.row-gap-2 {
  row-gap: calc(var(--theme-spacing) * 2);
}

.row-gap-3 {
  row-gap: calc(var(--theme-spacing) * 3);
}

.row-gap-4 {
  row-gap: calc(var(--theme-spacing) * 4);
}

.row-gap-5 {
  row-gap: calc(var(--theme-spacing) * 5);
}

.row-gap-6 {
  row-gap: calc(var(--theme-spacing) * 6);
}

.row-gap-7 {
  row-gap: calc(var(--theme-spacing) * 7);
}

.row-gap-8 {
  row-gap: calc(var(--theme-spacing) * 8);
}

.row-gap-9 {
  row-gap: calc(var(--theme-spacing) * 9);
}

.row-gap-10 {
  row-gap: calc(var(--theme-spacing) * 10);
}`

.row-gap-20 {
  row-gap: calc(var(--theme-spacing) * 20);
}

.row-gap-36 {
  row-gap: calc(var(--theme-spacing) * 36);
}

.block-gap-t-0 {
  margin-top: 0;
}

.block-gap-t-3xs {
  margin-top: var(--gap-3xs);
}

.block-gap-t-2xs {
  margin-top: var(--gap-2xs);
}

.block-gap-t-xs {
  margin-top: var(--gap-xs);
}

.block-gap-t-sm {
  margin-top: var(--gap-sm);
}

.block-gap-t-md {
  margin-top: var(--gap-md);
}

.block-gap-t-lg {
  margin-top: var(--gap-lg);
}

.block-gap-t-xl {
  margin-top: var(--gap-xl);
}

.block-gap-t-2xl {
  margin-top: var(--gap-2xl);
}

.block-gap-t-3xl {
  margin-top: var(--gap-3xl);
}

.block-gap-b-0 {
  margin-bottom: 0;
}

.block-gap-b-3xs {
  margin-bottom: var(--gap-3xs);
}

.block-gap-b-2xs {
  margin-bottom: var(--gap-2xs);
}

.block-gap-b-xs {
  margin-bottom: var(--gap-xs);
}

.block-gap-b-sm {
  margin-bottom: var(--gap-sm);
}

.block-gap-b-md {
  margin-bottom: var(--gap-md);
}

.block-gap-b-lg {
  margin-bottom: var(--gap-lg);
}

.block-gap-b-xl {
  margin-bottom: var(--gap-xl);
}

.block-gap-b-2xl {
  margin-bottom: var(--gap-2xl);
}

.block-gap-b-3xl {
  margin-bottom: var(--gap-3xl);
}

.block-gap-b-4xl {
  margin-bottom: var(--gap-4xl);
}

.padding-gap-l-3xs {
  padding-left: var(--gap-3xs);
}

.padding-gap-l-2xs {
  padding-left: var(--gap-2xs);
}

.padding-gap-l-xs {
  padding-left: var(--gap-xs);
}

.padding-gap-l-sm {
  padding-left: var(--gap-sm);
}

.padding-gap-l-md {
  padding-left: var(--gap-md);
}

.padding-gap-l-lg {
  padding-left: var(--gap-lg);
}

.padding-gap-l-xl {
  padding-left: var(--gap-xl);
}

.padding-gap-l-2xl {
  padding-left: var(--gap-2xl);
}

.padding-gap-l-3xl {
  padding-left: var(--gap-3xl);
}

@media only screen and (min-width: 990px) {
  .lg\:row-gap-15 {
    row-gap: calc(var(--theme-spacing) * 15);
  }

  .lg\:gap-15 {
    gap: calc(var(--theme-spacing) * 15);
  }

  .lg\:gap-3xs {
    gap: var(--gap-3xs);
  }

  .lg\:gap-2xs {
    gap: var(--gap-2xs);
  }

  .lg\:gap-xs {
    gap: var(--gap-xs);
  }

  .lg\:gap-sm {
    gap: var(--gap-sm);
  }

  .lg\:gap-md {
    gap: var(--gap-md);
  }

  .lg\:gap-lg {
    gap: var(--gap-lg);
  }

  .lg\:gap-xl {
    gap: var(--gap-xl);
  }

  .lg\:gap-2xl {
    gap: var(--gap-2xl);
  }

  .lg\:gap-3xl {
    gap: var(--gap-3xl);
  }

  .lg\:padding-gap-l-3xs {
    padding-left: var(--gap-3xs);
  }
  
  .lg\:padding-gap-l-2xs {
    padding-left: var(--gap-2xs);
  }
  
  .lg\:padding-gap-l-xs {
    padding-left: var(--gap-xs);
  }

  .lg\:padding-gap-l-sm {
    padding-left: var(--gap-sm);
  }

  .lg\:padding-gap-l-md {
    padding-left: var(--gap-md);
  }

  .lg\:padding-gap-l-lg {
    padding-left: var(--gap-lg);
  }

  .lg\:padding-gap-l-xl {
    padding-left: var(--gap-xl);
  }

  .lg\:padding-gap-l-2xl {
    padding-left: var(--gap-2xl);
  }

  .lg\:padding-gap-l-3xl {
    padding-left: var(--gap-3xl);
  }

  .lg\:block-gap-b-0 {
    margin-bottom: 0;
  }

  .lg\:block-gap-b-3xs {
    margin-bottom: var(--gap-3xs);
  }

  .lg\:block-gap-b-2xs {
    margin-bottom: var(--gap-2xs);
  }

  .lg\:block-gap-b-xs {
    margin-bottom: var(--gap-xs);
  }
  
  .lg\:block-gap-b-sm {
    margin-bottom: var(--gap-sm);
  }

  .lg\:block-gap-b-md {
    margin-bottom: var(--gap-md);
  }

  .lg\:block-gap-b-lg {
    margin-bottom: var(--gap-lg);
  }

  .lg\:block-gap-b-xl {
    margin-bottom: var(--gap-xl);
  }

  .lg\:block-gap-b-2xl {
    margin-bottom: var(--gap-2xl);
  }

  .lg\:block-gap-b-3xl {
    margin-bottom: var(--gap-3xl);
  }
}

@media only screen and (min-width: 1200px) {
  .xl\:gap-15 {
    gap: calc(var(--theme-spacing) * 15);
  }
}

/*******************************
* FLEX UTILITIES
********************************/
/* Flex Containers */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

.\!no-wrap {
  flex-wrap: nowrap !important;
}

/* Flex Directions */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

@media only screen and (min-width: 990px) {
  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:flex-column {
    flex-direction: column;
  }

  .lg\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 989px) {
  .sm\:flex-row {
    flex-direction: row;
  }
  
  .sm\:flex-column {
    flex-direction: column;
  }
  
  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  
  .sm\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 1200px) {
  .xl\:flex-row {
    flex-direction: row;
  }
}

/* Content Justification */
.justify-start {
  justify-content: flex-start;
}

.\!justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center;
}

.\!justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end;
}

.\!justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between;
}

.justify-self-start {
  justify-self: flex-start;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-end {
  justify-self: flex-end;
}

@media only screen and (min-width: 990px) {
  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:\!justify-start {
    justify-content: flex-start !important;
  }

  .lg\:\!justify-center {
    justify-content: center !important;
  }

  .lg\:\!justify-end {
    justify-content: flex-end !important;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }
}

/* Item Alignment */
.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

@media only screen and (min-width: 990px) {
  .lg\:align-start {
    align-items: flex-start;
  }

  .lg\:align-center {
    align-items: center;
  }

  .lg\:align-end {
    align-items: flex-end;
  }
}

/* Flex Item Properties */
.flex-1 {
  flex: 1;
}

.grow-1 {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.basis-50 {
  flex-basis: 50%;
}

.basis-auto {
  flex-basis: auto;
}

/* Order Controls */
.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

@media only screen and (min-width: 990px) {
  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }
}

/*******************************
* GRID SYSTEM
********************************/
/* Column Structures */
.grid-cols-1 {
  grid-template-columns: 1fr;
}

.grid-cols-1-2 {
  grid-template-columns: 1fr 2fr;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-3-1 {
  grid-template-columns: 3fr 1fr;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

.grid-cols-2-auto {
  grid-template-columns: repeat(2, auto);
}

.grid-cols-auto-1 {
  grid-template-columns: auto 1fr;
}

.grid-cols-auto-1fr-auto {
  grid-template-columns: auto 1fr auto;
}

.span-all {
  grid-column: 1 / -1;
}

@media only screen and (min-width: 990px) {
  .lg\:grid-cols-1-3 {
    grid-template-columns: 1fr 3fr;
  }

  .lg\:grid-cols-3-1 {
    grid-template-columns: 3fr 1fr;
  }

  .lg\:grid-cols-2-1 {
    grid-template-columns: 2fr 1fr;
  }

  .lg\:grid-cols-3-2 {
    grid-template-columns: 3fr 2fr;
  }
}

/* Row Structures */
.grid-rows-0 {
  grid-template-rows: 0fr;
}

.grid-rows-1 {
  grid-template-rows: 1fr;
}

.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

@media only screen and (min-width: 990px) {
  .lg\:col-span-3 {
    grid-column: span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4;
  }
}

/* Responsive Columns */
@media only screen and (min-width: 750px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media only screen and (min-width: 990px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .lg\:grid-cols-2-auto {
    grid-template-columns: repeat(2, auto);
  }

  .lg\:grid-cols-3\/1 {
    grid-template-columns: 3fr 1fr;
  }

  .lg\:grid-cols-3\/2 {
    grid-template-columns: 3fr 2fr;
  }
}

/*******************************
* COLOR & BACKGROUND
********************************/
/* Background Styles */
.background-black {
  background-color: black;
}

.background-white {
  background-color: white;
}

.background-theme-yellow {
  background-color: var(--theme-color-yellow);
}

.hover\:background-theme-yellow {
  &:hover {
    background-color: var(--theme-color-yellow);
  }
}

.background-theme-light-blue {
  background-color: var(--theme-color-light-blue);
}

.hover\:background-theme-light-blue {
  &:hover {
    background-color: var(--theme-color-light-blue);
  }
}

.background-theme-accent-blue {
  background-color: var(--theme-color-accent-blue);
}

.background-theme-coral {
  background-color: var(--theme-color-coral);
}

.hover\:background-theme-coral {
  &:hover {
    background-color: var(--theme-color-coral);
  }
}

.background-scheme-light {
  background-color: rgb(var(--color-scheme-light));
}

.background-scheme-dark {
  background-color: rgb(var(--color-scheme-dark));
}

.background-scheme-accent {
  background-color: rgb(var(--color-scheme-accent));
}

.background-transparent {
  background-color: transparent;
}

.background-primary {
  background-color: rgb(var(--color-background-primary));
}

.background-secondary {
  background-color: rgb(var(--color-background-secondary));
}

.background-tertiary {
  background-color: rgb(var(--color-background-tertiary));
}

.background-accent {
  background-color: rgb(var(--color-background-accent));
}

.background-gradient {
  background-image: var(--color-background-gradient);
}

.hover\:background-primary {
  &:hover,
  &.active {
    background-color: rgb(var(--color-background-primary));
  }
}

.hover\:background-secondary {
  &:hover,
  &.active {
    background-color: rgb(var(--color-background-secondary));
  }
}

.hover\:background-tertiary {
  &:hover,
  &.active {
    background-color: rgb(var(--color-background-tertiary));
  }
}

.hover\:background-accent {
  &:hover,
  &.active {
    background-color: rgb(var(--color-background-accent));
  }
}

@media only screen and (min-width: 750px) {
  .md\:background-theme-light-blue {
    background-color: var(--theme-color-light-blue);
  }

  .md\:background-theme-coral {
    background-color: var(--theme-color-coral);
  }
}

/* Overlay Effects */
.overlay-primary {
  background-color: rgba(var(--color-overlay-primary), var(--overlay-opacity));
}

.overlay-secondary {
  background-color: rgba(var(--color-overlay-secondary), var(--overlay-opacity));
}

.overlay-tertiary {
  background-color: rgba(var(--color-overlay-tertiary), var(--overlay-opacity));
}

/* SVG Fill Colors */
.fill-primary {
  fill: rgb(var(--color-background-primary));
}

.fill-secondary {
  fill: rgb(var(--color-background-secondary));
}

.fill-tertiary {
  fill: rgb(var(--color-background-tertiary));
}

.fill-accent {
  fill: rgb(var(--color-background-accent));
}

.fill-scheme-light {
  fill: rgba(var(--color-scheme-light), var(--theme-svg-opacity));
}

.fill-scheme-dark {
  fill: rgba(var(--color-scheme-dark), var(--theme-svg-opacity));
}

.fill-scheme-accent {
  fill: rgba(var(--color-scheme-accent), var(--theme-svg-opacity));
}

.fill-overline {
  fill: rgba(var(--color-text-overline), var(--theme-svg-opacity));
}

.fill-title {
  fill: rgba(var(--color-text-title), var(--theme-svg-opacity));
}

.fill-subtitle {
  fill: rgba(var(--color-text-subtitle), var(--theme-svg-opacity));
}

.fill-body {
  fill: rgba(var(--color-text-body), var(--theme-svg-opacity));
}

.fill-link {
  fill: rgba(var(--color-text-link), var(--theme-svg-opacity));
}

.fill-accent {
  fill: rgba(var(--color-text-accent), var(--theme-svg-opacity));
}

/* Border Colors */
.border-color-transparent {
  border-color: transparent;
}

.border-color-primary {
  border-color: rgb(var(--color-border-primary));
}

.border-color-secondary {
  border-color: rgb(var(--color-border-secondary));
}

.border-color-tertiary {
  border-color: rgb(var(--color-border-tertiary));
}

.hover\:border-color-secondary:hover {
  border-color: rgb(var(--color-border-secondary));
}

.border-background-primary {
  background-color: rgb(var(--color-border-primary));
}

.border-background-secondary {
  background-color: rgb(var(--color-border-secondary));
}

.border-background-tertiary {
  background-color: rgb(var(--color-border-tertiary));
}

.border-background-accent {
  background-color: rgb(var(--color-border-accent));
}

.border-color-background-primary {
  border-color: rgb(var(--color-background-primary));
}

.border-color-background-secondary {
  border-color: rgb(var(--color-background-secondary));
}

.border-color-background-tertiary {
  border-color: rgb(var(--color-background-tertiary));
}

.border-color-background-accent {
  border-color: rgb(var(--color-background-accent));
}

.border-color-black {
  border-color: black;
}

/*******************************
* BORDER STYLING
********************************/
/* Border Widths */
.border-width {
  border-width: 0.1rem;
}

.border-width-0.5 {
  border-width: calc(var(--theme-spacing) * 0.5);
}

.border-xs {
  border-width: var(--border-width-xs);
}

.border-sm {
  border-width: var(--border-width-sm);
}

.border-md {
  border-width: var(--border-width-md);
}

.border-lg {
  border-width: var(--border-width-lg);
}

.border-xl {
  border-width: var(--border-width-xl);
}

.border-b-xs {
  border-bottom-width: var(--border-width-xs);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b-sm {
  border-bottom-width: var(--border-width-sm);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b-md {
  border-bottom-width: var(--border-width-md);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b-lg {
  border-bottom-width: var(--border-width-lg);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b-xl {
  border-bottom-width: var(--border-width-xl);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b-0\.25 {
  border-bottom-width: calc(var(--theme-spacing) * 0.25);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b {
  border-bottom-width: 0.1rem;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-b-2\.5 {
  border-bottom-width: calc(var(--theme-spacing) * 2.5);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.border-right-width-0 {
  border-right-width: 0;
}

.border-left-width-0 {
  border-left-width: 0;
}

.border-top-width-0 {
  border-top-width: 0;
}

.border-bottom-width-0 {
  border-bottom-width: 0;
}

/* Border Styles */
.border-style-solid {
  border-style: solid;
}

.border-style-dashed {
  border-style: dashed;
}

/* Border Radius */
.radius-xs {
  border-radius: var(--radius-xs);
}

.radius-sm {
  border-radius: var(--radius-sm);
}

.radius-md {
  border-radius: var(--radius-md);
}

.radius-lg {
  border-radius: var(--radius-lg);
}

.radius-xl {
  border-radius: var(--radius-xl);
}

.radius-full {
  border-radius: 999px;
}

.radius-none {
  border-radius: 0;
}

/*******************************
* IMAGE HANDLING
********************************/
/* Image Shapes */
.image-square {
  border-radius: var(--radius-0);
}

.image-rounded {
  border-radius: var(--radius-sm);
}

.image-circle {
  border-radius: var(--radius-full);
}

/* Object Fitting */
.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

.object-fill {
  object-fit: fill;
}

/* Object Positioning */
.object-top {
  object-position: top;
}

.object-center {
  object-position: center;
}

.object-bottom {
  object-position: bottom;
}

.object-left {
  object-position: left;
}

.object-right {
  object-position: right;
}

.object-left-top {
  object-position: left top;
}

.object-right-top {
  object-position: right top;
}

.object-left-bottom {
  object-position: left bottom;
}

.object-right-bottom {
  object-position: right bottom;
}

/*******************************
* VISUAL UTILITIES
********************************/
/* Overflow Behavior */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-clip {
  overflow-x: clip;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Opacity Levels */
.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-35 {
  opacity: 0.35;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-full {
  opacity: 1;
}

.hover\:opacity-100 {
  &:hover {
    opacity: 1;
  }
}

.hover\:opacity-80 {
  &:hover {
    opacity: 0.8;
  }
}

.hover\:opacity-75 {
  &:hover {
    opacity: 0.75;
  }
}

.hover\:opacity-60 {
  &:hover {
    opacity: 0.6;
  }
}

/* Icon Sizing */
.icon-2xs {
  height: var(--icon-2xs);
}

.w-icon-2xs {
  width: var(--icon-2xs);
}

.h-icon-2xs {
  height: var(--icon-2xs);
}

.icon-xs {
  height: var(--icon-xs);
}

.w-icon-xs {
  width: var(--icon-xs);
}

.h-icon-xs {
  height: var(--icon-xs);
}

.icon-sm {
  height: var(--icon-sm);
}

.w-icon-sm {
  width: var(--icon-sm);
}

.h-icon-sm {
  height: var(--icon-sm);
}

.icon-md {
  height: var(--icon-md);
}

.w-icon-md {
  width: var(--icon-md);
}

.h-icon-md {
  height: var(--icon-md);
}

.icon-lg {
  height: var(--icon-lg);
}

.w-icon-lg {
  width: var(--icon-lg);
}

.h-icon-lg {
  height: var(--icon-lg);
}

.icon-xl {
  height: var(--icon-xl);
}

.w-icon-xl {
  width: var(--icon-xl);
}

.h-icon-xl {
  height: var(--icon-xl);
}

.icon-2xl {
  height: var(--icon-2xl);
}

.w-icon-2xl {
  width: var(--icon-2xl);
}

.h-icon-2xl {
  height: var(--icon-2xl);
}

.icon-max {
  height: var(--icon-max);
}

.w-icon-max {
  width: var(--icon-max);
}

.h-icon-max {
  height: var(--icon-max);
}

@media only screen and (min-width: 990px) {
  .lg\:icon-2xs {
    height: var(--icon-2xs);
  }

  .lg\:icon-xs {
    height: var(--icon-xs);
  }

  .lg\:icon-sm {
    height: var(--icon-sm);
  }

  .lg\:icon-md {
    height: var(--icon-md);
  }

  .lg\:icon-lg {
    height: var(--icon-lg);
  }

  .lg\:icon-xl {
    height: var(--icon-xl);
  }

  .lg\:icon-2xl {
    height: var(--icon-2xl);
  }
}

/* Shadow Effects */
.dropshadow {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.dropshadow-md {
  box-shadow: 0.6rem 0.6rem 1rem 0 rgba(0, 0, 0, 0.25);
}

/*******************************
* INTERACTIVE UTILITIES
********************************/
/* Cursor Controls */
.pointer {
  cursor: pointer;
}

.button-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Pointer Events */
.pointer-events-none {
  pointer-events: none;
}

.events-none {
  pointer-events: none;
}

/* Visibility Toggles */
.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.\!visible {
  visibility: visible !important;
}

.\!hidden {
  visibility: hidden !important;
}

/*******************************
* TRANSITION & ANIMATION
********************************/
/* Transition Properties */
.transition-all {
  transition-property: all;
}

.transition-grid-rows {
  transition-property: grid-template-rows;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-background-color {
  transition-property: background-color;
}

.transition-bottom {
  transition-property: bottom;
}

.transition-translate {
  transition-property: translate;
}

.transition-rotate {
  transition-property: rotate;
}

.transition-border-color {
  transition-property: border-color;
}

/* Transition Timing */ 
.duration-100 {
  transition-duration: 0.1s;
}

.duration-200 {
  transition-duration: 0.2s;
}

.duration-300 {
  transition-duration: 0.3s;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

/* Rotation Effects */
.rotate-0 {
  rotate: 0deg;
}

.rotate-90 {
  rotate: 90deg;
}

.rotate-180 {
  rotate: 180deg;
}

/*******************************
* RESET & OVERRIDES
********************************/
/* Property Resets */
.no-border {
  border: none;
}

.no-background {
  background-color: transparent;
  background-image: none;
  background: none;
}

.no-decoration {
  text-decoration: none;
}

.unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

.style-none {
  list-style: none;
}

.border-none {
  border: none;
}

.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}

@media only screen and (min-width: 990px) {
  .lg\:overflow-wrap-normal {
    overflow-wrap: normal;
  }
}

/* Important Overrides */
.\!justify-start {
  justify-content: flex-start !important;
}

.\!justify-center {
  justify-content: center !important;
}

.\!justify-end {
  justify-content: flex-end !important;
}

.\!visible {
  visibility: visible !important;
}

.\!hidden {
  visibility: hidden !important;
}

.origin-center {
  transform-origin: center;
}

.bottom-minus-100 {
  bottom: -100%;
}

.strikethrough {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.scroll-auto {
  scroll-behavior: auto;
}

.v-align-super {
  vertical-align: super;
}

.v-align-middle {
  vertical-align: middle;
}

.v-align-sub {
  vertical-align: sub;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

@media only screen and (min-width: 990px) {
  .lg\:max-w-half {
    max-width: 50%;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:w-6 {
    width: calc(var(--theme-spacing) * 6);
  }

  .lg\:w-12 {
    width: calc(var(--theme-spacing) * 12);
  }

  .lg\:w-16 {
    width: calc(var(--theme-spacing) * 16);
  }

  .lg\:h-6 {
    height: calc(var(--theme-spacing) * 6);
  }

  .lg\:h-12 {
    height: calc(var(--theme-spacing) * 12);
  }

  .lg\:h-16 {
    height: calc(var(--theme-spacing) * 16);
  }

  .lg\:w-25 {
    width: calc(var(--theme-spacing) * 25);
  }
}

.rte-spacing-override {
  * {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  * + * {
    margin-top: 1.6rem;
  }
}

strong {
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
}

.\*\:\!size-body-small {
  ul:not(.list-unstyled, .list-menu, .unstyled, .style-none, .stamped-pagination, .list-payment, .splide__pagination, .stamped-tabs, .splide__list) {
    li {
      &::before {
        top: 4px;
      }
    }
  }
}

ul:not(.list-unstyled, .list-menu, .unstyled, .style-none, .stamped-pagination, .list-payment, .splide__pagination, .stamped-tabs, .splide__list) {
  position: relative;
  list-style-type: none;
  padding-left: 0;

  li {
    position: relative;
    margin-left: 3.2rem;

    &:not(:first-child) {
      margin-top: 1.6rem;
    }

    &::before {
      content: "";
      position: absolute;
      left: -32px;
      width: 12px;
      height: 12px;
      background-color: currentColor;
      mask-image: var(--icon-list-bullet);
    }
  }
}

button {
  color: black;
}