**The LokiCheckout uses CSS variables (CSS custom properties) in a couple of places. This page explains which ones are there and how the block `loki-checkout.utils.css-variables` of the core module `LokiCheckout_Core` fits in.** ## CSS variables per field in the address grid The most important CSS variables are set per field in an address form: `--loki-sort-order`, `--loki-col-span` and `--loki-md-col-span`. These are added as inline styles by `LokiCheckout\Core\Util\Block\CssStyleParser\GridStyleParser`, based on the grid layout (`etc/loki_checkout.xml`) and the block arguments `sort_order`, `col_span` and `md_col_span`. The CSS class `loki-col-span` (in `LokiCheckout_Core::tailwind/global.css`) then turns them into a `grid-column` rule. These variables are not set via the `loki-checkout.utils.css-variables` block. See [Changing the grid of field blocks](/checkout/dev/basic-customizations/changing-the-grid) for the details. ## The `loki-checkout.utils.css-variables` block The layout handle `loki_checkout` adds a block to the container `before.body.end`: ```xml ``` The template `utils/css-variables.phtml` creates an instance of the ViewModel `LokiCheckout\Core\ViewModel\CssVariables` and outputs its variables in a ` ``` Because this is regular XML layout, you can also set different values per skin (for instance, in `loki_checkout_skin_onestep.xml`) or per country (see [Country-specific layout handles](/checkout/dev/basic-customizations/country-specific-layout-handles)). Finally, use the variables in your CSS, for instance in the Tailwind source of your theme: ```css .loki-checkout a { color: var(--checkout-primary-color); } ``` Note that the template outputs an inline `