/*
Theme Name: WMW-HG
Description: WooCommerce theme for WMW-HG
Author: Gullström & CO
Template: flatsome
Version: 3.0.0
*/

@font-face {
    font-family: "FunnelDisplaySemibold";
    src: url('fonts/funnel-display/FunnelDisplay-SemiBold.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: "GeologicaLight";
    src: url('fonts/funnel-display/Geologica-Light.woff2') format('woff2');
    font-display: swap;
}

.grecaptcha-badge {
    visibility: hidden;
}

:root {
    --padding-size-xs: 16px;
    --padding-size-sm: 30px;
    --padding-size: 60px;
    --padding-size-lg: 90px;
    --padding-size-xlg: 120px;
    --padding-size-xxl: 260px;
    --body-font-size-sm: .9rem !important;
    --body-font-size: 1rem !important;
    --body-font-size-lg: 1.2rem !important;
    --h1-size: 4rem !important;
    --h2-size: 2.5rem !important;
    --h3-size: 1.8rem !important;
    --h4-size: 1.5rem !important;
    --h5-size: 1.2rem !important;
    --h6-size: 1rem !important;
    --btn-size-lg: 1rem 2rem !important;
    --btn-size: 0.75rem 1.5rem !important;
    --btn-size-sm: 0.5rem 0.75rem !important;

    --body-font-family: "GeologicaLight", sans-serif!important;
    --heading-font-family: "FunnelDisplaySemibold", sans-serif!important;
    --font-weight: normal!important;

}

@media only screen and (max-width: 849px) {
    :root {
        --padding-size-sm: 8px!important;
        --padding-size: 16px!important;
        --padding-size-lg: 30px!important;
        --padding-size-xlg: 60px!important;
        --padding-size-xxl: 90px!important;
        --body-font-size: 1rem!important;
        --h1-size: 2rem!important;
        --h2-size: 1.5rem!important;
        --h3-size: 1.25rem!important;
        --h4-size: 1rem!important;
        --h5-size: 0.75rem!important;
        --h6-size: 0.70rem!important;
        --btn-size: 0.75rem 1.5rem!important;
        --btn-size-sm: 0.5rem 1rem!important;
    }
}

/*************** Typograhy  ***************/

body {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--font-weight);
    line-height: normal;

    & p,
    & span {
        & a {
            text-decoration: underline!important;
        }
    }

    & button,
    & .button,
    & .button span {
        font-family: var(--heading-font-family);
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight);
    text-transform: uppercase;
    line-height: normal;
}

h1 {font-size: var(--h1-size);}
h2, .h2, h3.h2 {font-size: var(--h2-size);}
h3, .h3, h2.h3 {font-size: var(--h3-size);}
h4, .h4 {font-size: var(--h4-size);}
h5, .h5 {font-size: var(--h5-size);}
h6, .h6 {font-size: var(--h6-size);}

.sr-only {
    display: none;
}

.upper p, .upper {
    font-family: var(--heading-font-family);
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.text-color-black {color: black!important;}
.text-color-white {color: white!important;}
/*************** Global paddings  ***************/
.pa-sm {padding: var(--padding-size-sm) !important;}
.pa {padding: var(--padding-size) !important}
.pa-lg {padding: var(--padding-size-lg) !important;}
.pa-xlg {padding: var(--padding-size-xlg) !important;}
.py-sm {padding-top: var(--padding-size-sm) !important; padding-bottom: var(--padding-size-sm) !important;}
.py {padding-top: var(--padding-size) !important; padding-bottom: var(--padding-size) !important;}
.py-lg {padding-top: var(--padding-size-lg) !important; padding-bottom: var(--padding-size-lg) !important;}
.py-xlg {padding-top: var(--padding-size-xlg) !important; padding-bottom: var(--padding-size-xlg) !important;}
.py-xxl {padding-top: var(--padding-size-xxl) !important; padding-bottom: var(--padding-size-xxl) !important;}
.pz-sm {padding-left: var(--padding-size-sm) !important; padding-right: var(--padding-size-sm) !important;}
.pz {padding-left: var(--padding-size) !important; padding-right: var(--padding-size) !important;}
.pz-lg {padding-left: var(--padding-size-lg) !important; padding-right: var(--padding-size-lg) !important;}
.pz-xlg {padding-left: var(--padding-size-xlg) !important;  padding-right: var(--padding-size-xlg) !important;}
.pt {padding-top: var(--padding-size)}
.pt-lg {padding-top: var(--padding-size-lg) !important;}
.pt-xlg {padding-top: var(--padding-size-xlg)!important;}
.pt-xxl {padding-top: var(--padding-size-xxl)!important;}
.pl {padding-left: var(--padding-size)!important;}
.pr {padding-right: var(--padding-size)!important;}
.pb {padding-bottom: var(--padding-size)!important;}
.pb-lg {padding-bottom: var(--padding-size-lg)!important;}
.pb-xlg {padding-bottom: var(--padding-size-xlg)!important;}
.pb-xxl {padding-bottom: var(--padding-size-xxl)!important;}
.mb-0, .mb-0 p {margin-bottom: 0 !important;}
.mb-sm {margin-bottom: var(--padding-size-sm) !important;}
.mb {margin-bottom: var(--padding-size) !important;}
.mb-lg {margin-bottom: var(--padding-size-lg) !important;}
.mb-xlg {margin-bottom: var(--padding-size-xlg) !important;}
.m-0, .m-0 p {margin: 0 !important;}
.my-sm {margin: var(--padding-size-sm) 0 !important;}
.my {margin: var(--padding-size) 0 !important;}
.my-lg {margin: var(--padding-size-lg) 0 !important;}

/*************** Buttons  ***************/
.button:not(.icon, .back-to-top), .wpcf7-submit {
    padding: var(--btn-size-lg) !important;
    line-height: 1 !important;
    min-height: unset !important;
    border-radius: 999px !important;
    font-size: var(--body-font-size) !important;

    & span {
        line-height: 1;
    }
}

.back-to-top {
    &:hover {
        background: var(--color-lilac) !important;
        border-color: var(--color-lilac);
    }
}

.button, a {
    transition: all 0.3s ease-in-out;
}

.woocommerce .add-request-quote-button.button, .woocommerce .add-request-quote-button-addons.button, .yith-wceop-ywraq-button-wrapper .add-request-quote-button.button, .yith-wceop-ywraq-button-wrapper .add-request-quote-button-addons.button {
    font-size: var(--body-font-size) !important;
}


/* Button colors */
.button {
    &.is-color-lilac{
        color: #000000;
    }
    &.is-color-olive {
        color: #000000;
    }
}


.is-form, button.is-form, button[type=submit].is-form, input[type=button].is-form, input[type=reset].is-form, input[type=submit].is-form {
    background-color: unset;
    border: unset;
    color: unset;
    font-weight: unset;
    overflow: unset;
    position: relative;
    text-shadow: unset;
    text-transform: unset;
}

/*************** Forms  ***************/
input, select, textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--font-weight) !important;
    padding-left: 22px !important;
    border:solid 1px #000000 !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}
input, select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select {
    border-radius: 99px !important;
}

.woocommerce-additional-fields__field-wrapper textarea,
.wpcf7-form textarea {
    border-radius: 20px !important;
    padding-left: 22px !important;
}

table, table th, table td {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
}

.required_field.fl-label {
    padding-left: 10px !important;
}

.woocommerce-invalid input, input.wpcf7-not-valid {
    border: solid 2px var(--color-terracotta) !important;
    background: #fff0f0 !important;
}

.contact-form-section {
    background-color: var(--color-beige);
}

/********* Icons ***********/
         .icon-box path, .icon-box-img svg {
            fill: transparent !important;
        }


/*************** Header & Navigation  ***************/
.header {
    & .header-bottom {
        background: var(--fs-color-success);
        & .nav a {
            color: #000000;
        }
        & .nav>li:not(:last-of-type) {
            margin-right: var(--padding-size-sm);
        }
    }
    & .nav {
        & li {
            & a {
                font-family: var(--heading-font-family);
                font-size: var(--body-font-size);
                color: #000000;
                &:hover {
                    opacity: 0.4;
                }
            }
        }
        &.nav-left:has(.header-search-form) {
            padding: 0px var(--padding-size);
        }
    }
    & .header-search-form {
        width: 100%;
    }
}

.ux-menu-link__icon+.ux-menu-link__text {
    text-transform: uppercase;
}

.sub-menu.nav-dropdown {
    border: none !important;
}
.menu-dropdown {
    & .submenu-row {
    margin: 0 auto !important;
    }
}

.off-canvas-left .mfp-content, .off-canvas-right .mfp-content:not(.off-canvas-cart) {
    background: var(--fs-color-primary) !important;
    opacity: 1 !important;


}
.mfp-content {
    height: 100% !important;
}

.mobile-sidebar {
    color: #ffffff !important;
    & .menu-item a {
    color: #ffffff !important;
    font-family: var(--heading-font-family);
    font-size: var(--body-font-size);

    }
    & .children a{
        font-family: var(--body-font-family) !important;
    }
}

.header-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-cart-icon[data-icon-label]:after {
  position: absolute;
  top: -8px;
  right: -8px;
}

.header-main.stuck .header-cart-icon[data-icon-label]:after,
.header-main.is-sticky .header-cart-icon[data-icon-label]:after {
  top: -8px;
}

/************ Woocommerce message *************/
.woocommerce-message {
    position: fixed;
    top: 190px;
    width: fit-content;
    height: fit-content;
    background: var(--fs-color-alert);
    padding: var(--padding-size-xs);
    z-index: 999;
}

/* Tillbaka till shoppen link */
.wc-backward,
.return-to-shop a,
.woocommerce-button.wc-backward,
.button.wc-backward,
.yith-ywraq-before-table-wc-backward {
    font-family: var(--body-font-family) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--fs-color-primary) !important;
    min-height: unset !important;
    line-height: normal !important;
    text-transform: none !important;
    box-shadow: none !important;

    &:hover {
        opacity: 0.7;
        box-shadow: none !important;
        background: none !important;
    }
}


/*************** Shopping cart, checkout  ***************/
/* Cart floating right */
.woocommerce-cart {
    & .woocommerce.row.row-large.row-divided {
        padding: var(--padding-size);
    }

}


#cart-popup {
    & .price-wrapper {
        opacity: 1;
    }
}

a.icon-remove, a.remove {
            color: var(--color-terracotta);
}

.ux-quantity.buttons_added {
    display: flex !important;
    align-items: center;
    gap: 5px;
    flex-direction: row !important;

    & .ux-quantity__button.button {
        width: 35px !important;
        height: 35px !important;
        padding: 0 !important;
        border-radius: 50% !important; /* Override the 0 radius */
        border: 2px solid var(--primary-color, #000) !important; /* Override all border properties */
        font-size: 18px;
        font-weight: bold;
        background: transparent !important;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        position: relative !important;

        &:hover {
            background: var(--primary-color, #000) !important;
            color: white !important;
            transform: scale(1.1);
        }
    }

    & .input-text.qty {
        width: 30px !important;
        height: 35px !important;
        text-align: center;
        border: none !important;
        border-radius: 5px !important;
        font-size: 16px;
        outline: none;
        font-weight: 600;
        transition: all 0.3s ease-in-out;
        border-radius: 0px !important;
        font-size: 24px !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;

        &:focus {
            outline: none;
            border-color: var(--primary-color, #000) !important;
        }
    }

    & input[type="number"]::-webkit-inner-spin-button,
    & input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    & input[type="number"] {
        -moz-appearance: textfield;
    }
}

/* Align quantity selector to right only in quote list */
.ywraq-wrapper .ux-quantity.buttons_added,
#yith-ywrq-table-list .ux-quantity.buttons_added {
    justify-content: flex-end !important;
    margin-left: auto;
    width: fit-content;
}

/* Mobile quantity selector vertical - only for quote list */
@media only screen and (max-width: 849px) {
    .ywraq-wrapper .ux-quantity.buttons_added,
    #yith-ywrq-table-list .ux-quantity.buttons_added {
        flex-direction: column !important;
        gap: 10px;
    }
}

.woocommerce-form-coupon{
    max-width: 1440px;
    margin: auto;
    border: none;
}


.woocommerce-form-coupon-toggle {
    padding-top: var(--padding-size-sm);
    & a {
        color: var(--fs-color-primary);
    }
}

label[for="billing_country"] {
    display: none;
}

#billing_country_field .woocommerce-input-wrapper,
#shipping_country_field .woocommerce-input-wrapper,
#country_field .woocommerce-input-wrapper {
    display: block;
    padding: 12px 22px;
    border: solid 1px #d1d1d1;
    border-radius: 99px;
    background-color: #f7f7f7;
    margin-bottom: 1em;
}

#billing_country_field .woocommerce-input-wrapper strong,
#shipping_country_field .woocommerce-input-wrapper strong,
#country_field .woocommerce-input-wrapper strong {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--font-weight);
    color: #000000;
}

/******** Quote list ***********/
.ywraq-wrapper {
    max-width: 1000px;
    margin: auto;
    padding: var(--padding-size);
    & textarea {
        border-radius: 20px;
    }
    & .button {
        background-color:transparent;
        border:none !important;
        color: #fff;
        font-family: var(--heading-font-family) !important;
    }
}

/******** Request a Quote Form - Match Checkout Styling ***********/
.yith-ywraq-mail-form-wrapper {
    max-width: 1000px;
    margin: auto;
    padding: 0 !important;

    & h3 {
        font-family: var(--heading-font-family);
        font-size: var(--h3-size);
        text-transform: uppercase;
        margin-bottom: var(--padding-size-xs);
    }

    /* Form flexbox layout */
    & form {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    /* Form field wrapper styling */
    & .form-row {
        flex: 1 1 100%;
        margin-bottom: 0;
        padding: 0;
        position: relative;

        &.form-row-wide {
            padding-top: 0;
        }

        /* Name fields side by side with 50/50 width */
        &#first_name_field,
        &#last_name_field {
            flex: 1 1 calc(50% - 0.5rem);

            &:first-of-type {
                margin-right: 1rem;
            }
        }

        /* Label styling to match fl-label */
        & label {
            display: block;
            font-family: var(--body-font-family);
            font-size: var(--body-font-size);
            margin-bottom: 0;
            padding-left: 10px;
            font-weight: normal;
            color: #000000;

            & .required {
                color: var(--color-terracotta, #ff0000);
            }
        }

        /* Input styling to match fl-input */
        & input[type="text"],
        & input[type="email"],
        & input[type="tel"] {
            width: 100% !important;
            font-family: var(--body-font-family) !important;
            font-size: var(--body-font-size) !important;
            font-weight: var(--font-weight) !important;
            padding: 12px 22px !important;
            border: solid 1px #000000 !important;
            border-radius: 99px !important;
            box-shadow: none !important;
            background-color: #ffffff !important;
            transition: all 0.3s ease-in-out;

            &:focus {
                outline: none;
                border-color: var(--fs-color-primary, #000000) !important;
            }

            &::placeholder {
                color: #666 !important;
            }
        }

        /* Select styling to match fl-select */
        & select {
            width: 100% !important;
            font-family: var(--body-font-family) !important;
            font-size: var(--body-font-size) !important;
            font-weight: var(--font-weight) !important;
            padding: 12px 22px !important;
            border: solid 1px #000000 !important;
            border-radius: 99px !important;
            box-shadow: none !important;
            background-color: #ffffff !important;
            transition: all 0.3s ease-in-out;
            appearance: none;
            background-repeat: no-repeat;
            background-position: right 20px center;
            padding-right: 45px !important;

            &:focus {
                outline: none;
                border-color: var(--fs-color-primary, #000000) !important;
            }
        }

        /* Textarea styling to match fl-textarea */
        & textarea {
            width: 100% !important;
            font-family: var(--body-font-family) !important;
            font-size: var(--body-font-size) !important;
            font-weight: var(--font-weight) !important;
            padding: 12px 22px !important;
            border: solid 1px #000000 !important;
            border-radius: 20px !important;
            box-shadow: none !important;
            background-color: #ffffff !important;
            resize: vertical;
            min-height: 80px;
            transition: all 0.3s ease-in-out;

            &:focus {
                outline: none;
                border-color: var(--fs-color-primary, #000000) !important;
            }

            &::placeholder {
                color: #666 !important;
            }
        }
    }

    /* Submit button styling */
    & .raq-send-request-row {
        & .button {
            background-color: var(--fs-color-primary) !important;
            border: none !important;
            color: #fff !important;
            font-family: var(--heading-font-family) !important;
            padding: var(--btn-size-lg) !important;
            border-radius: 999px !important;
            font-size: var(--body-font-size) !important;
            transition: all 0.3s ease-in-out;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    /* Select2 wrapper styling (if select2 is active) */
    & .select2-container {
        width: 100% !important;

        & .select2-selection {
            height: auto !important;
            padding: 12px 22px !important;
            border: solid 1px #000000 !important;
            border-radius: 99px !important;
            background-color: #ffffff !important;

            & .select2-selection__rendered {
                padding: 0 !important;
                line-height: normal !important;
            }

            & .select2-selection__arrow {
                height: 100% !important;
                right: 20px !important;
            }
        }
    }

    /* Hide Select2 default placeholder styling if needed */
    & .select2-selection__placeholder {
        color: #999 !important;
    }
}

/* Mobile responsive */
@media only screen and (max-width: 849px) {
    .yith-ywraq-mail-form-wrapper {
        padding: 0;

        & h3 {
            padding: 0;
            margin-left: 0;
            margin-right: 0;
        }

        & .form-row {
            padding: 0;
            margin: 0;

            & label {
                padding-left: 10px;
                margin: 0;
            }
        }

        & .raq-send-request-row {
            padding: 0;

            & .button {
                margin: 0;
            }
        }
    }
}


/*************** Page heroes  ***************/
.subpage-hero {
    background-color: var(--color-beige);
    & .hero-text-indent {
        border-color: #000000 !important;
        margin: 0 !important;
    }
}

.hero-text-indent {
    padding-left: var(--padding-size-xlg);
    padding-right: var(--padding-size);
    border-left: solid #ffffff 2px;
    margin-bottom: var(--padding-size);
}

@media only screen and (max-width: 849px) {
    .subpage-hero {
        & .hero-text-indent {
            padding-right: 0;
            padding-left: 0 !important;
            border-left: none;
        }

        & .col-inner {
            padding: 0 !important;
        }
    }
}

/*************** Frontpage  ***************/
.frontpage-hero {
    height: calc(100vh - 90px) !important;
    min-height: fit-content !important;

}

.frontpage-hero-box {
    background: var(--fs-color-primary);
    position: unset;
    padding: var(--padding-size-lg) !important;
    .box-row {
    padding-bottom: var(--padding-size-lg);
    & > .col {
        padding: 0 !important;
    }
    &.row-full-width {
        max-width: 1440px !important;
    }
    }
    & .hero-box-column {
        padding: 0;
    }
    &.row.row-full-width {
            max-width: calc(1410px + var(--padding-size-xlg) * 2) !important;
    }
    & > .col {
        max-width: 1440px;
        margin: 0 auto;
    }
}


.copyright-text{
    font-size: 20px;
    text-align: right;
    z-index: 10;
}

.frontpage-hero-box-row img,
.frontpage-hero-box-row .img-inner {
  width: 100%;
  height: auto;
}

.frontpage-usp-row {
    border-bottom: solid #ffffff 1px;
    border-top: solid #ffffff 1px;
    row-gap: var(--padding-size);
    margin: auto !important;
    & .frontpage-usp-row p {
        font-size: var(--body-font-size-lg);
        font-weight: var(--font-weight);
    }
    & .usp-column {
    padding: var(--padding-size-sm) 0 !important;
        & .col-inner{
            width: fit-content;
            margin: auto !important;
        }
    }
    & .icon-box-img img, .icon-box-img svg {
        padding: 0 !important;
        fill: transparent !important;

    }
    & .icon-box-text {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 850px) and (max-width: 1440px) {
    .frontpage-hero {
        height: fit-content !important;
        & h1 {
            font-size: 54px;
        }
        & .box-row {
                padding-bottom: var(--padding-size) !important;
        }
        & .copyright-text {
            display:none;
        }
    }

}

@media only screen and (max-width: 849px) {
    .frontpage-hero {
        height: fit-content !important;
        padding: 0px !important;
        &.button {
            margin: auto !important;
        }
        &.py {
            padding:0 !important;
        }
        & .frontpage-hero-box {
            padding: var(--padding-size-lg) !important;
            padding-top: var(--padding-size) !important;
            & .box-row {
                margin-top: -20px !important;
            }
            & .hero-text-column {
                padding-top: 0 !important;
                text-align: center;
                & .button {
                    margin: 0 !important;
                }
                & .hero-text-indent {
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                    border-left: none !important;
                    text-align: center !important;
                }
            }
            & .image-column img {
                width: 80%;
                padding-bottom: var(--padding-size);
            }
            & .icon-box {
                display: flex;
                flex-flow: row;
                width: 100%;
                & .icon-box-text {
                    padding-left: var(--padding-size-sm);
                }
                & .icon-box-img {
                    width: fit-content !important;
                    & .icon {
                        width: fit-content;
                        & svg {
                            width: 36px;
                        }
                    }
                }
            }
        }
        & .frontpage-usp-row {
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px 0px;
            & .usp-column {
                padding: 0 !important;
                & > .col-inner {
                    margin: 0 !important;
            }
        }
    }
}
}



/*************** Category page ***********/

/* FacetWP Pagination */
.facetwp-pager-wrapper {
    display: flex;
    justify-content: center;
    padding: var(--padding-size) 0;
}

.facetwp-pager {
    display: flex;
    gap: 10px;
    align-items: center;
}

.facetwp-page {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    border: 2px solid var(--fs-color-primary);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--heading-font-family);
    font-size: var(--h5-size);
    line-height: 1 !important;
    color: var(--fs-color-primary);
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    padding: 0 !important;
    margin: 0;
    text-align: center;
    box-sizing: border-box;

    &:hover:not(.active) {
        background: var(--fs-color-primary);
        color: #ffffff;
    }

    &.active {
        background: var(--fs-color-primary);
        color: #ffffff;
        pointer-events: none;
    }

    &.next,
    &.prev {
        min-width: auto;
        width: auto;
        height: auto;
        border: none;
        font-size: 1.5rem;
        padding: 0 5px;

        &:hover {
            background: transparent;
            color: var(--fs-color-secondary);
        }
    }
}

.filter-section {
    background: var(--fs-color-success);
    padding: var(--padding-size-xs);
    & input, select {
        border: none !important;
    }
    & input.facetwp-search {
        border-radius: 999px;

    }
    .facetwp-facet.facetwp-facet-fritextskning.facetwp-type-search {
        & .facetwp-icon {
            opacity: 1;
        }
        & .facetwp-icon:before {
            background: url("https://wermlandsform.se/wp-content/uploads/2025/10/BxSearch.svg") no-repeat;
            position: absolute;
            right: 12px;
            top: 5px;
        }
    }

    & h2 {
        margin-bottom: 0 !important;
        width: fit-content;
        font-size: var(--h4-size);
    }
    & .filter-row {
        display: flex;
        flex-direction: row;
        gap: var(--padding-size-sm);
        align-items: center;
        & * {
            margin: 0 !important;
        }
        & .filter-items {
            display: flex;
            gap: var(--padding-size-sm);
            & select {
                border-radius: 999px;
            }
        }
    }
}

.facetwp-facet-fritextskning .facetwp-icon,
.facetwp-facet-fritextskning .facetwp-icon::before,
.facetwp-facet-fritextskning .facetwp-icon::after {
  animation: none !important;
  transform: none !important;
}

@media screen and (min-width: 850px) {
    .category-hero {
        min-height: 400px;
    }
}

@media screen and (max-width: 849px) {
    .filter-section {
        padding: var(--padding-size-lg) var(--padding-size-xs);
        & .filter-row {
            flex-direction: column;
            align-items: flex-start;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            & h2 {
                font-size: var(--h3-size);
            }

            & .facetwp-type-search {
                width: 100%;
                & .facetwp-input-wrap {
                    width: 100%;
                }
            }

            & .filter-items {
                width: 100%;
                flex-direction: column;

                & .facetwp-facet {
                    width: 100%;

                    & select {
                        width: 100%;
                    }
                }
            }
        }
    }
    .category-products-section {
        padding: var(--padding-size-lg);
        & .products {
            gap: var(--padding-size-lg) !important;
        }
        & .product-small {
            padding: 0 !important;
        }
    }
}


/*************** Product page  ***************/

/* Hide variation price inside the form - price is shown in product-price-container */
.single-product .single_variation_wrap .woocommerce-variation.single_variation {
    display: none !important;
}

/* Add to cart and quote buttons side by side - Simple products */
.single-product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--padding-size-xs) !important;
}

.single-product form.cart .yith-ywraq-add-to-quote {
    flex: 0 0 auto !important;
}

.single-product form.cart .clear {
    display: none !important;
}

/* Add to cart and quote buttons side by side - Variable products */
.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--padding-size-xs) !important;
}

.single-product .single_variation_wrap .yith-ywraq-add-to-quote {
    flex: 0 0 auto !important;
}

.single-product .single_variation_wrap .clear,
.single-product .single_variation_wrap > .yith-ywraq-add-to-quote + .clear {
    display: none !important;
}

/* Variation label styling */
.single-product .variations th.label label {
    font-size: var(--body-font-size) !important;
    font-family: var(--body-font-family) !important;
}

/* Reset variations link styling */
.single-product .variations .reset_variations {
    font-size: var(--body-font-size) !important;
    font-family: var(--heading-font-family) !important;
    color: var(--color-lilac) !important;
    opacity: 1 !important;
}

.woo-selected-variation-item-name {
    display: none !important;
}

.product-info-hero {
    & .product-price-container {

        & span.amount {
            font-family: var(--heading-font-family);
            font-size: var(--h3-size);
        }

    }
    & .single_add_to_cart_button {
        background-color: var(--color-lilac);
        color: #000000;
    }
    & .ux-quantity.buttons_added {
            flex-basis: 100%;
        }
    & .accordion {
        display: flex;
        flex-direction: column;
        gap: var(--padding-size-xs);
        & .toggle {
            position: unset;
            margin: 0;
        }
        & .accordion-inner {
            padding: var(--padding-size-sm);
        }
        & .accordion-item {
            background: var(--color-beige);
            position: relative;
        }
        & .accordion-title {
            padding: var(--padding-size-xs);
            background:var(--fs-color-primary);
            font-family: var(--heading-font-family);
            text-transform: uppercase;
            color: #ffffff;
            &:hover {
                color: var(--fs-color-secondary);
            }
        }
        & td.woocommerce-product-attributes-item__value {
            color: #000000;
        }


    }
}
.product-info-hero {
    background: var(--color-beige);

    & .tab-panels {
        background: #ffffff;
        border: none;
        border-radius: 0px 0px 0px 130px;
        padding: 70px;
    }
}
.product-section {
    border: none;
    margin-top: -200px;
}

.product-info-hero {
  position: relative;
  overflow: visible;
}

.product-info-hero .section-content {
  position: relative;
  z-index: 1;
}

.single_variation_wrap {
    display: flex;
    flex-direction: row;
    gap: var(--padding-size-xs);
    & .woocommerce-variation-add-to-cart, form.cart {
        width: unset !important;
        gap: var(--padding-size-xs);
}
}
.woocommerce.single-product .product .yith-ywraq-add-to-quote {
    flex:unset;
}

.woocommerce .add-request-quote-button.button, .woocommerce .add-request-quote-button-addons.button, .yith-wceop-ywraq-button-wrapper .add-request-quote-button.button, .yith-wceop-ywraq-button-wrapper .add-request-quote-button-addons.button {
    background: transparent !important;
    border: solid 2px var(--color-lilac) !important;
    color: #000000 !important;
    &:hover {
        background: var(--color-lilac) !important;
        color: #000000 !important;
    }
}

/* Remove uppercase from product attributes */
.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
    text-transform: none !important;
}

.woocommerce-product-attributes td.woocommerce-product-attributes-item__value,
.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p {
    text-transform: none !important;
}



@media only screen and (max-width: 849px) {

    .product-info-hero .tab-panels {
        padding: var(--padding-size-lg) !important;
        padding-bottom: var(--padding-size-xlg) !important;
    }

    .product-section {
        margin-top: 0 !important;
        padding: var(--padding-size-lg) !important;
    }
    .nav-tabs>li.active>a {
            background: var(--fs-color-primary) !important;
            color: #ffffff !important;
    }
    .nav-tabs>li>a {
        background:var(--fs-color-success);
        color: #000000 !important;
    }
    .description_tab a , .additional_information_tab a, .reviews_tab a {
        font-size: var(--body-font-size) !important;
        font-family: var(--heading-font-family) !important;
    }

    .single_add_to_cart_button,
    .add-request-quote-button,
    .yith-ywraq-add-to-quote {
        width: 100% !important;
    }

}



/********** Featured products row ***********/

@media screen and (max-width: 849px) {
    .featured-products-row,
    .related-products-wrapper {
        padding: var(--padding-size-lg) 0px !important;
        & .product-small.col {
            padding: 0px var(--padding-size-lg) !important;
        }
    }

}

/*************** Product card  ***************/
.product-small {
    display: flex;
    flex-direction: column;
    & .box {
        height: 500px;
    }

    & .col-inner {
        background-color: #ffffff;

        & .product-text-box {
            padding: var(--padding-size-xs);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        & .box-text-footer {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: auto;
            flex-wrap: wrap;
            align-items: center;

            & .button {
                margin: 0;
            }

            & .product-cta-row {
                display: inline-flex;
                flex-wrap: wrap;
                gap: 10px;
                align-items: center;
                justify-content: space-between;
                margin-top: var(--padding-size-xs);
            }
        }
    }

    & .box-image {
        position: relative;
        margin: 0 !important;
        height: 100%;

        & img {
            transition: all ease-in-out .4s;

            &:hover {
                transform: scale(1.2);
            }
        }
    }

    & .box-text-products h3 {
        font-size: var(--h5-size);
    }

    & .amount {
        margin-bottom: 0 !important;
        font-family: var(--heading-font-family);
        font-size: var(--h5-size);
    }

    & .add-to-cart-button {
        background: transparent;
        width: fit-content;
        padding: 0 !important;
        border: none;

        & svg {
            color: var(--fs-color-secondary);
            width: 30px;
            transition: all 0.3s ease-in-out;

            &:hover {
                color: var(--fs-color-primary) !important;
            }
            & path {
                fill: var(--fs-color-secondary) !important;
            }
        }

        &.button:hover {
            box-shadow: unset;

            & > svg {
                color: var(--fs-color-secondary);
            }
        }
    }

    & .button {
        padding: var(--btn-size-sm);
        font-size: var(--body-font-size-sm);
    }

    & .swatch__color {
        height: 30px;
        width: 30px;
        display: flex;
        border-radius: 999px;
    }
}

.product-small .product-image img {
    transition: opacity 0.2s ease;
}

.product-small .swatch {
    cursor: pointer;
}

.bg-white .product-text-box {
    background: var(--fs-color-success);
}


@media only screen and (max-width: 849px) {
    .product-small {
        & .box-text-products h3, .amount {
            font-size: var(--h3-size);
        }
    }
    .slider-nav-reveal .flickity-prev-next-button.next {
        right: 5px !important;
    }
    .slider-nav-reveal .flickity-prev-next-button.previous {
        left: 5px !important;
    }
}


/*************** Product Swatches - Interactive ***************/
.swatch-wrapper {
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: var(--padding-size-xs);
    right: var(--padding-size-xs);
}

.swatch {
    align-items: center;
    border-radius: 999px;
    box-shadow: 0 0 0 1px #d5d5d5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: relative;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;

    &:hover:not(.swatch--out-of-stock) {
        transform: scale(1.08);
    }

    &--active {
        transform: scale(1.05);

        &:hover {
            transform: scale(1.08);
        }
    }

    &--out-of-stock {
        cursor: not-allowed;
        opacity: 0.4;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(0, 0, 0, 0.5);
            transform: translateY(-50%) rotate(-45deg);
        }
    }

    &--color,
    &--image {
        overflow: hidden;
        border-radius: 999px;
    }

    &--color {
        & .swatch__color {
            transition: transform 0.25s ease;
        }

        &:hover:not(.swatch--out-of-stock) .swatch__color {
            transform: scale(1.1);
        }
    }

    &--image {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

        & img {
            transition: transform 0.25s ease;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &:hover:not(.swatch--out-of-stock) img {
            transform: scale(1.15);
        }
    }

    &--label {
        background: #f5f5f5;
        padding: 8px 14px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &:hover:not(.swatch--out-of-stock) {
            background: #e8e8e8;
        }

        &.swatch--active {
            background: #000;
            color: #fff;
        }

        & .swatch__label {
            transition: color 0.2s ease;
            font-size: 14px;
            line-height: 1;
        }
    }
}

/************** My Account ************/
.account-login-inner {
    max-width: 800px;
    margin: auto;
    padding: var(--padding-size);
}

.woocommerce-MyAccount-content {
    max-width: 1000px;
    margin: auto;
    background: var(--color-beige);
    padding: var(--padding-size);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    & .dashboard-links {
        margin-top: auto;
    }
    & a {
        color:var(--fs-color-primary);
    }
    & .woocommerce-MyAccount-navigation-link {
        margin:0;
        & a {
            color: white;
            font-family: var(--heading-font-family);
            background: var(--fs-color-primary);
        }
    }
}

@media only screen and (max-width: 849px) {
    .account-login-inner {
        padding: var(--padding-size-lg) !important;
        & .woocommerce-Input.woocommerce-Input--text.input-text {
            margin-bottom: 0 !important;
        }
    }
}


/*************** Sections  ***************/
.two-col-section {
    & .box-row {
        justify-content: space-between;
    }
    &.box-row {
        justify-content: space-between;
    }
}
.half-bg-left {

    & .section-bg {
        width: calc(50% - 60px);
        height: auto;
    }
}

.half-bg-right {

    & .section-bg {
        left: calc(50% + 60px);
        width: calc(50% - 60px);
        height: auto;
    }
}

@media only screen and (max-width: 849px) {
    .half-bg-right, .half-bg-left {
        flex-direction: column;
        padding-top: 0 !important;
        & .section-bg {
            flex-basis: 100%;
            width: 100% !important;
            position: relative !important;
            left: 0 !important;
            right: 0 !important;
            aspect-ratio: 16 / 10;
            margin-bottom: 30px !important;
            transform: none !important;
        }
    }
}

/* Category row */
.category-boxes-row {
    margin-bottom: var(--padding-size-xlg);
    margin-top: -220px;
    & > .col {
        transition: 0.2s ease-in-out;
    }
    & > .col:hover {
            filter: brightness(0.6);
    }
    & .dark .is-divider {
        background: #ffffff !important;
    }

    & .box-text {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding: var(--padding-size) var(--padding-size-sm);
        & .box-text-inner {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            & .category-text-upper {
                font-family: var(--heading-font-family);
                text-transform: uppercase;
                font-size: var(--h5-size);
            }
            & .is-divider {
                height: 25%;
                width: 2px;
                background: #000000;
            }
        }

        & h3, & p {
            position: relative;
            z-index: 1;
            pointer-events: none;
        }
    }

    & .box-image img {
        position: relative;
        left: 100px;
        height: 400px;
    }

    & .box.has-hover {
        position: relative;

        & .box-image > a::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 10;
        }
    }

    /* Alternating background colors */
    & .col:nth-child(4n+1) .col-inner {
        background: var(--fs-color-primary);
        & img { top: -200px; }
    }

    & .col:nth-child(4n+2) .col-inner {
        background: var(--fs-color-alert);
        & img { top: 100px; }
    }

    & .col:nth-child(4n+3) .col-inner {
        background: var(--fs-color-success);
        color: black !important;
        & img { top: -200px; }
    }

    & .col:nth-child(4n+4) .col-inner {
        background: var(--color-terracotta);
        & img { top: 100px; }
    }
}

@media only screen and (max-width: 1400px) {
    .category-boxes-row {
        margin-top: -120px !important;
        & .box-text {
            padding: var(--padding-size-sm) !important;
            & h3 {
                font-size: var(--h4-size) !important;
            }
        }
        & .box-image img {

        }
    }
}

@media screen and (max-width: 849px) {
    .category-boxes-row {
        margin-top: -60px !important;
        .box-text {
            justify-content: center !important;
            .box-text-inner {
                padding: var(--padding-size-sm) !important;
            }
        }

        & > .col { padding: 0 !important; }

        & img {
            height: 200px !important;
            bottom: -70px !important;
            top: unset !important;
        }
    }
}


/* Radius background left */
.clear:after, .clearfix:after, .container:after, .row:after {
    display: none;
}
:root{
  --container: 1665px !important;
  --pad: clamp(16px, 4vw, 48px);
}


.radius-bg-left .container{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad);
  position: relative;
  z-index: 1;
}

.radius-bg-left{
  position: relative;
}
.radius-bg-left::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: calc((100vw - min(var(--container), 100vw)) / 2);
  right: 0;
  background: var(--color-beige);
  border-bottom-left-radius: 320px;
  z-index: 0;
}

.radius-bg-right .container{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad);
  position: relative;
  z-index: 1;
}

.radius-bg-right{
  position: relative;
}
.radius-bg-right::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: 0;
  right: calc((100vw - min(var(--container), 100vw)) / 2);
  background: var(--color-beige);
  border-bottom-right-radius: 320px;
  z-index: 0;
}

@media only screen and (max-width: 849px) {
    .radius-bg-left::before {
        border-radius: 0px 0px 0px 100px;
    }
    .radius-bg-right::before {
        border-radius: 0px 0px 100px 0px;
    }
    .radius-bg-left, .radius-bg-right {
        padding-bottom: var(--padding-size-xlg) !important;
    }

    .two-col-section .box-row {
        gap: var(--padding-size-lg) 0;
    }
}

/*************** Policy pages  ***************/
.policypage-row{
    max-width: 1000px !important;
}

/*************** Rows & Columns  ***************/
.row.align-equal .fh-banner {
    min-height: 100%;
}


/*************** Boxes ***************/

.col {
    padding-bottom: 0;
}

/********** Banners ****************/

.images-overlapping .img {
        border-radius: 999px !important;
        overflow: hidden;
}

/*************** Accordions  ***************/
.accordion {

    .accordion-title {
        border-top: none;
    }

    .accordion-title.active {

    }

    .toggle {
        left: auto;
        right: 0;
    }
}

/*************** Subpage  ***************/
.subpage-title {
    min-height: 400px;
}

/************* Contact page ***********/
.contact-channels-row {
    margin-top: -110px;
    & .col-inner {
        min-height: 240px;
        display: flex;
        align-items: center;
        padding: var(--padding-size-sm);
    }
    .icon-box-img svg {
        color: var(--color-alert) !important;
    }
}
.contact-box {
    & .icon-box {
        z-index: 999;
    }
    & .col-inner {
        position: relative;
        overflow: hidden;
    }
    &:nth-child(4n+1) .col-inner {
        background: var(--fs-color-primary);
        & .contact-box-image {
            position: absolute;
            overflow: hidden;
            top: -210px;
            width: 300px !important;
            right: -40px;
        }
    }

    &:nth-child(4n+2) .col-inner {
        background: var(--fs-color-alert);
        & .contact-box-image {
            position: absolute;
            overflow: hidden;
            top: 40px;
            width: 300px !important;
            right: -40px;
        }
    }

    &:nth-child(4n+3) .col-inner {
        background: var(--color-terracotta);
                & .contact-box-image {
            position: absolute;
            overflow: hidden;
            top: -210px;
            width: 300px !important;
            right: -40px;
        }
    }
}


@media only screen and (max-width: 849px) {
    .contact-channels-row {
        margin-top: 0 !important;
        & .contact-box > .col-inner {
            min-height: 140px !important;
            padding: var(--padding-size-sm) var(--padding-size-sm) !important;
        }
    }
    .contact-box:not(:last-of-type) {
        margin-bottom: 20px;
    }
    .contact-box {
        & .icon-box {
            padding: var(--padding-size-sm);
        }
    }
}

@media only screen and (max-width: 1024px) and (min-width: 850px) {
    .contact-box {
        & .icon-box {
            padding: var(--padding-size-sm);
        }
    }
}
/*************** Footer  ***************/
.footer-section {
    background: var(--fs-color-primary);
    color: #ffffff;
    & p a {
        color: #ffffff;
    }
    & .social-icons i{
        color: #ffffff;
    }
    & a:hover, a:hover i {
        color: var(--color-lilac) !important;
    }
}

.absolute-footer {
    background: var(--fs-color-primary);
    color: #ffffff;
}

@media only screen and (max-width: 1400px) {
    .footer-section {
        & .col {
            padding-top: var(--padding-size-lg) !important;
        }
    }

}

/*************** Contact Form 7  ***************/
.wpcf7 {

    & input[type=text], input[type=tel], input[type=email], textarea {
        box-shadow: none!important;
    }

    & input:focus, textarea:focus {
        box-shadow: none!important;
    }

    & textarea {
        resize: none!important;
    }
}

.cf-turnstile {
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 65px !important;
    margin-bottom: 1em;
}

/*************** CookieYes  ***************/
.cky-switch {
    input[type="checkbox"] {
        &::before {
            background-color: #fff !important;
            border: solid 1px #767676 !important; 
        }

        &:checked::before {
            background-color: var(--fs-color-primary) !important; 
        }
    }
}

.cky-btn {
    &.cky-btn-accept {
        background-color: var(--fs-color-primary) !important;
        border: solid 2px var(--fs-color-primary) !important;
        color: #fff !important;
    }

    &.cky-btn-reject {
        background-color: transparent !important;
        border: solid 2px var(--fs-color-primary) !important;
        color: var(--fs-color-primary) !important;
    }

    &.cky-btn-customize {
        background-color: var(--color-lilac) !important;
        border: solid 2px var(--color-lilac) !important;
        color: #000 !important;
    }
}