Hi @mike,
I added the code to function.php but it doesnt seem to work, also, this doesn’t provide me with an answer/solution for the design question.
>add a transparant overlay
>center the title
>configure the font size of the title

(see above questions). you have the login to my site:)

best regards, Peter

Oder sollte man diesen Ansatz wählen und auf Media Queries verzichten bzgl. der typogarfischen Gestaltung?
Or should you choose this approach and do without media queries with regard to typographical design?

/* Basis-Schriftgröße für das gesamte Dokument festlegen */
html {
font-size: 16px; /* Basisschriftgröße ist 16px */

/* CSS-Variablen für Schriftgrößen mit clamp() */
–font-h1: clamp(2.5rem, 5vw + 1rem, 6.25rem); /* Mindestens 40px, ideal mit Viewport skaliert, maximal 100px */
–font-h2: clamp(1.8rem, 3.5vw + 0.5rem, 2.5rem); /* Mindestens 28.8px, maximal 40px */
–font-h3: clamp(1.6rem, 3vw + 0.5rem, 2rem); /* Mindestens 25.6px, maximal 32px */
–font-h4: clamp(1.4rem, 2.5vw + 0.5rem, 1.75rem); /* Mindestens 22.4px, maximal 28px */
–font-h5: clamp(1.2rem, 2vw + 0.5rem, 1.5rem); /* Mindestens 19.2px, maximal 24px */
–font-h6: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); /* Mindestens 17.6px, maximal 20px */
–font-p: clamp(1rem, 1.5vw + 0.5rem, 1.2rem); /* Mindestens 16px, maximal 19.2px */
–font-menu: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); /* Mindestens 14.4px, maximal 17.6px */

/* Schriftglättung aktivieren */
-webkit-font-smoothing: antialiased; /* Glättet die Schrift */
-moz-osx-font-smoothing: grayscale; /* Optimiert für Mac-Geräte */
}

/* Verwenden der CSS-Variablen für die Überschriften und Textelemente */
h1 {
font-size: var(–font-h1);
line-height: 1.2; /* Kompakter für große Headlines */
text-transform: none !important;
}

h2 {
font-size: var(–font-h2);
line-height: 1.3; /* Etwas großzügiger als H1 */
text-transform: none !important;
}

h3 {
font-size: var(–font-h3);
line-height: 1.4;
text-transform: none !important;
}

h4 {
font-size: var(–font-h4);
line-height: 1.4;
text-transform: none !important;
}

h5 {
font-size: var(–font-h5);
line-height: 1.5; /* Noch großzügiger */
text-transform: none !important;
}

h6 {
font-size: var(–font-h6);
line-height: 1.5;
text-transform: none !important;
}

p {
font-size: var(–font-p);
line-height: 1.6; /* Optimal für Fließtexte */
}

.main_menu li a {
font-size: var(–font-menu);
line-height: 1.4; /* Angemessen für Menüpunkte */
}

/* Schriftglättung und Font-Weight für Überschriften */
h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400 !important; /* Verhindert Überschreibungen */
}

Following on from this

I can 100% confirm this was the cause of our server issues.

Essentially ALL Enfold websites with WooCommerce installed will gradually use up the ram and see mysql memory usage rise until the server crashes.

The bots getting stuck crawling all of the ?avia_extended_shop_select=yes queries includes:
Even with the rel-nofollow:
Bing bot
Google bot
A majority of major search engines
AI crawlers – New aggressive bots that ignore all instructions

See screenshot of the before and after. Our Ram use fell from almost 90GB of ram used to 8GB used on average.
Physical Ram usage screenshot
https://www.dropbox.com/scl/fi/tw8p399gfdr9cclorc5j9/ramuse-screenshot.PNG?rlkey=d9ty4xvui4w3m2ycb9b9ez94s&st=28aameqn&dl=0
Mysql memory usage screenshot
https://www.dropbox.com/scl/fi/iixhdd5vpe7253tbavbxf/mysql-memory-usage.PNG?rlkey=15061shf0haiu3d36cdy0be3t&st=ep9fncx5&dl=0

SOLUTION
I propose that Enfold removes the custom sort by options and reinstates the default Woocommerce ones.
The defaults use form fields and JS so there are no a href links in the default woo sort by dropdown. Bots cannot follow these links because there are no urls in the HTML.

In your child theme functions.php add the following to remove the enfold filters and reinstate the woo ones.

// remove the enfold sort by filters
function avia_woocommerce_frontend_search_params()
{
   return;
}
// reinstate the woo default sort by filters
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );

Add the following CSS to quick CSS and tweak depending on your sidebar position:

.sort-param-count {
display:none;
}
.product-sorting {
padding-top:0px;
}
div .product-sorting ul, div .product-sorting li {
font-size: 16px;
}
div .product-sorting ul {
width: 200px;
}
.main_color .sort-param a {
    color: #000000;
}
.sort-param-sort a, ul.sort-param-order {
border: 1px;
border-color: #969696;
border-style: solid;
}
@media only screen and (max-width: 767px) {
    .responsive #top .woocommerce-ordering {
        position: relative;
        float: left;
        clear: both;
        margin: 0;
        padding-bottom: 25px;
        padding-top: 15px;
        top: 0px;
    }
}
@media only screen and (min-width: 768px) {
    .responsive #top .woocommerce-ordering {
        position: relative;
        float: left;
        clear: both;
        margin: 0;
        padding-bottom: 25px;
        padding-top: 15px;
        top: 0px;
    }
}
#top.woocommerce-page .woocommerce-ordering select {
width: 100%;
font-size:16px;
}

Install the Redirection Plugin:

Add the following RegEX expression to redirect the queries so that the URL redirects BEFORE the query runs on the DB

Source URL: ^/(.*?)/\?avia_extended_shop_select=.*
Enable: Ignore Case, Regex and Ignore Slash
Target URL: /$1/
Hit Save
This will redirect any attempt to crawl the enfold filters back to the current category

So the General Styling tab > Advanced Options: Customize Typography Settings don’t work?

The Advanced Styling options don’t provide responsive font size control (desktop, tablet, mobile). That’s why I’m trying to use the Customize Typography Settings. If they don’t work, why are they offered?

Correction, General Styling tab > Advanced Options: Customize Typography Settings is what is not appearing to take affect. The Advanced Styling only sets a generic font size for all devices. The General Styling tab offers font sizes for desktop, tablet portrait, tablet landscape and mobile—and that’s what’s not overriding the Advanced Styling generic setting.

I think I have solved the issue with the following CSS code;
@media only screen and (max-width: 1170px) and (max-height: 844px), only screen and (max-width: 375px) and (max-height: 812px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption.av-19l7r0yx-f4a9287caa6e093433c04f70226b8e0c__1 .avia-caption-title {
margin-top: 10px !important;
font-size: 38px !important;
}
}

Rikard,

I tried as you suggested and it worked. However, the mobile version has too much white space between the logo and first section of content. Is there CSS that will take care of that issue on mobile while maintaining the desktop version? This is the custom CSS I currently have. Thanks!

#top .logo,
#top .logo a {
overflow: visible;
}

/* Subtext styling */
.logo .subtext h1 {
font-size: 13px;
font-weight: 600;
}

.logo .subtext {
z-index: 999;
}
/* Reduce the logo height to make space for the subtext below */
#top #header .logo img {
max-height: 65%!important;
margin-top: 10px;
margin-bottom: 12px;
}

/* OPTIONAL CHOICE : Change position of subtext when scrolled */
#top #header.header-scrolled .logo img {
max-height: 100%!important;
}
#top #header.header-scrolled .logo .subtext {
position: absolute;
top: 50%;
right: 0;
transform: translate(120%, -50%);
}