```css id="util01"
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM UTILITY SYSTEM
   ------------------------------------------------------------
   File: /assets/css/base/utilities.css
   Version: 1.0

   Depends On:
   - variables.css
   - reset.css
   - typography.css

   Purpose:
   - Containers
   - Display
   - Flex
   - Grid
   - Alignment
   - Position
   - Spacing
   - Width / Height
   - Backgrounds
   - Borders
   - Radius
   - Shadows
   - Overflow
   - Images
   - Visibility
   - Accessibility

   IMPORTANT:
   Do not add page-specific or component-specific styling here.
   ============================================================ */


/* ============================================================
   01. PREMIUM CONTAINERS
   ============================================================ */

.container-premium {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-premium)
    );

    margin-inline: auto;
}

.container-narrow {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--content-lg)
    );

    margin-inline: auto;
}

.container-content {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--content-md)
    );

    margin-inline: auto;
}

.container-small {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--content-sm)
    );

    margin-inline: auto;
}


/* ============================================================
   02. BOOTSTRAP CONTAINER PREMIUM ALIGNMENT
   ============================================================ */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 2rem;
}


/* ============================================================
   03. DISPLAY
   ============================================================ */

.d-block-premium {
    display: block !important;
}

.d-inline-block-premium {
    display: inline-block !important;
}

.d-inline-premium {
    display: inline !important;
}

.d-flex-premium {
    display: flex !important;
}

.d-inline-flex-premium {
    display: inline-flex !important;
}

.d-grid-premium {
    display: grid !important;
}

.d-none-premium {
    display: none !important;
}


/* ============================================================
   04. FLEX DIRECTION
   ============================================================ */

.flex-row-premium {
    flex-direction: row !important;
}

.flex-column-premium {
    flex-direction: column !important;
}

.flex-row-reverse-premium {
    flex-direction: row-reverse !important;
}

.flex-column-reverse-premium {
    flex-direction: column-reverse !important;
}


/* ============================================================
   05. FLEX WRAP
   ============================================================ */

.flex-wrap-premium {
    flex-wrap: wrap !important;
}

.flex-nowrap-premium {
    flex-wrap: nowrap !important;
}


/* ============================================================
   06. ALIGN ITEMS
   ============================================================ */

.items-start {
    align-items: flex-start !important;
}

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

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

.items-stretch {
    align-items: stretch !important;
}


/* ============================================================
   07. JUSTIFY CONTENT
   ============================================================ */

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

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

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

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

.justify-around {
    justify-content: space-around !important;
}


/* ============================================================
   08. FLEX HELPERS
   ============================================================ */

.flex-1 {
    flex: 1 1 0 !important;
}

.flex-auto {
    flex: 1 1 auto !important;
}

.flex-none {
    flex: none !important;
}

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

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


/* ============================================================
   09. COMMON GRID SYSTEM
   ============================================================ */

.grid-2 {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.grid-3 {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.grid-4 {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.grid-auto {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );
}


/* ============================================================
   10. GAPS
   ============================================================ */

.gap-1-premium {
    gap: var(--space-1) !important;
}

.gap-2-premium {
    gap: var(--space-2) !important;
}

.gap-3-premium {
    gap: var(--space-3) !important;
}

.gap-4-premium {
    gap: var(--space-4) !important;
}

.gap-5-premium {
    gap: var(--space-5) !important;
}

.gap-6-premium {
    gap: var(--space-6) !important;
}

.gap-8-premium {
    gap: var(--space-8) !important;
}

.gap-10-premium {
    gap: var(--space-10) !important;
}

.gap-12-premium {
    gap: var(--space-12) !important;
}


/* ============================================================
   11. POSITION
   ============================================================ */

.position-relative-premium {
    position: relative !important;
}

.position-absolute-premium {
    position: absolute !important;
}

.position-fixed-premium {
    position: fixed !important;
}

.position-sticky-premium {
    position: sticky !important;
}


/* ============================================================
   12. INSET HELPERS
   ============================================================ */

.inset-0 {
    inset: 0 !important;
}

.top-0-premium {
    top: 0 !important;
}

.right-0-premium {
    right: 0 !important;
}

.bottom-0-premium {
    bottom: 0 !important;
}

.left-0-premium {
    left: 0 !important;
}


/* ============================================================
   13. WIDTH
   ============================================================ */

.w-full {
    width: 100% !important;
}

.w-auto-premium {
    width: auto !important;
}

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

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


/* ============================================================
   14. HEIGHT
   ============================================================ */

.h-full {
    height: 100% !important;
}

.h-auto-premium {
    height: auto !important;
}

.min-h-screen {
    min-height: 100vh !important;
}


/* ============================================================
   15. MARGIN AUTO
   ============================================================ */

.mx-auto-premium {
    margin-inline: auto !important;
}

.ml-auto-premium {
    margin-left: auto !important;
}

.mr-auto-premium {
    margin-right: auto !important;
}


/* ============================================================
   16. MARGIN TOP
   ============================================================ */

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

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

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

.mt-4-premium {
    margin-top: var(--space-4) !important;
}

.mt-5-premium {
    margin-top: var(--space-5) !important;
}

.mt-6-premium {
    margin-top: var(--space-6) !important;
}

.mt-8-premium {
    margin-top: var(--space-8) !important;
}

.mt-10-premium {
    margin-top: var(--space-10) !important;
}

.mt-12-premium {
    margin-top: var(--space-12) !important;
}

.mt-16-premium {
    margin-top: var(--space-16) !important;
}


/* ============================================================
   17. MARGIN BOTTOM
   ============================================================ */

.mb-0-premium {
    margin-bottom: 0 !important;
}

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

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

.mb-4-premium {
    margin-bottom: var(--space-4) !important;
}

.mb-5-premium {
    margin-bottom: var(--space-5) !important;
}

.mb-6-premium {
    margin-bottom: var(--space-6) !important;
}

.mb-8-premium {
    margin-bottom: var(--space-8) !important;
}

.mb-10-premium {
    margin-bottom: var(--space-10) !important;
}

.mb-12-premium {
    margin-bottom: var(--space-12) !important;
}

.mb-16-premium {
    margin-bottom: var(--space-16) !important;
}


/* ============================================================
   18. PADDING
   ============================================================ */

.p-0-premium {
    padding: 0 !important;
}

.p-4-premium {
    padding: var(--space-4) !important;
}

.p-5-premium {
    padding: var(--space-5) !important;
}

.p-6-premium {
    padding: var(--space-6) !important;
}

.p-8-premium {
    padding: var(--space-8) !important;
}

.p-10-premium {
    padding: var(--space-10) !important;
}

.p-12-premium {
    padding: var(--space-12) !important;
}


/* ============================================================
   19. SECTION SPACING
   ============================================================ */

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

.section-padding-sm {
    padding-block: var(--section-space-sm);
}

.section-padding-lg {
    padding-block: var(--section-space-lg);
}

.section-padding-xl {
    padding-block: var(--section-space-xl);
}

.section-padding-top {
    padding-top: var(--section-space);
}

.section-padding-bottom {
    padding-bottom: var(--section-space);
}


/* ============================================================
   20. BACKGROUND COLORS
   ============================================================ */

.bg-white-premium {
    background-color: var(--bg-white) !important;
}

.bg-body-premium {
    background-color: var(--bg-body) !important;
}

.bg-soft-premium {
    background-color: var(--bg-soft) !important;
}

.bg-muted-premium {
    background-color: var(--bg-muted) !important;
}

.bg-primary-premium {
    background-color: var(--bg-primary) !important;
}

.bg-primary-dark {
    background-color: var(--bg-primary-dark) !important;
}

.bg-primary-deep {
    background-color: var(--bg-primary-deep) !important;
}

.bg-gold-soft {
    background-color: var(--bg-gold-soft) !important;
}


/* ============================================================
   21. GRADIENT BACKGROUNDS
   ============================================================ */

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

.bg-gradient-dark {
    background: var(--gradient-primary-dark) !important;
}

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

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


/* ============================================================
   22. BORDER
   ============================================================ */

.border-premium {
    border: 1px solid var(--border-light) !important;
}

.border-soft {
    border: 1px solid var(--border-soft) !important;
}

.border-gold {
    border: 1px solid var(--border-gold) !important;
}

.border-white-premium {
    border: 1px solid var(--border-white) !important;
}

.border-0-premium {
    border: 0 !important;
}


/* ============================================================
   23. BORDER RADIUS
   ============================================================ */

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

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

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

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

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

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

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

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


/* ============================================================
   24. SHADOWS
   ============================================================ */

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

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

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

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

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

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

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

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


/* ============================================================
   25. OVERFLOW
   ============================================================ */

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

.overflow-visible-premium {
    overflow: visible !important;
}

.overflow-auto-premium {
    overflow: auto !important;
}

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


/* ============================================================
   26. OBJECT FIT
   ============================================================ */

.object-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.object-contain {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

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

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


/* ============================================================
   27. ASPECT RATIOS
   ============================================================ */

.ratio-product-premium {
    aspect-ratio: var(--ratio-product);
}

.ratio-landscape-premium {
    aspect-ratio: var(--ratio-landscape);
}

.ratio-wide-premium {
    aspect-ratio: var(--ratio-wide);
}

.ratio-square-premium {
    aspect-ratio: var(--ratio-square);
}


/* ============================================================
   28. IMAGE WRAPPER
   ============================================================ */

.image-cover {
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 100%;
}

.image-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   29. ABSOLUTE COVER
   ============================================================ */

.absolute-cover {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* ============================================================
   30. OVERLAY
   ============================================================ */

.overlay-dark {
    position: absolute;

    inset: 0;

    background:
        rgba(4, 19, 14, var(--opacity-overlay));
}

.overlay-gradient {
    position: absolute;

    inset: 0;

    background: var(--gradient-dark-overlay);
}


/* ============================================================
   31. GLASS UTILITIES
   ============================================================ */

.glass-light {
    background: var(--glass-light);

    border: 1px solid var(--glass-border);

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

    backdrop-filter:
        blur(var(--glass-blur));
}

.glass-dark {
    background: var(--glass-dark);

    border: 1px solid var(--glass-border);

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

    backdrop-filter:
        blur(var(--glass-blur));
}


/* ============================================================
   32. POINTER / USER SELECT
   ============================================================ */

.cursor-pointer {
    cursor: pointer !important;
}

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

.select-none {
    user-select: none;

    -webkit-user-select: none;
}


/* ============================================================
   33. OPACITY
   ============================================================ */

.opacity-0-premium {
    opacity: 0 !important;
}

.opacity-50-premium {
    opacity: 0.5 !important;
}

.opacity-70-premium {
    opacity: 0.7 !important;
}

.opacity-100-premium {
    opacity: 1 !important;
}


/* ============================================================
   34. TRANSITIONS
   ============================================================ */

.transition-fast {
    transition: all var(--transition-fast);
}

.transition-premium {
    transition: all var(--transition-premium);
}


/* ============================================================
   35. HOVER LIFT
   ============================================================ */

.hover-lift {
    transition:
        transform var(--transition-premium),
        box-shadow var(--transition-premium);
}

.hover-lift:hover {
    transform: var(--hover-lift);
}

.hover-lift-lg {
    transition:
        transform var(--transition-premium),
        box-shadow var(--transition-premium);
}

.hover-lift-lg:hover {
    transform: var(--hover-lift-lg);
}


/* ============================================================
   36. Z INDEX
   ============================================================ */

.z-content {
    z-index: var(--z-content) !important;
}

.z-dropdown {
    z-index: var(--z-dropdown) !important;
}

.z-sticky {
    z-index: var(--z-sticky) !important;
}

.z-header {
    z-index: var(--z-header) !important;
}

.z-overlay {
    z-index: var(--z-overlay) !important;
}

.z-floating {
    z-index: var(--z-floating) !important;
}


/* ============================================================
   37. ACCESSIBILITY - SCREEN READER ONLY
   ============================================================ */

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   38. ACCESSIBILITY - SKIP LINK
   ============================================================ */

.skip-to-content {
    position: fixed;

    top: var(--space-4);
    left: var(--space-4);

    z-index: var(--z-toast);

    padding:
        var(--space-3)
        var(--space-5);

    border-radius: var(--radius-md);

    color: var(--text-on-primary);

    background: var(--color-primary);

    box-shadow: var(--shadow-lg);

    font-family: var(--font-ui);

    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);

    transform: translateY(-200%);

    transition:
        transform var(--transition);
}

.skip-to-content:focus {
    color: var(--text-on-primary);

    transform: translateY(0);
}


/* ============================================================
   39. VISUALLY HIDDEN
   ============================================================ */

.visually-hidden-premium {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   40. DESKTOP / MOBILE VISIBILITY HELPERS
   ============================================================ */

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}


/* ============================================================
   41. DECORATIVE ELEMENT
   ============================================================ */

.decorative-element {
    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;
}


/* ============================================================
   42. SECTION POSITIONING
   ============================================================ */

.section-relative {
    position: relative;

    isolation: isolate;
}


/* ============================================================
   43. ISOLATION
   ============================================================ */

.isolate {
    isolation: isolate;
}


/* ============================================================
   44. MOBILE GRID FALLBACK
   ============================================================ */

@media (max-width: 991.98px) {

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

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

}


/* ============================================================
   45. MOBILE UTILITIES
   ============================================================ */

@media (max-width: 767.98px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 1.5rem;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .section-padding {
        padding-block: var(--section-space-sm);
    }

    .section-padding-lg,
    .section-padding-xl {
        padding-block: var(--section-space);
    }

}


/* ============================================================
   46. VERY SMALL DEVICE SAFETY
   ============================================================ */

@media (max-width: 374.98px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 1.25rem;
    }

}
```