/* === SPACING (via WP spacing vars) === */
.km-m-small { margin: var(--wp--preset--spacing--small) !important; }
.km-m-medium { margin: var(--wp--preset--spacing--medium) !important; }
.km-m-large { margin: var(--wp--preset--spacing--large) !important; }

.km-p-small { padding: var(--wp--preset--spacing--small) !important; }
.km-p-medium { padding: var(--wp--preset--spacing--medium) !important; }
.km-p-large { padding: var(--wp--preset--spacing--large) !important; }

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

/* === TEXT ALIGNMENT === */
.km-text-left   { text-align: left !important; }
.km-text-center { text-align: center !important; }
.km-text-right  { text-align: right !important; }

/* === DISPLAY === */
.km-none   { display: none !important; }
.km-block   { display: block !important; }
.km-inline  { display: inline !important; }
.km-inline-block { display: inline-block !important; }
.km-flex    { display: flex !important; }
.km-grid    { display: grid !important; }

/* === GRID COLS === */
.km-grid-2-cols {grid-template-columns: 1fr 1fr!important; }
.km-grid-3-cols {grid-template-columns: 1fr 1fr 1fr!important; }
.km-grid-4-cols {grid-template-columns: 1fr 1fr 1fr 1fr!important; }

/* === FLEX UTILITIES === */
.km-justify-start  { justify-content: flex-start !important; }
.km-justify-center { justify-content: center !important; }
.km-justify-end    { justify-content: flex-end !important; }
.km-justify-between { justify-content: space-between !important; }
.km-items-start  { align-items: flex-start !important; }
.km-items-center { align-items: center !important; }
.km-items-end    { align-items: flex-end !important; }

/* === FLEX DIRECTIONS === */
.km-flex-dir-col {flex-direction: column!important;}
.km-flex-dir-col-r {flex-direction: column-reverse!important;}
.km-flex-dir-row {flex-direction: row!important;}
.km-flex-dir-row-r {flex-direction: row-reverse!important;}


/* === FONT SIZE (via WP font size vars) === */
.km-text-small { font-size: var(--wp--preset--font-size--small) !important; }
.km-text-medium { font-size: var(--wp--preset--font-size--medium) !important; }
.km-text-large { font-size: var(--wp--preset--font-size--large) !important; }
.km-text-xlarge { font-size: var(--wp--preset--font-size--x-large) !important; }

/* === FONT WEIGHT === */
.km-font-light { font-weight: 300 !important; }
.km-font-normal { font-weight: 400 !important; }
.km-font-medium { font-weight: 500 !important; }
.km-font-bold { font-weight: 700 !important; }

/* === GAP === */
.gap-10 {gap:10px!important;}
.gap-25 {gap:25px!important;}
.gap-50 {gap:50px!important;}


/* === TEXT SHADOW === */
.km-text-shadow-sm { text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important; }
.km-text-shadow-md { text-shadow: 2px 2px 4px rgba(0,0,0,0.15) !important; }
.km-text-shadow-lg { text-shadow: 3px 3px 6px rgba(0,0,0,0.2) !important; }
.km-text-shadow-white { text-shadow: 1px 1px 3px rgba(255,255,255,0.8) !important; }

/* === COLORS (TEXT) === */
.km-text-primary { color: var(--wp--preset--color--primary) !important; }
.km-text-secondary { color: var(--wp--preset--color--secondary) !important; }
.km-text-foreground { color: var(--wp--preset--color--foreground) !important; }
.km-text-background { color: var(--wp--preset--color--background) !important; }

/* === COLORS (BACKGROUND) === */
.km-bg-primary { background-color: var(--wp--preset--color--primary) !important; }
.km-bg-secondary { background-color: var(--wp--preset--color--secondary) !important; }
.km-bg-foreground { background-color: var(--wp--preset--color--foreground) !important; }
.km-bg-background { background-color: var(--wp--preset--color--background) !important; }

/* === WIDTHS === */
.km-w-auto { width: auto !important; }
.km-w-full { width: 100% !important; }
.km-w-1-2 { width: 50% !important; }
.km-w-1-3 { width: 33.333% !important; }
.km-w-2-3 { width: 66.666% !important; }
.km-w-1-4 { width: 25% !important; }
.km-w-3-4 { width: 75% !important; }

/* === HEIGHTS === */
.km-h-auto { height: auto !important; }
.km-h-full { height: 100% !important; }
.km-h-50-vh { min-height: 50vh !important; }
.km-h-75-vh { min-height: 75vh !important; }
.km-h-vh { min-height: 100vh !important; }


/* === TEXT TRANSFORM === */
.km-uppercase { text-transform: uppercase !important; }
.km-lowercase { text-transform: lowercase !important; }
.km-capitalize { text-transform: capitalize !important; }

/* === TEXT DECORATION === */
.km-no-line, .km-no-line > a { text-decoration: none !important; }
.km-underline, .km-no-underline > a { text-transform: underline !important; }
.km-overline, .km-no-overline > a { text-transform: overline !important; }

/* === OVERFLOW === */
.overflow-hidden {overflow:hidden;}

/* === BORDER RADIUS === */
.km-rounded-sm { border-radius: 4px !important; }
.km-rounded-md { border-radius: 8px !important; }
.km-rounded-lg { border-radius: 16px !important; }
.km-rounded-full { border-radius: 9999px !important; }

/* === POSITION === */
.km-relative { position: relative !important; }
.km-absolute { position: absolute !important; }
.km-fixed    { position: fixed !important; }
.km-sticky { position: sticky!important;}
.km-top-50 { top:50px!important;}
.km-top-100 { top:100px!important;}


/* Mobiel */
@media (max-width: 992px) {
    .km-grid-3-cols, .km-grid-4-cols {grid-template-columns: 1fr 1fr!important; }
}


/* Mobiel */
@media (max-width: 768px) {
    .km-grid-2-cols, .km-grid-3-cols, .km-grid-4-cols {grid-template-columns: 1fr!important; }
    .km-w-1-3, .km-w-2-3 {width:100%!important;}
    .km-justify-start, .km-justify-end { justify-content: center !important; }
}