> ## Documentation Index
> Fetch the complete documentation index at: https://docs.glood.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Default CSS

> Default bundle CSS template code reference

# Default Bundle CSS

The CSS template for bundle sections uses Liquid variables to enable dynamic theming. Colors, fonts, sizes, and spacing are all pulled from the template settings, allowing merchants to customize the appearance without editing CSS directly.

The template applies different styles based on the active layout (`bundle` vs `bundle_component`) using Liquid conditionals.

```css theme={null}
{% if config.layout == 'bundle_component' %}
  {% assign setting = template.settings.bundleComponent %}
{% else %}
  {% assign setting = template.settings.bundle %}
{% endif %}

#gloodai_bundle_component_container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-radius: 0.3rem;
  font-family: 'Futura';
{% if config.layout == "bundle_component" %}
  border-top: 1px solid #DDDDDD;
  padding-top: 1.5rem;
{% endif %}
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #DDDDDD;
}

.rk-bundle-card {
  transition: all 0.3s ease-in-out;
  {% if config.layout == "bundle_component" %}
    background-color: {{ setting.backgroundColor |  default: '#F9F9FA' }};
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  {% endif %}
}

.rk-p-c-product-image {
  width: {{ setting.productCard.image.width |  default: 110  }}px;
  height: {{ setting.productCard.image.height |  default: 133  }}px;
  object-fit: {{ setting.productCard.image.objectFit |  default: 'cover' }};
  background-repeat: no-repeat;
  background-size: {{ setting.productCard.image.objectFit |  default: 'cover' }};
  background-position: center;
  aspect-ratio: {{ setting.productCard.image.aspectRatio | replace: ":","/" }}
}

.rk-bundle-comp-title {
  margin: 0;
  display: block;
  font-size: {{ setting.productCard.title.size |  default: '16px'  }};
  font-weight: {{ setting.productCard.title.weight |  default: 500 }};
  font-family: {{ setting.productCard.title.font |  default: 'Futura' }};
  letter-spacing: 0;
  text-align: left;
  color: {{ setting.productCard.title.color |  default: '#000000' }};
}

.rk-add-to-cart {
  background-color: {{ setting.atcBtn.backgroundColor |  default: '#000000' }};
  color: {{ setting.atcBtn.text.color |  default: '#FFFFFF' }};
  font-size: {{ setting.atcBtn.text.size |  default: '12px' }};
  font-weight: {{ setting.atcBtn.text.weight |  default: 500 }};
  font-family: {{ setting.atcBtn.text.font |  default: "Futura" }};
  width: 100%;
  border-radius: 4px;
  text-transform: uppercase;
  padding: 1.5rem 0 1.5rem 0;
}

.rk-product-price {
  font-weight: {{ setting.productCard.price.weight |  default: 500 }};
  font-size: {{ setting.productCard.price.size |  default: '14px' }};
  color: {{ setting.productCard.price.color |  default: '#666666' }};
  display: block;
  font-family: {{ setting.productCard.price.font |  default: 'Futura' }};
}

.rk-total-product {
    {% if config.layout=='bundle'%}
  font-size: 20px;
    {% else %}
  font-size: 16px;
    {% endif %}

  font-weight: 500;
  color: #000001;
  display: block;
}
```

## Key Styling Patterns

### Dynamic Theming with Liquid Variables

All visual properties (colors, fonts, sizes) are pulled from `setting.productCard` and `setting.atcBtn`, allowing full customization through the [Settings](/for-developers/bundles/settings) configuration.

### Layout-Conditional Styles

The CSS adapts based on `config.layout`:

* **`bundle`** layout: Minimal container styling, larger title font (20px)
* **`bundle_component`** layout: Background color, padding, border, smaller title font (16px)

### Image Handling

Product images use configurable dimensions with `object-fit` and `aspect-ratio` from settings, ensuring consistent display across different product photos.