.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing {background:var(--kombos-white);color:var(--kombos-gray-900)}.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing>.kombos-container {padding:2rem 1rem}.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing-options {display:grid;gap:1rem;margin:1rem 0}.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing-options label {display:flex;align-items:center;gap:.75rem}.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing-options input {width:1.125rem;height:1.125rem;accent-color:var(--kombos-gray-900)}.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing [role=status] {margin-top:1rem}@media(min-width:768px){.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing-options {grid-template-columns:repeat(2,minmax(0,1fr))}.cc_jrmns0nh_g2VG3RhxR0 .baykal-marketing>.kombos-container {padding:2rem}}

/*
 * Responsive: use the theme's breakpoints in CSS. CSS media queries can't use
 * var(), so write the min-width/max-width yourself and use `bp(<breakpointId>)`
 * for the value — it resolves to the breakpoint's `<width>px` at render time
 * against the store's live width. Get <breakpointId> from
 * `npx ikas-component list-theme-globals` (breakpoints[].id) — use the id, not the name.
 *
 * @media (max-width: bp(_AbC123)) { .baykal-marketing-preferences { padding: 32px 16px; } }
 * @media (min-width: bp(_AbC123)) { .baykal-marketing-preferences-inner { display: flex; gap: 24px; } }
 */