:root {
    --form-control-color: rebeccapurple;
    --radio-background-nocheck: white;
    --radio-background-check: #f4f4f4;
    --radio-border: #ececec;
    --radio-checkmark: #2bb04a;
    --radio-checkmark-outline: #e5e7eb;
    --radio-checkmark-background: white;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

/** Styling Custom Swatch Titles **/
.custom_swatch_title {
    display: flex;
    margin-left: var(--space-s);
    font-size: var(--step--1);
}

html #fkcart-modal .fkcart-quick-view-drawer .fkcart-form-input-wrap {
    flex-direction: column;
    align-items: inherit;
}

.custom_swatch_title .mcp_selected_attribute {
    margin-left: var(--space-xs);
}

/** Styling Custom Swatch **/

.label_qty+.label_qty {
    margin-top: var(--space-xs);
}

.label_qty {
    font-weight: normal;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
    border: solid 1px var(--radio-border);
    border-radius: 0.3em;
    padding: var(--space-2xs) var(--space-s);
    background-color: var(--radio-background-nocheck);
    cursor: pointer;
    align-items: center;
    transition: 200ms box-shadow ease-in-out;
}

.woocommerce .qty_wrapper input[type="radio"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: var(--radio-checkmark-background);
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 0.5em;
    height: 0.5em;
    border: 0.15em solid transparent;
    border-radius: 50%;
    /* transform: translateY(0.4em); */
    display: grid;
    place-content: center;

    outline: max(2px, 0.15em) solid var(--radio-checkmark-outline);
    outline-offset: max(2px, 0.15em);
}

.woocommerce .qty_wrapper input[type="radio"]:hover {
    border: 0.15em solid transparent;
    box-shadow: inherit;
}

.woocommerce .qty_wrapper input[type="radio"]:checked {
    background: inherit;
}

.qty_wrapper input[type="radio"]::before {

    content: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath d='M2.253,6.218L0,9.205C0,9.205 5.613,13.145 7.245,15.928C7.271,15.832 9.522,16 9.522,16C9.313,13.869 10.808,6.44 15.18,1.159L13.953,0C13.953,0 8.876,4.072 6.761,10.703C6.763,10.698 4.303,7.864 2.253,6.218Z' style='fill:rgb(43,176,74);fill-rule:nonzero;'/%3e%3c/svg%3e");
    scale: 0;
    width: var(--step-2);
    height: var(--step-2);
    -ms-transform: translate(0.03rem, 0.07rem);
    -webkit-transform: translate(0.03rem,
            0.07rem);
    -moz-transform: translate(0.03rem,
            0.07rem);
    -o-transform: translate(0.03rem,
            0.07rem);
    transform: translate(0, calc(-4.5*var(--f-2)));
    transition: 200ms scale ease-in-out;
}

.label_qty.selected {
    background: var(--radio-background-check);
    border: 2px solid var(--radio-checkmark);
    box-shadow: 0px 3px 10px var(--shade-trans-30);
}

.qty_wrapper label.selected input[type="radio"]::before {
    scale: 1;
}

/*  Thumbnail swatches styling */

.label_thumbnail {
    border-radius: 50%;
    padding: 3px;
}

.thumbnail {
    width: var(--space-xl);
    height: var(--space-xl);
    display: block;
    border-radius: 50%;
    background-size: var(--space-xl);
    box-sizing: content-box;
}

.thumbnail_wrapper label.selected {
    box-shadow: 0 0 0 2px var(--primary);
}

.thumbnail_wrapper {
    display: flex;
    align-items: center;
}

.thumbnail_wrapper>*+* {
    margin-left: var(--space-s);
}

.thumbnail_wrapper input[type=radio] {
    display: none;
}

/*  Color swatches styling */
.label_color {
    border-radius: 50%;
    padding: 3px;
}

.color {
    width: var(--space-xl);
    height: var(--space-xl);
    display: block;
    border-radius: 50%;
    background-size: var(--space-xl);
    box-sizing: content-box;
}

.color_wrapper label.selected {
    box-shadow: 0 0 0 2px var(--primary);
}

.color_wrapper {
    display: flex;
    align-items: center;
}

.color_wrapper>*+* {
    margin-left: var(--space-s);
}

.color_wrapper input[type=radio] {
    display: none;
}

/*  Options swatches styling */

.label_options {
    border-radius: 4px;
    padding: 3px;
}

.options {
    padding: var(--space-3xs) var(--space-xs);
    display: block;
    border-radius: 4px;
    box-sizing: content-box;
    background: white;
}

.options_wrapper label.selected {
    box-shadow: 0 0 0 2px var(--primary);
}

.options_wrapper {
    display: flex;
    align-items: center;
}

.options_wrapper>*+* {
    margin-left: var(--space-s);
}

.options_wrapper input[type=radio] {
    display: none;
}

/* Product Add On */
html .woocommerce input.mcp_not_valid {
    border: 2px solid var(--primary);
}