/* Full-width shell: claim the row inside Breakdance's column-flex section
   container (block children shrink to content when align-items != stretch). */
%%SELECTOR%% {
  width: 100%;
}
%%SELECTOR%% .fcbd-commerce-view {
  {% if design.layout.max_width.style %}max-width: {{ design.layout.max_width.style }}; margin-inline: auto;{% endif %}
  {% if design.layout.background %}background: {{ design.layout.background }};{% endif %}
  {% if design.layout.padding.style %}padding: {{ design.layout.padding.style }};{% endif %}
  {% if design.layout.radius.style %}border-radius: {{ design.layout.radius.style }};{% endif %}
}
/* Container (direct CSS, no shared token: see containerSection() docblock; FluentCartBreakdance\Design\ControlPresets::containerSection).
   Only border_color/border_width/shadow: background and border_radius stay on the
   existing 'layout' section above (design.layout.background / design.layout.radius), see
   element.php's designControls() docblock for why. */
{% if design.container.border_color %}
%%SELECTOR%% .fcbd-commerce-view {
  border-color: {{ design.container.border_color }};
}
{% endif %}
{% if design.container.border_width %}
%%SELECTOR%% .fcbd-commerce-view {
  border-width: {{ design.container.border_width.style }};
}
{% endif %}
{% if design.container.shadow.style %}
%%SELECTOR%% .fcbd-commerce-view {
  box-shadow: {{ design.container.shadow.style }};
}
{% endif %}
/* Spacing (tokens-first, FluentCartBreakdance\Design\ControlPresets::spacingSection).
   Only margin_top/margin_bottom: padding stays on the existing 'layout' section above
   (design.layout.padding), see element.php's designControls() docblock for why. */
%%SELECTOR%% .fcbd-commerce-view {
{% if design.spacing.margin_top %}
  margin-top: {{ design.spacing.margin_top.style }};
{% endif %}
{% if design.spacing.margin_bottom %}
  margin-bottom: {{ design.spacing.margin_bottom.style }};
{% endif %}
}
/* Typography (tokens-first, FluentCartBreakdance\Design\ControlPresets::typographySection) */
%%SELECTOR%% .fcbd-commerce-view {
  color: var(--bde-fc-text-color, var(--bde-body-text-color, #374151));
}
%%SELECTOR%% .fcbd-commerce-view .fcbd-muted {
  color: var(--bde-fc-text-muted-color, #6b7280);
}
{% if design.typography.font_size %}
%%SELECTOR%% .fcbd-commerce-view {
  font-size: {{ design.typography.font_size.style }};
}
{% endif %}
{% if design.typography.line_height %}
%%SELECTOR%% .fcbd-commerce-view {
  line-height: {{ design.typography.line_height.style }};
}
{% endif %}
{% if design.typography.letter_spacing %}
%%SELECTOR%% .fcbd-commerce-view {
  letter-spacing: {{ design.typography.letter_spacing.style }};
}
{% endif %}
{% if design.typography.text_align %}
%%SELECTOR%% .fcbd-commerce-view {
  text-align: {{ design.typography.text_align }};
}
{% endif %}
{% if design.typography.text_color %}
%%SELECTOR%% .fcbd-commerce-view {
  --bde-fc-text-color: {{ design.typography.text_color }};
}
{% endif %}
{% if design.typography.muted_text_color %}
%%SELECTOR%% .fcbd-commerce-view {
  --bde-fc-text-muted-color: {{ design.typography.muted_text_color }};
}
{% endif %}