.gmf-category-hero{
    /* Day mode is the default palette. The same component switches live from
     * html[data-gmf-theme] without duplicating markup or touching WooCommerce. */
    --gmf-hero-bg-1:#f8fcff;
    --gmf-hero-bg-2:#edf6fb;
    --gmf-hero-accent:var(--gmf-content-accent,#0e9f6e);
    --gmf-hero-text:var(--gmf-content-heading,#172b3d);
    --gmf-hero-muted:var(--gmf-content-text,#43576a);
    --gmf-hero-border:rgba(19,74,108,.14);
    --gmf-hero-shadow:0 12px 28px rgba(7,31,59,.09);
    --gmf-hero-glow-green:rgba(14,159,110,.105);
    --gmf-hero-glow-blue:rgba(68,130,173,.105);
    --gmf-hero-sheen:rgba(23,104,159,.055);
    --gmf-hero-marker-top:#32cf92;
    --gmf-hero-marker-ring:rgba(14,159,110,.10);
    --gmf-hero-marker-glow:rgba(14,159,110,.18);
    --gmf-hero-chip-bg:rgba(255,255,255,.76);
    --gmf-hero-chip-border:rgba(23,104,159,.16);
    --gmf-hero-chip-text:#284860;
    --gmf-hero-chip-hover-bg:rgba(14,159,110,.095);
    --gmf-hero-chip-hover-border:rgba(14,159,110,.28);
    --gmf-hero-chip-hover-text:#0c6f50;
    --gmf-hero-focus-ring:rgba(14,159,110,.66);
    --gmf-hero-count-bg:rgba(255,255,255,.66);
    --gmf-hero-count-border:rgba(23,104,159,.13);
    --gmf-hero-count-text:#496477;
    position:relative;
    direction:rtl;
    isolation:isolate;
    overflow:hidden;
    margin:14px 0 14px;
    border:1px solid var(--gmf-hero-border);
    border-radius:18px;
    background:
        radial-gradient(circle at 4% 135%,var(--gmf-hero-glow-green),transparent 30%),
        radial-gradient(circle at 94% -55%,var(--gmf-hero-glow-blue),transparent 35%),
        linear-gradient(135deg,var(--gmf-hero-bg-1),var(--gmf-hero-bg-2));
    color:var(--gmf-hero-text);
    box-shadow:var(--gmf-hero-shadow);
}
.gmf-category-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.14;
    background-image:linear-gradient(120deg,transparent 0 45%,var(--gmf-hero-sheen) 45.2% 45.45%,transparent 45.7% 100%);
}
.gmf-category-hero__ambient{
    position:absolute;
    z-index:-1;
    width:190px;
    height:190px;
    left:-95px;
    bottom:-132px;
    border-radius:50%;
    background:var(--gmf-hero-glow-green);
    filter:blur(4px);
    pointer-events:none;
}
.gmf-category-hero__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    min-height:104px;
    padding:18px 24px;
}
.gmf-category-hero__copy{
    flex:1 1 620px;
    min-width:0;
}
.gmf-category-hero__title-row{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}
.gmf-category-hero__marker{
    flex:0 0 5px;
    width:5px;
    height:33px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--gmf-hero-marker-top),var(--gmf-hero-accent));
    box-shadow:0 0 0 4px var(--gmf-hero-marker-ring),0 0 18px var(--gmf-hero-marker-glow);
}
.gmf-category-hero__title{
    margin:0!important;
    color:var(--gmf-hero-text)!important;
    font-size:clamp(27px,2vw,34px)!important;
    line-height:1.34!important;
    font-weight:900!important;
    letter-spacing:-.3px;
    text-wrap:balance;
}
.gmf-category-hero__subtitle{
    max-width:760px;
    margin:6px 16px 0 0!important;
    color:var(--gmf-hero-muted)!important;
    font-size:13.8px;
    line-height:1.85;
    font-weight:500;
    text-wrap:pretty;
}
.gmf-category-hero__meta{
    display:flex;
    flex:0 1 470px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
}
.gmf-category-hero__chips{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    max-width:100%;
}
.gmf-category-hero__chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:150px;
    min-height:29px;
    padding:4px 10px;
    overflow:hidden;
    border:1px solid var(--gmf-hero-chip-border);
    border-radius:999px;
    background:var(--gmf-hero-chip-bg);
    color:var(--gmf-hero-chip-text)!important;
    font-size:11.5px;
    line-height:1.55;
    font-weight:750;
    text-decoration:none!important;
    white-space:nowrap;
    text-overflow:ellipsis;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
a.gmf-category-hero__chip:hover{
    transform:translateY(-1px);
    border-color:var(--gmf-hero-chip-hover-border);
    background:var(--gmf-hero-chip-hover-bg);
    color:var(--gmf-hero-chip-hover-text)!important;
}
a.gmf-category-hero__chip:focus-visible{
    outline:2px solid var(--gmf-hero-focus-ring);
    outline-offset:2px;
}
.gmf-category-hero__count{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:27px;
    padding:3px 8px;
    border:1px solid var(--gmf-hero-count-border);
    border-radius:999px;
    background:var(--gmf-hero-count-bg);
    color:var(--gmf-hero-count-text);
    font-size:10.8px;
    line-height:1.55;
    font-weight:750;
    white-space:nowrap;
    backdrop-filter:blur(7px);
}
.gmf-category-hero__count-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--gmf-hero-accent);
    box-shadow:0 0 0 3px var(--gmf-hero-marker-ring);
}

html[data-gmf-theme="light"] .gmf-category-hero{
    color-scheme:light;
}

html[data-gmf-theme="dark"] .gmf-category-hero{
    color-scheme:dark;
    --gmf-hero-bg-1:#082942;
    --gmf-hero-bg-2:#041725;
    --gmf-hero-accent:#20df6b;
    --gmf-hero-text:#ffffff;
    --gmf-hero-muted:#c8d7e6;
    --gmf-hero-border:rgba(255,255,255,.085);
    --gmf-hero-shadow:0 14px 30px rgba(0,0,0,.22);
    --gmf-hero-glow-green:rgba(32,223,107,.14);
    --gmf-hero-glow-blue:rgba(91,179,255,.13);
    --gmf-hero-sheen:rgba(255,255,255,.07);
    --gmf-hero-marker-top:#42f189;
    --gmf-hero-marker-ring:rgba(32,223,107,.085);
    --gmf-hero-marker-glow:rgba(32,223,107,.20);
    --gmf-hero-chip-bg:rgba(255,255,255,.052);
    --gmf-hero-chip-border:rgba(255,255,255,.10);
    --gmf-hero-chip-text:#dceaf7;
    --gmf-hero-chip-hover-bg:rgba(32,223,107,.095);
    --gmf-hero-chip-hover-border:rgba(32,223,107,.28);
    --gmf-hero-chip-hover-text:#ffffff;
    --gmf-hero-focus-ring:rgba(32,223,107,.72);
    --gmf-hero-count-bg:rgba(255,255,255,.045);
    --gmf-hero-count-border:rgba(255,255,255,.085);
    --gmf-hero-count-text:#dbe8f4;
}

/* Foundation owns the product-category H1. Only empty leftovers from themes are hidden. */
.gmf-category-hero-active .woocommerce-products-header__title:empty,
.gmf-category-hero-active .wd-page-title:empty{
    display:none!important;
}

@media (max-width:1024px){
    .gmf-category-hero__inner{
        align-items:flex-start;
        gap:20px;
        min-height:96px;
        padding:17px 20px;
    }
    .gmf-category-hero__meta{flex-basis:330px}
    .gmf-category-hero__title{font-size:clamp(25px,3vw,30px)!important}
    .gmf-category-hero__subtitle{font-size:13.2px}
}

@media (max-width:767px){
    .gmf-category-hero{
        margin:10px 0 11px;
        border-radius:15px;
        box-shadow:var(--gmf-hero-shadow);
    }
    .gmf-category-hero::after{opacity:.1}
    .gmf-category-hero__ambient{
        width:150px;
        height:150px;
        left:-80px;
        bottom:-112px;
    }
    .gmf-category-hero__inner{
        display:block;
        min-height:0;
        padding:14px 14px 13px;
    }
    .gmf-category-hero__title-row{gap:9px}
    .gmf-category-hero__marker{
        flex-basis:4px;
        width:4px;
        height:26px;
        box-shadow:0 0 0 3px var(--gmf-hero-marker-ring),0 0 15px var(--gmf-hero-marker-glow);
    }
    .gmf-category-hero__title{
        font-size:22px!important;
        line-height:1.42!important;
        letter-spacing:-.15px;
    }
    .gmf-category-hero__subtitle{
        display:-webkit-box;
        max-width:36em;
        margin:5px 12px 0 0!important;
        overflow:hidden;
        font-size:12.5px;
        line-height:1.78;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
    .gmf-category-hero__meta{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:5px;
        margin-top:8px;
        padding-right:12px;
        max-width:100%;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:none;
        white-space:nowrap;
    }
    .gmf-category-hero__meta::-webkit-scrollbar{display:none}
    .gmf-category-hero__chips{
        order:1;
        width:auto;
        flex:0 0 auto;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:5px;
        overflow:visible;
        padding:1px 0 2px;
    }
    .gmf-category-hero__chip{
        flex:0 0 auto;
        min-height:27px;
        max-width:145px;
        padding:3px 9px;
        font-size:10.8px;
    }
    .gmf-category-hero__count{
        order:2;
        flex:0 0 auto;
        min-height:23px;
        padding:2px 7px;
        border-color:var(--gmf-hero-count-border);
        background:var(--gmf-hero-count-bg);
        font-size:10px;
        opacity:.88;
    }
    .gmf-category-hero__count-dot{
        width:4px;
        height:4px;
        box-shadow:0 0 0 2px var(--gmf-hero-marker-ring);
    }
}

@media (max-width:420px){
    .gmf-category-hero__inner{padding:13px 13px 12px}
    .gmf-category-hero__meta{padding-right:10px}
    .gmf-category-hero__chip{max-width:136px}
}

@media (prefers-reduced-motion:reduce){
    .gmf-category-hero__chip{transition:none!important}
}
