.categorie-overzicht {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two equal-width columns */
    grid-template-rows: auto;
    /* Auto height rows */
    gap: 40px;
    /* Space between blocks */
    width: 100%;
}

@media screen and (max-width: 768px) {
    .categorie-overzicht {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 1024px) {
    .categorie-overzicht {
        gap: 30px;
    }
}

.category-item {
    position: relative;
    background: var(--e-global-color-a9c4377);
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px;
    min-height: 300px;
    text-decoration: none !important;
}

.category-item.large {
    grid-column: 1 / 2;
    /* Spans the full first column */
    grid-row: span 2;
    /* Spans 2 rows */
    height: auto;
    /* Adjust height to fit content */
}

.category-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all .5s ease-in-out;
}

.category-content {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, .91);
    width: calc(100% - 100px);
    padding: 20px 30px;
    backdrop-filter: blur(5px);
}

@media screen and (max-width: 1024px) {
    .category-content {
        width: 100%;
    }
}

.category-content .category-title {
    font-size: 1.5rem;
    margin-bottom: .2em;

    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-secondary-font-weight);
    text-transform: var(--e-global-typography-secondary-text-transform);
    line-height: var(--e-global-typography-secondary-line-height);
}

@media screen and (min-width: 1400px) {
    .category-item.large .category-content .category-title {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .category-content .category-title {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
}

.category-content p {
    font-size: 1rem;
    margin: 0;
}

.category-excerpt {
    opacity: 0;
    max-height: 0;
    transition: all .3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .category-excerpt {
        display: none;
    }
}

.category-content p:last-child {
    margin-bottom: -.5em;
}

.category-view-button {
    z-index: 2;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;

    background-color: var(--e-global-color-a9c4377);
    fill: var(--e-global-color-text);
    color: var(--e-global-color-text);
    border-radius: 0px 0px 0px 0px;
    padding: 19px 21px 19px 21px;
    font-family: var(--e-global-typography-3aadb66-font-family), Sans-serif;
    font-size: var(--e-global-typography-3aadb66-font-size);
    font-weight: var(--e-global-typography-3aadb66-font-weight);
    text-transform: var(--e-global-typography-3aadb66-text-transform);
    text-decoration: var(--e-global-typography-3aadb66-text-decoration);
    line-height: var(--e-global-typography-3aadb66-line-height);

    opacity: 0;
    transform: translateY(20px);
    transition: all .3s ease-in-out;
}

.category-item:hover {
    cursor: pointer;
}

.category-item:hover .category-excerpt {
    opacity: 1;
    max-height: 2000px;
}

.category-item:hover img {
    transform: scale(1.05);
}

.category-item:hover .category-view-button {
    opacity: 1;
    transform: none;
}

/* Custom layout for the first three items */
.categorie-overzicht .category-item:nth-child(1) {
    grid-column: 1;
    /* Full width of the first column */
    grid-row: span 2;
    /* Spans two rows */
}

.categorie-overzicht .category-item:nth-child(2) {
    grid-column: 2;
    /* Second column */
    grid-row: 1;
    /* First row */
}

.categorie-overzicht .category-item:nth-child(3) {
    grid-column: 2;
    /* Second column */
    grid-row: 2;
    /* Second row */
}

/* Start regular grid for other items */
.categorie-overzicht .category-item:nth-child(n+4) {
    grid-column: span 1;
    /* Default column span */
    grid-row: auto;
    /* Default row flow */
}

/* Products */
.woocommerce-loop-product__buttons {
    display: none !important;
}

.single-product .woocommerce-Price-amount bdi {
    /* margin-left: -.3em; */
}

.single-product.bundle-has-dynamic-pricing {
    .cpx-product-main-price {
        display: none;
    }
}

.products .product .price del {
    margin-right: .3em;
}

.products .product .price .from {
    display: none !important;
}

.e-woocommerce-notices-wrapper .woocommerce-message:focus {
    outline: none;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-info {
    padding: 1em 1.5em !important;
    margin-bottom: 15px;

    &:empty {
        display: none !important;
    }
}

.elementor-widget-woocommerce-checkout-page .woocommerce-privacy-policy-text p {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-product-variable table.variations th.label {
    padding-left: 0 !important;
    text-align: left !important;
}

.elementor-product-variable table.variations td.value {
    padding-right: 0 !important;
}

.elementor-product-variable table.variations th,
.elementor-product-variable table.variations td {
    background: transparent !important;
}

.elementor-product-variable table.variations select {
    border-radius: 0px;
    border: 1px solid var(--e-global-color-primary);
    color: var(--e-global-color-text);
}

/* Single product sale flash */
.elementor-widget-woocommerce-product-images span.onsale {
    background-color: var(--e-global-color-dd9d389);
    color: var(--e-global-color-657783b);
    border-radius: 0;
    left: 0;
    top: 0;
}

/* Login */
.cpx-login-link,
.cpx-logged-in {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--e-global-color-5836ff3) !important;
    text-decoration: none !important;

    font-family: var(--e-global-typography-16e35f8-font-family), Sans-serif;
    font-size: var(--e-global-typography-16e35f8-font-size);
    font-weight: var(--e-global-typography-16e35f8-font-weight);
    line-height: var(--e-global-typography-16e35f8-line-height);
}

@media screen and (min-width: 1024px) {

    .cpx-login-link,
    .cpx-logged-in {
        margin-right: 30px;
    }
}

.cpx-login-icon {
    font-size: 20px;
    width: .8em;
    height: .8em;
}

.cpx-login-text {
    font-weight: 500;
}

.cpx-username {
    font-weight: 600;
}

/* Fix elementor mini cart for mobile */
@media screen and (max-width: 1024px) {
    .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container {
        left: 0 !important;
        right: auto !important;
        top: 89px !important;
        position: fixed !important;
        width: 100% !important;
    }
}

.elementor-menu-cart__toggle_button .elementor-button-icon-qty {
    border-radius: 4px !important;
}

/* Bundles */
.bundle_button {
    display: flex;
}

/* This is the overview list on the product page */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .bundled_product {
    &.bundled_product_summary {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .bundled_product_title {
        margin-bottom: 5px;
    }

    .bundled_product_image,
    .bundled_product_images {
        width: 60px !important;
    }

    .details {
        width: calc(100% - 60px) !important;
    }

    .bundled_product_title_link {
        font-size: 18px;
        vertical-align: middle;
    }

    .bundled_product_excerpt {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 5px;
    }

    .item_title,
    .item_qty {
        font-size: 16px;
        color: var(--e-global-color-text);
        font-weight: bold;
    }

    .bundled_item_cart_details {
        .price {
            font-size: 14px;
            color: var(--e-global-color-text);
            font-weight: bold;
        }
    }

    .bundled_product_optional_checkbox {
        font-size: 0;
        color: transparent;

        .price {
            font-size: 14px;
            color: var(--e-global-color-text);
            font-weight: bold;
        }

        input {
            padding: 0 !important;
        }

        input,
        span {
            display: inline-block;
            font-size: 14px;
            color: var(--e-global-color-text);
            font-weight: bold;
        }
    }
}

.bundle_price {
    .price {
        font-size: 14px;
        color: var(--e-global-color-text) !important;
        font-weight: bold;
    }
}

/* Bundle checkout */
#order_review {
    .cart_item.bundled_table_item {
        font-size: 13px;

        .bundled-product-name,
        .bundled_table_item_subtotal {
            font-size: 13px;
            line-height: 1.2;
        }
    }
}

.elementor-menu-cart__main {
    .variation .variation-Partof {
        font-size: 12px;
        line-height: 13px;
    }
}

.elementor-menu-cart__product-remove:empty {
    display: none !important;
}

.elementor-menu-cart__products {
    .elementor-menu-cart__product {
        grid-template-columns: 50px auto;
        padding-bottom: 2px;
    }

    .elementor-menu-cart__product-image {
        width: 50px;
    }
}

/* Native add to cart, because elementor add to cart breaks when using bundles */
.single-product div.product form.cart {
    display: flex;

    &.variations_form,
    &.bundle_form,
    &.grouped_form {
        flex-direction: column;
    }

    .woocommerce-variation-add-to-cart {
        display: flex;
    }

    .single_add_to_cart_button {
        background-color: var(--e-global-color-657783b);
        flex-grow: 1;
        border-radius: 0;
        border: none;
        font-family: var(--e-global-typography-3aadb66-font-family), Sans-serif;
        font-size: var(--e-global-typography-3aadb66-font-size);
        font-weight: var(--e-global-typography-3aadb66-font-weight);
        text-transform: var(--e-global-typography-3aadb66-text-transform);
        text-decoration: var(--e-global-typography-3aadb66-text-decoration);
        line-height: var(--e-global-typography-3aadb66-line-height);
        color: var(--e-global-color-dd9d389);
        border-radius: 0px 0px 0px 0px;
        padding: 19px 21px 19px 21px;
        width: 100%;

        &:hover,
        &:focus {
            background-color: var(--e-global-color-dd9d389);
            color: var(--e-global-color-657783b);
            outline: none;
        }
    }

    /* Wrapper */
    div.quantity {
        margin-right: 15px;
    }

    input.qty {
        padding-left: 2px !important;
        padding-right: 2px !important;
        text-align: center;
        border-color: var(--e-global-color-primary) !important;
        border-width: 1px;

        &:hover,
        &:focus {
            outline: none;
            border-color: var(--e-global-color-657783b);
        }
    }

    /* Variations */
    table.variations {
        th {
            padding-left: 0;
        }

        th,
        td {
            background-color: transparent !important;
            padding-right: 0 !important;
            text-align: left;
        }

        select {
            border-radius: 0px;
            border: 1px solid var(--e-global-color-primary);
            color: var(--e-global-color-text);
            width: 100%;
            padding: 10px;
            font-size: 16px;

            &:hover,
            &:focus {
                outline: none;
                border-color: var(--e-global-color-657783b);
            }
        }
    }

    .woocommerce-variation-price {
        .price {
            color: var(--e-global-color-text);
            font-family: var(--e-global-typography-18a8e82-font-family), Sans-serif;
            font-size: var(--e-global-typography-18a8e82-font-size);
            font-weight: var(--e-global-typography-18a8e82-font-weight);
            text-transform: var(--e-global-typography-18a8e82-text-transform);
        }
    }
}

.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item td.product-name {
    max-width: 220px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item td.product-total {
    width: 150px;
}