/* -----------------------------------------------------------------------------
 * Component rules Bricks cannot express
 * -----------------------------------------------------------------------------
 * Everything structural lives in Bricks global classes. This file only holds the
 * three things the builder has no control for: descendant selectors into inline
 * SVG, CSS counters, and modifier classes applied dynamically from field data.
 * Selector names match the Bricks classes exactly — nothing is styled without one.
 * -------------------------------------------------------------------------- */

/* --- Icons -----------------------------------------------------------------
 * bm_features.icon / bm_steps.icon / bm_assurances.icon hold a Lucide name;
 * {bm_icon:icon} inlines the SVG, and the slot sizes it.
 * -------------------------------------------------------------------------- */

.bm-icon svg {
	display: block;
	width: 2rem;
	height: 2rem;
	stroke-width: 1.5;
	color: var(--mw-text-accent);
}

.bm-assurance .bm-icon svg {
	width: 1.8rem;
	height: 1.8rem;
}

.bm-feature .bm-icon svg {
	width: 2.4rem;
	height: 2.4rem;
}

/* --- Numbered steps --------------------------------------------------------
 * The design numbers the burn steps 01–04. A CSS counter keeps the numbering
 * correct no matter how many rows the editor adds or removes.
 * -------------------------------------------------------------------------- */

.bm-grid:has(.bm-feature--numbered) {
	counter-reset: bm-step;
}

.bm-feature--numbered {
	counter-increment: bm-step;
}

.bm-feature--numbered::before {
	content: counter(bm-step, decimal-leading-zero);
	font-family: var(--mw-font-display);
	font-size: var(--mw-h5);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--mw-tracking-display);
	color: var(--mw-text-accent);
}

/* --- Notice tones ----------------------------------------------------------
 * bm_notices.tone drives the modifier class, set dynamically on the loop block
 * as bm-notice--{bm_row:tone}.
 * -------------------------------------------------------------------------- */

.bm-notice.bm-notice--info {
	background: var(--mw-info-soft);
}

.bm-notice.bm-notice--positive {
	background: var(--mw-positive-soft);
}

.bm-notice.bm-notice--caution {
	background: var(--mw-caution-soft);
}

.bm-notice.bm-notice--critical {
	background: var(--mw-critical-soft);
}

.bm-notice--info .bm-notice__title {
	color: var(--mw-info);
}

.bm-notice--positive .bm-notice__title {
	color: var(--mw-positive);
}

.bm-notice--caution .bm-notice__title {
	color: var(--mw-caution);
}

.bm-notice--critical .bm-notice__title {
	color: var(--mw-critical);
}

/* --- Media from a repeater row --------------------------------------------- */

.bm-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--mw-radius-media);
}

/* --- Sticky add-to-basket bar ----------------------------------------------
 * backdrop-filter has no Bricks control.
 * -------------------------------------------------------------------------- */

.bm-sticky-bar {
	backdrop-filter: saturate(1.1) blur(14px);
	-webkit-backdrop-filter: saturate(1.1) blur(14px);
}

/* --- Accordion (native Bricks nestable) -------------------------------------
 * Bricks owns .accordion-title-wrapper / .accordion-content-wrapper and the
 * open/close script. These rules only add the chevron affordance, which has no
 * builder control because the icon is an inlined Lucide SVG.
 * -------------------------------------------------------------------------- */

.bm-accordion__icon svg {
	width: 1.8rem;
	height: 1.8rem;
	color: var(--mw-text-muted);
	transition: transform var(--mw-dur-fast) var(--mw-ease-standard);
}

.accordion-title-wrapper[aria-expanded='true'] .bm-accordion__icon svg {
	transform: rotate(180deg);
	color: var(--mw-text-accent);
}