/*
Theme Name: Feddekees
Theme URI: https://feddekees.nl/
Author: Feddekees
Description: Native WooCommerce theme for Feddekees
Version: 1.0.0
Requires PHP: 8.2
*/

/* =========================================================
   FeddeKees - Variation selectors
   ========================================================= */

.feddekees-attribute {
    margin: 0 0 24px;
}

.feddekees-attribute__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.feddekees-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* ---------------------------------------------------------
   Algemene optie
   --------------------------------------------------------- */

body .feddekees-options button.feddekees-option {
    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;

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

    min-width: 70px;
    min-height: 42px;

    margin: 0;
    padding: 9px 16px;

    border: 1px solid #d2d2d2 !important;
    border-radius: 4px !important;

    background: #fff !important;
    color: #222 !important;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

body .feddekees-options button.feddekees-option:hover {
    border-color: #222 !important;
    background: #fff !important;
    color: #222 !important;
}


/* ---------------------------------------------------------
   GESELECTEERD
   --------------------------------------------------------- */

body .feddekees-options button.feddekees-option.is-selected {
    border: 2px solid #222 !important;

    background: #222 !important;
    color: #fff !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   Hover op geselecteerde optie
   --------------------------------------------------------- */

body .feddekees-options button.feddekees-option.is-selected:hover {
    border-color: #222 !important;
    background: #222 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

body .feddekees-options button.feddekees-option:focus,
body .feddekees-options button.feddekees-option:focus-visible {
    outline: none;
}


/* ---------------------------------------------------------
   Mobiel
   --------------------------------------------------------- */

@media (max-width: 600px) {

    body .feddekees-options {
        gap: 6px;
    }

    body .feddekees-options button.feddekees-option {
        min-width: 60px;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px;
    }

}