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

.awcf-loop-items {
    position: relative;

    &.awcf-loading {
        min-height: 300px;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.8);
            z-index: 10;
        }

        &::before {
            content: '';
            position: absolute;
            top: 120px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            border: 4px solid #eee;
            border-top-color: #885f83;
            border-radius: 50%;
            z-index: 11;
            animation: awcf-spin 0.7s linear infinite;
        }
    }

    & 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: center;
            overflow: hidden;
            border: 1px solid #2A2F35;
            transition: all 0.3s ease-in-out;
            border-radius: 0;
            background: #fff;
            color: #000;
            cursor: pointer;

            & .awcf-loop-item-header {
                padding: 10px 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: 20px;
                    font-family: inherit;
                    font-weight: 500;
                    line-height: 1.125;
                    width: 100%;
                    text-align: center;
                    color: #2B358A;

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

            /* De footer vult de resterende tegelhoogte en duwt de knoppen omlaag,
               zodat de prijs bij élk product direct onder de titel staat. Zonder
               dit zakt de prijs bij simpele producten mee naar de knop: de tegel
               is space-between, de footer wordt dus onderaan geplakt, en die is
               daar korter omdat de variatie-select ontbreekt. */
            & .awcf-loop-item-footer {
                padding: 10px;
                margin: 0;
                width: 100%;
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;

                & .awcf-loop-item-footer-price {
                    text-align: center;
                    font-weight: bold;
                    font-size: 15px;
                    line-height: 1em;
                    margin-bottom: 15px;
                }

                & .awcf-loop-item-footer-buttons {
                    margin-top: auto;
                }
            }

            &:hover {
                border: 1px solid #2A2F35;
            }
        }

        /* Onder ~966px passen 3 kolommen niet meer -> 2 kolommen. In deze range
           blijven de knoppen NAAST elkaar (aantal | toevoegen | info) en houdt de
           "Selecteer een optie"-select z'n volle breedte (plugin-default). */
        @media(max-width: 966px) {
            & .awcf-loop-item {
                width: calc(50% - 10px);

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

                    & p {
                        display: none;
                    }
                }

                /* Prijs mobiel 14px + gecentreerd. */
                & .awcf-loop-item-footer-price {
                    font-size: 14px !important;
                    text-align: center;
                }
            }
        }

        /* Onder 660px: tegels blijven 2-koloms (2 producten naast elkaar, ook op
           mobiel), maar de velden binnen de tegel gaan onder elkaar (select, aantal,
           toevoegen, info), elk full width van de tegel. align-items:stretch i.p.v.
           flex-start, anders kromp het knoppenblok tot ~184px i.p.v. de volle
           tegelbreedte. (Tegelbreedte 50% blijft uit het ≤966px-blok.) */
        @media(max-width: 660px) {
            & .awcf-loop-item {
                & .awcf-loop-item-footer {
                    padding: 10px;
                    margin: 0;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    align-items: stretch;

                    & .awcf-loop-item-footer-price {
                        text-align: center;
                    }

                    & .awcf-loop-item-footer-buttons {
                        width: 100%;

                        & form {
                            width: 100%;

                            & .aw-qty-btn-wrapper {
                                display: flex;
                                flex-direction: column;
                                flex-wrap: nowrap;
                                justify-content: flex-start;
                                align-items: stretch;
                                gap: 10px;
                                width: 100%;
                            }

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

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

@keyframes awcf-spin {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Sale-badge linksboven in de tegel. De tegel is al position:relative.
   Let op: span.onsale (de standaardbadge van WooCommerce) staat site-breed op
   display:none in awcf_algemene_stijl.css — deze badge is de vervanger. */
.awcf-loop-items .awcf-loop-item-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 2px;
    background: #2B358A;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* WooCommerce zet naast <del>/<ins> ook uitleg voor schermlezers in de prijs
   ("Oorspronkelijke prijs was: ..."). woocommerce.css wordt hier niet geladen,
   dus zonder deze regel staat die tekst zichtbaar in de tegel. */
.awcf-loop-items .awcf-loop-item-footer-price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Oude prijs gedempt en doorgestreept, actieprijs in de huisstijlkleur. */
.awcf-loop-items .awcf-loop-item-footer-price del {
    margin-right: 5px;
    color: #6b7280;
    font-weight: 400;
    text-decoration: line-through;
}

.awcf-loop-items .awcf-loop-item-footer-price ins {
    color: #2B358A;
    text-decoration: none;
}

/* --- Aanpassingen opbouw loop-item --- */

/* Producttitel: gecentreerd (ook mobiel) + huisstijlkleur. */
.awcf-loop-items .awcf-loop-item-title {
    display: block;
    width: 100%;
    text-align: center !important;
    font-size: 17px;
    color: #2B358A;
}

/* Alle tekst onder de titel (excerpt + "Alles over"-link) weg — overal. */
.awcf-loop-items .awcf-loop-item-content p {
    display: none !important;
}

/* Alle knoppen (add-to-cart plugin) in productloops: achtergrond #2B358A + geen
   radius. NIET gescoped op .awcf-loop-items, want dezelfde [aw_add_to_cart]-
   shortcode staat ook in Elementor loop-grids (.e-loop-item) op de homepage en
   archieven; deze aw-*-classes komen alléén in loop-context voor (niet op de
   single product-pagina). Dekt "Toevoegen", de info/eye-knop, én de JS-
   geïnjecteerde "Bekijk winkelwagen" (aw-view-cart-btn/view-cart-button,
   plugin-standaard groen + radius 20px). */
.aw-add-to-cart-btn,
.aw-qty-btn-wrapper-right button,
.aw-qty-btn-wrapper-right .aw-view-cart-btn,
.aw-view-product-btn,
.view-cart-button {
    background-color: #2B358A !important;
    border-color: #2B358A !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}
/* "Blijf op de hoogte" (uitverkocht) is bewust de omgekeerde knop: witte vulling
   met blauwe rand. Staat los van de regel hierboven, want dat is een <a> en geen
   <button>. Hover keert om naar de gevulde variant, net als de andere knoppen. */
.aw-qty-btn-wrapper-right .aw-notify-btn {
    background-color: #ffffff !important;
    border: 1px solid #2B358A !important;
    color: #2B358A !important;
    border-radius: 0 !important;
}

.aw-qty-btn-wrapper-right .aw-notify-btn:hover,
.aw-qty-btn-wrapper-right .aw-notify-btn:focus {
    background-color: #2B358A !important;
    border-color: #2B358A !important;
    color: #ffffff !important;
}

.aw-add-to-cart-btn:hover:not(:disabled):not(.aw-error-state),
.aw-qty-btn-wrapper-right button:hover:not(:disabled):not(.aw-error-state),
.aw-qty-btn-wrapper-right .aw-view-cart-btn:hover,
.aw-view-product-btn:hover,
.view-cart-button:hover {
    background-color: #ffffff !important;
    border-color: #2B358A !important;
    color: #2B358A !important;
}

/* "Bekijk winkelwagen" (na Toevoegen) is langer dan "Toevoegen"; iets kleinere
   tekst zodat het op één regel binnen de knop past en de tegel niet verspringt. */
.aw-view-cart-btn {
    font-size: 13px !important;
}

/* SVG-icoon in de info-knop op hover blauw (was wit -> onzichtbaar op witte hover). */
.aw-view-product-btn:hover svg,
.aw-view-product-btn:hover svg path {
    fill: #2B358A !important;
}

/* Overige radii binnen het blok ook op 0 (aantal-input + variatie-select). */
.aw-qty-btn-wrapper-left input,
.aw-product-form select {
    border-radius: 0 !important;
}

/* Attribuut-label (bv. "Size") boven de variatie-select nooit tonen — voor elk
   attribuut. (De screen-reader "Aantal"-label blijft voor toegankelijkheid.) */
.aw-product-form label:not(.screen-reader-text) {
    display: none !important;
}