How can I match my custom HTML liquid code arrow to the theme default?

Store Design
,
1

Hi everyone im working on this page and i have been asked to try to get the arrow in this custom html liquid code exactly the same was the default ones from the theme but i have been unable to do that and just did some generic arrow, but if anyone can help me achive that and have a arrow exactly the same was the ones in the header that would be awesome.

Miguel3403_0-1709225770534.png
Miguel3403_0-1709225770534.png2112×1015 480 KB

2

current html code

Search
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .custom-select { position: relative; margin-right: 0px; margin-bottom: -15px; } .image-link, .image-container { position: relative; } .image-link img, .image-container img { width: 100%; } .search-form select { width: 100%; background: rgba(255, 255, 255, 0.95); border: 1px solid #ccc; border-radius: 0px; padding: 10px; box-sizing: border-box; color: black; font-weight: bold; outline: none; transition: border-color 0.3s; } .arrow-down { position: absolute; top: 50%; right: 10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #000; transform: translateY(-50%); } .search-form select:hover, .search-form select:focus { border-color: transparent; } .search-form { position: absolute; bottom: 10px; right: 0; } @media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }