/* ========================================
   STATIC GLOBAL VARIABLES
======================================== */

:root {
    /* Spacing scale (8pt grid) */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Base spacing */
    --padding-base: 0;
    --padding-base-x: 0;
    --padding-base-y: 0;
    --margin-base: 0;
    --margin-base-x: 0;
    --margin-base-y: 0;
    --gap-base: 0;
    --gap-base-x: 0;
    --gap-base-y: 0;

    /* Device safe spaces */
    --safe-space-top: max(env(safe-area-inset-top), var(--space-xl));
    --safe-space-bottom: env(safe-area-inset-bottom);
    --safe-space-left: env(safe-area-inset-left);
    --safe-space-right: env(safe-area-inset-right);

    /* Semantic spacing tokens */
    --section-padding-x: var(--space-xl);
    --section-padding-y: calc(var(--space-3xl) * 1.25);
    --card-padding: var(--space-lg);
    --content-gap: var(--space-md);
    --heading-gap-small: var(--space-sm);
    --heading-gap-large: var(--space-lg);
    --button-gap: var(--space-xl);
    --list-item-gap: 12px;
    --paragraph-gap: var(--space-md);
    --nontext-focus-outline-offset: 2px;

    /* Width/height constraints */
    --max-full-section-content-width: 1168px;

    /* Font size system */
    --text-xs: 12px;
    --text-sm: 16px;
    --text-base: 18px;
    --text-lg: 26px;
    --text-xl: 44px;
    --text-2xl: 52px;
    --text-3xl: 60px;

    /* Line height system */
    /*--text-xs-lh: 20px;
    --text-xs-lh-lg: 24px;
    --text-sm-lh-sm: 24px;
    --text-sm-lh: 28px;
    --text-base-lh: 32px;
    --text-lg-lh: 36px;
    --text-xl-lh: 60px;
    --text-2xl-lh: 64px;
    --text-3xl-lh: 80px;*/

    /* Font weight system */
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Font family system */
    --font-heading: 'Raleway',
        system-ui,
        sans-serif;
    --font-content: 'Poppins',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;

    /* Icons */
    --dropdown-icon-up: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/6978e16c4d506dc0824c829e.svg');
    --dropdown-icon-down: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/6978e19100336c0be5dd34de.svg');
    --check-icon: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/695701be8f84950a240b6baa.svg');
    --check-icon-duotone: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/69751195d4fb90c9e098e236.svg');
    --x-icon: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/695846a54aa6691edbeaa91c.svg');
    --x-icon-duotone: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/697512d0eb392b7a7612c7e8.svg');
    --quote-icon: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/697515df59a77bbdd4c15ac4.svg');
    --list-bullet-icon: url('https://storage.googleapis.com/msgsndr/di909OfdLemnNwJIEyRw/media/6956f486e4125ac9547d85fa.svg');
    --coupon-tag-icon: url('https://assets.cdn.filesafe.space/di909OfdLemnNwJIEyRw/media/69af63dd13dc9c76c14e8ad0.svg');
    --warning-icon: url('https://assets.cdn.filesafe.space/di909OfdLemnNwJIEyRw/media/69b88475c625854f08d40ce3.svg');
    --gift-icon-duotone: url('https://assets.cdn.filesafe.space/di909OfdLemnNwJIEyRw/media/69c024304d6857b91db20b40.svg');

    /* Brand Colors - Primary */
    --color-primary: var(--color-primary-900);
    --color-primary-50: oklch(0.970 0.013 252);
    --color-primary-100: oklch(0.927 0.026 254);
    --color-primary-200: oklch(0.872 0.046 256);
    --color-primary-300: oklch(0.791 0.074 258);
    --color-primary-400: oklch(0.691 0.107 260);
    --color-primary-500: oklch(0.592 0.148 262);
    --color-primary-600: oklch(0.502 0.175 263);
    --color-primary-700: oklch(0.449 0.177 264);
    --color-primary-800: oklch(0.390 0.159 264);
    --color-primary-900: oklch(0.339 0.137 264);
    --color-primary-950: oklch(0.229 0.092 264);

    /* Brand Colors - Secondary */
    --color-secondary: var(--color-secondary-600);
    --color-secondary-50: oklch(0.978 0.020 58);
    --color-secondary-100: oklch(0.950 0.041 56);
    --color-secondary-200: oklch(0.895 0.075 54);
    --color-secondary-300: oklch(0.814 0.116 52);
    --color-secondary-400: oklch(0.713 0.159 48);
    --color-secondary-500: oklch(0.656 0.194 44);
    --color-secondary-600: oklch(0.590 0.204 42);
    --color-secondary-700: oklch(0.491 0.174 42);
    --color-secondary-800: oklch(0.413 0.141 42);
    --color-secondary-900: oklch(0.358 0.115 42);
    --color-secondary-950: oklch(0.247 0.073 42);

    /* Neutral Colors */
    --color-black: var(--color-black-950);
    --color-black-alpha-1: oklch(from var(--color-black) l c h / 0.01);
    --color-black-alpha-2: oklch(from var(--color-black) l c h / 0.02);
    --color-black-alpha-3: oklch(from var(--color-black) l c h / 0.03);
    --color-black-alpha-4: oklch(from var(--color-black) l c h / 0.04);
    --color-black-alpha-5: oklch(from var(--color-black) l c h / 0.05);
    --color-black-alpha-6: oklch(from var(--color-black) l c h / 0.06);
    --color-black-alpha-7: oklch(from var(--color-black) l c h / 0.07);
    --color-black-alpha-8: oklch(from var(--color-black) l c h / 0.08);
    --color-black-alpha-9: oklch(from var(--color-black) l c h / 0.09);
    --color-black-alpha-10: oklch(from var(--color-black) l c h / 0.1);
    --color-black-alpha-12: oklch(from var(--color-black) l c h / 0.12);
    --color-black-alpha-700: oklch(from var(--color-black) l c h / 0.7);
    --color-black-0: oklch(1 0 0);
    --color-black-50: oklch(0.988 0 0);
    --color-black-100: oklch(0.976 0 0);
    --color-black-200: oklch(0.935 0 0);
    --color-black-300: oklch(0.879 0 0);
    --color-black-400: oklch(0.705 0 0);
    --color-black-500: oklch(0.538 0 0);
    --color-black-600: oklch(0.411 0 0);
    --color-black-700: oklch(0.325 0 0);
    --color-black-800: oklch(0.222 0 0);
    --color-black-900: oklch(0.157 0 0);
    --color-black-950: oklch(0 0 0);
    --color-white: var(--color-white-950);
    --color-white-alpha-1: oklch(from var(--color-white) l c h / 0.01);
    --color-white-alpha-2: oklch(from var(--color-white) l c h / 0.02);
    --color-white-alpha-3: oklch(from var(--color-white) l c h / 0.03);
    --color-white-alpha-4: oklch(from var(--color-white) l c h / 0.04);
    --color-white-alpha-5: oklch(from var(--color-white) l c h / 0.05);
    --color-white-alpha-6: oklch(from var(--color-white) l c h / 0.06);
    --color-white-alpha-7: oklch(from var(--color-white) l c h / 0.07);
    --color-white-alpha-8: oklch(from var(--color-white) l c h / 0.08);
    --color-white-alpha-9: oklch(from var(--color-white) l c h / 0.09);
    --color-white-alpha-10: oklch(from var(--color-white) l c h / 0.1);
    --color-white-alpha-12: oklch(from var(--color-white) l c h / 0.12);
    --color-white-alpha-200: oklch(from var(--color-white) l c h / 0.2);
    --color-white-alpha-700: oklch(from var(--color-white) l c h / 0.7);
    --color-white-0: oklch(0 0 0);
    --color-white-50: oklch(0.157 0 0);
    --color-white-100: oklch(0.222 0 0);
    --color-white-200: oklch(0.325 0 0);
    --color-white-300: oklch(0.411 0 0);
    --color-white-400: oklch(0.538 0 0);
    --color-white-500: oklch(0.705 0 0);
    --color-white-600: oklch(0.879 0 0);
    --color-white-700: oklch(0.935 0 0);
    --color-white-800: oklch(0.976 0 0);
    --color-white-900: oklch(0.988 0 0);
    --color-white-950: oklch(1 0 0);
    --color-gray-50: oklch(0.985 0.002 247.839);
    --color-gray-100: oklch(0.967 0.003 264.542);
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-gray-300: oklch(0.872 0.01 258.338);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.551 0.037 264.364);
    --color-gray-600: oklch(0.446 0.04 256.802);
    --color-gray-700: oklch(0.373 0.044 259.733);
    --color-gray-800: oklch(0.278 0.05 260.848);
    --color-gray-900: oklch(0.21 0.054 264.665);
    --color-gray-950: oklch(0.13 0.058 261.692);

    /* Semantic Colors */
    --color-success: var(--color-success-500);
    --color-success-50: oklch(0.990 0.025 166);
    --color-success-100: oklch(0.972 0.055 164);
    --color-success-200: oklch(0.948 0.095 162);
    --color-success-300: oklch(0.908 0.145 160);
    --color-success-400: oklch(0.852 0.185 158);
    --color-success-500: oklch(0.708 0.168 159);
    --color-success-600: oklch(0.640 0.145 164);
    --color-success-700: oklch(0.522 0.120 166);
    --color-success-800: oklch(0.420 0.095 168);
    --color-success-900: oklch(0.354 0.078 170);
    --color-success-950: oklch(0.226 0.048 172);
    --color-error: var(--color-error-600);
    --color-error-50: oklch(0.971 0.013 17.38);
    --color-error-100: oklch(0.936 0.032 17.717);
    --color-error-200: oklch(0.885 0.062 18.334);
    --color-error-300: oklch(0.808 0.114 19.571);
    --color-error-400: oklch(0.704 0.191 22.216);
    --color-error-500: oklch(0.637 0.237 25.331);
    --color-error-600: oklch(0.577 0.245 27.325);
    --color-error-700: oklch(0.505 0.213 27.518);
    --color-error-800: oklch(0.444 0.177 26.899);
    --color-error-900: oklch(0.396 0.141 25.723);
    --color-error-950: oklch(0.258 0.092 26.042);

    /* Content Colors */
    --color-content-dark: oklch(0.157 0.035 255);
    --color-content-light: var(--color-white);
    --color-content-0: light-dark(var(--color-white), var(--color-black));
    --color-content-50: light-dark(var(--color-gray-50), oklch(0.145 0.07 264));
    --color-content-100: light-dark(var(--color-gray-100), oklch(0.21 0.09 262.05));
    --color-content-200: light-dark(var(--color-gray-200), oklch(0.26 0.11 262.42));
    --color-content-300: light-dark(var(--color-gray-300), oklch(0.31 0.13 262.79));
    --color-content-400: light-dark(var(--color-gray-400), oklch(0.45 0.17 260));
    --color-content-500: light-dark(var(--color-gray-500), oklch(0.55 0.18 255));
    --color-content-600: light-dark(var(--color-gray-600), oklch(0.65 0.016 247));
    --color-content-700: light-dark(var(--color-gray-700), oklch(0.80 0.012 245));
    --color-content-800: light-dark(var(--color-gray-800), oklch(0.88 0.008 243));
    --color-content-900: light-dark(var(--color-gray-900), oklch(0.93 0.005 242));
    --color-content-950: light-dark(var(--color-gray-950), oklch(0.97 0.003 240));
    --color-content-heading: light-dark(var(--color-content-dark), var(--color-content-light));

    /* Misc Colors */
    --color-focus: currentColor;
    --color-scrollbar: var(--color-content-500);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-950) 0%, var(--color-primary-600) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-500) 100%);

    /* Shadows */
    --shadow-sm: 0 2px 2px var(--color-black-alpha-4);
    --shadow-md: 0 4px 12px var(--color-black-alpha-5);
    --shadow-lg: 0 12px 32px var(--color-black-alpha-6);
    --shadow-xl: 0 24px 48px var(--color-black-alpha-10);

    /* Radiuses */
    --radius-2xs: 2px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --radius-focus: var(--radius-2xs);

    /* FX */
    --btn-click-filter-fx: saturate(1.3);
    --btn-shadow-primary: 0 8px 24px -4px oklch(from var(--color-primary) l c h / 0.4);
    --btn-shadow-hover-primary: 0 12px 28px -4px oklch(from var(--color-primary) l c h / 0.5);
    --btn-shadow-secondary: 0 4px 16px oklch(from var(--color-secondary) l c h / 0.35),
        inset 0 1px 0 oklch(1 0 0 / 0.2);
    --btn-shadow-hover-secondary: 0 8px 24px oklch(from var(--color-secondary) l c h / 0.4);
    --loader-field-bg: light-dark(var(--color-card-200, var(--color-content-100)), var(--color-card-300, var(--color-content-200)));
    --loader-field-anim: shimmer 1.5s infinite linear;
    --loader-field-anim-changes: background-position;
    --loader-field-anim-fx: linear-gradient(90deg,
            var(--color-black) 0.01%,
            var(--color-black-alpha-2) 25%,
            var(--color-black-alpha-2) 75%,
            var(--color-black) 99.99%) 0 0 / 50cqi 100% no-repeat fixed,
        linear-gradient(90deg,
            var(--color-black) 0.01%,
            var(--color-black-alpha-2) 25%,
            var(--color-black-alpha-2) 75%,
            var(--color-black) 99.99%) 50cqi 0 / 50cqi 100% no-repeat fixed;

    @media (max-width: 480px) {
        --section-padding-x: var(--space-sm);
        --section-padding-y: var(--space-2xl);
        --card-padding: var(--space-md);
        --button-gap: var(--space-lg);

        --text-lg: 24px;
        --text-xl: 24px;
        --text-2xl: 28px;
        --text-3xl: 36px;

        --text-lg-lh: 32px;
        --text-xl-lh: 32px;
        --text-2xl-lh: 36px;
        --text-3xl-lh: 48px;
    }
}

/* ========================================
   DYNAMIC GLOBAL VARIABLES
======================================== */

* {
    /* Transforms */
    --translate-down: translateY(calc(var(--padding-base-y) / 2));
    --translate-up: translateY(calc((var(--padding-base-y) / 2) * -1));
    --translate-left: translateX(calc((var(--padding-base-x) / 2) * -1));
    --translate-right: translateX(calc(var(--padding-base-x) / 2));
    --scale-down-translate-down: scale(0.9) translateY(calc(var(--padding-base-y) / 2))
}

/* ========================================
   BASE & RESET STYLES
======================================== */

*,
*:is(::before, ::after) {
    box-sizing: border-box;
    line-height: calc(1em + 0.75rem);
    margin: 0;

    @media (prefers-reduced-motion: no-preference) {
        interpolate-size: allow-keywords;
    }

    @media (prefers-reduced-motion: reduce) {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

html {
    overscroll-behavior-x: none;
    color-scheme: light dark;
    scrollbar-color: var(--color-scrollbar) transparent;
    font-size: var(--text-base);

    &.mobile {
        &.safari {
            --safe-space-top: max(env(safe-area-inset-top), var(--space-md));
        }
    }

    /* Align font rendering with macOS system defaults on high-DPI displays. macOS disabled 
    subpixel antialiasing starting with Mojave (2018), but browsers haven't caught up. */
    @media (min-resolution: 2dppx) {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

body {
    font-family: var(--font-content);
    background-color: light-dark(var(--color-content-0), var(--color-content-100));
}

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

input,
button,
textarea,
select {
    font: inherit;
}

/* Get rid of random empty generated span elements */
span:empty {
    display: none;
}

/* Font Awesome icons are what HighLevel uses by default on certain elements. This isn't 
needed since different icons will be used instead. */
.fas {
    display: none;
}

.os-theme-custom {
    --os-size: calc(20px / var(--dpr));
    --os-handle-perpendicular-size: 25%;
    --os-handle-perpendicular-size-hover: 87.5%;
    --os-handle-perpendicular-size-active: 87.5%;
    --os-padding-perpendicular: calc(4px / var(--dpr));
    --os-padding-axis: calc(4px / var(--dpr));
    --os-handle-interactive-area-offset: calc(18px / var(--dpr));
    --os-handle-border-radius: var(--radius-full);
    --os-handle-bg: var(--color-scrollbar);
    --os-handle-bg-hover: var(--color-scrollbar);
    --os-handle-bg-active: var(--color-scrollbar);
}

.os-scrollbar-handle:is(:hover, :active) {
    filter: brightness(1.5);
}

/* ========================================
   TYPOGRAPHY STYLES & UTILITIES
======================================== */

:focus-visible {
    outline: 2.5px solid var(--color-focus);
    border-radius: var(--radius-focus);
}

::selection {
    color: var(--color-content-light);
    background-color: var(--color-primary);
}

p {
    color: light-dark(var(--color-content-600), var(--color-content-700));
    text-wrap: pretty;
}

:is(h1, h2, h3, h4, h5, h6, p):empty::after {
    height: var(--paragraph-gap);
    display: block;
}

a {
    text-decoration: underline transparent;
    transition-property: text-decoration-color, color;
    transition-duration: 0.2s;
    transition-timing-function: ease;

    &:hover {
        text-decoration-color: currentColor;
    }
}

.text-no-wrap {
    white-space: nowrap;
}

.text-output {
    text-wrap: pretty;
    overflow-wrap: break-word;
    font-size: var(--text-base);

    &.text-line-height-lg * {
        line-height: 2em;
    }

    &.text-xs * {
        font-size: var(--text-xs);
    }

    &.text-sm * {
        font-size: var(--text-sm);
    }

    &.text-base * {
        font-size: var(--text-base);
    }

    &.text-lg * {
        font-size: var(--text-lg);
    }

    &.text-xl * {
        font-size: var(--text-xl);
    }

    &.text-2xl * {
        font-size: var(--text-2xl);
    }

    &.text-3xl * {
        font-size: var(--text-3xl);
    }
}

.c-heading {
    color: var(--color-content-heading);
}

.c-sub-heading {
    color: var(--color-content-700);
}

.c-heading,
.c-sub-heading {
    font-family: var(--font-heading);
    text-wrap: balance;

    &:first-child {
        text-box: trim-start cap text;
    }

    &.text-xs * {
        font-weight: var(--fw-medium);
    }

    &:not(.c-heading) {
        font-size: var(--text-xl);
        line-height: var(--text-xl-lh);
        font-weight: var(--fw-extrabold);

        & + :is(.c-heading, .c-sub-heading) {
            margin-top: var(--space-xs);
        }

        & + :is(.c-paragraph, .c-bullet-list) {
            margin-top: var(--paragraph-gap);
        }
    }

    &:not(.c-sub-heading) {
        font-size: var(--text-3xl);
        font-weight: var(--fw-extrabold);
        line-height: var(--text-3xl-lh);
        letter-spacing: -0.05ch;

        & + :is(.c-heading, .c-sub-heading) {
            margin-top: var(--space-xs);
        }

        & + :is(.c-paragraph, .c-bullet-list) {
            margin-top: var(--paragraph-gap);
        }
    }
}

.c-paragraph {

    & + :is(.c-heading, .c-sub-heading) {
        margin-top: var(--space-xl);
    }

    & + :is(.c-paragraph, .c-bullet-list) {
        margin-top: var(--paragraph-gap);
    }
}

.icon-decor {
    --icon-url: initial;

    &::before,
    &::after {
        flex-shrink: 0;
    }

    &.i-check-duotone {
        --icon-url: var(--check-icon-duotone);
    }

    &.i-x-duotone {
        --icon-url: var(--x-icon-duotone);
    }

    &.i-gift-duotone {
        --icon-url: var(--gift-icon-duotone);
    }

    &.text-output {
        display: flex;
        gap: var(--space-sm);

        &::before,
        &::after {
            mask: var(--icon-url) left center / contain no-repeat;
            background: var(--gradient, currentColor);
        }
    }
}

.accent-decor {
    --accent-bg: currentColor;

    & :is(span, b, strong, u) {
        background: var(--accent-bg);
        background-clip: text;
        color: transparent;
    }

    & u {
        text-decoration-color: oklch(from light-dark(var(--color-content-0), var(--color-content-100)) l c h / 0.8);
        text-decoration-thickness: 0.125em;
    }
}

.counter {
    --label: '';
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    width: fit-content;

    & :is(h1, h2, h3, h4, h5, h6, p)::before {
        content: var(--label);
        line-height: 1;
    }

    &.counter-hyphen {
        position: relative;

        &::before {
            content: '';
            width: 40px;
            height: 2px;
            flex-shrink: 0;
            background-color: var(--gradient, currentColor);
        }
    }
}

/* ========================================
   IMAGES & UTILITIES
======================================== */

.c-image {
    pointer-events: none;
    user-select: none;
}

&.img-masked picture {
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;

    &:not(.visible) {
        display: none;
    }

    & img {
        visibility: hidden;
    }
}

/* ========================================
   PAGE LAYOUTS & UTILITIES
======================================== */

.no-scroll {
    overflow: hidden !important;
}

.page-height {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.auto {
    width: auto !important;
    height: auto !important;
}

.flex {
    display: flex !important;
}

.flex-centered {
    justify-content: center !important;
    align-items: center !important;
}

.flex-centered-x {
    justify-content: center !important;
}

.flex-centered-y {
    align-items: center !important;
}

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

.no-collapse {
    flex-direction: row !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.fit-content {
    width: fit-content !important;
    height: fit-content !important;
}

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

.fit-content-h {
    height: fit-content !important;
}

.stretch {
    width: -webkit-fill-available !important;
    width: -moz-available !important;
    width: stretch !important;
    height: stretch !important;

    @media (max-width: 480px) {
        height: -webkit-fill-available !important;
        height: -moz-available !important;
    }
}

.row-align-left {
    margin-right: auto !important;
}

.row-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.row-align-right {
    margin-left: auto !important;
}

.inner {
    display: inherit;
    flex: inherit;
    flex-flow: inherit;
    justify-content: inherit;
    align-items: inherit;
    gap: inherit;
    width: 100%;

    &.horizontal {
        flex-direction: row;
    }

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

.c-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
    padding: var(--section-padding-y) 0;
    padding-left: calc(var(--safe-space-left) + var(--section-padding-x));
    padding-right: calc(var(--safe-space-right) + var(--section-padding-x));

    &.funnel-code {
        display: none;
    }

    &:has(.card:not(.frosted-glass)) {
        --initial-content-bg: light-dark(var(--color-content-50), color-mix(in oklch, var(--color-content-50), var(--color-content-100)));
        background-color: var(--initial-content-bg);

        &:first-child {
            background: linear-gradient(0deg, var(--initial-content-bg) 93%, transparent 100%);
        }
    }

    &.fullSection > .inner {
        max-width: var(--max-full-section-content-width);
    }
}

.c-row {
    display: flex;
    counter-reset: column row;

    > .inner {
        > .c-column {
            counter-increment: column;

            &:last-child {
                counter-set: column;
            }

            & .counter {
                --label: counter(column);
            }

            @media (max-width: 480px) {
                width: auto;
            }
        }

        > .c-row {
            counter-increment: row;

            &:last-child {
                counter-set: row;
            }

            & .counter {
                --label: counter(row);
            }
        }
    }

    &.col-dir {
        --col-direction: initial;
        flex-direction: var(--col-direction) !important;

        &.forward-x {
            --col-direction: row;
        }

        &.reverse-x {
            --col-direction: row-reverse;
        }

        &.forward-y {
            --col-direction: column;
        }

        &.reverse-y {
            --col-direction: column-reverse;
        }

        &:is(.reverse-x, .reverse-x-m, .reverse-x-d) .counter:has(.counter-hyphen) {
            flex-direction: var(--col-direction);
        }

        @media (max-width: 480px) {
            &.forward-x-m {
                --col-direction: row;
            }

            &.reverse-x-m {
                --col-direction: row-reverse;
            }

            &.forward-y-m {
                --col-direction: column;
            }

            &.reverse-y-m {
                --col-direction: column-reverse;
            }
        }

        @media (min-width: 481px) {
            &.forward-x-d {
                --col-direction: row;
            }

            &.reverse-x-d {
                --col-direction: row-reverse;
            }

            &.forward-y-d {
                --col-direction: column;
            }

            &.reverse-y-d {
                --col-direction: column-reverse;
            }
        }
    }

    /* Currently only available for rows with exactly two columns */
    &.col-dividers {
        --divider-dimension: 0;
        --divider-color: transparent;

        > .inner > :first-child:nth-last-child(2)::after {
            content: '';
            display: block;
            order: 2;
            width: var(--divider-dimension);
            background-color: var(--divider-color);
            border-radius: var(--radius-full);
        }

        &:is(.forward-y, .forward-y-m, .forward-y-d, .reverse-y, .reverse-y-m, .reverse-y-d) > .inner::after {
            width: auto;
            height: var(--divider-dimension);
        }

        @media (max-width: 480px) {
            &:not(.forward-x, .forward-x-m, .reverse-x, .reverse-x-m) > .inner::after {
                width: auto;
                height: var(--divider-dimension);
            }
        }
    }

    @media (max-width: 768px) {
        &.col-collapse-768 {
            flex-direction: column !important;

            > .inner {
                width: auto;
            }
        }
    }

    @media (max-width: 480px) {
        flex-direction: column;
    }
}

.c-column {
    display: flex;
    flex: 1 1 auto;
}

/* ========================================
   BUTTONS
======================================== */

button {
    --color-focus: var(--color-secondary-400);
    color: var(--color-content-light);
    background: var(--gradient-secondary);
    border: none;
    border-radius: var(--radius-lg);
    transition-property: transform, opacity, box-shadow, filter;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity, box-shadow, filter;
    padding: var(--space-md) var(--space-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--btn-shadow-secondary);
    font-weight: var(--fw-bold);
    font-family: var(--font-heading);
    letter-spacing: 0.025em;
    cursor: pointer;
    user-select: none;
    text-wrap: pretty;
    outline-offset: var(--nontext-focus-outline-offset);

    &:disabled {
        cursor: not-allowed;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, var(--color-white-alpha-200), transparent);
        transition: transform 0.5s ease;
    }

    &:not(:disabled) {
        &:active {
            transform: translateY(0);
            transition-duration: 0.125s;
            filter: var(--btn-click-filter-fx);
        }

        &:hover {
            transform: translateY(-3px);
            box-shadow: var(--btn-shadow-hover-secondary);

            &::before {
                transform: translateX(200%);
            }
        }
    }

    & .v-spinner {
        position: relative;
        height: 1lh;
        width: 1lh;

        &::after {
            content: '';
            display: block;
            position: absolute;
            right: 50%;
            top: 50%;
            color: var(--white);
            font-size: 4px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            text-indent: -9999em;
            animation: mulShdSpin 1.3s infinite linear;
            transform: translate(50%, -50%) translateZ(0);
        }
    }

    & .main-heading-button,
    & .main-text {
        font-size: var(--text-base);
        line-height: 1.5rem;
    }

    & .sub-heading-button {
        margin-top: var(--space-xs);
        font-size: var(--text-xs);
        font-family: var(--font-content);
    }

    & .secondary {

        &,
        & * {
            all: unset;
        }

        --color-focus: currentColor;
        font-family: var(--font-content);
        font-size: var(--text-base);
        color: var(--color-content-400);
        transition: color 0.25s ease;
        border-radius: var(--radius-focus);

        &:hover {
            color: var(--color-content-500);
        }

        & .main-heading-button,
        & .sub-heading-button {
            text-decoration: underline;
        }
    }

    @media (max-width: 480px) {
        width: 100%;
    }
}

/* ========================================
   CALL-TO-ACTION META
======================================== */

.cta-meta {
    --padding-base-x: var(--space-sm);
    --padding-base-y: var(--space-xs);
    padding: var(--padding-base-y) var(--padding-base-x);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: var(--padding-base-x);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-content-300);
    color: var(--color-content-600);
    text-align: center;
    font-size: var(--text-xs);

    &::before,
    &::after {
        content: '';
        color: var(--color-secondary);
        aspect-ratio: 1 / 1;
        width: 8px;
        background-color: currentColor;
        border-radius: var(--radius-full);
    }

    &::before {
        animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        anchor-name: --cta-chip;
        flex-shrink: 0;
    }

    &::after {
        position: absolute;
        position-anchor: --cta-chip;
        position-area: center;
        animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        animation-delay: 1s;
    }
}

.c-button + :has(> .cta-meta:first-child) {
    margin-top: var(--space-md);
}

/* ========================================
   CARD LAYOUTS
======================================== */

:is(.card, .popup-banner):not(.bg-none) {
    --color-card-0: var(--color-content-0);
    --color-card-50: var(--color-content-50);
    --color-card-100: var(--color-content-100);
    --color-card-200: var(--color-content-200);
    --color-card-300: var(--color-content-300);
    --color-card-400: var(--color-content-400);
    --color-card-500: var(--color-content-500);
    --color-card-600: var(--color-content-600);
    --color-card-700: var(--color-content-700);
    --color-card-800: var(--color-content-800);
    --color-card-900: var(--color-content-900);
    --color-card-950: var(--color-content-950);

    @media (min-width: 481px) {
        &.bg-none-d {
            --color-card-0: unset;
            --color-card-50: unset;
            --color-card-100: unset;
            --color-card-200: unset;
            --color-card-300: unset;
            --color-card-400: unset;
            --color-card-500: unset;
            --color-card-600: unset;
            --color-card-700: unset;
            --color-card-800: unset;
            --color-card-900: unset;
            --color-card-950: unset;
        }
    }

    @media (max-width: 480px) {
        &.bg-none-m {
            --color-card-0: unset;
            --color-card-50: unset;
            --color-card-100: unset;
            --color-card-200: unset;
            --color-card-300: unset;
            --color-card-400: unset;
            --color-card-500: unset;
            --color-card-600: unset;
            --color-card-700: unset;
            --color-card-800: unset;
            --color-card-900: unset;
            --color-card-950: unset;
        }
    }
}

.card {
    --padding-base: var(--card-padding);
    --padding-base-x: var(--padding-base);
    --padding-base-y: var(--padding-base);
    position: relative;
    padding: var(--padding-base);
    gap: var(--padding-base);
    background-color: light-dark(var(--color-card-0), color-mix(in oklch, var(--color-card-100), var(--color-card-200)));

    &.c-column > .inner {
        gap: unset;
    }

    &.quote {
        --quote-icon-dimension: 64px;

        & .quote-icon {
            position: absolute;
            top: calc((var(--quote-icon-dimension) / 2) * -1);
            background-color: light-dark(var(--color-primary-200), var(--color-primary));
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-xl);
            display: flex;
            width: var(--quote-icon-dimension);
            height: var(--quote-icon-dimension);
            justify-content: center;

            &::before {
                content: '';
                width: 100%;
                margin: 12px;
                background-color: light-dark(var(--color-primary), var(--color-primary-200));
                mask: var(--quote-icon) center / contain no-repeat;
            }

            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: var(--radius-xl);
            }
        }
    }

    @media (min-width: 480px) {
        &.bg-none-m {
            border: none;
        }

        &.c-row {
            --padding-base: var(--space-xl);
        }
    }
}

.author-intro-area {
    position: relative;
}

.author-intro-area::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, oklch(from var(--color-secondary) l c h / 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.author-intro-area::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, oklch(from rgb(26 35 50) l c h / 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.author-showcase {
    --bg-shape-positioning: var(--space-md);
    position: relative;
}

.author-showcase::before {
    content: '';
    position: absolute;
    top: calc(var(--bg-shape-positioning) * -1);
    left: calc(var(--bg-shape-positioning) * -1);
    right: var(--bg-shape-positioning);
    bottom: var(--bg-shape-positioning);
    background: linear-gradient(135deg, oklch(from var(--color-secondary) l c h / 0.2) 0%, transparent 100%);
    border-radius: var(--radius-lg);
}

.author-showcase > * {
    z-index: 1;
}

@media (max-width: 480px) {
    .author-showcase {
        --bg-shape-positioning: var(--section-padding-x);
    }
}

/* ========================================
   FORM ELEMENTS
======================================== */

input[type='checkbox'] {
    --color-focus: var(--color-primary-400);
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition-property: opacity, transform, background-color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-xs);
    color: light-dark(var(--color-white), var(--color-card-400, var(--color-content-300)));
    background-color: currentColor;
    border-color: currentColor;
    border: 1.5px solid var(--color-content-300);
    outline-offset: var(--nontext-focus-outline-offset);

    &::after {
        content: '';
        width: 100%;
        height: 100%;
        background-color: var(--color-content-light);
        mask-image: var(--check-icon);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        opacity: 0;
        transform: scale(0.5);
    }

    &:checked {
        color: light-dark(var(--color-primary), var(--color-primary-600));

        &::after {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ========================================
   LISTS
======================================== */

ul {
    padding: 0;

    & li {
        display: flex;
        align-items: flex-start;
        gap: var(--list-item-gap);
        list-style-type: none;

        &::before {
            content: '';
            width: 0.3em;
            height: 1lh;
            mask: var(--icon-url, var(--list-bullet-icon)) left center / contain no-repeat;
            background: var(--gradient, currentColor);
            flex-shrink: 0;
        }

        &:not(:last-child) {
            margin-bottom: var(--paragraph-gap);
        }
    }

    &.icon-decor li::before {
        width: 0.8lh;
    }
}

.c-bullet-list {
    & + .c-paragraph .text-output {
        margin-top: var(--paragraph-gap);
    }

    & + :is(.c-sub-heading, .c-heading) .text-output {
        margin-top: var(--space-xl);
    }
}

/* ========================================
   MODALS & OVERLAYS
======================================== */

#overlay {
    position: fixed;
    inset: 0;
    background-color: var(--color-black-alpha-700);
    pointer-events: none;
    overflow-y: visible;
    backdrop-filter: blur(10px);
    width: 100%;

    &.show {
        animation: fadeIn 0.3s ease-out forwards;
        pointer-events: auto;

        & .drop-zone-draggable {
            animation: scaleUpFade 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
        }

        & .closeLPModal {
            animation: slideInFromTop 0.3s ease-out 0.3s backwards;
        }
    }

    &.hide {
        animation: fadeOut 0.25s ease-in forwards;

        & .drop-zone-draggable {
            animation: scaleDownFade 0.25s ease-in forwards;
        }
    }
}

.popup-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 100%;
}

.drop-zone-draggable,
.closeLPModal {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.drop-zone-draggable {
    --padding-base-x: var(--section-padding-x);
    --padding-base-y: var(--space-lg);
    padding: var(--padding-base-y) 0;
    padding-left: calc(var(--safe-space-left) + var(--padding-base-x));
    padding-right: calc(var(--safe-space-right) + var(--padding-base-x));
    position: relative;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-content-400) transparent;
    background-color: var(--color-content-0);
    border-radius: inherit;
    flex: 1;
    width: 100%;

    @media (min-width: 480px) {
        --padding-base-y: var(--space-2xl);
        border-top-right-radius: 0px;
    }
}

.closeLPModal {
    width: var(--text-xs);
    height: var(--text-xs);
    padding: var(--space-sm);
    box-sizing: content-box;
    background-color: var(--color-content-light);
    mask: var(--x-icon) center / contain no-repeat content-box;
    opacity: 0.8;
    transition: opacity 0.2s ease;

    &:hover {
        opacity: 1;
    }

    & img {
        display: none;
    }
}

/* Fix display issues with popup appearance previewer */
#app #overlay,
#app #overlay * {
    all: revert;
}

.hl-cookie-consent-banner {
    gap: var(--card-padding);

    & button {

        &,
        & * {
            all: unset;
        }

        padding: var(--space-sm) var(--space-xs);
        font-weight: var(--fw-medium);
        font-size: inherit;

        &.primary {
            background-color: var(--color-card-950);
            color: var(--color-card-0);
        }

        &.secondary {
            --color-focus: currentColor;
            font-family: var(--font-content);
            font-size: var(--text-base);
            color: var(--color-card-400);
            transition: color 0.25s ease;
            border-radius: var(--radius-focus);

            &:hover {
                color: var(--color-card-500);
                text-decoration-color: var(--color-card-500);
            }
        }
    }
}

.popup-banner {
    background-color: var(--color-card-0);
    box-shadow: var(--shadow-2xl);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);

    &.banner-actions-container {
        gap: var(--space-xs);
    }

    &.position-left,
    &.position-right {
        --banner-offset: var(--space-sm);
        bottom: var(--banner-offset);
        max-width: 450px;
    }

    &.position-left {
        left: var(--banner-offset);
    }

    &.position-right {
        right: var(--banner-offset);
    }
}

.banner-text {
    font-size: var(--text-sm);

    &::before {
        content: 'We use cookies';
        display: block;
        font-family: var(--font-heading);
        margin-bottom: var(--space-sm);
        font-weight: var(--fw-bold);
        color: var(--color-content-950);
    }

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

/* ========================================
   LOGO SHOWCASE
======================================== */

.c-logo-showcase {
    position: relative;

    &.img-masked {
        background-color: var(--color-content-950);
    }
}

.logo-showcase-container {

    &,
    & * {
        height: 100%;
    }

    mask-image: linear-gradient(90deg, transparent 2.5%, currentColor 25%, currentColor 75%, transparent 97.5%);
    padding: 0;
}

.logo-showcase-content {
    display: flex;
    gap: var(--space-2xl);
    content-visibility: auto;
    animation: showcase-scroll linear infinite;

    &:hover,
    &.paused {
        animation-play-state: paused;
    }

    & picture,
    & img {
        content-visibility: visible;
    }

    @media (max-width: 480px) {
        gap: var(--space-xl);
    }
}

/* ========================================
   CHECKOUT FORMS
======================================== */

.container-order-form-two-step {
    --btn-shadow-secondary:
        0 8px 24px -4px oklch(from var(--color-secondary) l c h / 0.4),
        inset 0 1px 0 oklch(1 0 0 / 0.2);
    --btn-shadow-hover-secondary: 0 12px 28px -4px oklch(from var(--color-secondary) l c h / 0.5);
    background-color: light-dark(var(--color-card-100, var(--color-content-50)), var(--color-card-200, var(--color-content-100)));
    font-size: var(--text-xs);

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

    & section {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        animation: fadeInUp 0.35s ease-out;
        animation-fill-mode: both;
        animation-delay: calc(sibling-index() * 0.05s);
        will-change: opacity, transform;
    }

    & .info {
        margin-bottom: var(--space-lg);

        & > div {
            position: relative;
        }
    }

    & item {
        min-width: 60px;
        font-size: inherit;
        color: var(--color-content-950);
    }

    & .v-spinner {
        position: relative;
        margin: auto;
        width: 100%;
        border-radius: var(--radius-sm);
        background: var(--loader-field-bg);
        overflow: hidden;
        container-type: inline-size;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--loader-field-anim-fx);
            animation: var(--loader-field-anim);
            will-change: var(--loader-field-anim-changes);
        }

        & .v-moon {
            animation: none;
            background-color: transparent !important;
            border: none !important;
        }

        & > .v-moon {
            width: 100% !important;
        }

        & + .v-spinner {
            margin-top: var(--space-xs);
        }
    }
}

.ghl-payment-element .divider {
    margin: var(--space-sm) 0;
}

[id*='paypal-cone-step-order'] + :has(.StripeElement)::before {
    content: '\00A0';
    display: block;
    font-size: inherit;
    line-height: inherit;
    margin: var(--space-sm) 0;
}

.__PrivateStripeElement iframe {
    will-change: height;
}

.generic-loader-field {
    background: var(--loader-field-bg);
    border-radius: var(--radius-sm);
    backdrop-filter: none;
    filter: none;

    &::after {
        background: var(--loader-field-anim-fx);
        animation: var(--loader-field-anim);
        will-change: var(--loader-field-anim-changes);
    }
}

.coupon-item {
    font-size: inherit;
    vertical-align: bottom;
    margin-right: var(--space-sm);
}

.coupon-tag {
    display: inline-flex;
    align-items: center;
    vertical-align: bottom;
    color: var(--color-primary);
    background-color: transparent;
    font-size: inherit;
    padding: 0;
    font-weight: 700;
    letter-spacing: -1ch;

    &::before {
        content: '';
        display: block;
        width: 1em;
        height: 1em;
        mask: var(--coupon-tag-icon) center / contain no-repeat;
        background-color: currentColor;
    }

    & svg {
        display: none;
    }
}

.coupon-code {
    letter-spacing: normal;
    margin-left: calc(var(--space-xs) / 2);
}

.form-heading {
    color: var(--color-content-dark);
    font-family: var(--font-content);
    font-weight: var(--fw-extrabold);
}

.form-body {
    padding: 0;
    background-color: transparent;
}

.form-payment {
    padding: 0;
}

.form-input {
    --color-focus: var(--color-card-400, var(--color-content-300));
    background-color: light-dark(var(--color-card-200, var(--color-content-100)), var(--color-card-300, var(--color-content-200)));
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    font-size: inherit;
    line-height: inherit;
    transition-property: background-color;
    transition-timing-function: ease;
    transition-duration: 0.2s;
    will-change: background-color;
    outline-offset: -2.5px;
    height: auto;
    color: var(--color-content-950);

    &::placeholder {
        color: var(--color-card-400, var(--color-content-300));
    }

    &.text-box-error,
    &.is-danger[value]:not([value='']) {
        --color-focus: var(--color-error);
        background-color: var(--color-error-200);
    }

    &:is(.is-danger[value=''], :not(:focus)) + .order-validation-error {
        opacity: 0;
        transform: var(--translate-down);
    }
}

.order-validation-error {
    --tooltip-arrow-dimension: 24px;
    --padding-base-x: var(--space-sm);
    --padding-base-y: var(--space-xs);
    position: absolute;
    inset: calc(100% + var(--space-xs)) 0 auto 0;
    width: 100%;
    padding: var(--padding-base-y) var(--padding-base-x);
    background-color: var(--color-error);
    color: var(--color-content-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition-property: transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    pointer-events: none;
    font-size: inherit;
    line-height: inherit;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: calc(var(--padding-base-x) - (var(--tooltip-arrow-dimension) / 2.5));
        width: var(--tooltip-arrow-dimension);
        height: var(--tooltip-arrow-dimension);
        background: inherit;
        border-radius: 2px;
        transform: rotate(45deg);
        pointer-events: none;
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }
}

.payment-bar,
.divider-product,
:is(.divider, .separator):is(::before, ::after) {
    height: 2px;
    background-color: light-dark(var(--color-card-200, var(--color-content-100)), var(--color-card-300, var(--color-content-200)));
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    & hr {
        display: none;
    }

    &::before,
    &::after {
        content: '';
        flex: 1;
    }

    & .text {
        color: var(--color-card-500, var(--color-content-400));
        font-size: inherit;
    }
}

.divider-product {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
    opacity: 1;
}

.separator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: inherit;
    line-height: inherit;
    color: var(--color-card-500, var(--color-content-400));

    &::before,
    &::after {
        content: '';
    }
}

.product-description {
    display: grid;
    grid-template-columns: 8fr 1fr 2fr;

    & div:first-child {
        gap: var(--space-xs);
    }

    & + .product-description {
        margin-top: var(--space-xs);
    }

    & + .divider-product {
        margin-top: var(--space-sm);
    }
}

.order-bump-container {
    --border-dimension: 2px;
    --label-padding-x: var(--space-sm);
    --label-padding-y: var(--space-xs);
    position: relative;
    border: var(--border-dimension) solid transparent;
    border-radius: var(--radius-sm);
    background-color: light-dark(var(--color-primary-50), color-mix(in oklch, var(--color-card-200, var(--color-content-100)), var(--color-content-300) 50%));
    padding: var(--card-padding);
    padding-top: calc(max(var(--card-padding), 32px) + var(--space-xs) + var(--label-padding-y));
    margin: calc(var(--space-xl) + var(--label-padding-y)) 0 var(--space-xl);
    color: var(--color-content-950);
    font-size: inherit;
    line-height: inherit;

    &::before {
        content: '🔥 LIMITED TIME OFFER';
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, calc(-50% - (var(--border-dimension) / 2)));
        background: linear-gradient(135deg, light-dark(var(--color-primary-950), var(--color-primary-900)) 0%, light-dark(var(--color-primary-700), color-mix(in oklch, var(--color-primary-400), var(--color-primary-950))) 100%);
        border-radius: var(--radius-full);
        color: var(--color-content-light);
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: 0.025ch;
        padding: var(--label-padding-y) var(--label-padding-x);
        box-shadow:
            0 4px 12px oklch(from var(--color-primary-950) l c h / 0.2),
            inset 0 2px 0 var(--color-white-alpha-8);
    }

    &::after {
        content: '';
        position: absolute;
        right: calc(var(--border-dimension) * -1);
        left: calc(var(--border-dimension) * -1);
        top: calc(var(--border-dimension) * -1);
        bottom: calc(var(--border-dimension) * -1);
        background: linear-gradient(135deg, light-dark(var(--color-primary-600), var(--color-primary-800)), light-dark(var(--color-primary-200), var(--color-primary-400))) border-box;
        mask: linear-gradient(oklch(0 0 0) 0 0) padding-box, linear-gradient(oklch(0 0 0) 0 0);
        mask-composite: exclude;
        border: var(--border-dimension) solid transparent;
        border-radius: inherit;
        z-index: -1;
    }

    & > span {
        display: block;
    }
}

.bump--checkbox {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 180%;
        height: 180%;
        margin-left: -90%;
        margin-top: -90%;
        background: radial-gradient(circle, var(--color-primary) 0%, transparent 75%);
        border-radius: 50%;
        filter: blur(16px);
        z-index: -1;
        animation: pulse-glow 2s ease-in-out infinite;
        will-change: transform, opacity;
    }

    &:checked::before {
        transform: scale(0);
    }
}

.bump-header {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);

    & .headline {
        color: inherit;
        font-size: var(--text-sm);
        font-family: var(--font-heading);
    }
}

.bump--flashing-arrow {
    display: none;
}

.oto-headline {
    color: inherit;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);

    & + span {
        white-space: break-spaces;
    }
}

.form-btn {
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);

    & i {
        display: none;
    }
}

.coupon-container {
    margin-bottom: var(--space-lg);
}

.coupon-text-container {
    align-items: stretch;
    gap: var(--space-xs);
}

.coupon-input {
    text-transform: uppercase;

    &::placeholder {
        text-transform: normal;
    }
}

.coupon-applied-text {
    --padding-base: var(--space-sm);
    --padding-base-x: var(--padding-base);
    padding: var(--padding-base);
    padding-left: calc(var(--padding-base-x) + var(--space-xs) + 1em);
    position: relative;
    color: inherit;
    max-width: none;
    width: 100%;
    font-size: inherit;
    animation: fadeInLeft 0.35s ease-out;
    border-radius: var(--radius-sm);
    align-content: center;
    overflow: visible;

    &::before {
        content: '';
        display: block;
        position: absolute;
        left: var(--padding-base-x);
        top: 50%;
        transform: translateY(-50%);
        width: 1em;
        height: 1em;
        background-color: var(--color-success);
        mask: var(--check-icon) center / contain no-repeat;
    }

    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        border: 1.5px dashed var(--color-card-300, var(--color-content-200));
        border-radius: var(--radius-sm);
        transform: var(--translate-right);
        animation-name: slideInFromRight;
        animation-duration: inherit;
        animation-timing-function: inherit;
        animation-fill-mode: forwards;
        pointer-events: none;
    }

    & b {
        font-weight: inherit;
    }
}

.coupon-text-container,
.coupon-text-container input {
    width: 100%;
}

.apply-coupon-btn {

    &,
    & {
        all: unset;
    }

    --color-focus: var(--color-primary-400);
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: var(--text-sm);
    line-height: 0;
    background: none;
    outline-color: transparent;
    font-size: var(--text-sm);

    &::before,
    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        transition: inherit;
    }

    &::before {
        opacity: 0;
        box-shadow: var(--shadow-md);
    }

    &::after {
        content: attr(data-label);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: inherit;
        color: var(--color-content-light);
        background-color: var(--color-primary);
        box-shadow: var(--btn-shadow-primary);
        outline: inherit;
        outline-color: var(--color-focus);
        outline-offset: inherit;
    }

    &:not(:disabled):hover:active {
        transition-duration: 0.125s;
        filter: var(--btn-click-filter-fx);
    }

    &:hover {
        &::after {
            transform: translateY(-3px);
            box-shadow: var(--btn-shadow-hover-primary);
        }

        &:active::after {
            transform: translateY(0);
            box-shadow: var(--btn-shadow-primary);
        }
    }

    &:disabled {
        background-color: transparent;
        border-color: oklch(0.99 0 0);
        color: var(--color-card-400, var(--color-content-300));

        &::before {
            opacity: 1;
        }

        &::after {
            opacity: 0;
        }
    }
}

.order-total {
    font-size: inherit;
    color: var(--color-content-950);
    margin-bottom: var(--space-xs);

    & strong {
        font-weight: inherit;
    }
}

.total-discount {
    margin-top: var(--space-xs);
}

.order-form-footer {
    margin-top: var(--space-lg);
    color: var(--color-card-500, var(--color-content-400));
}

.terms-conditions-wrapper {
    align-items: center;
    margin: var(--space-lg) 0 var(--space-sm);
    gap: var(--list-item-gap);
}

.terms-conditions-text {
    font-size: inherit;
}

.card-el-error-msg {
    margin-top: var(--space-xs);
    width: 100%;
    gap: var(--list-item-gap);
    color: var(--color-error);
    font-size: inherit;
    animation: fadeInLeft 0.25s ease-out;

    ::before {
        content: '';
        width: 16px;
        height: 16px;
        background-color: currentColor;
        mask: var(--warning-icon) center / contain no-repeat;
    }

    &:has(+ button) {
        margin-bottom: var(--space-sm);
    }

    & img,
    & svg {
        display: none;
    }
}

.forward-shopping-details {
    color: var(--color-card-500, var(--color-content-400));

    & svg {
        display: none;
    }
}

.order-form-v2 {
    margin-top: var(--space-md);
}

.paypal-content {
    width: auto;
    margin-top: var(--space-lg);
    user-select: none;

    & > div {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        width: 100%;

        &:has(> .v-spinner) [class*='paypal-container'] {
            display: none;
        }

        & > div {
            line-height: 0;
        }
    }
}

[class*='paypal-container'] {
    animation: fadeInUp 0.35s ease-out;
    animation-fill-mode: both;
    will-change: opacity, transform;

    & > * {
        opacity: 1;
        transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &.paypal-container-disabled > * {
        opacity: .5;
    }
}

.payment-title-wrapp {
    display: flex;
    align-items: center;
}

.payment-title {
    color: var(--color-card-500, var(--color-content-400));
    font-size: inherit;
    padding-right: var(--space-sm);
    font-weight: var(--fw-bold);
}

/* ========================================
   ACCORDION
======================================== */

.accordion {
    --color-focus: var(--color-card-400, var(--color-content-300));
    --color-state: light-dark(var(--color-card-200, var(--color-content-100)), var(--color-card-300, var(--color-content-200)));
    outline-offset: -1.5px;
    overflow: hidden;
    border: 1px solid var(--color-state);
    transition-property: border-color, background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    will-change: border-color, background-color;

    &:not(.active) .accordion-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    &:hover,
    &.active {
        --color-state: light-dark(var(--color-card-100, var(--color-content-50)), var(--color-card-200, var(--color-content-100)));
        background-color: var(--color-state);
    }

    &.active {
        & .button-icon-end {
            &::before {
                transform: translateY(100%);
                opacity: 1;
            }

            &::after {
                transform: translateY(100%);
                opacity: 0;
            }
        }

        & .accordion-content {
            height: auto;
        }
    }

    & + .accordion {
        margin-top: var(--space-xs);
    }
}

.accordion-trigger {
    all: unset;
    display: block;
    position: relative;
    font-weight: var(--fw-extrabold);
    text-align: left;
    padding-right: calc(var(--padding-base-x) * 2);
    box-sizing: inherit;
    outline: 2.5px solid transparent;
    transition: outline-color 0.25s ease;
    font-weight: var(--fw-medium);

    &:is(button) {
        --icon-dimension: 1em;
        border-right: calc(var(--padding-base-x) + var(--icon-dimension)) solid transparent;

        & * {
            all: unset;
        }

        &::before,
        &::after {
            display: none;
        }

        &:hover {
            box-shadow: none;
            transform: none;
        }
    }

    &:hover {
        cursor: pointer;
    }

    & .button-icon-start {
        display: none;
    }

    & .button-icon-end {
        display: block;
        position: absolute;
        right: calc(var(--icon-dimension) * -1);
        top: 50%;
        transform: translateY(-50%);
        width: var(--icon-dimension);
        height: var(--icon-dimension);
        box-sizing: content-box;
        pointer-events: none;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: currentColor;
            mask: center / contain no-repeat;
            transition-property: opacity, transform;
            transition-duration: 0.2s;
            transition-timing-function: ease;
        }

        &::before {
            mask-image: var(--dropdown-icon-up);
            bottom: 100%;
            opacity: 0;
        }

        &::after {
            mask-image: var(--dropdown-icon-down);
        }
    }

    & > * {
        display: inline-block;
        font-size: inherit;
        white-space: break-spaces;

        &:last-child {
            color: inherit;
        }

        & * {
            font-size: inherit;
        }
    }

    & .sub-heading-button {
        opacity: 1;
        font-weight: bolder;
        font-size: inherit;
        color: light-dark(var(--color-primary), var(--color-primary-500));
    }
}

.accordion-content {
    height: 0;
    overflow: hidden;
    transition-property: height, padding-bottom;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    will-change: height, padding-bottom;
}

/* ========================================
   FAQ
======================================== */

.hl-faq.frosted-glass {
    & .faq-separated-child {

        &,
        &.active {
            border-width: 1px;
        }
    }
}

.hl-faq-child-panel {
    height: 0;
    overflow: hidden;
    transition-property: padding-left, padding-right, padding-bottom;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    will-change: padding-left, padding-right, padding-bottom;
}

.faq-separated-child {
    --padding-base: var(--space-md);
    --padding-base-x: var(--padding-base);
    border-radius: var(--radius-md);
    font-size: var(--text-base);

    & + .faq-separated-child {
        margin-top: var(--space-sm);
    }

    &.active .hl-faq-child-panel {
        padding: var(--padding-base);
        padding-top: 0;

        &.hl-faq-child-heading-icon {
            &::before {
                transform: translateY(100%);
                opacity: 1;
            }

            &::after {
                transform: translateY(100%);
                opacity: 0;
            }
        }
    }
}

.hl-faq-child-heading {
    padding: var(--padding-base);
    gap: var(--padding-base-x);
}

.hl-faq-child-head {
    width: 100%;
}

.hl-faq-child-heading-text,
.item-text {
    font-size: inherit;
    line-height: inherit;
}

.hl-faq-child-heading-icon {
    position: relative;
    width: 1em;
    height: 1em;
    flex-shrink: 0;

    &::before,
    &::after {
        content: '';
        position: absolute;
        width: inherit;
        height: inherit;
        background-color: currentColor;
        mask: center / contain no-repeat;
        transition: all 0.2s ease;
    }

    &::before {
        mask-image: var(--dropdown-icon-up);
        bottom: 100%;
        opacity: 0;
    }

    &::after {
        mask-image: var(--dropdown-icon-down);
    }
}

/* ========================================
   UTILITY CLASSES - VISUAL EFFECTS
======================================== */

.frosted-glass {
    --glass-fx: blur(16px) brightness(100%) saturate(140%);
    --glass-bg-color: var(--color-white-alpha-4);
    --glass-border-color: var(--color-white-alpha-10);
    color: var(--color-content-light) !important;

    & p,
    & .c-paragraph {
        color: var(--color-gray-200) !important;
    }

    &.card,
    & .faq-separated-child {
        background-color: var(--glass-bg-color) !important;
        border: 1px solid var(--glass-border-color) !important;
    }

    &:not(.hl-faq),
    & .faq-separated-child {
        backdrop-filter: var(--glass-fx) !important;
    }
}

.grayscale {
    filter: grayscale(1);
}

.grayscale-blue {
    filter: grayscale(1) contrast(0.5) sepia(1) hue-rotate(191deg) saturate(35%);
}

.gradient-secondary-md {
    background: radial-gradient(circle at 50% 50%,
            oklch(from var(--color-secondary-200) l c h / 0.4) 0%,
            oklch(from var(--color-secondary-100) l c h / 0.3) 40%,
            oklch(from var(--color-secondary-50) l c h / 0.2) 70%,
            transparent 100%);
}

.color-glow {
    position: relative;

    & > * {
        position: relative;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 120% 100% at 20% 50%, oklch(from var(--color-secondary) l c h / 0.35) 0%, transparent 50%),
            radial-gradient(ellipse 80% 100% at 80% 50%, oklch(from var(--color-primary-500) l c h / 0.3) 0%, transparent 50%);
        pointer-events: none;
        opacity: 0.7;
    }
}

/* ========================================
   COLOR UTILITIES
======================================== */

.color {
    --gradient-alpha: 1;
    --gradient-base: transparent;
    --gradient-from: transparent;
    --gradient-to: var(--gradient-from);
    --gradient-angle: 0deg;
    --gradient-stops: oklch(from var(--gradient-from) l c h / var(--gradient-alpha)) 0%,
        oklch(from var(--gradient-to) l c h / var(--gradient-alpha)) 100%;
    --gradient: linear-gradient(var(--gradient-angle), var(--gradient-stops)), var(--gradient-base);

    &.lighter,
    &.darker {
        --gradient-alpha: 0.6;
    }

    &.lighter {
        --gradient-base: var(--color-content-light);
    }

    &.darker {
        --gradient-base: var(--color-black-950);
    }

    &.color-alpha-1 {
        --gradient-alpha: 0.1;
    }

    &.color-alpha-2 {
        --gradient-alpha: 0.2;
    }

    &.color-alpha-3 {
        --gradient-alpha: 0.3;
    }

    &.color-alpha-4 {
        --gradient-alpha: 0.4;
    }

    &.color-alpha-5 {
        --gradient-alpha: 0.5;
    }

    &.color-alpha-6 {
        --gradient-alpha: 0.6;
    }

    &.color-alpha-7 {
        --gradient-alpha: 0.7;
    }

    &.color-alpha-8 {
        --gradient-alpha: 0.8;
    }

    &.color-alpha-9 {
        --gradient-alpha: 0.9;
    }

    &.gradient-deg-45 {
        --gradient-angle: 45deg;
    }

    &.gradient-deg-90 {
        --gradient-angle: 90deg;
    }

    &.gradient-deg-135 {
        --gradient-angle: 135deg;
    }

    &.gradient-deg-180 {
        --gradient-angle: 180deg;
    }

    &.gradient-deg-225 {
        --gradient-angle: 225deg;
    }

    &.gradient-deg-270 {
        --gradient-angle: 270deg;
    }

    &.gradient-fade {
        --gradient-to: transparent;
    }

    &.color-dark {
        --gradient-from: var(--color-content-dark);
    }

    &.color-primary {
        --gradient-from: var(--color-primary);

        &.gradient-color {
            --gradient-to: var(--color-primary-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-950);
        }

        &.dark {
            --gradient-from: var(--color-primary-950);

            &.gradient-color {
                --gradient-to: var(--color-primary-900);
            }
        }
    }

    &.color-primary-50 {
        --gradient-from: var(--color-primary-50);

        &.gradient-color {
            --gradient-to: var(--color-primary-100);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-200);
        }
    }

    &.color-primary-100 {
        --gradient-from: var(--color-primary-100);

        &.gradient-color {
            --gradient-to: var(--color-primary-200);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-300);
        }
    }

    &.color-primary-200 {
        --gradient-from: var(--color-primary-200);

        &.gradient-color {
            --gradient-to: var(--color-primary-300);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-400);
        }
    }

    &.color-primary-300 {
        --gradient-from: var(--color-primary-300);

        &.gradient-color {
            --gradient-to: var(--color-primary-400);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-500);
        }
    }

    &.color-primary-400 {
        --gradient-from: var(--color-primary-400);

        &.gradient-color {
            --gradient-to: var(--color-primary-500);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-600);
        }
    }

    &.color-primary-500 {
        --gradient-from: var(--color-primary-500);

        &.gradient-color {
            --gradient-to: var(--color-primary-600);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-700);
        }
    }

    &.color-primary-600 {
        --gradient-from: var(--color-primary-600);

        &.gradient-color {
            --gradient-to: var(--color-primary-700);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-800);
        }
    }

    &.color-primary-700 {
        --gradient-from: var(--color-primary-700);

        &.gradient-color {
            --gradient-to: var(--color-primary-800);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-900);
        }
    }

    &.color-primary-800 {
        --gradient-from: var(--color-primary-800);

        &.gradient-color {
            --gradient-to: var(--color-primary-900);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-950);
        }
    }

    &.color-primary-900 {
        --gradient-from: var(--color-primary-900);

        &.gradient-color {
            --gradient-to: var(--color-primary-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-950);
        }
    }

    &.color-primary-950 {
        --gradient-from: var(--color-primary-950);

        &.gradient-color {
            --gradient-to: var(--color-primary-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-primary-950);
        }
    }

    &.color-secondary {
        --gradient-from: var(--color-secondary);

        &.gradient-color {
            --gradient-to: var(--color-secondary-700);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-800);
        }
    }

    &.color-secondary-50 {
        --gradient-from: var(--color-secondary-50);

        &.gradient-color {
            --gradient-to: var(--color-secondary-100);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-200);
        }
    }

    &.color-secondary-100 {
        --gradient-from: var(--color-secondary-100);

        &.gradient-color {
            --gradient-to: var(--color-secondary-200);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-300);
        }
    }

    &.color-secondary-200 {
        --gradient-from: var(--color-secondary-200);

        &.gradient-color {
            --gradient-to: var(--color-secondary-300);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-400);
        }
    }

    &.color-secondary-300 {
        --gradient-from: var(--color-secondary-300);

        &.gradient-color {
            --gradient-to: var(--color-secondary-400);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-500);
        }
    }

    &.color-secondary-400 {
        --gradient-from: var(--color-secondary-400);

        &.gradient-color {
            --gradient-to: var(--color-secondary-500);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-600);
        }
    }

    &.color-secondary-500 {
        --gradient-from: var(--color-secondary-500);

        &.gradient-color {
            --gradient-to: var(--color-secondary-600);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-700);
        }
    }

    &.color-secondary-600 {
        --gradient-from: var(--color-secondary-600);

        &.gradient-color {
            --gradient-to: var(--color-secondary-700);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-800);
        }
    }

    &.color-secondary-700 {
        --gradient-from: var(--color-secondary-700);

        &.gradient-color {
            --gradient-to: var(--color-secondary-800);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-900);
        }
    }

    &.color-secondary-800 {
        --gradient-from: var(--color-secondary-800);

        &.gradient-color {
            --gradient-to: var(--color-secondary-900);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-950);
        }
    }

    &.color-secondary-900 {
        --gradient-from: var(--color-secondary-900);

        &.gradient-color {
            --gradient-to: var(--color-secondary-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-950);
        }
    }

    &.color-secondary-950 {
        --gradient-from: var(--color-secondary-950);

        &.gradient-color {
            --gradient-to: var(--color-secondary-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-secondary-950);
        }
    }

    &.color-success {
        --gradient-from: var(--color-success);

        &.gradient-color {
            --gradient-to: var(--color-success-600);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-700);
        }
    }

    &.color-success-50 {
        --gradient-from: var(--color-success-50);

        &.gradient-color {
            --gradient-to: var(--color-success-100);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-200);
        }
    }

    &.color-success-100 {
        --gradient-from: var(--color-success-100);

        &.gradient-color {
            --gradient-to: var(--color-success-200);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-300);
        }
    }

    &.color-success-200 {
        --gradient-from: var(--color-success-200);

        &.gradient-color {
            --gradient-to: var(--color-success-300);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-400);
        }
    }

    &.color-success-300 {
        --gradient-from: var(--color-success-300);

        &.gradient-color {
            --gradient-to: var(--color-success-400);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-500);
        }
    }

    &.color-success-400 {
        --gradient-from: var(--color-success-400);

        &.gradient-color {
            --gradient-to: var(--color-success-500);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-600);
        }
    }

    &.color-success-500 {
        --gradient-from: var(--color-success-500);

        &.gradient-color {
            --gradient-to: var(--color-success-600);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-700);
        }
    }

    &.color-success-600 {
        --gradient-from: var(--color-success-600);

        &.gradient-color {
            --gradient-to: var(--color-success-700);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-800);
        }
    }

    &.color-success-700 {
        --gradient-from: var(--color-success-700);

        &.gradient-color {
            --gradient-to: var(--color-success-800);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-900);
        }
    }

    &.color-success-800 {
        --gradient-from: var(--color-success-800);

        &.gradient-color {
            --gradient-to: var(--color-success-900);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-950);
        }
    }

    &.color-success-900 {
        --gradient-from: var(--color-success-900);

        &.gradient-color {
            --gradient-to: var(--color-success-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-950);
        }
    }

    &.color-success-950 {
        --gradient-from: var(--color-success-950);

        &.gradient-color {
            --gradient-to: var(--color-success-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-success-950);
        }
    }

    &.color-error {
        --gradient-from: var(--color-error);

        &.gradient-color {
            --gradient-to: var(--color-error-700);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-800);
        }
    }

    &.color-error-50 {
        --gradient-from: var(--color-error-50);

        &.gradient-color {
            --gradient-to: var(--color-error-100);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-200);
        }
    }

    &.color-error-100 {
        --gradient-from: var(--color-error-100);

        &.gradient-color {
            --gradient-to: var(--color-error-200);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-300);
        }
    }

    &.color-error-200 {
        --gradient-from: var(--color-error-200);

        &.gradient-color {
            --gradient-to: var(--color-error-300);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-400);
        }
    }

    &.color-error-300 {
        --gradient-from: var(--color-error-300);

        &.gradient-color {
            --gradient-to: var(--color-error-400);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-500);
        }
    }

    &.color-error-400 {
        --gradient-from: var(--color-error-400);

        &.gradient-color {
            --gradient-to: var(--color-error-500);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-600);
        }
    }

    &.color-error-500 {
        --gradient-from: var(--color-error-500);

        &.gradient-color {
            --gradient-to: var(--color-error-600);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-700);
        }
    }

    &.color-error-600 {
        --gradient-from: var(--color-error-600);

        &.gradient-color {
            --gradient-to: var(--color-error-700);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-800);
        }
    }

    &.color-error-700 {
        --gradient-from: var(--color-error-700);

        &.gradient-color {
            --gradient-to: var(--color-error-800);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-900);
        }
    }

    &.color-error-800 {
        --gradient-from: var(--color-error-800);

        &.gradient-color {
            --gradient-to: var(--color-error-900);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-950);
        }
    }

    &.color-error-900 {
        --gradient-from: var(--color-error-900);

        &.gradient-color {
            --gradient-to: var(--color-error-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-950);
        }
    }

    &.color-error-950 {
        --gradient-from: var(--color-error-950);

        &.gradient-color {
            --gradient-to: var(--color-error-950);
        }

        &.gradient-color-distinct {
            --gradient-to: var(--color-error-950);
        }
    }

    &.accent-decor {
        --accent-bg: var(--gradient);
    }

    &.bg {
        background: var(--gradient) !important;

        &.dark {
            &.c-heading {
                color: var(--color-content-light) !important;
            }

            & .c-sub-heading,
            & p {
                color: var(--color-gray-200) !important;
            }

            & .cta-meta {
                color: var(--color-gray-300) !important;
                border-color: var(--color-gray-600) !important;
            }
        }

        &.light {
            &.c-heading {
                color: var(--color-content-dark) !important;
            }

            & .c-sub-heading,
            & p {
                color: var(--color-gray-700) !important;
            }
        }

        .bg-psuedo-before,
        .bg-psuedo-after {
            position: relative !important;
            background: transparent !important;

            &::before,
            &::after {
                position: absolute !important;
                inset: 0 !important;
                background: var(--gradient) !important;
            }
        }

        .bg-psuedo-before::before,
        .bg-psuedo-after::after {
            content: '' !important;
        }
    }
}

/* ========================================
   SHADOW UTILITIES
======================================== */

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

.shadow-none {
    box-shadow: none !important;
}

@media (max-width: 480px) {
    .shadow-sm-m {
        box-shadow: var(--shadow-sm) !important;
    }

    .shadow-md-m {
        box-shadow: var(--shadow-md) !important;
    }

    .shadow-lg-m {
        box-shadow: var(--shadow-lg) !important;
    }

    .shadow-xl-m {
        box-shadow: var(--shadow-xl) !important;
    }

    .shadow-none-m {
        box-shadow: none !important;
    }
}

@media (min-width: 480px) {
    .shadow-sm-d {
        box-shadow: var(--shadow-sm) !important;
    }

    .shadow-md-d {
        box-shadow: var(--shadow-md) !important;
    }

    .shadow-lg-d {
        box-shadow: var(--shadow-lg) !important;
    }

    .shadow-xl-d {
        box-shadow: var(--shadow-xl) !important;
    }

    .shadow-none-d {
        box-shadow: none !important;
    }
}

/* ========================================
   BORDER RADIUS UTILITIES
======================================== */

.radius {
    --radius: 0;
    border-radius: var(--radius) !important;

    &.bg-psuedo-before,
    &.bg-psuedo-after {
        border-radius: 0 !important;

        &::before,
        &::after {
            border-radius: var(--radius) !important;
        }
    }

    &.radius-xs {
        --radius: var(--radius-xs);
    }

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

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

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

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

    &.radius-full {
        --radius: var(--radius-full);
    }
}

/* ========================================
   BACKGROUND VISIBILITY UTILITIES
======================================== */

.bg-none {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.bg-img-none {
    background-image: none !important;
}

@media (max-width: 480px) {
    .bg-none-m {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
    }

    .bg-transparent-m {
        background-color: transparent !important;
    }

    .bg-img-none-m {
        background-image: none !important;
    }
}

@media (min-width: 480px) {
    .bg-none-d {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
    }

    .bg-transparent-d {
        background-color: transparent !important;
    }

    .bg-img-none-d {
        background-image: none !important;
    }
}

/* ========================================
   SPACING UTILITIES
======================================== */

/* Margin Top */
.mt-0 {
    margin-top: 0 !important;
    --margin-base: 0;
}

.mt-xs {
    margin-top: var(--space-xs) !important;
    --margin-base: var(--space-xs);
}

.mt-sm {
    margin-top: var(--space-sm) !important;
    --margin-base: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md) !important;
    --margin-base: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg) !important;
    --margin-base: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl) !important;
    --margin-base: var(--space-xl);
}

.mt-2xl {
    margin-top: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
}

.mt-3xl {
    margin-top: var(--space-3xl) !important;
    --margin-base: var(--space-3xl);
}

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0 !important;
    --margin-base: 0;
}

.mb-xs {
    margin-bottom: var(--space-xs) !important;
    --margin-base: var(--space-xs);
}

.mb-sm {
    margin-bottom: var(--space-sm) !important;
    --margin-base: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md) !important;
    --margin-base: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg) !important;
    --margin-base: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl) !important;
    --margin-base: var(--space-xl);
}

.mb-2xl {
    margin-bottom: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
}

.mb-3xl {
    margin-bottom: var(--space-3xl) !important;
    --margin-base: var(--space-3xl);
}

/* Margin Left */
.ml-0 {
    margin-left: 0 !important;
    --margin-base: 0;
}

.ml-xs {
    margin-left: var(--space-xs) !important;
    --margin-base: var(--space-xs);
}

.ml-sm {
    margin-left: var(--space-sm) !important;
    --margin-base: var(--space-sm);
}

.ml-md {
    margin-left: var(--space-md) !important;
    --margin-base: var(--space-md);
}

.ml-lg {
    margin-left: var(--space-lg) !important;
    --margin-base: var(--space-lg);
}

.ml-xl {
    margin-left: var(--space-xl) !important;
    --margin-base: var(--space-xl);
}

.ml-2xl {
    margin-left: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
}

/* Margin Right */
.mr-0 {
    margin-right: 0 !important;
    --margin-base: 0;
}

.mr-xs {
    margin-right: var(--space-xs) !important;
    --margin-base: var(--space-xs);
}

.mr-sm {
    margin-right: var(--space-sm) !important;
    --margin-base: var(--space-sm);
}

.mr-md {
    margin-right: var(--space-md) !important;
    --margin-base: var(--space-md);
}

.mr-lg {
    margin-right: var(--space-lg) !important;
    --margin-base: var(--space-lg);
}

.mr-xl {
    margin-right: var(--space-xl) !important;
    --margin-base: var(--space-xl);
}

.mr-2xl {
    margin-right: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
}

/* Margin X-Axis (left + right) */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --margin-base: 0;
    --margin-base-x: 0;
}

.mx-xs {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
    --margin-base: var(--space-xs);
    --margin-base-x: var(--space-xs);
}

.mx-sm {
    margin-left: var(--space-sm) !important;
    margin-right: var(--space-sm) !important;
    --margin-base: var(--space-sm);
    --margin-base-x: var(--space-sm);
}

.mx-md {
    margin-left: var(--space-md) !important;
    margin-right: var(--space-md) !important;
    --margin-base: var(--space-md);
    --margin-base-x: var(--space-md);
}

.mx-lg {
    margin-left: var(--space-lg) !important;
    margin-right: var(--space-lg) !important;
    --margin-base: var(--space-lg);
    --margin-base-x: var(--space-lg);
}

.mx-xl {
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important;
    --margin-base: var(--space-xl);
    --margin-base-x: var(--space-xl);
}

.mx-2xl {
    margin-left: var(--space-2xl) !important;
    margin-right: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
    --margin-base-x: var(--space-2xl);
}

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

/* Margin Y-Axis (top + bottom) */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    --margin-base: 0;
    --margin-base-y: 0;
}

.my-xs {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
    --margin-base: var(--space-xs);
    --margin-base-y: var(--space-xs);
}

.my-sm {
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
    --margin-base: var(--space-sm);
    --margin-base-y: var(--space-sm);
}

.my-md {
    margin-top: var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
    --margin-base: var(--space-md);
    --margin-base-y: var(--space-md);
}

.my-lg {
    margin-top: var(--space-lg) !important;
    margin-bottom: var(--space-lg) !important;
    --margin-base: var(--space-lg);
    --margin-base-y: var(--space-lg);
}

.my-xl {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
    --margin-base: var(--space-xl);
    --margin-base-y: var(--space-xl);
}

.my-2xl {
    margin-top: var(--space-2xl) !important;
    margin-bottom: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
    --margin-base-y: var(--space-2xl);
}

.my-3xl {
    margin-top: var(--space-3xl) !important;
    margin-bottom: var(--space-3xl) !important;
    --margin-base: var(--space-3xl);
    --margin-base-y: var(--space-3xl);
}

/* Padding X-Axis (left + right) */
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    --padding-base: 0;
    --padding-base-x: 0;
}

.px-xs {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
    --padding-base: var(--space-xs);
    --padding-base-x: var(--space-xs);
}

.px-sm {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
    --padding-base: var(--space-sm);
    --padding-base-x: var(--space-sm);
}

.px-md {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
    --padding-base: var(--space-md);
    --padding-base-x: var(--space-md);
}

.px-lg {
    padding-left: var(--space-lg) !important;
    padding-right: var(--space-lg) !important;
    --padding-base: var(--space-lg);
    --padding-base-x: var(--space-lg);
}

.px-xl {
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
    --padding-base: var(--space-xl);
    --padding-base-x: var(--space-xl);
}

.px-2xl {
    padding-left: var(--space-2xl) !important;
    padding-right: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
    --padding-base-x: var(--space-2xl);
}

/* Padding Y-Axis (top + bottom) */
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --padding-base: 0;
    --padding-base-y: 0;
}

.py-xs {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
    --padding-base: var(--space-xs);
    --padding-base-y: var(--space-xs);
}

.py-sm {
    padding-top: var(--space-sm) !important;
    padding-bottom: var(--space-sm) !important;
    --padding-base: var(--space-sm);
    --padding-base-y: var(--space-sm);
}

.py-md {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
    --padding-base: var(--space-md);
    --padding-base-y: var(--space-md);
}

.py-lg {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-lg) !important;
    --padding-base: var(--space-lg);
    --padding-base-y: var(--space-lg);
}

.py-xl {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
    --padding-base: var(--space-xl);
    --padding-base-y: var(--space-xl);
}

.py-2xl {
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
    --padding-base-y: var(--space-2xl);
}

.py-3xl {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
    --padding-base: var(--space-3xl);
    --padding-base-y: var(--space-3xl);
}

/* Padding All Sides */
.p-0 {
    padding: 0 !important;
    --padding-base: 0;
    --padding-base-x: 0;
    --padding-base-y: 0;
}

.p-xs {
    padding: var(--space-xs) !important;
    --padding-base: var(--space-xs);
    --padding-base-x: var(--space-xs);
    --padding-base-y: var(--space-xs);
}

.p-sm {
    padding: var(--space-sm) !important;
    --padding-base: var(--space-sm);
    --padding-base-x: var(--space-sm);
    --padding-base-y: var(--space-sm);
}

.p-md {
    padding: var(--space-md) !important;
    --padding-base: var(--space-md);
    --padding-base-x: var(--space-md);
    --padding-base-y: var(--space-md);
}

.p-lg {
    padding: var(--space-lg) !important;
    --padding-base: var(--space-lg);
    --padding-base-x: var(--space-lg);
    --padding-base-y: var(--space-lg);
}

.p-xl {
    padding: var(--space-xl) !important;
    --padding-base: var(--space-xl);
    --padding-base-x: var(--space-xl);
    --padding-base-y: var(--space-xl);
}

.p-2xl {
    padding: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
    --padding-base-x: var(--space-2xl);
    --padding-base-y: var(--space-2xl);
}

.p-3xl {
    padding: var(--space-3xl) !important;
    --padding-base: var(--space-3xl);
    --padding-base-x: var(--space-3xl);
    --padding-base-y: var(--space-3xl);
}

/* Padding Top */
.pt-0 {
    padding-top: 0 !important;
    --padding-base: 0;
}

.pt-xs {
    padding-top: var(--space-xs) !important;
    --padding-base: var(--space-xs);
}

.pt-sm {
    padding-top: var(--space-sm) !important;
    --padding-base: var(--space-sm);
}

.pt-md {
    padding-top: var(--space-md) !important;
    --padding-base: var(--space-md);
}

.pt-lg {
    padding-top: var(--space-lg) !important;
    --padding-base: var(--space-lg);
}

.pt-xl {
    padding-top: var(--space-xl) !important;
    --padding-base: var(--space-xl);
}

.pt-2xl {
    padding-top: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
}

.pt-3xl {
    padding-top: var(--space-3xl) !important;
    --padding-base: var(--space-3xl);
}

/* Padding Bottom */
.pb-0 {
    padding-bottom: 0 !important;
    --padding-base: 0;
}

.pb-xs {
    padding-bottom: var(--space-xs) !important;
    --padding-base: var(--space-xs);
}

.pb-sm {
    padding-bottom: var(--space-sm) !important;
    --padding-base: var(--space-sm);
}

.pb-md {
    padding-bottom: var(--space-md) !important;
    --padding-base: var(--space-md);
}

.pb-lg {
    padding-bottom: var(--space-lg) !important;
    --padding-base: var(--space-lg);
}

.pb-xl {
    padding-bottom: var(--space-xl) !important;
    --padding-base: var(--space-xl);
}

.pb-2xl {
    padding-bottom: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
}

.pb-3xl {
    padding-bottom: var(--space-3xl) !important;
    --padding-base: var(--space-3xl);
}

/* Padding Left */
.pl-0 {
    padding-left: 0 !important;
    --padding-base: 0;
}

.pl-xs {
    padding-left: var(--space-xs) !important;
    --padding-base: var(--space-xs);
}

.pl-sm {
    padding-left: var(--space-sm) !important;
    --padding-base: var(--space-sm);
}

.pl-md {
    padding-left: var(--space-md) !important;
    --padding-base: var(--space-md);
}

.pl-lg {
    padding-left: var(--space-lg) !important;
    --padding-base: var(--space-lg);
}

.pl-xl {
    padding-left: var(--space-xl) !important;
    --padding-base: var(--space-xl);
}

.pl-2xl {
    padding-left: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
}

/* Padding Right */
.pr-0 {
    padding-right: 0 !important;
    --padding-base: 0;
}

.pr-xs {
    padding-right: var(--space-xs) !important;
    --padding-base: var(--space-xs);
}

.pr-sm {
    padding-right: var(--space-sm) !important;
    --padding-base: var(--space-sm);
}

.pr-md {
    padding-right: var(--space-md) !important;
    --padding-base: var(--space-md);
}

.pr-lg {
    padding-right: var(--space-lg) !important;
    --padding-base: var(--space-lg);
}

.pr-xl {
    padding-right: var(--space-xl) !important;
    --padding-base: var(--space-xl);
}

.pr-2xl {
    padding-right: var(--space-2xl) !important;
    --padding-base: var(--space-2xl);
}

/* Margin All Sides */
.m-0 {
    margin: 0 !important;
    --margin-base: 0;
    --margin-base-x: 0;
    --margin-base-y: 0;
}

.m-xs {
    margin: var(--space-xs) !important;
    --margin-base: var(--space-xs);
    --margin-base-x: var(--space-xs);
    --margin-base-y: var(--space-xs);
}

.m-sm {
    margin: var(--space-sm) !important;
    --margin-base: var(--space-sm);
    --margin-base-x: var(--space-sm);
    --margin-base-y: var(--space-sm);
}

.m-md {
    margin: var(--space-md) !important;
    --margin-base: var(--space-md);
    --margin-base-x: var(--space-md);
    --margin-base-y: var(--space-md);
}

.m-lg {
    margin: var(--space-lg) !important;
    --margin-base: var(--space-lg);
    --margin-base-x: var(--space-lg);
    --margin-base-y: var(--space-lg);
}

.m-xl {
    margin: var(--space-xl) !important;
    --margin-base: var(--space-xl);
    --margin-base-x: var(--space-xl);
    --margin-base-y: var(--space-xl);
}

.m-2xl {
    margin: var(--space-2xl) !important;
    --margin-base: var(--space-2xl);
    --margin-base-x: var(--space-2xl);
    --margin-base-y: var(--space-2xl);
}

.m-3xl {
    margin: var(--space-3xl) !important;
    --margin-base: var(--space-3xl);
    --margin-base-x: var(--space-3xl);
    --margin-base-y: var(--space-3xl);
}

.m-auto {
    margin: auto !important;
}

/* Negative Margin Top */
.-mt-xs {
    margin-top: calc(var(--space-xs) * -1) !important;
}

.-mt-sm {
    margin-top: calc(var(--space-sm) * -1) !important;
}

.-mt-md {
    margin-top: calc(var(--space-md) * -1) !important;
}

.-mt-lg {
    margin-top: calc(var(--space-lg) * -1) !important;
}

.-mt-xl {
    margin-top: calc(var(--space-xl) * -1) !important;
}

.-mt-2xl {
    margin-top: calc(var(--space-2xl) * -1) !important;
}

.-mt-3xl {
    margin-top: calc(var(--space-3xl) * -1) !important;
}

/* Negative Margin Bottom */
.-mb-xs {
    margin-bottom: calc(var(--space-xs) * -1) !important;
}

.-mb-sm {
    margin-bottom: calc(var(--space-sm) * -1) !important;
}

.-mb-md {
    margin-bottom: calc(var(--space-md) * -1) !important;
}

.-mb-lg {
    margin-bottom: calc(var(--space-lg) * -1) !important;
}

.-mb-xl {
    margin-bottom: calc(var(--space-xl) * -1) !important;
}

.-mb-2xl {
    margin-bottom: calc(var(--space-2xl) * -1) !important;
}

.-mb-3xl {
    margin-bottom: calc(var(--space-3xl) * -1) !important;
}

/* Negative Margin Left */
.-ml-xs {
    margin-left: calc(var(--space-xs) * -1) !important;
}

.-ml-sm {
    margin-left: calc(var(--space-sm) * -1) !important;
}

.-ml-md {
    margin-left: calc(var(--space-md) * -1) !important;
}

.-ml-lg {
    margin-left: calc(var(--space-lg) * -1) !important;
}

.-ml-xl {
    margin-left: calc(var(--space-xl) * -1) !important;
}

.-ml-2xl {
    margin-left: calc(var(--space-2xl) * -1) !important;
}

/* Negative Margin Right */
.-mr-xs {
    margin-right: calc(var(--space-xs) * -1) !important;
}

.-mr-sm {
    margin-right: calc(var(--space-sm) * -1) !important;
}

.-mr-md {
    margin-right: calc(var(--space-md) * -1) !important;
}

.-mr-lg {
    margin-right: calc(var(--space-lg) * -1) !important;
}

.-mr-xl {
    margin-right: calc(var(--space-xl) * -1) !important;
}

.-mr-2xl {
    margin-right: calc(var(--space-2xl) * -1) !important;
}

/* Negative Margin X-Axis (left + right) */
.-mx-xs {
    margin-left: calc(var(--space-xs) * -1) !important;
    margin-right: calc(var(--space-xs) * -1) !important;
}

.-mx-sm {
    margin-left: calc(var(--space-sm) * -1) !important;
    margin-right: calc(var(--space-sm) * -1) !important;
}

.-mx-md {
    margin-left: calc(var(--space-md) * -1) !important;
    margin-right: calc(var(--space-md) * -1) !important;
}

.-mx-lg {
    margin-left: calc(var(--space-lg) * -1) !important;
    margin-right: calc(var(--space-lg) * -1) !important;
}

.-mx-xl {
    margin-left: calc(var(--space-xl) * -1) !important;
    margin-right: calc(var(--space-xl) * -1) !important;
}

.-mx-2xl {
    margin-left: calc(var(--space-2xl) * -1) !important;
    margin-right: calc(var(--space-2xl) * -1) !important;
}

/* Negative Margin Y-Axis (top + bottom) */
.-my-xs {
    margin-top: calc(var(--space-xs) * -1) !important;
    margin-bottom: calc(var(--space-xs) * -1) !important;
}

.-my-sm {
    margin-top: calc(var(--space-sm) * -1) !important;
    margin-bottom: calc(var(--space-sm) * -1) !important;
}

.-my-md {
    margin-top: calc(var(--space-md) * -1) !important;
    margin-bottom: calc(var(--space-md) * -1) !important;
}

.-my-lg {
    margin-top: calc(var(--space-lg) * -1) !important;
    margin-bottom: calc(var(--space-lg) * -1) !important;
}

.-my-xl {
    margin-top: calc(var(--space-xl) * -1) !important;
    margin-bottom: calc(var(--space-xl) * -1) !important;
}

.-my-2xl {
    margin-top: calc(var(--space-2xl) * -1) !important;
    margin-bottom: calc(var(--space-2xl) * -1) !important;
}

.-my-3xl {
    margin-top: calc(var(--space-3xl) * -1) !important;
    margin-bottom: calc(var(--space-3xl) * -1) !important;
}

/* Negative Margin All Sides */
.-m-xs {
    margin: calc(var(--space-xs) * -1) !important;
}

.-m-sm {
    margin: calc(var(--space-sm) * -1) !important;
}

.-m-md {
    margin: calc(var(--space-md) * -1) !important;
}

.-m-lg {
    margin: calc(var(--space-lg) * -1) !important;
}

.-m-xl {
    margin: calc(var(--space-xl) * -1) !important;
}

.-m-2xl {
    margin: calc(var(--space-2xl) * -1) !important;
}

.-m-3xl {
    margin: calc(var(--space-3xl) * -1) !important;
}

/* Margin Top - Safe Area */
.mt-safe {
    margin-top: var(--safe-space-top) !important;
    --margin-base: var(--safe-space-top);
}

/* Margin Bottom - Safe Area */
.mb-safe {
    margin-bottom: var(--safe-space-bottom) !important;
    --margin-base: var(--safe-space-bottom);
}

/* Margin Left - Safe Area */
.ml-safe {
    margin-left: var(--safe-space-left) !important;
    --margin-base: var(--safe-space-left);
}

/* Margin Right - Safe Area */
.mr-safe {
    margin-right: var(--safe-space-right) !important;
    --margin-base: var(--safe-space-right);
}

/* Margin X-Axis (left + right) - Safe Area */
.mx-safe {
    margin-left: var(--safe-space-left) !important;
    margin-right: var(--safe-space-right) !important;
    --margin-base: var(--safe-space-left);
    --margin-base-x: var(--safe-space-left);
}

/* Margin Y-Axis (top + bottom) - Safe Area */
.my-safe {
    margin-top: var(--safe-space-top) !important;
    margin-bottom: var(--safe-space-bottom) !important;
    --margin-base: var(--safe-space-top);
    --margin-base-y: var(--safe-space-top);
}

/* Padding Top - Safe Area */
.pt-safe {
    padding-top: var(--safe-space-top) !important;
    --padding-base: var(--safe-space-top);
}

/* Padding Bottom - Safe Area */
.pb-safe {
    padding-bottom: var(--safe-space-bottom) !important;
    --padding-base: var(--safe-space-bottom);
}

/* Padding Left - Safe Area */
.pl-safe {
    padding-left: var(--safe-space-left) !important;
    --padding-base: var(--safe-space-left);
}

/* Padding Right - Safe Area */
.pr-safe {
    padding-right: var(--safe-space-right) !important;
    --padding-base: var(--safe-space-right);
}

/* Padding X-Axis (left + right) - Safe Area */
.px-safe {
    padding-left: var(--safe-space-left) !important;
    padding-right: var(--safe-space-right) !important;
    --padding-base: var(--safe-space-left);
    --padding-base-x: var(--safe-space-left);
}

/* Padding Y-Axis (top + bottom) - Safe Area */
.py-safe {
    padding-top: var(--safe-space-top) !important;
    padding-bottom: var(--safe-space-bottom) !important;
    --padding-base: var(--safe-space-top);
    --padding-base-y: var(--safe-space-top);
}

/* Margin All Sides - Safe Area */
.m-safe {
    margin-top: var(--safe-space-top) !important;
    margin-right: var(--safe-space-right) !important;
    margin-bottom: var(--safe-space-bottom) !important;
    margin-left: var(--safe-space-left) !important;
    --margin-base: var(--safe-space-top);
    --margin-base-x: var(--safe-space-left);
    --margin-base-y: var(--safe-space-top);
}

/* Padding All Sides - Safe Area */
.p-safe {
    padding-top: var(--safe-space-top) !important;
    padding-right: var(--safe-space-right) !important;
    padding-bottom: var(--safe-space-bottom) !important;
    padding-left: var(--safe-space-left) !important;
    --padding-base: var(--safe-space-top);
    --padding-base-x: var(--safe-space-left);
    --padding-base-y: var(--safe-space-top);
}

@media (min-width: 481px) {

    /* Margin Top - Desktop */
    .mt-0-d {
        margin-top: 0 !important;
        --margin-base: 0;
    }

    .mt-xs-d {
        margin-top: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .mt-sm-d {
        margin-top: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .mt-md-d {
        margin-top: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .mt-lg-d {
        margin-top: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .mt-xl-d {
        margin-top: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .mt-2xl-d {
        margin-top: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    .mt-3xl-d {
        margin-top: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
    }

    /* Margin Bottom - Desktop */
    .mb-0-d {
        margin-bottom: 0 !important;
        --margin-base: 0;
    }

    .mb-xs-d {
        margin-bottom: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .mb-sm-d {
        margin-bottom: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .mb-md-d {
        margin-bottom: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .mb-lg-d {
        margin-bottom: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .mb-xl-d {
        margin-bottom: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .mb-2xl-d {
        margin-bottom: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    .mb-3xl-d {
        margin-bottom: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
    }

    /* Margin Left - Desktop */
    .ml-0-d {
        margin-left: 0 !important;
        --margin-base: 0;
    }

    .ml-xs-d {
        margin-left: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .ml-sm-d {
        margin-left: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .ml-md-d {
        margin-left: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .ml-lg-d {
        margin-left: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .ml-xl-d {
        margin-left: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .ml-2xl-d {
        margin-left: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    /* Margin Right - Desktop */
    .mr-0-d {
        margin-right: 0 !important;
        --margin-base: 0;
    }

    .mr-xs-d {
        margin-right: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .mr-sm-d {
        margin-right: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .mr-md-d {
        margin-right: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .mr-lg-d {
        margin-right: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .mr-xl-d {
        margin-right: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .mr-2xl-d {
        margin-right: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    /* Margin X-Axis (left + right) - Desktop */
    .mx-0-d {
        margin-left: 0 !important;
        margin-right: 0 !important;
        --margin-base: 0;
        --margin-base-x: 0;
    }

    .mx-xs-d {
        margin-left: var(--space-xs) !important;
        margin-right: var(--space-xs) !important;
        --margin-base: var(--space-xs);
        --margin-base-x: var(--space-xs);
    }

    .mx-sm-d {
        margin-left: var(--space-sm) !important;
        margin-right: var(--space-sm) !important;
        --margin-base: var(--space-sm);
        --margin-base-x: var(--space-sm);
    }

    .mx-md-d {
        margin-left: var(--space-md) !important;
        margin-right: var(--space-md) !important;
        --margin-base: var(--space-md);
        --margin-base-x: var(--space-md);
    }

    .mx-lg-d {
        margin-left: var(--space-lg) !important;
        margin-right: var(--space-lg) !important;
        --margin-base: var(--space-lg);
        --margin-base-x: var(--space-lg);
    }

    .mx-xl-d {
        margin-left: var(--space-xl) !important;
        margin-right: var(--space-xl) !important;
        --margin-base: var(--space-xl);
        --margin-base-x: var(--space-xl);
    }

    .mx-2xl-d {
        margin-left: var(--space-2xl) !important;
        margin-right: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
        --margin-base-x: var(--space-2xl);
    }

    .mx-auto-d {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Margin Y-Axis (top + bottom) - Desktop */
    .my-0-d {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        --margin-base: 0;
        --margin-base-y: 0;
    }

    .my-xs-d {
        margin-top: var(--space-xs) !important;
        margin-bottom: var(--space-xs) !important;
        --margin-base: var(--space-xs);
        --margin-base-y: var(--space-xs);
    }

    .my-sm-d {
        margin-top: var(--space-sm) !important;
        margin-bottom: var(--space-sm) !important;
        --margin-base: var(--space-sm);
        --margin-base-y: var(--space-sm);
    }

    .my-md-d {
        margin-top: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
        --margin-base: var(--space-md);
        --margin-base-y: var(--space-md);
    }

    .my-lg-d {
        margin-top: var(--space-lg) !important;
        margin-bottom: var(--space-lg) !important;
        --margin-base: var(--space-lg);
        --margin-base-y: var(--space-lg);
    }

    .my-xl-d {
        margin-top: var(--space-xl) !important;
        margin-bottom: var(--space-xl) !important;
        --margin-base: var(--space-xl);
        --margin-base-y: var(--space-xl);
    }

    .my-2xl-d {
        margin-top: var(--space-2xl) !important;
        margin-bottom: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
        --margin-base-y: var(--space-2xl);
    }

    .my-3xl-d {
        margin-top: var(--space-3xl) !important;
        margin-bottom: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
        --margin-base-y: var(--space-3xl);
    }

    /* Padding X-Axis (left + right) - Desktop */
    .px-0-d {
        padding-left: 0 !important;
        padding-right: 0 !important;
        --padding-base: 0;
        --padding-base-x: 0;
    }

    .px-xs-d {
        padding-left: var(--space-xs) !important;
        padding-right: var(--space-xs) !important;
        --padding-base: var(--space-xs);
        --padding-base-x: var(--space-xs);
    }

    .px-sm-d {
        padding-left: var(--space-sm) !important;
        padding-right: var(--space-sm) !important;
        --padding-base: var(--space-sm);
        --padding-base-x: var(--space-sm);
    }

    .px-md-d {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        --padding-base: var(--space-md);
        --padding-base-x: var(--space-md);
    }

    .px-lg-d {
        padding-left: var(--space-lg) !important;
        padding-right: var(--space-lg) !important;
        --padding-base: var(--space-lg);
        --padding-base-x: var(--space-lg);
    }

    .px-xl-d {
        padding-left: var(--space-xl) !important;
        padding-right: var(--space-xl) !important;
        --padding-base: var(--space-xl);
        --padding-base-x: var(--space-xl);
    }

    .px-2xl-d {
        padding-left: var(--space-2xl) !important;
        padding-right: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
        --padding-base-x: var(--space-2xl);
    }

    /* Padding Y-Axis (top + bottom) - Desktop */
    .py-0-d {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        --padding-base: 0;
        --padding-base-y: 0;
    }

    .py-xs-d {
        padding-top: var(--space-xs) !important;
        padding-bottom: var(--space-xs) !important;
        --padding-base: var(--space-xs);
        --padding-base-y: var(--space-xs);
    }

    .py-sm-d {
        padding-top: var(--space-sm) !important;
        padding-bottom: var(--space-sm) !important;
        --padding-base: var(--space-sm);
        --padding-base-y: var(--space-sm);
    }

    .py-md-d {
        padding-top: var(--space-md) !important;
        padding-bottom: var(--space-md) !important;
        --padding-base: var(--space-md);
        --padding-base-y: var(--space-md);
    }

    .py-lg-d {
        padding-top: var(--space-lg) !important;
        padding-bottom: var(--space-lg) !important;
        --padding-base: var(--space-lg);
        --padding-base-y: var(--space-lg);
    }

    .py-xl-d {
        padding-top: var(--space-xl) !important;
        padding-bottom: var(--space-xl) !important;
        --padding-base: var(--space-xl);
        --padding-base-y: var(--space-xl);
    }

    .py-2xl-d {
        padding-top: var(--space-2xl) !important;
        padding-bottom: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
        --padding-base-y: var(--space-2xl);
    }

    .py-3xl-d {
        padding-top: var(--space-3xl) !important;
        padding-bottom: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
        --padding-base-y: var(--space-3xl);
    }

    /* Padding All Sides - Desktop */
    .p-0-d {
        padding: 0 !important;
        --padding-base: 0;
        --padding-base-x: 0;
        --padding-base-y: 0;
    }

    .p-xs-d {
        padding: var(--space-xs) !important;
        --padding-base: var(--space-xs);
        --padding-base-x: var(--space-xs);
        --padding-base-y: var(--space-xs);
    }

    .p-sm-d {
        padding: var(--space-sm) !important;
        --padding-base: var(--space-sm);
        --padding-base-x: var(--space-sm);
        --padding-base-y: var(--space-sm);
    }

    .p-md-d {
        padding: var(--space-md) !important;
        --padding-base: var(--space-md);
        --padding-base-x: var(--space-md);
        --padding-base-y: var(--space-md);
    }

    .p-lg-d {
        padding: var(--space-lg) !important;
        --padding-base: var(--space-lg);
        --padding-base-x: var(--space-lg);
        --padding-base-y: var(--space-lg);
    }

    .p-xl-d {
        padding: var(--space-xl) !important;
        --padding-base: var(--space-xl);
        --padding-base-x: var(--space-xl);
        --padding-base-y: var(--space-xl);
    }

    .p-2xl-d {
        padding: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
        --padding-base-x: var(--space-2xl);
        --padding-base-y: var(--space-2xl);
    }

    .p-3xl-d {
        padding: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
        --padding-base-x: var(--space-3xl);
        --padding-base-y: var(--space-3xl);
    }

    /* Padding Top - Desktop */
    .pt-0-d {
        padding-top: 0 !important;
        --padding-base: 0;
    }

    .pt-xs-d {
        padding-top: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pt-sm-d {
        padding-top: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pt-md-d {
        padding-top: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pt-lg-d {
        padding-top: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pt-xl-d {
        padding-top: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pt-2xl-d {
        padding-top: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    .pt-3xl-d {
        padding-top: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
    }

    /* Padding Bottom - Desktop */
    .pb-0-d {
        padding-bottom: 0 !important;
        --padding-base: 0;
    }

    .pb-xs-d {
        padding-bottom: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pb-sm-d {
        padding-bottom: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pb-md-d {
        padding-bottom: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pb-lg-d {
        padding-bottom: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pb-xl-d {
        padding-bottom: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pb-2xl-d {
        padding-bottom: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    .pb-3xl-d {
        padding-bottom: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
    }

    /* Padding Left - Desktop */
    .pl-0-d {
        padding-left: 0 !important;
        --padding-base: 0;
    }

    .pl-xs-d {
        padding-left: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pl-sm-d {
        padding-left: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pl-md-d {
        padding-left: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pl-lg-d {
        padding-left: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pl-xl-d {
        padding-left: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pl-2xl-d {
        padding-left: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    /* Padding Right - Desktop */
    .pr-0-d {
        padding-right: 0 !important;
        --padding-base: 0;
    }

    .pr-xs-d {
        padding-right: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pr-sm-d {
        padding-right: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pr-md-d {
        padding-right: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pr-lg-d {
        padding-right: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pr-xl-d {
        padding-right: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pr-2xl-d {
        padding-right: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    /* Margin All Sides - Desktop */
    .m-0-d {
        margin: 0 !important;
        --margin-base: 0;
        --margin-base-x: 0;
        --margin-base-y: 0;
    }

    .m-xs-d {
        margin: var(--space-xs) !important;
        --margin-base: var(--space-xs);
        --margin-base-x: var(--space-xs);
        --margin-base-y: var(--space-xs);
    }

    .m-sm-d {
        margin: var(--space-sm) !important;
        --margin-base: var(--space-sm);
        --margin-base-x: var(--space-sm);
        --margin-base-y: var(--space-sm);
    }

    .m-md-d {
        margin: var(--space-md) !important;
        --margin-base: var(--space-md);
        --margin-base-x: var(--space-md);
        --margin-base-y: var(--space-md);
    }

    .m-lg-d {
        margin: var(--space-lg) !important;
        --margin-base: var(--space-lg);
        --margin-base-x: var(--space-lg);
        --margin-base-y: var(--space-lg);
    }

    .m-xl-d {
        margin: var(--space-xl) !important;
        --margin-base: var(--space-xl);
        --margin-base-x: var(--space-xl);
        --margin-base-y: var(--space-xl);
    }

    .m-2xl-d {
        margin: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
        --margin-base-x: var(--space-2xl);
        --margin-base-y: var(--space-2xl);
    }

    .m-3xl-d {
        margin: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
        --margin-base-x: var(--space-3xl);
        --margin-base-y: var(--space-3xl);
    }

    .m-auto-d {
        margin: auto !important;
    }

    /* Negative Margin Top - Desktop */
    .-mt-xs-d {
        margin-top: calc(var(--space-xs) * -1) !important;
    }

    .-mt-sm-d {
        margin-top: calc(var(--space-sm) * -1) !important;
    }

    .-mt-md-d {
        margin-top: calc(var(--space-md) * -1) !important;
    }

    .-mt-lg-d {
        margin-top: calc(var(--space-lg) * -1) !important;
    }

    .-mt-xl-d {
        margin-top: calc(var(--space-xl) * -1) !important;
    }

    .-mt-2xl-d {
        margin-top: calc(var(--space-2xl) * -1) !important;
    }

    .-mt-3xl-d {
        margin-top: calc(var(--space-3xl) * -1) !important;
    }

    /* Negative Margin Bottom - Desktop */
    .-mb-xs-d {
        margin-bottom: calc(var(--space-xs) * -1) !important;
    }

    .-mb-sm-d {
        margin-bottom: calc(var(--space-sm) * -1) !important;
    }

    .-mb-md-d {
        margin-bottom: calc(var(--space-md) * -1) !important;
    }

    .-mb-lg-d {
        margin-bottom: calc(var(--space-lg) * -1) !important;
    }

    .-mb-xl-d {
        margin-bottom: calc(var(--space-xl) * -1) !important;
    }

    .-mb-2xl-d {
        margin-bottom: calc(var(--space-2xl) * -1) !important;
    }

    .-mb-3xl-d {
        margin-bottom: calc(var(--space-3xl) * -1) !important;
    }

    /* Negative Margin Left - Desktop */
    .-ml-xs-d {
        margin-left: calc(var(--space-xs) * -1) !important;
    }

    .-ml-sm-d {
        margin-left: calc(var(--space-sm) * -1) !important;
    }

    .-ml-md-d {
        margin-left: calc(var(--space-md) * -1) !important;
    }

    .-ml-lg-d {
        margin-left: calc(var(--space-lg) * -1) !important;
    }

    .-ml-xl-d {
        margin-left: calc(var(--space-xl) * -1) !important;
    }

    .-ml-2xl-d {
        margin-left: calc(var(--space-2xl) * -1) !important;
    }

    /* Negative Margin Right - Desktop */
    .-mr-xs-d {
        margin-right: calc(var(--space-xs) * -1) !important;
    }

    .-mr-sm-d {
        margin-right: calc(var(--space-sm) * -1) !important;
    }

    .-mr-md-d {
        margin-right: calc(var(--space-md) * -1) !important;
    }

    .-mr-lg-d {
        margin-right: calc(var(--space-lg) * -1) !important;
    }

    .-mr-xl-d {
        margin-right: calc(var(--space-xl) * -1) !important;
    }

    .-mr-2xl-d {
        margin-right: calc(var(--space-2xl) * -1) !important;
    }

    /* Negative Margin X-Axis (left + right) - Desktop */
    .-mx-xs-d {
        margin-left: calc(var(--space-xs) * -1) !important;
        margin-right: calc(var(--space-xs) * -1) !important;
    }

    .-mx-sm-d {
        margin-left: calc(var(--space-sm) * -1) !important;
        margin-right: calc(var(--space-sm) * -1) !important;
    }

    .-mx-md-d {
        margin-left: calc(var(--space-md) * -1) !important;
        margin-right: calc(var(--space-md) * -1) !important;
    }

    .-mx-lg-d {
        margin-left: calc(var(--space-lg) * -1) !important;
        margin-right: calc(var(--space-lg) * -1) !important;
    }

    .-mx-xl-d {
        margin-left: calc(var(--space-xl) * -1) !important;
        margin-right: calc(var(--space-xl) * -1) !important;
    }

    .-mx-2xl-d {
        margin-left: calc(var(--space-2xl) * -1) !important;
        margin-right: calc(var(--space-2xl) * -1) !important;
    }

    /* Negative Margin Y-Axis (top + bottom) - Desktop */
    .-my-xs-d {
        margin-top: calc(var(--space-xs) * -1) !important;
        margin-bottom: calc(var(--space-xs) * -1) !important;
    }

    .-my-sm-d {
        margin-top: calc(var(--space-sm) * -1) !important;
        margin-bottom: calc(var(--space-sm) * -1) !important;
    }

    .-my-md-d {
        margin-top: calc(var(--space-md) * -1) !important;
        margin-bottom: calc(var(--space-md) * -1) !important;
    }

    .-my-lg-d {
        margin-top: calc(var(--space-lg) * -1) !important;
        margin-bottom: calc(var(--space-lg) * -1) !important;
    }

    .-my-xl-d {
        margin-top: calc(var(--space-xl) * -1) !important;
        margin-bottom: calc(var(--space-xl) * -1) !important;
    }

    .-my-2xl-d {
        margin-top: calc(var(--space-2xl) * -1) !important;
        margin-bottom: calc(var(--space-2xl) * -1) !important;
    }

    .-my-3xl-d {
        margin-top: calc(var(--space-3xl) * -1) !important;
        margin-bottom: calc(var(--space-3xl) * -1) !important;
    }

    /* Negative Margin All Sides - Desktop */
    .-m-xs-d {
        margin: calc(var(--space-xs) * -1) !important;
    }

    .-m-sm-d {
        margin: calc(var(--space-sm) * -1) !important;
    }

    .-m-md-d {
        margin: calc(var(--space-md) * -1) !important;
    }

    .-m-lg-d {
        margin: calc(var(--space-lg) * -1) !important;
    }

    .-m-xl-d {
        margin: calc(var(--space-xl) * -1) !important;
    }

    .-m-2xl-d {
        margin: calc(var(--space-2xl) * -1) !important;
    }

    .-m-3xl-d {
        margin: calc(var(--space-3xl) * -1) !important;
    }
}

@media (max-width: 480px) {

    /* Margin Top - Mobile */
    .mt-0-m {
        margin-top: 0 !important;
        --margin-base: 0;
    }

    .mt-xs-m {
        margin-top: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .mt-sm-m {
        margin-top: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .mt-md-m {
        margin-top: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .mt-lg-m {
        margin-top: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .mt-xl-m {
        margin-top: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .mt-2xl-m {
        margin-top: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    .mt-3xl-m {
        margin-top: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
    }

    /* Margin Bottom - Mobile */
    .mb-0-m {
        margin-bottom: 0 !important;
        --margin-base: 0;
    }

    .mb-xs-m {
        margin-bottom: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .mb-sm-m {
        margin-bottom: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .mb-md-m {
        margin-bottom: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .mb-lg-m {
        margin-bottom: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .mb-xl-m {
        margin-bottom: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .mb-2xl-m {
        margin-bottom: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    .mb-3xl-m {
        margin-bottom: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
    }

    /* Margin Left - Mobile */
    .ml-0-m {
        margin-left: 0 !important;
        --margin-base: 0;
    }

    .ml-xs-m {
        margin-left: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .ml-sm-m {
        margin-left: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .ml-md-m {
        margin-left: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .ml-lg-m {
        margin-left: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .ml-xl-m {
        margin-left: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .ml-2xl-m {
        margin-left: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    /* Margin Right - Mobile */
    .mr-0-m {
        margin-right: 0 !important;
        --margin-base: 0;
    }

    .mr-xs-m {
        margin-right: var(--space-xs) !important;
        --margin-base: var(--space-xs);
    }

    .mr-sm-m {
        margin-right: var(--space-sm) !important;
        --margin-base: var(--space-sm);
    }

    .mr-md-m {
        margin-right: var(--space-md) !important;
        --margin-base: var(--space-md);
    }

    .mr-lg-m {
        margin-right: var(--space-lg) !important;
        --margin-base: var(--space-lg);
    }

    .mr-xl-m {
        margin-right: var(--space-xl) !important;
        --margin-base: var(--space-xl);
    }

    .mr-2xl-m {
        margin-right: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
    }

    /* Margin X-Axis (left + right) - Mobile */
    .mx-0-m {
        margin-left: 0 !important;
        margin-right: 0 !important;
        --margin-base: 0;
        --margin-base-x: 0;
    }

    .mx-xs-m {
        margin-left: var(--space-xs) !important;
        margin-right: var(--space-xs) !important;
        --margin-base: var(--space-xs);
        --margin-base-x: var(--space-xs);
    }

    .mx-sm-m {
        margin-left: var(--space-sm) !important;
        margin-right: var(--space-sm) !important;
        --margin-base: var(--space-sm);
        --margin-base-x: var(--space-sm);
    }

    .mx-md-m {
        margin-left: var(--space-md) !important;
        margin-right: var(--space-md) !important;
        --margin-base: var(--space-md);
        --margin-base-x: var(--space-md);
    }

    .mx-lg-m {
        margin-left: var(--space-lg) !important;
        margin-right: var(--space-lg) !important;
        --margin-base: var(--space-lg);
        --margin-base-x: var(--space-lg);
    }

    .mx-xl-m {
        margin-left: var(--space-xl) !important;
        margin-right: var(--space-xl) !important;
        --margin-base: var(--space-xl);
        --margin-base-x: var(--space-xl);
    }

    .mx-2xl-m {
        margin-left: var(--space-2xl) !important;
        margin-right: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
        --margin-base-x: var(--space-2xl);
    }

    .mx-auto-m {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Margin Y-Axis (top + bottom) - Mobile */
    .my-0-m {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        --margin-base: 0;
        --margin-base-y: 0;
    }

    .my-xs-m {
        margin-top: var(--space-xs) !important;
        margin-bottom: var(--space-xs) !important;
        --margin-base: var(--space-xs);
        --margin-base-y: var(--space-xs);
    }

    .my-sm-m {
        margin-top: var(--space-sm) !important;
        margin-bottom: var(--space-sm) !important;
        --margin-base: var(--space-sm);
        --margin-base-y: var(--space-sm);
    }

    .my-md-m {
        margin-top: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
        --margin-base: var(--space-md);
        --margin-base-y: var(--space-md);
    }

    .my-lg-m {
        margin-top: var(--space-lg) !important;
        margin-bottom: var(--space-lg) !important;
        --margin-base: var(--space-lg);
        --margin-base-y: var(--space-lg);
    }

    .my-xl-m {
        margin-top: var(--space-xl) !important;
        margin-bottom: var(--space-xl) !important;
        --margin-base: var(--space-xl);
        --margin-base-y: var(--space-xl);
    }

    .my-2xl-m {
        margin-top: var(--space-2xl) !important;
        margin-bottom: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
        --margin-base-y: var(--space-2xl);
    }

    .my-3xl-m {
        margin-top: var(--space-3xl) !important;
        margin-bottom: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
        --margin-base-y: var(--space-3xl);
    }

    /* Padding X-Axis (left + right) - Mobile */
    .px-0-m {
        padding-left: 0 !important;
        padding-right: 0 !important;
        --padding-base: 0;
        --padding-base-x: 0;
    }

    .px-xs-m {
        padding-left: var(--space-xs) !important;
        padding-right: var(--space-xs) !important;
        --padding-base: var(--space-xs);
        --padding-base-x: var(--space-xs);
    }

    .px-sm-m {
        padding-left: var(--space-sm) !important;
        padding-right: var(--space-sm) !important;
        --padding-base: var(--space-sm);
        --padding-base-x: var(--space-sm);
    }

    .px-md-m {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        --padding-base: var(--space-md);
        --padding-base-x: var(--space-md);
    }

    .px-lg-m {
        padding-left: var(--space-lg) !important;
        padding-right: var(--space-lg) !important;
        --padding-base: var(--space-lg);
        --padding-base-x: var(--space-lg);
    }

    .px-xl-m {
        padding-left: var(--space-xl) !important;
        padding-right: var(--space-xl) !important;
        --padding-base: var(--space-xl);
        --padding-base-x: var(--space-xl);
    }

    .px-2xl-m {
        padding-left: var(--space-2xl) !important;
        padding-right: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
        --padding-base-x: var(--space-2xl);
    }

    /* Padding Y-Axis (top + bottom) - Mobile */
    .py-0-m {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        --padding-base: 0;
        --padding-base-y: 0;
    }

    .py-xs-m {
        padding-top: var(--space-xs) !important;
        padding-bottom: var(--space-xs) !important;
        --padding-base: var(--space-xs);
        --padding-base-y: var(--space-xs);
    }

    .py-sm-m {
        padding-top: var(--space-sm) !important;
        padding-bottom: var(--space-sm) !important;
        --padding-base: var(--space-sm);
        --padding-base-y: var(--space-sm);
    }

    .py-md-m {
        padding-top: var(--space-md) !important;
        padding-bottom: var(--space-md) !important;
        --padding-base: var(--space-md);
        --padding-base-y: var(--space-md);
    }

    .py-lg-m {
        padding-top: var(--space-lg) !important;
        padding-bottom: var(--space-lg) !important;
        --padding-base: var(--space-lg);
        --padding-base-y: var(--space-lg);
    }

    .py-xl-m {
        padding-top: var(--space-xl) !important;
        padding-bottom: var(--space-xl) !important;
        --padding-base: var(--space-xl);
        --padding-base-y: var(--space-xl);
    }

    .py-2xl-m {
        padding-top: var(--space-2xl) !important;
        padding-bottom: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
        --padding-base-y: var(--space-2xl);
    }

    .py-3xl-m {
        padding-top: var(--space-3xl) !important;
        padding-bottom: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
        --padding-base-y: var(--space-3xl);
    }

    /* Padding All Sides - Mobile */
    .p-0-m {
        padding: 0 !important;
        --padding-base: 0;
        --padding-base-x: 0;
        --padding-base-y: 0;
    }

    .p-xs-m {
        padding: var(--space-xs) !important;
        --padding-base: var(--space-xs);
        --padding-base-x: var(--space-xs);
        --padding-base-y: var(--space-xs);
    }

    .p-sm-m {
        padding: var(--space-sm) !important;
        --padding-base: var(--space-sm);
        --padding-base-x: var(--space-sm);
        --padding-base-y: var(--space-sm);
    }

    .p-md-m {
        padding: var(--space-md) !important;
        --padding-base: var(--space-md);
        --padding-base-x: var(--space-md);
        --padding-base-y: var(--space-md);
    }

    .p-lg-m {
        padding: var(--space-lg) !important;
        --padding-base: var(--space-lg);
        --padding-base-x: var(--space-lg);
        --padding-base-y: var(--space-lg);
    }

    .p-xl-m {
        padding: var(--space-xl) !important;
        --padding-base: var(--space-xl);
        --padding-base-x: var(--space-xl);
        --padding-base-y: var(--space-xl);
    }

    .p-2xl-m {
        padding: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
        --padding-base-x: var(--space-2xl);
        --padding-base-y: var(--space-2xl);
    }

    .p-3xl-m {
        padding: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
        --padding-base-x: var(--space-3xl);
        --padding-base-y: var(--space-3xl);
    }

    /* Padding Top - Mobile */
    .pt-0-m {
        padding-top: 0 !important;
        --padding-base: 0;
    }

    .pt-xs-m {
        padding-top: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pt-sm-m {
        padding-top: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pt-md-m {
        padding-top: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pt-lg-m {
        padding-top: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pt-xl-m {
        padding-top: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pt-2xl-m {
        padding-top: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    .pt-3xl-m {
        padding-top: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
    }

    /* Padding Bottom - Mobile */
    .pb-0-m {
        padding-bottom: 0 !important;
        --padding-base: 0;
    }

    .pb-xs-m {
        padding-bottom: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pb-sm-m {
        padding-bottom: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pb-md-m {
        padding-bottom: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pb-lg-m {
        padding-bottom: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pb-xl-m {
        padding-bottom: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pb-2xl-m {
        padding-bottom: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    .pb-3xl-m {
        padding-bottom: var(--space-3xl) !important;
        --padding-base: var(--space-3xl);
    }

    /* Padding Left - Mobile */
    .pl-0-m {
        padding-left: 0 !important;
        --padding-base: 0;
    }

    .pl-xs-m {
        padding-left: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pl-sm-m {
        padding-left: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pl-md-m {
        padding-left: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pl-lg-m {
        padding-left: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pl-xl-m {
        padding-left: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pl-2xl-m {
        padding-left: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    /* Padding Right - Mobile */
    .pr-0-m {
        padding-right: 0 !important;
        --padding-base: 0;
    }

    .pr-xs-m {
        padding-right: var(--space-xs) !important;
        --padding-base: var(--space-xs);
    }

    .pr-sm-m {
        padding-right: var(--space-sm) !important;
        --padding-base: var(--space-sm);
    }

    .pr-md-m {
        padding-right: var(--space-md) !important;
        --padding-base: var(--space-md);
    }

    .pr-lg-m {
        padding-right: var(--space-lg) !important;
        --padding-base: var(--space-lg);
    }

    .pr-xl-m {
        padding-right: var(--space-xl) !important;
        --padding-base: var(--space-xl);
    }

    .pr-2xl-m {
        padding-right: var(--space-2xl) !important;
        --padding-base: var(--space-2xl);
    }

    /* Margin All Sides - Mobile */
    .m-0-m {
        margin: 0 !important;
        --margin-base: 0;
        --margin-base-x: 0;
        --margin-base-y: 0;
    }

    .m-xs-m {
        margin: var(--space-xs) !important;
        --margin-base: var(--space-xs);
        --margin-base-x: var(--space-xs);
        --margin-base-y: var(--space-xs);
    }

    .m-sm-m {
        margin: var(--space-sm) !important;
        --margin-base: var(--space-sm);
        --margin-base-x: var(--space-sm);
        --margin-base-y: var(--space-sm);
    }

    .m-md-m {
        margin: var(--space-md) !important;
        --margin-base: var(--space-md);
        --margin-base-x: var(--space-md);
        --margin-base-y: var(--space-md);
    }

    .m-lg-m {
        margin: var(--space-lg) !important;
        --margin-base: var(--space-lg);
        --margin-base-x: var(--space-lg);
        --margin-base-y: var(--space-lg);
    }

    .m-xl-m {
        margin: var(--space-xl) !important;
        --margin-base: var(--space-xl);
        --margin-base-x: var(--space-xl);
        --margin-base-y: var(--space-xl);
    }

    .m-2xl-m {
        margin: var(--space-2xl) !important;
        --margin-base: var(--space-2xl);
        --margin-base-x: var(--space-2xl);
        --margin-base-y: var(--space-2xl);
    }

    .m-3xl-m {
        margin: var(--space-3xl) !important;
        --margin-base: var(--space-3xl);
        --margin-base-x: var(--space-3xl);
        --margin-base-y: var(--space-3xl);
    }

    .m-auto-m {
        margin: auto !important;
    }

    /* Negative Margin Top - Mobile */
    .-mt-xs-m {
        margin-top: calc(var(--space-xs) * -1) !important;
    }

    .-mt-sm-m {
        margin-top: calc(var(--space-sm) * -1) !important;
    }

    .-mt-md-m {
        margin-top: calc(var(--space-md) * -1) !important;
    }

    .-mt-lg-m {
        margin-top: calc(var(--space-lg) * -1) !important;
    }

    .-mt-xl-m {
        margin-top: calc(var(--space-xl) * -1) !important;
    }

    .-mt-2xl-m {
        margin-top: calc(var(--space-2xl) * -1) !important;
    }

    .-mt-3xl-m {
        margin-top: calc(var(--space-3xl) * -1) !important;
    }

    /* Negative Margin Bottom - Mobile */
    .-mb-xs-m {
        margin-bottom: calc(var(--space-xs) * -1) !important;
    }

    .-mb-sm-m {
        margin-bottom: calc(var(--space-sm) * -1) !important;
    }

    .-mb-md-m {
        margin-bottom: calc(var(--space-md) * -1) !important;
    }

    .-mb-lg-m {
        margin-bottom: calc(var(--space-lg) * -1) !important;
    }

    .-mb-xl-m {
        margin-bottom: calc(var(--space-xl) * -1) !important;
    }

    .-mb-2xl-m {
        margin-bottom: calc(var(--space-2xl) * -1) !important;
    }

    .-mb-3xl-m {
        margin-bottom: calc(var(--space-3xl) * -1) !important;
    }

    /* Negative Margin Left - Mobile */
    .-ml-xs-m {
        margin-left: calc(var(--space-xs) * -1) !important;
    }

    .-ml-sm-m {
        margin-left: calc(var(--space-sm) * -1) !important;
    }

    .-ml-md-m {
        margin-left: calc(var(--space-md) * -1) !important;
    }

    .-ml-lg-m {
        margin-left: calc(var(--space-lg) * -1) !important;
    }

    .-ml-xl-m {
        margin-left: calc(var(--space-xl) * -1) !important;
    }

    .-ml-2xl-m {
        margin-left: calc(var(--space-2xl) * -1) !important;
    }

    /* Negative Margin Right - Mobile */
    .-mr-xs-m {
        margin-right: calc(var(--space-xs) * -1) !important;
    }

    .-mr-sm-m {
        margin-right: calc(var(--space-sm) * -1) !important;
    }

    .-mr-md-m {
        margin-right: calc(var(--space-md) * -1) !important;
    }

    .-mr-lg-m {
        margin-right: calc(var(--space-lg) * -1) !important;
    }

    .-mr-xl-m {
        margin-right: calc(var(--space-xl) * -1) !important;
    }

    .-mr-2xl-m {
        margin-right: calc(var(--space-2xl) * -1) !important;
    }

    /* Negative Margin X-Axis (left + right) - Mobile */
    .-mx-xs-m {
        margin-left: calc(var(--space-xs) * -1) !important;
        margin-right: calc(var(--space-xs) * -1) !important;
    }

    .-mx-sm-m {
        margin-left: calc(var(--space-sm) * -1) !important;
        margin-right: calc(var(--space-sm) * -1) !important;
    }

    .-mx-md-m {
        margin-left: calc(var(--space-md) * -1) !important;
        margin-right: calc(var(--space-md) * -1) !important;
    }

    .-mx-lg-m {
        margin-left: calc(var(--space-lg) * -1) !important;
        margin-right: calc(var(--space-lg) * -1) !important;
    }

    .-mx-xl-m {
        margin-left: calc(var(--space-xl) * -1) !important;
        margin-right: calc(var(--space-xl) * -1) !important;
    }

    .-mx-2xl-m {
        margin-left: calc(var(--space-2xl) * -1) !important;
        margin-right: calc(var(--space-2xl) * -1) !important;
    }

    /* Negative Margin Y-Axis (top + bottom) - Mobile */
    .-my-xs-m {
        margin-top: calc(var(--space-xs) * -1) !important;
        margin-bottom: calc(var(--space-xs) * -1) !important;
    }

    .-my-sm-m {
        margin-top: calc(var(--space-sm) * -1) !important;
        margin-bottom: calc(var(--space-sm) * -1) !important;
    }

    .-my-md-m {
        margin-top: calc(var(--space-md) * -1) !important;
        margin-bottom: calc(var(--space-md) * -1) !important;
    }

    .-my-lg-m {
        margin-top: calc(var(--space-lg) * -1) !important;
        margin-bottom: calc(var(--space-lg) * -1) !important;
    }

    .-my-xl-m {
        margin-top: calc(var(--space-xl) * -1) !important;
        margin-bottom: calc(var(--space-xl) * -1) !important;
    }

    .-my-2xl-m {
        margin-top: calc(var(--space-2xl) * -1) !important;
        margin-bottom: calc(var(--space-2xl) * -1) !important;
    }

    .-my-3xl-m {
        margin-top: calc(var(--space-3xl) * -1) !important;
        margin-bottom: calc(var(--space-3xl) * -1) !important;
    }

    /* Negative Margin All Sides - Mobile */
    .-m-xs-m {
        margin: calc(var(--space-xs) * -1) !important;
    }

    .-m-sm-m {
        margin: calc(var(--space-sm) * -1) !important;
    }

    .-m-md-m {
        margin: calc(var(--space-md) * -1) !important;
    }

    .-m-lg-m {
        margin: calc(var(--space-lg) * -1) !important;
    }

    .-m-xl-m {
        margin: calc(var(--space-xl) * -1) !important;
    }

    .-m-2xl-m {
        margin: calc(var(--space-2xl) * -1) !important;
    }

    .-m-3xl-m {
        margin: calc(var(--space-3xl) * -1) !important;
    }

    /* Margin Top - Safe Area - Mobile */
    .mt-safe-m {
        margin-top: var(--safe-space-top) !important;
        --margin-base: var(--safe-space-top);
    }

    /* Margin Bottom - Safe Area - Mobile */
    .mb-safe-m {
        margin-bottom: var(--safe-space-bottom) !important;
        --margin-base: var(--safe-space-bottom);
    }

    /* Margin Left - Safe Area - Mobile */
    .ml-safe-m {
        margin-left: var(--safe-space-left) !important;
        --margin-base: var(--safe-space-left);
    }

    /* Margin Right - Safe Area - Mobile */
    .mr-safe-m {
        margin-right: var(--safe-space-right) !important;
        --margin-base: var(--safe-space-right);
    }

    /* Margin X-Axis (left + right) - Safe Area - Mobile */
    .mx-safe-m {
        margin-left: var(--safe-space-left) !important;
        margin-right: var(--safe-space-right) !important;
        --margin-base: var(--safe-space-left);
        --margin-base-x: var(--safe-space-left);
    }

    /* Margin Y-Axis (top + bottom) - Safe Area - Mobile */
    .my-safe-m {
        margin-top: var(--safe-space-top) !important;
        margin-bottom: var(--safe-space-bottom) !important;
        --margin-base: var(--safe-space-top);
        --margin-base-y: var(--safe-space-top);
    }

    /* Padding Top - Safe Area - Mobile */
    .pt-safe-m {
        padding-top: var(--safe-space-top) !important;
        --padding-base: var(--safe-space-top);
    }

    /* Padding Bottom - Safe Area - Mobile */
    .pb-safe-m {
        padding-bottom: var(--safe-space-bottom) !important;
        --padding-base: var(--safe-space-bottom);
    }

    /* Padding Left - Safe Area - Mobile */
    .pl-safe-m {
        padding-left: var(--safe-space-left) !important;
        --padding-base: var(--safe-space-left);
    }

    /* Padding Right - Safe Area - Mobile */
    .pr-safe-m {
        padding-right: var(--safe-space-right) !important;
        --padding-base: var(--safe-space-right);
    }

    /* Padding X-Axis (left + right) - Safe Area - Mobile */
    .px-safe-m {
        padding-left: var(--safe-space-left) !important;
        padding-right: var(--safe-space-right) !important;
        --padding-base: var(--safe-space-left);
        --padding-base-x: var(--safe-space-left);
    }

    /* Padding Y-Axis (top + bottom) - Safe Area - Mobile */
    .py-safe-m {
        padding-top: var(--safe-space-top) !important;
        padding-bottom: var(--safe-space-bottom) !important;
        --padding-base: var(--safe-space-top);
        --padding-base-y: var(--safe-space-top);
    }

    /* Margin All Sides - Safe Area - Mobile */
    .m-safe-m {
        margin-top: var(--safe-space-top) !important;
        margin-right: var(--safe-space-right) !important;
        margin-bottom: var(--safe-space-bottom) !important;
        margin-left: var(--safe-space-left) !important;
        --margin-base: var(--safe-space-top);
        --margin-base-x: var(--safe-space-left);
        --margin-base-y: var(--safe-space-top);
    }

    /* Padding All Sides - Safe Area - Mobile */
    .p-safe-m {
        padding-top: var(--safe-space-top) !important;
        padding-right: var(--safe-space-right) !important;
        padding-bottom: var(--safe-space-bottom) !important;
        padding-left: var(--safe-space-left) !important;
        --padding-base: var(--safe-space-top);
        --padding-base-x: var(--safe-space-left);
        --padding-base-y: var(--safe-space-top);
    }
}

/* Gap (Flexbox/Grid) - Both Axes */
.g-0 {
    gap: 0 !important;
    --gap-base: 0;
    --gap-base-x: 0;
    --gap-base-y: 0;
}

.g-xs {
    gap: var(--space-xs) !important;
    --gap-base: var(--space-xs);
    --gap-base-x: var(--space-xs);
    --gap-base-y: var(--space-xs);
}

.g-sm {
    gap: var(--space-sm) !important;
    --gap-base: var(--space-sm);
    --gap-base-x: var(--space-sm);
    --gap-base-y: var(--space-sm);
}

.g-md {
    gap: var(--space-md) !important;
    --gap-base: var(--space-md);
    --gap-base-x: var(--space-md);
    --gap-base-y: var(--space-md);
}

.g-lg {
    gap: var(--space-lg) !important;
    --gap-base: var(--space-lg);
    --gap-base-x: var(--space-lg);
    --gap-base-y: var(--space-lg);
}

.g-xl {
    gap: var(--space-xl) !important;
    --gap-base: var(--space-xl);
    --gap-base-x: var(--space-xl);
    --gap-base-y: var(--space-xl);
}

.g-2xl {
    gap: var(--space-2xl) !important;
    --gap-base: var(--space-2xl);
    --gap-base-x: var(--space-2xl);
    --gap-base-y: var(--space-2xl);
}

.g-3xl {
    gap: var(--space-3xl) !important;
    --gap-base: var(--space-3xl);
    --gap-base-x: var(--space-3xl);
    --gap-base-y: var(--space-3xl);
}

/* Gap X-Axis (Column Gap - Horizontal) */
.gx-0 {
    column-gap: 0 !important;
    --gap-base: 0;
    --gap-base-x: 0;
}

.gx-xs {
    column-gap: var(--space-xs) !important;
    --gap-base: var(--space-xs);
    --gap-base-x: var(--space-xs);
}

.gx-sm {
    column-gap: var(--space-sm) !important;
    --gap-base: var(--space-sm);
    --gap-base-x: var(--space-sm);
}

.gx-md {
    column-gap: var(--space-md) !important;
    --gap-base: var(--space-md);
    --gap-base-x: var(--space-md);
}

.gx-lg {
    column-gap: var(--space-lg) !important;
    --gap-base: var(--space-lg);
    --gap-base-x: var(--space-lg);
}

.gx-xl {
    column-gap: var(--space-xl) !important;
    --gap-base: var(--space-xl);
    --gap-base-x: var(--space-xl);
}

.gx-2xl {
    column-gap: var(--space-2xl) !important;
    --gap-base: var(--space-2xl);
    --gap-base-x: var(--space-2xl);
}

.gx-3xl {
    column-gap: var(--space-3xl) !important;
    --gap-base: var(--space-3xl);
    --gap-base-x: var(--space-3xl);
}

/* Gap Y-Axis (Row Gap - Vertical) */
.gy-0 {
    row-gap: 0 !important;
    --gap-base: 0;
    --gap-base-y: 0;
}

.gy-xs {
    row-gap: var(--space-xs) !important;
    --gap-base: var(--space-xs);
    --gap-base-y: var(--space-xs);
}

.gy-sm {
    row-gap: var(--space-sm) !important;
    --gap-base: var(--space-sm);
    --gap-base-y: var(--space-sm);
}

.gy-md {
    row-gap: var(--space-md) !important;
    --gap-base: var(--space-md);
    --gap-base-y: var(--space-md);
}

.gy-lg {
    row-gap: var(--space-lg) !important;
    --gap-base: var(--space-lg);
    --gap-base-y: var(--space-lg);
}

.gy-xl {
    row-gap: var(--space-xl) !important;
    --gap-base: var(--space-xl);
    --gap-base-y: var(--space-xl);
}

.gy-2xl {
    row-gap: var(--space-2xl) !important;
    --gap-base: var(--space-2xl);
    --gap-base-y: var(--space-2xl);
}

.gy-3xl {
    row-gap: var(--space-3xl) !important;
    --gap-base: var(--space-3xl);
    --gap-base-y: var(--space-3xl);
}


@media (min-width: 481px) {

    /* Gap (Flexbox/Grid) - Both Axes - Desktop */
    .g-0-d {
        gap: 0 !important;
        --gap-base: 0;
        --gap-base-x: 0;
        --gap-base-y: 0;
    }

    .g-xs-d {
        gap: var(--space-xs) !important;
        --gap-base: var(--space-xs);
        --gap-base-x: var(--space-xs);
        --gap-base-y: var(--space-xs);
    }

    .g-sm-d {
        gap: var(--space-sm) !important;
        --gap-base: var(--space-sm);
        --gap-base-x: var(--space-sm);
        --gap-base-y: var(--space-sm);
    }

    .g-md-d {
        gap: var(--space-md) !important;
        --gap-base: var(--space-md);
        --gap-base-x: var(--space-md);
        --gap-base-y: var(--space-md);
    }

    .g-lg-d {
        gap: var(--space-lg) !important;
        --gap-base: var(--space-lg);
        --gap-base-x: var(--space-lg);
        --gap-base-y: var(--space-lg);
    }

    .g-xl-d {
        gap: var(--space-xl) !important;
        --gap-base: var(--space-xl);
        --gap-base-x: var(--space-xl);
        --gap-base-y: var(--space-xl);
    }

    .g-2xl-d {
        gap: var(--space-2xl) !important;
        --gap-base: var(--space-2xl);
        --gap-base-x: var(--space-2xl);
        --gap-base-y: var(--space-2xl);
    }

    .g-3xl-d {
        gap: var(--space-3xl) !important;
        --gap-base: var(--space-3xl);
        --gap-base-x: var(--space-3xl);
        --gap-base-y: var(--space-3xl);
    }

    /* Gap X-Axis (Column Gap - Horizontal) - Desktop */
    .gx-0-d {
        column-gap: 0 !important;
        --gap-base: 0;
        --gap-base-x: 0;
    }

    .gx-xs-d {
        column-gap: var(--space-xs) !important;
        --gap-base: var(--space-xs);
        --gap-base-x: var(--space-xs);
    }

    .gx-sm-d {
        column-gap: var(--space-sm) !important;
        --gap-base: var(--space-sm);
        --gap-base-x: var(--space-sm);
    }

    .gx-md-d {
        column-gap: var(--space-md) !important;
        --gap-base: var(--space-md);
        --gap-base-x: var(--space-md);
    }

    .gx-lg-d {
        column-gap: var(--space-lg) !important;
        --gap-base: var(--space-lg);
        --gap-base-x: var(--space-lg);
    }

    .gx-xl-d {
        column-gap: var(--space-xl) !important;
        --gap-base: var(--space-xl);
        --gap-base-x: var(--space-xl);
    }

    .gx-2xl-d {
        column-gap: var(--space-2xl) !important;
        --gap-base: var(--space-2xl);
        --gap-base-x: var(--space-2xl);
    }

    .gx-3xl-d {
        column-gap: var(--space-3xl) !important;
        --gap-base: var(--space-3xl);
        --gap-base-x: var(--space-3xl);
    }

    /* Gap Y-Axis (Row Gap - Vertical) - Desktop */
    .gy-0-d {
        row-gap: 0 !important;
        --gap-base: 0;
        --gap-base-y: 0;
    }

    .gy-xs-d {
        row-gap: var(--space-xs) !important;
        --gap-base: var(--space-xs);
        --gap-base-y: var(--space-xs);
    }

    .gy-sm-d {
        row-gap: var(--space-sm) !important;
        --gap-base: var(--space-sm);
        --gap-base-y: var(--space-sm);
    }

    .gy-md-d {
        row-gap: var(--space-md) !important;
        --gap-base: var(--space-md);
        --gap-base-y: var(--space-md);
    }

    .gy-lg-d {
        row-gap: var(--space-lg) !important;
        --gap-base: var(--space-lg);
        --gap-base-y: var(--space-lg);
    }

    .gy-xl-d {
        row-gap: var(--space-xl) !important;
        --gap-base: var(--space-xl);
        --gap-base-y: var(--space-xl);
    }

    .gy-2xl-d {
        row-gap: var(--space-2xl) !important;
        --gap-base: var(--space-2xl);
        --gap-base-y: var(--space-2xl);
    }

    .gy-3xl-d {
        row-gap: var(--space-3xl) !important;
        --gap-base: var(--space-3xl);
        --gap-base-y: var(--space-3xl);
    }

}

@media (max-width: 480px) {

    /* Gap (Flexbox/Grid) - Both Axes - Mobile */
    .g-0-m {
        gap: 0 !important;
        --gap-base: 0;
        --gap-base-x: 0;
        --gap-base-y: 0;
    }

    .g-xs-m {
        gap: var(--space-xs) !important;
        --gap-base: var(--space-xs);
        --gap-base-x: var(--space-xs);
        --gap-base-y: var(--space-xs);
    }

    .g-sm-m {
        gap: var(--space-sm) !important;
        --gap-base: var(--space-sm);
        --gap-base-x: var(--space-sm);
        --gap-base-y: var(--space-sm);
    }

    .g-md-m {
        gap: var(--space-md) !important;
        --gap-base: var(--space-md);
        --gap-base-x: var(--space-md);
        --gap-base-y: var(--space-md);
    }

    .g-lg-m {
        gap: var(--space-lg) !important;
        --gap-base: var(--space-lg);
        --gap-base-x: var(--space-lg);
        --gap-base-y: var(--space-lg);
    }

    .g-xl-m {
        gap: var(--space-xl) !important;
        --gap-base: var(--space-xl);
        --gap-base-x: var(--space-xl);
        --gap-base-y: var(--space-xl);
    }

    .g-2xl-m {
        gap: var(--space-2xl) !important;
        --gap-base: var(--space-2xl);
        --gap-base-x: var(--space-2xl);
        --gap-base-y: var(--space-2xl);
    }

    .g-3xl-m {
        gap: var(--space-3xl) !important;
        --gap-base: var(--space-3xl);
        --gap-base-x: var(--space-3xl);
        --gap-base-y: var(--space-3xl);
    }

    /* Gap X-Axis (Column Gap - Horizontal) - Mobile */
    .gx-0-m {
        column-gap: 0 !important;
        --gap-base: 0;
        --gap-base-x: 0;
    }

    .gx-xs-m {
        column-gap: var(--space-xs) !important;
        --gap-base: var(--space-xs);
        --gap-base-x: var(--space-xs);
    }

    .gx-sm-m {
        column-gap: var(--space-sm) !important;
        --gap-base: var(--space-sm);
        --gap-base-x: var(--space-sm);
    }

    .gx-md-m {
        column-gap: var(--space-md) !important;
        --gap-base: var(--space-md);
        --gap-base-x: var(--space-md);
    }

    .gx-lg-m {
        column-gap: var(--space-lg) !important;
        --gap-base: var(--space-lg);
        --gap-base-x: var(--space-lg);
    }

    .gx-xl-m {
        column-gap: var(--space-xl) !important;
        --gap-base: var(--space-xl);
        --gap-base-x: var(--space-xl);
    }

    .gx-2xl-m {
        column-gap: var(--space-2xl) !important;
        --gap-base: var(--space-2xl);
        --gap-base-x: var(--space-2xl);
    }

    .gx-3xl-m {
        column-gap: var(--space-3xl) !important;
        --gap-base: var(--space-3xl);
        --gap-base-x: var(--space-3xl);
    }

    /* Gap Y-Axis (Row Gap - Vertical) - Mobile */
    .gy-0-m {
        row-gap: 0 !important;
        --gap-base: 0;
        --gap-base-y: 0;
    }

    .gy-xs-m {
        row-gap: var(--space-xs) !important;
        --gap-base: var(--space-xs);
        --gap-base-y: var(--space-xs);
    }

    .gy-sm-m {
        row-gap: var(--space-sm) !important;
        --gap-base: var(--space-sm);
        --gap-base-y: var(--space-sm);
    }

    .gy-md-m {
        row-gap: var(--space-md) !important;
        --gap-base: var(--space-md);
        --gap-base-y: var(--space-md);
    }

    .gy-lg-m {
        row-gap: var(--space-lg) !important;
        --gap-base: var(--space-lg);
        --gap-base-y: var(--space-lg);
    }

    .gy-xl-m {
        row-gap: var(--space-xl) !important;
        --gap-base: var(--space-xl);
        --gap-base-y: var(--space-xl);
    }

    .gy-2xl-m {
        row-gap: var(--space-2xl) !important;
        --gap-base: var(--space-2xl);
        --gap-base-y: var(--space-2xl);
    }

    .gy-3xl-m {
        row-gap: var(--space-3xl) !important;
        --gap-base: var(--space-3xl);
        --gap-base-y: var(--space-3xl);
    }
}

/* Misc spacing utilities */
.p-deferred {
    padding: 0 !important;

    & > *:not(.inner),
    & > .inner > * {
        padding: var(--padding-base-y) var(--padding-base-x) !important;
    }
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: var(--translate-down);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: var(--translate-left);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: var(--translate-right);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleUpFade {
    from {
        opacity: 0;
        transform: var(--scale-down-translate-down);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes scaleDownFade {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: var(--scale-down-translate-down);
    }
}

@keyframes slideInFromTop {
    from {
        transform: var(--translate-top);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    from {
        transform: var(--translate-right);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes loading-placeholder {
    50% {
        opacity: 1;
    }

    75% {
        opacity: .5;
    }

    to {
        opacity: 1;
    }
}

@keyframes shimmer {
    from {
        background-position: -100cqi 0, -50cqi 0;
    }

    to {
        background-position: 200cqi 0, 250cqi 0;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes showcase-scroll {
    from {
        transform: translate(0);
    }

    to {
        transform: translate(calc(-100% / var(--total-sets, 3)));
    }
}

@keyframes mulShdSpin {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em,
            2em -2em 0 0em, 3em 0 0 -1em,
            2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
            3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em,
            2em -2em 0 0, 3em 0 0 0.2em,
            2em 2em 0 0, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
            -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
            -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
            -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
            3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}