Customizing Navigation on Summary Blocks

https://thebougiebouquet.squarespace.com/

Password: bougie

Hoping someone can help.  I've created a sample site for me to design, practice, and learn more about adding code to the sites I design.  A few sections down, I've used a summary block using the blog collection with text only in order to have kind of a "here's how to work with me" informational carousel with placeholder copy.  And I customized the left and right arrows with my own images based on what I've learned on this forum.

Problem is, the old arrows are still showing above/behind my new, longer arrows and I can't figure out 1) why they're even there since I supposedly changed the icon out, and 2) how to remove them.  Thanks in advance for any help!

I attached an image, and here's the code I used:

//* Summary arrows *//
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    background-image: url("https://static1.squarespace.com/static/64d0653331f2a429157a7176/t/65451edf02b397329946337b/1699028703701/bb_arrows-left-redorg.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100px;
    height: 30px;
  	margin-left: 0px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    background-image: url("https://static1.squarespace.com/static/64d0653331f2a429157a7176/t/65451edf212a0c482a58880d/1699028703708/bb_arrows-right_redorg.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100px;
    height: 30px;
   	margin-right: 0px;
}
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: 100%;
    justify-content: space-between;
    float: none !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:after {
    position: relative;
}
span.summary-carousel-pager-next.next:after {
    float: left;
}

1 minute ago, Ziggy said:

Try this additional CSS targeting the colour of the old arrows:

.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    color: transparent !important;
}

You may need to get the placement of this in the correct in the order of the Custom CSS you have.

Thank you!  Is there no way to remove them entirely -- or is it built into Squarespace in such a way where the only option is to make them transparent?

15 minutes ago, AmyMcKinney said:

I can't figure out 1) why they're even there since I supposedly changed the icon out

This is because in the code, you haven't changed them out, you added your new arrows to the old arrows. It's probably best not to manually delete SS elements, as might have unintended consequences.

You could hide the old arrows, but not with the way the new arrows have been added. Ziggy's way is effective for what you need!

thank you @melody495 and @Ziggy!!

Ziggy did all the leg work, but you are welcome and glad it is working for you now 🙂

2 minutes ago, melody495 said:

Ziggy did all the leg work, but you are welcome and glad it is working for you now 🙂

Yes, and I somehow marked your post as the solution and I meant to mark Ziggy's!  I don't know how to fix that. 😆