@charset "utf-8";

/*  ----------------------------------------------  T H E M E   A D D I T I O N S   F O R   A C C E S S I B I L I T Y   */

    :root{
        --ga-green: #84e1ec;

        --ga-green-dark: rgba(120,200,210,1);
        --ga-green-dark-half: rgba(120,200,210,0.5);
        --ga-green-darkest: rgba(35,170,185,1);
        --ga-green-footer: rgba(40,90,100,1);

        --ga-orange: rgba(248,156,39,1);
        --ga-orange-dark: rgba(255,66,0,1);

        --ga-border-color: rgba(0,0,0,0.25);

        --ga-a11y-orange: #FF8000;

        --ga-a11y-marker-color:      rgba(255,128,0,1);
        --ga-a11y-marker-background: rgba(255,128,0,1);

        --ga-a11y-form-field-background: rgba(35,170,185,0.1);

    /*  allows to interpolate sizes even between auto/fit-content. Woohoo!  */
    /*  does neither work in safari nor firexfox (10/2026). Meh!  */
        interpolate-size: allow-keywords;
    }

/*	-------------------------------------------------------------  FLEX  */
    .flx-r{
        display:flex;
        flex-flow:row;
        flex-wrap:nowrap;
    }
    .flx-c{
        display:flex;
        flex-flow:column;
        flex-wrap:nowrap;
    }
    .flx-jca { justify-content:space-around; }
    .flx-jcb { justify-content:space-between; }
    .flx-jcc { justify-content:center; }
    .flx-jce { justify-content:flex-end; }
    .flx-jcs { justify-content:flex-start; }

    .flx-aic	{ align-items:center; }
    .flx-aie	{ align-items:flex-end; }
    .flx-ais	{ align-items:flex-start; }
    .flx-aix	{ align-items:stretch; }

    .flx-wrp	{ flex-wrap:wrap; }


/*	--------------------------------------------------------------------   GRID  */

.grd{
    display: grid;
}


html{
    /*	prevent scrolling if a modal dialog is open  */
    &:has(dialog[open]) {
        overflow: hidden;
    }
}





/*  -------------------------------------------------  temp: make the currently focussed element visible   */
/*
    *:focus{
        outline: 3px solid red;
        position: relative;

        &:after{
            content: 'Focus is here.';

            position: absolute;
            top: 0;
            right: 0;
            transform: translate( 110%, -150% );

            color: red;
            font-size: 0.8rem;
            font-weight: bold;
            text-transform: uppercase;
            white-space: nowrap;
        }
    }
*/

/*  ------------------------------------------------------------------------------------  common buttons  */
/*  -------------------------------------------------------------------------  button testchair (header)  */

    .button,
    .header-phone-1 .button-testchair,
    .pb-gallery-fabrics button {
        &:focus-visible {
            color: white;
            background-color: var(--ga-a11y-orange);
            border: 1px solid var(--ga-orange-dark);
            outline: none;
        }
    }

    form{
        input:not( [type="submit"] ),
        textarea,
        select {
            margin: 5px 0;
            &:focus,
            &:focus-visible {
                outline: 4px solid var(--ga-green-darkest);
                background-color: var(--ga-a11y-form-field-background);
            }
        }
    }




/*  ---------------------------------------------------------------------------------------------------------   HEADER  */

    .dbgab__hdr-new2026 {
        width: 100%;
        height: 80px;

        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;

        background-color: white;


    /*  -------------------------------------------------------------------------   A11Y SKIP LINKS  */

        .a11y--skip-link-wrp{
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;

            width: 100%;
            height: fit-content;
            min-height: 80px;

            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            transform: translateY( calc( -100% - 10px ) );


            background-color: white;
            border-bottom: 1px solid var(--ga-green-dark);

            transition: transform 0.5s;

            &:focus-within{
                transform: translateY(0);
            }

            @media only screen and (min-width: 500px) {
                flex-flow: row nowrap;
                align-items: center;
                padding: 0 25px;
            }

            .a11y--skip-link{
                width: 100%;

                display: flex;
                flex-flow: row nowrap;
                align-items: center;

                padding: 10px 30px 12px 20px;

                font-size: 2rem;
                text-decoration: none;

                @media only screen and (min-width: 500px) {
                    width: fit-content;
                }

                svg{
                    width: 40px;
                    aspect-ratio: 1 / 1;

                    margin-right: 10px;

                    rotate: 180deg;

                    .back-bg{ fill: var(--ga-green-dark); }
                    .back-fg{
                        fill:none;
                        stroke: white;
                        stroke-width: 25;
                        stroke-linecap: round;
                    }
                }

                &:focus-visible{
                    color: white;
                    background-color: var(--ga-green-darkest);

                    svg{
                        .back-bg{ fill: white; }
                        .back-fg{ stroke: var(--ga-green-darkest); }
                    }
                }

            }
        }


    /*  -------------------------------------------------------------------------  main header  */
        .dbgab__hdr{
            width: 100%;
            height: fit-content;

        /*  background-color: rgba(0,0,0,0.1);  */

            .site-branding {

                margin-right: auto;
                margin-bottom: unset;

                a {

                    svg {
                        .ga-logo-human {
                            fill: var(--ga-green);
                        }

                        .ga-logo-star {
                            fill: var(--ga-orange);
                        }

                        .ga-logo-font {
                            fill: black;
                        }
                    }

                    &:focus-visible {
                        svg {
                            .ga-logo-human,
                            .ga-logo-star,
                            .ga-logo-font {
                                fill: white;
                            }
                        }

                        &::after {
                            content: ' ';
                            display: block;
                            width: calc(100% + 40px);
                            height: calc(100% + 20px);
                            position: absolute;
                            top: -10px;
                            left: -20px;
                            z-index: -1;
                            background-color: var(--ga-green-darkest);
                        }
                    }
                }
            }

        /*  -------------------------------------------------------------------------  test a chair  */

            .button-testchair {
                display: none;

                width: fit-content;
                height: fit-content;

                position: relative;
                margin: 0 25px 0 0;
                padding: 6px 25px 8px;

                font-size: 1.4rem;
                text-transform: uppercase;
                white-space: nowrap;

                &:link,
                &:visited{
                    color: var(--ga-green-darkest);
                    background-color: white;
                }
                &:hover,
                &:focus,
                &:active,
                &:focus-visible {
                    color: white;
                    background-color: var(--ga-a11y-orange);
                }

                span{
                    display: inline-block;
                    margin: -3px 0 0 7px;
                    font-size: 2rem;
                }

                @media screen and (min-width: 800px){
                    display: flex;
                }
            }


            /*  -----------------------------------------------------------------  desktop social icons   */

            .social-top {
                display: none;
                height: fit-content;

                position: relative;
                top: unset;
                right: unset;

                margin: 0 25px 0 0;

                .social {
                    display: flex;

                    width: 40px;
                    aspect-ratio: 1 / 1;

                    flex-direction: row;
                    justify-content: center;
                    align-items: center;

                    color: var(--ga-green-darkest);

                    &:focus-visible {
                        color: white;
                        background-color: var(--ga-a11y-orange);
                        border-radius: 5px;

                        outline: none;
                    }

                    svg {
                        fill: currentColor;
                    }
                }

                @media screen and (min-width: 999px){
                    display: flex;
                }

                @media screen and (min-width: 1200px) {
                    margin: 0;
                    right: -11px;
                }
            }


        /* ----------------------------------------------------------------------------  shop icons  */
            .my-kto {
                height: 100%;
                top: 0;

                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                padding: 0 5px;

                &:focus-visible {
                    color: white;
                    background-color: var(--ga-a11y-marker-background);
                }
            }

            .basket {
                height: 100%;
                aspect-ratio: 1 / 1;

                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                top: 0;
                right: 0;

                svg {
                    width: 40px;
                    height: auto;

                    .shopping-basket {
                        fill: white;
                    }

                    .shopping-basket-bg {
                        fill: var(--ga-green-dark);
                    }
                }

                &:focus-visible {
                    svg {
                        .shopping-basket-bg {
                            fill: var(--ga-a11y-orange);
                        }
                    }
                }
            }


        /*  -------------------------------------------  open desktop submenus when focus is within  */

            #topnavi {

                .menu {
                    padding-right: 30px;

                    .menu-item-has-children {

                        .a11y-button-open-submenu {
                            display: none;
                        }

                        &:focus-within {

                            & > a {
                                background-color: var(--ga-a11y-marker-background);
                                color: #fff;
                                opacity: 0.5;

                                &:focus-visible {
                                    opacity: 1;
                                }

                                span {
                                    color: white;
                                }

                                &::after {
                                    width: 100%;
                                    border-color: white;
                                }
                            }

                            .a11y-button-open-submenu {
                                width: 30px;
                                height: 30px;

                                display: flex;
                                justify-content: center;
                                align-items: center;

                                padding: 0 0 5px;

                                position: absolute;
                                top: 0;
                                right: 0;
                                transform: translateX(100%);

                                transition: transform 0.5s, top 0.25s;

                                font-size: 3rem;
                                color: white;

                                background-color: var(--ga-a11y-marker-background);
                                border: 0;
                                border-left: 1px solid white;
                                outline: 0;

                                &:focus-visible {
                                    /*    top: 30px;  */
                                    background-color: var(--ga-a11y-marker-background);
                                }
                            }
                        }

                        ul.sub-menu {

                            visibility: hidden;
                            transition: all 0.5s;

                            &:focus-within {
                                cursor: default;

                                li {

                                    &:focus-within:has( a:focus-visible ) {
                                        background-color: var(--ga-a11y-marker-background);
                                    }

                                    a {
                                        opacity: 1;

                                        &:focus-visible {
                                            color: #fff;

                                            span {
                                                color: white;
                                            }

                                            &::after {
                                                border-color: white;
                                            }

                                        }
                                    }
                                }
                            }
                        }

                        &:hover,
                        &.open-sub-menu {

                            .sub-menu {
                                visibility: visible;
                            }

                        }
                    }
                }
            }


        /*  --------------------------------------------------------------   mobile menu button(s)  */

            #menuIconShow,
            #menuIconHide{
                width: 60px;
                height: 60px;
                aspect-ratio: 1;

                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                position: relative;
                top: unset;
                right: -10px;
                margin: 0;
                padding: 0;

                background-color: transparent;
                border: none;
                outline: none;

                svg{
                    display: block;
                    width: 36px;
                    height: auto;
                }

                &.hide{
                    display: none;
                }

                &:focus-visible{
                    background-color: var(--ga-a11y-orange);
                }

                @media screen and (min-width: 1200px){
                    display: none;
                }
            }


        /*  -----------------------------------------------------------------------------------   MOBILE TOP NAVIGATION  */

            #topnavi-mobile{

                visibility: visible;

                @media (min-width: 1200px) {
                    visibility: hidden;
                }
            }


        /*  ----------------------------------------------------------------  NEW 2026 - USING A MODAL (DIALOG) ELEMENT  */
        /*  ------------------------------------  as it deals with most of the opening/closing issues by itself already  */

            dialog.dbgab__mobile-menu-wrp{

                width: 100%;
                max-width: 100%;

                height: fit-content;
                min-height: 300px;
                max-height: 100dvh;

                inset: unset;
                top: 0;
                right: 0;

                padding: 0 0 50px;

                opacity: 0;

            /*  background-color: rgba(0,220,255,0.3);  */
                background-color: transparent;

                border: none;

                transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
                transition-behavior: allow-discrete;

                @media screen and (min-width: 1200px){
                    display: none;
                }


                .dbgab__mobile-menu-header-wrp {
                    width: 100%;
                    height: 80px;

                    padding: 0 20px;

                    position: relative;

                    /*
                    position: sticky;
                    left: 0;
                    top: 0;
                    */

                    background-color: rgba(255, 255, 255, 0.9);

                    @media screen and (min-width:600px){
                        padding: 0 30px;
                    }

                    .dbgab__mobile-menu-close {
                        width: 60px;
                        height: 60px;

                        position: absolute;
                        top: 10px;
                        right: 10px;
                        z-index: 10;

                        padding: 15px;

                        cursor: pointer;

                        background-color: white;
                        border: none;
                        outline: none;

                        @media screen and (min-width: 600px){
                            right: 20px;
                        }

                        svg{
                            width: 100%;
                            aspect-ratio: 1;
                        }

                        &:focus-visible{
                            background-color: var(--ga-a11y-orange);
                        }
                    }


                }

                .dbgab__mobile-menu-animation-wrp {

                    display: grid;
                    grid-template-rows: 0fr;
                    transition: grid-template-rows 0.5s ease-out;
                    overflow: hidden;

                    &.is-open{
                        grid-template-rows: 1fr;
                    }

                    .dbgab__mobile-menu-animation-content {

                        /*  allow collapsing into the grid  */
                        min-height: 0;

                        .dbgab__mobile-menu-content-wrp {
                            width: 100%;
                            height: fit-content;

                            overflow-y: auto;

                            margin: 0;
                            padding: 0;

                            background-color: white;

                            @media screen and (min-width: 666px) {
                                width: 400px;
                                margin: 3px 10px 0 calc(100% - 410px);
                            }


                            .dbgab__mobile-menu-icons-wrp {

                                padding: 10px;

                                @media screen and (min-width: 600px){
                                    flex-wrap: nowrap;
                                    padding: 10px 20px;
                                }


                                .social-top {
                                    display: flex;
                                    @media screen and (min-width: 999px) {
                                        display: none;
                                    }
                                }

                                .dbgab__mobile-menu-icons-shop {

                                    .my-kto,
                                    .basket {
                                        position: relative;
                                        right: unset;
                                        top: unset;
                                        white-space: nowrap;
                                    }

                                    .my-kto {
                                        height: 42px;
                                    }

                                    .basket {
                                        margin: 0 0 0 15px;
                                    }

                                }
                            }

                            .dbgab__mobile-menu-test-chair {
                                width: 100%;
                                height: 50px;

                                font-size: 1.6rem;
                                font-weight: 700;
                                text-align: center;
                                text-transform: uppercase;
                                text-decoration: none;

                                border: 0;
                                outline: none;

                                &:link,
                                &:visited {
                                    color: white;
                                    background-color: var(--ga-green-dark);
                                }

                                &:hover,
                                &:active,
                                &:focus,
                                &:focus-visible {
                                    color: black;
                                    background-color: var(--ga-a11y-orange);
                                }
                            }

                            .dbgab__mobile-menu{

                                padding: 0 25px 10px;

                                li{
                                    position: relative;

                                    &:not(&:last-of-type){
                                        border-bottom: 1px solid var(--ga-border-color);
                                    }

                                    a {
                                        display: block;
                                        width: calc(100% - 40px);
                                        padding: 8px 0 8px 10px;

                                        font-size: 16px;
                                        font-weight: 700;
                                        text-transform: uppercase;
                                        text-decoration: none;
                                        line-height: 1.3;
                                        letter-spacing: 0.1rem;

                                        /*background-color: rgba(0,0,0,0.07);*/

                                        &:link,
                                        &:visited {
                                            color: var(--ga-green-dark);
                                            span{
                                                color: black;
                                            }
                                        }
                                        &:hover,
                                        &:active,
                                        &:focus{
                                            color: black;
                                            span{
                                                color: var(--ga-green-dark);
                                            }
                                        }
                                        &:focus-visible {
                                            color: black;
                                            background-color: var(--ga-a11y-orange);
                                            span{
                                                color: black;
                                            }
                                        }
                                    }

                                    .sub-menu-button{
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: center;
                                        align-items: center;
                                        width: 40px;
                                        height: 40px;

                                        position: absolute;
                                        top: 10px;
                                        right: 0;

                                        cursor: pointer;

                                        border: 0;
                                        border-left: 1px solid var(--ga-border-color);
                                        outline: 0;

                                        background-color: white;

                                        svg{
                                            width: 60%;
                                        }

                                        &:hover,
                                        &:focus-visible{
                                            svg {
                                                width: 80px;
                                            }
                                        }
                                        &:focus-visible{
                                            background-color: var(--ga-a11y-orange);
                                        }

                                    }
                                }

                                .sub-menu {
                                    display: none;

                                    & > li{
                                        margin-left: 20px;
                                    }
                                }
                            }
                        }
                    }
                }

                &::backdrop {
                    margin-top: 80px;
                    background-color: rgba(0, 0, 0, 1);
                    opacity: 0;

                    transition: opacity 0.5s, display 0.5s allow-discrete;
                }

                &[open] {
                    opacity: 1;

                    @starting-style {
                        opacity: 0;
                    }

                    &::backdrop {
                        opacity: 0.4;
                    }
                }

            }
        }
    }






/*  -----------------------------------------------------------------------------------------------------------   MAIN  */

    #main{
        scroll-margin-top: 200px;
    }

    #breadcrumbs,
    .content,
    .description,

    .summary,
    .shipping-costs-info{

        isolation: isolate;

        a:not( .button ){
            &:focus-visible {
                display: inline-block;
                position: relative;

                color: black;
                text-decoration: none;

                &:after {
                    content: " ";

                    width: calc(100% + 10px);
                    height: 100%;

                    position: absolute;
                    top: 0;
                    left: -5px;
                    z-index: -1;

                    background-color: var(--ga-green);
                    outline: 2px solid var(--ga-green);
                    outline-offset: -1px;
                }
            }
        }
    }



    #debleu-pb{

        .pb-teaser{
            &:focus-within {
                outline: 4px solid var(--ga-a11y-orange);
                outline-offset: 4px;
            }
        }

        .pb-teaser-text-3-col{
            padding-bottom: 20px;
            .pb-teaser-text-wrap{
                padding-left: 25px;
                padding-right: 25px;
            }
        }


        .pb-1-image,
        .gallery{
            height: fit-content;
            a{
                display: block;
                outline: 4px solid transparent;
                outline-offset: 4px;

                &:focus-visible {
                    outline-color: var(--ga-a11y-orange);
                }
            }
        }

        .block-text{
            a{
                &:has(img){
                    display: block;
                    margin-bottom: 6px;

                    &:focus-visible {
                        margin-bottom: 0;
                        &::after{
                            content: none;
                        }
                        img {
                            outline: 4px solid var(--ga-a11y-orange);
                            outline-offset: 4px;
                        }
                    }
                }
            }
            details{
                position: relative;

                &:focus-within{
                    &::after{
                        content: " ";

                        width: calc(100% + 10px);
                        height: calc(100% + 6px);

                        position: absolute;
                        top: -3px;
                        left: -5px;
                        z-index: -1;

                        background-color: var(--ga-green);

                    }
                }
            }
        }

        .pb-gallery {
            &:not( &.pb-gallery-fabrics ) {
                .gallery-item {
                    margin: 6px;

                    &:focus-within {
                        outline: 4px solid var(--ga-a11y-orange);
                        outline-offset: 4px;
                    }
                }
            }
        }

        .pdf-download-pdf {
            a{
                .button{
                    &:focus-visible {
                        color: white;
                        background-color: var(--ga-a11y-marker-background);
                    }
                }
            }
        }


        [id|="wpcf7"] {

            input:not( [type="submit"] ),
            textarea,
            select {
                /*
                &:focus,
                &:focus-visible {
                    outline: 4px solid var(--ga-green-darkest);
                    background-color: var(--ga-a11y-form-field-background);
                }
                */


                &.wpcf7-not-valid:not( &:focus, &:focus-visible ) {
                    outline: 2px solid red;
                    background-color: rgba(255,0,0,0.05);
                }
            }


            .data-privacy{
                &:has( .wpcf7-not-valid ) {
                    outline: 4px solid red;
                }
            }

            input[type="submit"] {
                &:focus-visible {
                    background-color: var(--ga-a11y-marker-background);
                    border: 1px solid var(--ga-orange-dark);
                }
            }

            .wpcf7-response-output {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }


    /*  ---------------------------------------------------------------------------------------   woocommerce  */

    .single-product {
        div.product {
            .woocommerce-product-gallery {
                .woocommerce-product-gallery__trigger {
                    &:hover {
                    }

                    &:focus-visible {
                        background-color: var(--ga-a11y-orange);
                    }
                }
            }
        }
    }


    .woocommerce-product-gallery__image{
        border: 4px solid transparent;
        &:focus-within {
            border: 4px solid var(--ga-a11y-orange);
        }
    }

    .woocommerce-loop-product__link{
        &:focus-visible {
            img {
                outline: 4px solid var(--ga-a11y-orange);
            }
        }
    }

    .woocommerce-cart-form{

        .product-remove{
            a:focus-visible {
                &::before{
                    font-size: 2rem;
                    color: red;
                    margin-top: -5px;
                }
            }
        }

        .product-image{
            a {
                display: block;
                border: 4px solid transparent;

                &:focus-visible {
                    border-color: var(--ga-a11y-orange);
                }
            }
        }
    }




    /*  -------------------------------------------------------   GIFT CARD PLUGIN FIXES: PW WooCommerce Gift Cards Pro  */
    #gift-card-amount{
        &:focus-visible {

        }
    }






    /*  ---------------------------------------------------------------------------------------------   back   */
    .back{
        width: 40px;
        aspect-ratio: 1 / 1;

        border: 0;
        outline: none;
        background: none;

        svg {
            transition: all 0.5s;

            .back-bg{ fill: none; }
            .back-fg{
                fill:none;
                stroke: var(--ga-green-footer);
                stroke-width: 25;
                stroke-linecap: round;
            }
        }

        &:hover,
        &:active{
            svg {
                .back-bg{ fill: var(--ga-green-footer); }
                .back-fg{ stroke: white; }
            }
        }

        &:focus-visible{
            svg {
                .back-bg{ fill: var(--ga-green); }
                .back-fg{ stroke: black; }
            }
        }
    }




/*  ----------------------------------------------------------------------------------------------------   CONFIGURATOR  */

    #configurator{

        .dbgab__a11y-overlay-configurator{
            width: 0;
            height: 0;

            overflow: hidden;

            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;

            padding: 0 25px;

            .dbgab__a11y-overlay-configurator-content{
                width: fit-content;
                max-width: 370px;
                height: fit-content;

                padding: 35px;

                background-color: rgba(255,255,255,0.85);
                border: 20px solid #79c8d2;

                a{
                    position: relative;
                    isolation: isolate;

                    &:focus,
                    &:focus-visible{
                        color: black;

                        &::after{
                            content: '';

                            width: calc( 100% + 20px );
                            height: calc( 100% + 10px );

                            position: absolute;
                            top: -5px;
                            left: -10px;
                            z-index: -1;

                            background-color: var(--ga-a11y-orange);
                        }
                    }
                }
            }
        }

        /*
        &:focus-within{
            .dbgab__a11y-overlay-configurator{

                width: 100%;
                height: 100%;

                background-color: rgba(255,255,255,0.4);
                backdrop-filter: blur(10px);
            }
        }
        */

    }





/*  ---------------------------------------------------------------------------------------------------------   FOOTER  */

    /*  ---------------------------------------------------------------------------------------  footer logo  */
    .footer-logo{

        a {
            display: block;
            width: 100%;
            height: auto;

            svg {
                width: 100%;
                height: auto;

                .human,
                .star {
                    fill: rgba(102, 139, 144, 1);
                }

                .blob {
                    fill: rgba(32, 76, 79, 1);
                }

            }

            &:focus-visible {
                outline: none;

                svg {
                    .star {
                        fill: var(--ga-a11y-orange);
                    }

                    .human{
                        fill: white;
                    }

                    .blob {
                        fill: var(--ga-green-dark-half);
                    }
                }
            }
        }
    }


    /*  ---------------------------------------------------------------------------------  footer navigation  */

    #footer-content {

        .box.navi {

            li {

                a {
                    display: block;

                    &:focus-visible {
                        width: calc(100% + 20px);
                        height: calc(100% - 8px);
                        margin: 4px -10px;
                        padding: 2px 10px;


                        background-color: white;
                        color: var(--ga-green-footer);
                        outline: none;

                        svg {
                            fill: currentColor;
                        }
                    }
                }
            }
        }

        a.top {

            background-color: var(--ga-green-footer);
            outline: none;

            svg {
                .top-bg{      fill: white; }
                .top-fg{
                    fill:none;
                    stroke: var(--ga-green-footer);
                    stroke-width: 25;
                    stroke-linecap: round;
                }
            }

            &:focus-visible{
                svg {
                    .top-bg{ fill: var(--ga-a11y-orange); }
                    .top-fg{ stroke: white; }
                }

            }
        }

    }


    /*  -------------------------------------------------------------------------------------  footer social  */

    a.social{

        outline: none;
        /*
                svg{
                    .icon-logo{         fill: rgba(255,255,255,0.8); }
                    .icon-background {  fill: rgba(32, 76, 79, 1);   }

                }
        */
        &:focus-visible{

            svg{
                .icon-logo{         fill: var(--ga-green-footer); }
                .icon-background {  fill: white; }
            }
        }
    }


    /*  ---------------------------------------------------------------------------  copyright  */

    .copyright:focus-within{

        background-color: var(--ga-a11y-orange);

        a{
            color: white;
            outline: none;
        }

    }





/*  ------------------------------------------------------------------------------------------------------  VENDORS  */

/*  ----------------------------------------------------------------------------------   MAGNIFICENT POPUP  */

.mfp-image-holder {

    .mfp-close{

        &:focus-visible{

            padding-right: 11px;

            &::after{
                content: ' ';

                display: block;
                width: 40px;
                height: 40px;

                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                transform: translate(0, 0);

                background-color: var(--ga-a11y-marker-background);
            }

        }
    }


    .mfp-arrow{

        &:focus-visible{

            &::before{
                content: ' ';

                display: block;
                width: 60px;
                height: 60px;

                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                transform: translate(0, 0);

                background-color: var(--ga-a11y-marker-background);
            }
        }
    }

    .mfp-img {
        display: block;
        position: relative;

        &:focus-visible{

            &::before{
                content: ' ';

                display: block;
                width: calc( 100% + 30px );
                height: calc( 100% + 30px );

                position: absolute;
                top: -15px;
                left: -15px;
                z-index: -1;
                transform: translate(0, 0);

                background-color: var(--ga-a11y-marker-background);
            }
        }
    }

}