/*
 * Algemene Styles — haircompanyprofessional.nl
 *
 * LET OP: platte CSS, geen nesting. WP Rocket heeft op deze site zowel
 * minify_css als minify_concatenate_css als remove_unused_css aanstaan; de
 * bundel gaat door een minifier die niet op geneste CSS te vertrouwen is en
 * een fout daar breekt de CSS van de hele site.
 */

/* =============================================================
 *  Variabele producten — attribuutlabel boven de waarde
 *
 *  Hoort bij de override:
 *  themes/allroundweb-child/woocommerce/single-product/add-to-cart/variable.php
 *
 *  Die override vervangt WooCommerce's <table class="variations"> — waarin het
 *  label in een smalle kolom naast de waarde staat — door deze flex-opzet.
 *  Zelfde structuur en CSS als op haarmarkt.nl, zodat beide webshops er
 *  gelijk uitzien.
 * ============================================================= */

.aw-variations-flex {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 10px;
}

.aw-variations-flex .aw-label-variations {
    width: 25%;
}

.aw-variations-flex .aw-value {
    width: 100%;
}

/* Tablet en kleiner: label op volle breedte, geen tussenruimte */
@media screen and (max-width: 1024px) {
    .aw-variations-flex {
        gap: 0;
    }

    .aw-variations-flex .aw-label-variations,
    .aw-variations-flex .aw-value {
        width: 100%;
    }
}

/* =============================================================
 *  Hoofdprijs verbergen bij variabele producten
 *
 *  De prijs staat bij variabele producten al bij de keuze zelf: onder de
 *  radio's (.aw-cda-radio-price) of per kleurregel (.aw-cda-kleur-price).
 *  De hoofdprijs erboven is dan dubbelop en toont bovendien de doorgestreepte
 *  adviesprijs niet, wat bij een actieprijs verwarrend leest.
 *
 *  #aw-productPrijs is het CSS-ID op de prijs-widget in het Elementor
 *  single-product-sjabloon. Zelfde regel als op haarmarkt.nl.
 * ============================================================= */

body:has(.elementor-product-variable) #aw-productPrijs {
    display: none;
}

/* Verberg de "Wissen"-link in de variatiekiezer.
 *
 * De keuze wordt bij deze opzet al gestuurd door de radio's en de kleurregels;
 * WooCommerce's eigen reset-link hangt er los onder het subtotaal en voegt niets
 * toe. !important omdat WooCommerce hem via JS op display:inline zet.
 * Zelfde regel als op haarmarkt.nl. */

a.reset_variations {
    display: none !important;
}