/* === Modern browsers: style the native marker === */
.primary-bullets ul {
  list-style: disc inside;
  list-style-color: var(--primary);
  padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial));
}

.primary-bullets ul li {
  margin-block-end: var(--list-item-spacing, var(--flow-spacing, initial));
  line-height: 1.4;
}

/* Increase the marker’s font-size and tighten its space */
.primary-bullets ul li::marker {
   /*font-size: 1.2em;           make the dot larger */
  font-size: calc(var(--default-font-size, var(--text-l)) * 1.15);
  color: var(--primary);
  margin-inline-end: 0.5em;    /* space between dot and text */
}

/* === Fallback for browsers without ::marker support === */
@supports not (::marker) {
  .primary-bullets ul {
    list-style: none;
    margin-inline-start: 0;
    padding-inline-start: calc(var(--list-indent-spacing, var(--flow-spacing, initial)) * 0.5);
  }

  .primary-bullets ul li {
    position: relative;
    padding-inline-start: 1.1em;           /* leave room for the bullet */
    margin-block-end: var(--list-item-spacing, var(--flow-spacing, initial));
  }

  .primary-bullets ul li::before {
    content: "•";                          /* fallback bullet */
    color: var(--primary);
    /* font-size: 1.2em;                      match marker size */
    font-size: calc(var(--default-font-size, var(--text-l)) * 1.15);
    position: absolute;
    left: 0;
    top: 0;                                /* align with text top */
    line-height: 1;                        /* avoid extra height */
  }
}