/*
 * Gebruik nested CSS in je wrapper div: .awcf-loop-items
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

.awcf-loop-items {
    & p {
        padding: 0;
        margin: 0;
    }

    & .awcf-loop-items-content {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        flex-direction: row;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: stretch;

        & .awcf-loop-item {
            display: flex;
            position: relative;
            width: calc(33% - 11px);
            box-sizing: border-box;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: flex-start;
            overflow: hidden;
            border: 1px solid #eee;
            transition: all 0.3s ease-in-out;
            border-radius: 4px;
            background: #fff;
            color: #000;
            cursor: pointer;

            & .awcf-loop-item-header {
                padding: 20px 10px 0 10px;
                margin: 0;
                color: #000;
                width: 100%;

                & img,
                & .awcf-no-img {
                    height: 175px;
                    object-fit: contain;
                    width: 100%;
                }

                & .awcf-loop-item-content {
                    padding: 10px;
                    margin: 0;
                    font-size: 18px;
                    font-family: inherit;
                    font-weight: 500;
                    line-height: 1.125;
                    width: 100%;

                    & p {
                        font-size: 13px;
                        font-weight: normal;
                        margin: 0;
                        padding: 0;
                        width: 100%;
                    }
                }
            }

            & .awcf-loop-item-footer {
                padding: 10px;
                margin: 0;
                width: 100%;

                & .awcf-loop-item-footer-price {
                    text-align: right;
                    font-weight: bold;
                    font-size: 1.2em;
                    line-height: 1em;
                }
            }

            &:hover {
                border: 1px solid #e1e1e1;
            }
        }

        @media(max-width: 900px) {
            & .awcf-loop-item {
                width: calc(50% - 10px);

                & .awcf-loop-item-content {
                    font-size: 14px !important;
                    padding: 5px 0 0 0 !important;

                    & p {
                        display: none;
                    }
                }

                & .awcf-loop-item-footer {
                    padding: 10px;
                    margin: 0;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-direction: column;
                    flex-wrap: nowrap;

                    & .awcf-loop-item-footer-buttons {
                        & form {
                            & .aw-qty-btn-wrapper {
                                display: flex;
                                flex-direction: column;
                                flex-wrap: nowrap;
                                align-items: flex-start;
                                justify-content: flex-start;
                                gap: 10px;
                            }

                            & .aw-qty-btn-wrapper-left,
                            & .aw-qty-btn-wrapper-right,
                            & .aw-view-product-btn {
                                width: 100%;

                                .button,
                                button,
                                a {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}