Custom CSS — useful classes and variables

Custom CSS applies to this block only. The root element has a stable id of the form kernl-ingredients-{block-id}; most selectors below hang off the outer wrapper .kernl-ingredients.

Modifier classes on the section root

These reflect your theme editor choices and are useful hooks for overrides:

Class pattern	Meaning
`.kernl-cards--flat` / `.kernl-cards--outlined` / `.kernl-cards--shadow`	Card style
`.kernl-image-fit--contain` / `.kernl-image-fit--cover`	Image fit mode
`.kernl-cover-extend--enabled`	Present when “Extend to card width” is on (grid/carousel with cover)

Layout containers

Class	Use
`.kernl-heading-container`	Heading and intro
`.kernl-ingredients-grid`	Grid of cards; `data-columns` is `1`–`5` (desktop column setting)
`.kernl-ingredients-rows`	List layout column
`.kernl-ingredients-accordion`	Accordion stack

Per-ingredient card

Class	Use
`.kernl-ingredient`	One ingredient; layout variants: `.kernl-ingredient--grid`, `--carousel`, `--list`
`.kernl-ingredient--alignment-left` / `--center` / `--right`	Text alignment inside the card
`.kernl-ingredient__content`	Title, subtitle/badge, description
`.kernl-ingredient__title`	Ingredient title
`.kernl-ingredient__subtitle`	Subtitle when style is “Text”
`.kernl-ingredient__description`	Body copy
`.kernl-ingredient__badge`	Subtitle when style is “Badge”; modifiers: `.kernl-ingredient__badge--neutral`, `.kernl-ingredient__badge--accent_1`
`.kernl-ingredient__image`	Image wrapper; size: `--small`, `--medium`, `--large`; shape: `--square`, `--circle`, `--rounded`

Carousel-only

Class	Use
`.kernl-carousel`, `.kernl-embla`	Carousel root
`.kernl-embla__viewport`, `.kernl-embla__container`, `.kernl-embla__slide`	Embla track and slides
`.kernl-carousel__arrows`	Arrow row
`.kernl-carousel__arrow`, `.kernl-carousel__arrow--prev`, `.kernl-carousel__arrow--next`	Buttons
`.kernl-carousel__pagination`, `.kernl-carousel__dot`, `.kernl-carousel__dot--active`	Dots
`.kernl-carousel--arrows-inside` / `--arrows-outside` / `--arrows-below`	Arrow position
`.kernl-carousel--pagination-true` / `--pagination-false`	Pagination visibility
`.kernl-carousel--show-arrows-true` / `--show-arrows-false`	Arrow visibility

Accordion-only

Class	Use
`.kernl-ingredient-accordion`	One expandable panel; optional `.kernl-ingredient-accordion--alignment-*`
`.kernl-ingredient-accordion__summary`	Clickable header row
`.kernl-ingredient-accordion__summary-content`, `.kernl-ingredient-accordion__summary-text`	Image + title layout in the header
`.kernl-ingredient-accordion__body`	Expanded content (subtitle, description)

Empty state

Class	Use
`.kernl-ingredients-empty-message`	Message when no ingredients or no product selected

CSS custom properties (variables)

The block sets these on the root (names only—values come from your settings). Override them in Custom CSS for quick global tweaks without redefining every rule:

Variable	Typical use
`--kernl-padding-y`	Section vertical padding
`--kernl-card-radius`	Card corner radius
`--kernl-item-gap`	Gap between cards or rows
`--kernl-grid-columns`	Desktop column count (grid-related)
`--kernl-list-max-width`	Max width of list layout
`--kernl-card-bg`	Card background color
`--kernl-image-fit`	`contain` or `cover` for `object-fit` on images
`--kernl-title-font-size`	Ingredient title size
`--kernl-heading-alignment`	Heading block alignment
`--kernl-description-alignment`	Description text alignment

Carousel slides also use --kernl-slides-per-view on .kernl-carousel for how many cards fit in the viewport.