Instructions

Set a fixed width and shape for each summary tile (square, portrait, landscape) and adjust spacing. --biscuits-accordion-grid-gap controls the spacing between tiles. Larger values = more space.

.biscuits-bundle-form {
  --biscuits-accordion-item-width: 100px;
  --biscuits-accordion-item-aspect-ratio: 1;
  --biscuits-accordion-grid-gap: 8px;       
}

Tips

• Square: 1

• Portrait: 0.75 (taller than wide)

• Landscape: 1.6 (wider than tall)

Instructions

Hide the icon and show the numeric counter.
​

.biscuits-bundle-form {
  --biscuits-accordion-summary-icon-display: none; /* hide + icon */
  --biscuits-accordion-summary-count-display: block; /* show number */
}

Note: If both icon-display and count-display are set to block, they’ll overlap. Choose one based on your design preference.

Instructions

Enable the display of the steps total price in the summary/step header.

.biscuits-bundle-form {
  --biscuits-accordion-summary-price-display: block;
}

Instructions

Set RGBA channel values as r,g,b,a (not rgba()), and the app will render them correctly.

Placeholder summary item

.biscuits-bundle-form {
  --biscuits-accordion-progress-background-color: 0,0,0,0;
  --biscuits-accordion-progress-border-color: 225,225,225,1.0;
}

Selected/filled summary item

.biscuits-bundle-form {
  --biscuits-accordion-success-background-color: 0,0,0,0; 
  --biscuits-accordion-success-border-color: 225,225,225,1.0;
}

Count badge + page chrome

.biscuits-bundle-form {
  --biscuits-accordion-page-background-color: 255,255,255,1.0; 
  --biscuits-accordion-text-color: 0,0,0,1.0; 
}

Instructions

Match your theme’s radius and border thickness, or set explicit values.

.biscuits-bundle-form {
  --biscuits-accordion-item-border-radius: 6px;
  --biscuits-accordion-primary-border-thickness: 2px;
}