/**
 * HPK Stoffverwaltung - Favoriten Styling
 */


/*  Favoritoen-Liste */
.product_list#hpk_favorites_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
    row-gap: 20px;
    list-style: none;

    /* 600px */
    @media screen and (min-width:37.5rem) {
        column-gap: 30px;
    }

    /* 900px */
    @media screen and (min-width:56.25rem) {
        column-gap: 30px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* 1400px */
    @media screen and (min-width:87.5rem) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


    .product_item, .collection_item{
        width: auto;
        max-width: 380px;

        .product_wrapper, .collection_wrapper{
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;

            .image_container{
                img{
                    width: 100%;
                }
            }

            .divider {
                height: 1px;
                width: 100%;
                background: rgba(0,0,0,0.1);
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .product_meta {
                display: grid;
                grid-template-columns: auto 1fr;
                column-gap: 5px;
                row-gap: 10px;
                margin-bottom: 20px;

                .product_function {
                    display: grid;
                    grid-template-columns: subgrid;
                    grid-column: 1 / span 2;
                    margin-bottom: 0;

                    .label {
                        font-weight: bold;
                    }

                    .funktion_list {
                        .funktion_item {
                            display: block;
                        }
                    }
                }
            }

            .hpk-pdf-download-button {
                width: fit-content;
                margin-top: auto;
            }

            .download {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 5px;
                align-items: center;

                @media screen and (max-width:37.5rem) {
                    padding: 1em 2em;
                    width: 100%;
                    justify-content: center;
                }
            }

            .download::before {

                content:'';
                display: inline-block;

                height: 1.1em;
                aspect-ratio: 16/13;
                margin-right: 0.5em;

                background-color: #ffffff;

                mask-image :url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" fill="none"><path stroke="%23fff" d="M8.188 0v8M3.98 4l4.206 4.205L12.393 4M0 13.148h16"/></svg>');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: 100% 100%;

            }
        }
    }

    .stoerer_element {
    //display: none;
        position: relative;

        grid-row: span 2;
        grid-column: span 2;

        .stoerer_wrapper {
            .image_container{
                position: relative;

                img{
                    width: 100%;
                    object-fit: cover;
                }
            }

            .image_container:before{
                content: "";
                position: absolute;
                z-index: 1;
                left: 0;
                right: 0;
                bottom: 0;
                height: 45%;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
            }

            .content_container{
                position: absolute;
                z-index: 2;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
            }
        }

        @media screen and (max-width:900px){
            &#stoerer_element_1 {
                grid-row: 3 / span 2;
            }

            &#stoerer_element_2 {
                display: none;
                visibility: hidden;
            }
        }

        @media screen and (min-width:900px){
            display: block;
            width: 100%;
            position: relative;
            height: auto;

            .stoerer_wrapper {
                .image_container{
                    position: relative;

                    img{
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .image_container:before{
                    top: 0;
                    bottom: unset;
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.0) 100%);
                }

                .content_container{
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                }
            }

        }
    }

}

/* Favoriten-Button */
.hpk-favorite-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: scale 0.3s ease;
    z-index: 1;
}

.hpk-favorite-button:hover {
    border: 1px solid #0070c5;
}

/* Herz-Icon */
.hpk-favorite-button svg {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.hpk-favorite-button path {
    fill: none;
    stroke: #031834;
    stroke-width: 2;
    transition: all 0.3s ease;
}

/* Favorit-Status: gefüllt */
.hpk-favorite-button.is-favorite path {
    fill: #0070C5;
    stroke: #0070C5;
}

.hpk-favorite-button.is-favorite:hover path {
    fill: #004f8a;
    stroke: #004f8a;
}

/* Button Container für mehrere Aktionen */
.product_actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

/* Button in der Produktliste */
.product_item .hpk-favorite-button {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

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

.hpk-pdf-download-button svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

/* Button auf der Detailseite */
.mod_hpk_product_detail .hpk-favorite-button,
.mod_hpk_curtain_detail .hpk-favorite-button {
    margin-left: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Favoriten-Button Container auf Detailseite */
.product_title_wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Animation beim Hinzufügen */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.hpk-favorite-button.is-favorite {
    animation: heartBeat 0.3s ease-out;
}

/* Favoriten-Seite spezifisch */
.mod_hpk_favorites .no_favorites_found {
    text-align: center;
    padding: 60px 20px;
}

.mod_hpk_favorites .no_favorites_found h2 {
    font-size: 24px;
    color: #031834;
    margin-bottom: 20px;
}

.mod_hpk_favorites .no_favorites_found p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

/* Favoriten-Counter (optional) */
.hpk-favorites-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e74c3c;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 10px;
    margin-left: 8px;
}

/* Accessibility */
.hpk-favorite-button:focus {
    outline: 2px solid #0070C5;
    outline-offset: 2px;
}

.hpk-favorite-button:focus:not(:focus-visible) {
    outline: none;
}