.vfw-container {
    width: 100%;
    max-width: var(--vfw-container-max);
    margin: 0 auto;
    padding: 0 var(--vfw-container-padding);
}

.vfw-flex {
    display: flex;
}

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

.vfw-flex-center {
    align-items: center;
    justify-content: center;
}

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

/* ---- Flex gravity (proportional sizing) + shrink control ---- */
.vfw-grow {
    flex: 1 1 0;
    min-width: 0;
}

.vfw-grow-1 {
    flex: 1 1 0;
    min-width: 0;
}

.vfw-grow-2 {
    flex: 2 1 0;
    min-width: 0;
}

.vfw-grow-3 {
    flex: 3 1 0;
    min-width: 0;
}

.vfw-grow-4 {
    flex: 4 1 0;
    min-width: 0;
}

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

.vfw-grid {
    display: grid;
    gap: var(--vfw-space-md);
}

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

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

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

.vfw-text-muted {
    color: var(--vfw-color-text-muted);
}

.vfw-hidden {
    display: none;
}

.vfw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Shadow Utilities ---- */
.vfw-shadow-bottom-sm {
    box-shadow: var(--vfw-shadow-bottom-sm) !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* ---- Active Border & Shadow Utility ---- */
.vfw-border-active {
    border: var(--vfw-border-active) !important;
    box-shadow: var(--vfw-border-active-shadow) !important;
}

/* ---- Grid System (12 Columns) ---- */
.vfw-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--vfw-space-md) !important;
}

.vfw-col-span-1 {
    grid-column: span 1 / span 1 !important;
}

.vfw-col-span-2 {
    grid-column: span 2 / span 2 !important;
}

.vfw-col-span-3 {
    grid-column: span 3 / span 3 !important;
}

.vfw-col-span-4 {
    grid-column: span 4 / span 4 !important;
}

.vfw-col-span-5 {
    grid-column: span 5 / span 5 !important;
}

.vfw-col-span-6 {
    grid-column: span 6 / span 6 !important;
}

.vfw-col-span-7 {
    grid-column: span 7 / span 7 !important;
}

.vfw-col-span-8 {
    grid-column: span 8 / span 8 !important;
}

.vfw-col-span-9 {
    grid-column: span 9 / span 9 !important;
}

.vfw-col-span-10 {
    grid-column: span 10 / span 10 !important;
}

.vfw-col-span-11 {
    grid-column: span 11 / span 11 !important;
}

.vfw-col-span-12 {
    grid-column: span 12 / span 12 !important;
}

@media (max-width: 768px) {
    .vfw-grid-2,
    .vfw-grid-3 {
        grid-template-columns: 1fr;
    }

    .vfw-grid-12 {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .vfw-col-span-1, .vfw-col-span-2, .vfw-col-span-3,
    .vfw-col-span-4, .vfw-col-span-5, .vfw-col-span-6,
    .vfw-col-span-7, .vfw-col-span-8, .vfw-col-span-9,
    .vfw-col-span-10, .vfw-col-span-11, .vfw-col-span-12 {
        grid-column: span 6 / span 6 !important;
    }
}

@media (max-width: 480px) {
    .vfw-grid-12 {
        grid-template-columns: 1fr !important;
    }

    .vfw-col-span-1, .vfw-col-span-2, .vfw-col-span-3,
    .vfw-col-span-4, .vfw-col-span-5, .vfw-col-span-6,
    .vfw-col-span-7, .vfw-col-span-8, .vfw-col-span-9,
    .vfw-col-span-10, .vfw-col-span-11, .vfw-col-span-12 {
        grid-column: span 1 / span 1 !important;
    }
}

/* ---- Typography Utility Classes & Tags ---- */
.vfw-h1 {
    font-size: var(--vfw-font-size-h1);
    font-weight: var(--vfw-font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--vfw-space-sm);
}

.vfw-h2 {
    font-size: var(--vfw-font-size-h2);
    font-weight: var(--vfw-font-weight-bold);
    line-height: 1.25;
    margin-bottom: var(--vfw-space-sm);
}

.vfw-h3 {
    font-size: var(--vfw-font-size-h3);
    font-weight: var(--vfw-font-weight-bold);
    line-height: 1.3;
    margin-bottom: var(--vfw-space-sm);
}

.vfw-h4 {
    font-size: var(--vfw-font-size-h4);
    font-weight: var(--vfw-font-weight-bold);
    line-height: 1.35;
    margin-bottom: var(--vfw-space-sm);
}

.vfw-h5 {
    font-size: var(--vfw-font-size-h5);
    font-weight: var(--vfw-font-weight-bold);
    line-height: 1.4;
    margin-bottom: var(--vfw-space-sm);
}

.vfw-h6 {
    font-size: var(--vfw-font-size-h6);
    font-weight: var(--vfw-font-weight-bold);
    line-height: 1.4;
    margin-bottom: var(--vfw-space-sm);
}

.vfw-body {
    font-size: var(--vfw-font-size-body) !important;
    font-weight: var(--vfw-font-weight-normal) !important;
    line-height: 1.5 !important;
}

.vfw-body-sm {
    font-size: var(--vfw-font-size-body-sm) !important;
    font-weight: var(--vfw-font-weight-normal) !important;
    line-height: 1.5 !important;
}

.vfw-body-tiny {
    font-size: var(--vfw-font-size-body-tiny) !important;
    font-weight: var(--vfw-font-weight-normal) !important;
    line-height: 1.5 !important;
}

/* Uppercase all-caps option style */
.vfw-caps {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: var(--vfw-font-weight-bold) !important;
}

/* Shared inline field-error message (VFW.utils.renderFieldError authority) */
.vfw-field-error {
    display: flex;
    align-items: center;
    gap: var(--vfw-space-xs);
    margin-top: var(--vfw-space-xs);
    color: var(--vfw-color-error);
    font-size: var(--vfw-font-size-body-sm);
}

.vfw-field-invalid {
    border-color: var(--vfw-color-error);
}
/* @audited web style=f481b2c91415 memsec=f481b2c91415 test=f481b2c91415 */