/*
Theme Name: Vloerplus
Description: Extra styles.
Author: Vloerplus Team
Author URI: https://vloerplus.nl
Version: 1.0.0
*/

/* ======================================================================== */

/* STYLING VOOR CUSTOM PRODUCTPAGINA LAYOUT (FIGMA DESIGN)                  */

/* ======================================================================== */

.error404 .page-header, .page-id-5028977 .page-header, body .site .sub-header {
    background-color: #001539
}

.error404 .page-header.align-center .page-header-overlay {
    padding-top: 0
}

.woocommerce div.product form.cart::after, .woocommerce div.product form.cart::before {
    display: none;
}

body .button.add-to-cart-button {
    width: 100%;
}

body .component-41 .button .icon-cart-svg {
    display: flex;
    align-items: center;
}

/* -- ALGEMENE PRODUCT SUMMARY WRAPPER -- */
.vloerplus-product-summary-wrapper {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* -- BOVENSTE BLOK: TITEL, PRIJS, SPECS -- */
.product-details-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vloerplus-product-summary-wrapper .product_title {
    color: #001539;
    font-size: 40px;
    line-height: 120%;
    font-weight: 500;
    margin: 0;
}

/* Prijs Styling */
.price-prefix {
    font-size: 16px;
    color: #555;
    margin-bottom: 4px;
    display: none !important;
}

.product-price-custom, .woocommerce-variation-price .product-price-custom {
    color: #001539;
}

.product-price-custom .price-main {
    font-size: 28px;
    font-weight: 700;
}

.product-price-custom .price-decimals {
    font-size: 18px;
    font-weight: 700;
}

.product-price-custom .price-unit, .product-price-custom .price-unit-exponent {
    font-size: 14px;
    font-weight: 700;
}

.product-price-custom .price-unit {
    margin-left: 0.25rem;
}

.product-price-custom .price-unit-exponent {
    vertical-align: super;
    font-size: 10px;
}

body .search-filter-input-checkbox__label {
    font-size: 1rem;
}

body .search-filter-input-checkbox__count {
    font-size: 1rem;
}

body .search-filter-component-combobox-base__listbox-option:hover, body .search-filter-component-combobox-base__listbox-option[aria-selected="true"] {
    color: #001539;
}

/* Product Specs (Afmeting & Artikelnummer) */
.product-spec {
    font-size: 20px;
    line-height: 140%;
    font-weight: 700;
}

.product-spec .spec-label {
    color: #001539;
}

.product-spec .spec-value {
    color: #86868B;
}

.product-sku .spec-value {
    font-size: 16px;
    font-weight: 400;
    color: #001539;
}

/* -- OPTIES BLOK: VARIATIES & ADD-TO-CART -- */
.product-options .variations_form {
    display: flex;
    flex-direction: column;
    gap: 44px;    /* Ruimte tussen variaties en add-to-cart */
}

.product-options .variations {
    margin-bottom: 0;
}

/* Verberg de standaard tabel-opmaak */
.variations_form.cart th.label {
    display: none;
}

.product-options .variations, .product-options .variations tbody, .product-options .variations tr, .product-options .variations th, .product-options .variations td {
    display: block;
    border: none;
    padding: 0;
    background: transparent;
}

.product-options .variations .label, .product-options .variations .reset_variations {
    display: none !important;
}

.product-title-and-description {
    display: none;
}

.woocommerce div.product form.cart .variations {
    margin-bottom: 0;
}

.single-product .content-wrapper {
    display: flex;
    padding-top: 5rem;
    flex-direction: column;
}

.single-product .content-wrapper>section:first-child {
    padding-top: 0;
}

.single-product .ervaringen-section {
    order: 10;
}

/* -- VARIATIE SWATCH STIJLEN (FIGMA) -- */
.product-variations {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.heading3.color-label {
    font-size: 20px;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.heading3.color-label .heading-3-span {
    color: #001539;
}

.single_variation_wrap {
    width: 100%;
}

.heading3.color-label .heading-3-span2.selected-color-name {
    color: #86868B;
    margin-left: 0.5ch;
}

.swatches-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

.vloerplus-swatch-box {
    width: 80px;
    height: 80px;
    padding: 16px;
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out;
}

.vloerplus-swatch-box:hover {
    border-color: #BDBDBD;
}

.vloerplus-swatch-box.selected {
    border-color: #016FD0;
}

.vloerplus-swatch-box .swatch-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -- ADD-TO-CART & USP's -- */
.single_variation_wrap {
    margin-top: 0 !important;
}

.woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.quantity {
    margin-bottom: 0;
}

.single_add_to_cart_button {
    flex-grow: 1;
}

.product-usps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-usps p {
    margin: 0;
}

.product-usps ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-usps li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #001539;
}

/* FIX: Transparante checkmark SVG (product page USPs) */
.product-usps li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M12.4997 2.08301C6.75592 2.08301 2.08301 6.75592 2.08301 12.4997C2.08301 18.2434 6.75592 22.9163 12.4997 22.9163C18.2434 22.9163 22.9163 18.2434 22.9163 12.4997C22.9163 6.75592 18.2434 2.08301 12.4997 2.08301ZM12.4997 20.833C7.90488 20.833 4.16634 17.0945 4.16634 12.4997C4.16634 7.90488 7.90488 4.16634 12.4997 4.16634C17.0945 4.16634 20.833 7.90488 20.833 12.4997C20.833 17.0945 17.0945 20.833 12.4997 20.833Z' fill='%23001539'/%3E%3Cpath d='M10.4153 14.1528L8.02053 11.7622L6.5497 13.2372L10.4174 17.0966L17.4028 10.1112L15.9299 8.63825L10.4153 14.1528Z' fill='%23001539'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* FIX: Gevulde checkmark SVG (checkout USPs) */
.vloerplus-checkout-usps li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11 0C4.95816 0 0 4.95816 0 11C0 17.0418 4.95816 22 11 22C17.0418 22 22 17.0418 22 11C22 4.95816 17.0418 0 11 0ZM9.66879 16.0033L4.85177 11.1863L6.67459 9.36349L9.75313 12.442L15.9335 6.82378L17.6681 8.73095L9.66879 16.0033Z' fill='%23016FD0'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.vloerplus-checkout-usps .product-usps {
    gap: 1rem;
}

.vloerplus-checkout-usps .product-usps li {
    font-weight: 400;
}

.vloerplus-checkout-usps .product-usps li:nth-child(3)~li {
    display: none;
}

body #vloerplus_calculate_price_btn {
    width: 100%;
}

/* ======================================================================== */

/* STYLING VOOR VAAK SAMEN GEKOCHT (FIGMA DESIGN)                             */

/* ======================================================================== */

.vaak-samen-gekocht-section {
    padding-top: 5rem;
}

.vaak-samen-gekocht-section .section-title {
    color: var(--text-primary, #001539);
    text-align: left;
    font-size: 40px;
    line-height: 120%;
    font-weight: 500;
    margin-bottom: 40px;
}

.vaak-samen-gekocht-section .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.vaak-samen-gekocht-section .product-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    max-width: 28.25rem;
}

.vaak-samen-gekocht-section .product-card-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vaak-samen-gekocht-section .product-title {
    color: var(--donker, #001539);
    text-align: left;
    font-size: 20px;
    line-height: 140%;
    font-weight: 700;
    margin: 0;
}

.vaak-samen-gekocht-section .product-short-description {
    color: var(--donker, #001539);
    text-align: left;
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}

.vaak-samen-gekocht-section .product-image {
    background: #f1efe8;
    border-radius: 24px;
    align-self: stretch;
    flex-grow: 1;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: unset;
}

.vaak-samen-gekocht-section .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

div.product.product-type-simple .summary form.cart .button.loading.disabled, div.product:not(.wcpa_has_options) .summary form.cart .button.loading.disabled {
    color: #fff;
    background-color: #016FD0;
}

#vloerplus-calculator .button.add-to-cart-button.loaded.disabled.added:hover, #vloerplus-calculator .button.add-to-cart-button.loading.disabled.added:hover, #vloerplus-calculator .button.add-to-cart-button.loading:hover {
    background: #0E55D0 !important;
    color: #fff;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.loading::after, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.loading::after, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.loading::after, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.loading::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.loading::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.loading::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.loading::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.loading::after {
    top: 1.5rem;
}

.vaak-samen-gekocht-section .product-card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
}

body .vaak-samen-gekocht-section .product-price {
    color: var(--donker, #001539);
    padding-bottom: 0;
    padding: 0;
    font-size: 1.25rem;
}

.vaak-samen-gekocht-section .product-price .price {
    font-size: 28px;
    line-height: 150%;
    font-weight: 700;
}

.vaak-samen-gekocht-section .product-price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    font-size: 18px;
}

.vaak-samen-gekocht-section .product-add-to-cart .button {
    background: var(--blauw, #016fd0) !important;
    border-radius: 40px !important;
    padding: 16px 32px !important;
    display: flex !important;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
    color: var(--wit, #ffffff) !important;
    font-size: 16px !important;
    line-height: 150% !important;
    font-weight: 700 !important;
}

/* FIX: Winkelwagen icon (wit) voor "vaak samen gekocht" knop */
.vaak-samen-gekocht-section .product-add-to-cart .button::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M19.822 4.431C19.73 4.29808 19.6072 4.18943 19.464 4.11436C19.3209 4.0393 19.1616 4.00006 19 4H5.333L4.179 1.23C4.02769 0.865226 3.77147 0.553593 3.44282 0.334615C3.11418 0.115638 2.72791-0.00082104 2.333 4.35724e-06H0V2H2.333L7.077 13.385C7.15299 13.5672 7.28118 13.7228 7.44542 13.8322C7.60967 13.9416 7.80263 14 8 14H16C16.417 14 16.79 13.741 16.937 13.352L19.937 5.352C19.9937 5.20063 20.0129 5.03776 19.9928 4.87735C19.9728 4.71695 19.9142 4.56379 19.822 4.431ZM15.307 12H8.667L6.167 6H17.557L15.307 12Z' fill='white'/%3E%3Cpath d='M8.5 18C9.32843 18 10 17.3284 10 16.5C10 15.6716 9.32843 15 8.5 15C7.67157 15 7 15.6716 7 16.5C7 17.3284 7.67157 18 8.5 18Z' fill='white'/%3E%3Cpath d='M15.5 18C16.3284 18 17 17.3284 17 16.5C17 15.6716 16.3284 15 15.5 15C14.6716 15 14 15.6716 14 16.5C14 17.3284 14.6716 18 15.5 18Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.vaak-samen-gekocht-section .added_to_cart {
    display: none !important;
}

/* ======================================================================== */

/* STYLING VOOR M² CALCULATOR                                               */

/* ======================================================================== */

/* Hoofdcontainer van de calculator */

.component-41 {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    margin-top: 2rem;
}

.component-41 .frame-73 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    align-self: stretch;
}

.component-41 .heading {
    color: #001539;
    font-size: 20px;
    line-height: 140%;
    font-weight: 700;
}

.component-41 .frame-72 {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    align-self: stretch;
}

.component-41 .frame-8114283 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    align-self: stretch;
}

.component-41 .frame-722, .component-41 .frame-732 {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    flex: 1;
}

.component-41 .heading2 {
    color: #001539;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}

.component-41 .text-input {
    background: #ffffff;
    border-radius: 8px;
    border: 1.5px solid rgba(0, 21, 57, 0.15);
    padding: 12px;
    display: flex;
    width: 100%;
    font-size: 16px;
}

.component-41 .text-input[readonly] {
    background-color: #f1efe8;
    cursor: not-allowed;
}

/* Resultaat gebied na berekening */
.calculator-result-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;    /* Ruimte tussen info-box en prijs-summary */
}

.component-41 .frame-8114284 {
    background: #f1efe8;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
}

.component-41 .frame-8114284 .heading3 {
    color: #001539;
    text-align: left;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}

.component-41 .error-message {
    color: #D32F2F;    /* Rood voor foutmeldingen */
}

/* Prijs-summary sectie */
.component-41 .frame-8114287 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}

.component-41 .frame-8114288, .component-41 .frame-8114289 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: stretch;
}

.component-41 .frame-8114285 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.component-41 .heading4 {
    color: #001539;
    font-size: 16px;
    line-height: 150%;
}

.component-41 .heading5 {
    color: #001539;
    text-align: right;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}

.component-41 .line-28 {
    border-top: 1.5px solid rgba(0, 21, 57, 0.15);
    align-self: stretch;
    margin-top: -1.5px;
}

.component-41 .heading6 {
    color: #001539;
    text-align: right;
    font-size: 36px;
    line-height: 150%;
    font-weight: 600;
}

/* Footer van de calculator (verzending en knoppen) */
.component-41 .frame-99 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    align-self: stretch;
}

.component-41 .gratis-verzending-levering-binnen-x-werkdag {
    color: #001539;
    text-align: center;
    font-size: 14px;
    line-height: 150%;
    align-self: stretch;
}

.component-41 .button {
    background: #016fd0;
    border-radius: 40px;
    padding: 16px 32px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.component-41 .button:hover {
    background: #005bb5;
}

.component-41 .button .button2 {
    color: #ffffff;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}

.component-41 .button .icon-cart-svg {
    width: 24px;
    height: 24px;
}

/* ======================================================================== */

/* STYLING VOOR PRODUCT INFO TABS (FIGMA DESIGN)                              */

/* ======================================================================== */

.product-info-tabs-container {
    padding: 2.5rem 0;
    padding-bottom: 0;
    order: 3;
}

.product-info-tabs-container .attribute-category-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.product-info-tabs-container .content-block>p:first-child {
    margin-top: 0;
}

.product-info-tabs-container .content-block>p:last-child {
    margin-bottom: 0;
}

.product-info-tabs-container .inner {
    max-width: 810px;    /* Matching the width from the design */
    margin: 0;
    padding: 0;    /* Standard padding */
}

.product-info-tabs-nav {
    display: flex;
    flex-direction: row;
    gap: 72px;
    align-items: flex-start;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    position: relative;
    border-bottom: 1px solid #D9DCE1;
}

.product-info-tabs-nav li {
    margin: 0;
}

.product-info-tabs-nav a {
    color: var(--donker, #001539);
    text-align: left;
    font-size: 20px;
    line-height: 120%;
    font-weight: 500;
    opacity: 0.4;
    position: relative;
    padding-bottom: 8px;
    display: block;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
    margin-bottom: -1px;    /* To overlap the main border */
}

.product-info-tabs-nav a:hover {
    opacity: 0.7;
}

.product-info-tabs-nav a.active {
    opacity: 1;
    border-bottom-color: #016FD0;
}

.product-info-tab-pane {
    display: none;
}

.product-info-tab-pane.active {
    display: block;
}

#tab-beschrijving .wp-caption {
    width: 100% !important;
    text-align: left !important;
}

#tab-beschrijving .wp-caption-text {
    text-align: left;
}

/* Specific styling for content inside tabs */
.product-info-tab-pane .content-block {
    width: 100%;
}

.product-info-tab-pane section {
    padding: 0 !important;
}

.product-subtitle {
    color: var(--donker, #001539);
    text-align: left;
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin-top: -4px;    /* Adjust as needed */
}

/* ======================================================================== */

/* STYLING VOOR DOCUMENTEN TAB                                              */

/* ======================================================================== */

.product-documents-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-document-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f8f8f8;
    border-radius: 8px;
    text-decoration: none;
    color: #001539;
    transition: background-color 0.2s ease;
}

.product-document-item a:hover {
    background-color: #e9e9e9;
}

.product-document-item .doc-icon {
    flex-shrink: 0;
    width: 24px;    /* Adjust size as needed */
    height: 24px;
}

.product-document-item .doc-info {
    display: flex;
    flex-direction: column;
}

.product-document-item .doc-title {
    font-weight: 600;
}

.product-document-item .doc-meta {
    font-size: 0.875rem;
    color: #86868B;
}

/* ======================================================================== */

/* STYLING VOOR SLIDE-IN CART (FIGMA DESIGN)                                */

/* ======================================================================== */

/* Container for all items, styled like Figma's frame-72 */

.slide-in-cart-items-wrapper {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    margin-left: -1rem;
}

.slide-in-cart-items-wrapper .wcpa_edit_product {
    margin: 0;
    color: #016FD0;
    font-size: 14px;
}

.slide-in-cart-items-wrapper .wcpa_edit_product:hover {
    color: #001539;
}

/* A single item row before the divider */
.slide-in-cart-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slide-in-cart-item:last-child .slide-in-item-divider {
    display: none;    /* No divider after the last item */
}

.slide-in-item-main-content {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    position: relative;
}

/* Image container styling */
.slide-in-item-image-container {
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid #eeeeee;
    padding: 16px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.slide-in-item-image-container .slide-in-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    width: 100%;
    height: 100%;
}

/* Details wrapper (info + price) */
.slide-in-item-details-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
    align-items: flex-end;
}

.slide-in-item-main-content a.remove {
    right: 0;
    top: 0;
}

.slide-in-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Text styling based on Figma */
.slide-in-item-category {
    color: var(--donker, #001539);
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}

.slide-in-item-name, .slide-in-item-variation, .slide-in-item-price-per-unit {
    color: var(--donker, #001539);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}

.slide-in-item-price {
    color: var(--donker, #001539);
    text-align: right;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}

.slide-in-item-price .woocommerce-Price-amount {
    font-weight: 600;
}

/* Remove button styling */
.slide-in-remove-item.remove {
    position: absolute;
    top: -8px;    /* Adjust for better positioning */
    right: -8px;
    font-size: 24px;
    line-height: 1;
    width: 24px;
    height: 24px;
    text-align: center;
    text-decoration: none;
    color: #86868B !important;
}

.slide-in-remove-item.remove:hover {
    color: #001539 !important;
}

/* Divider line between items */
.slide-in-item-divider {
    border: none;
    border-top: 1.5px solid rgba(0, 21, 57, 0.15);
    margin: 0;    /* Reset margin */
}

/* Totals section styling */
.slide-in-cart-totals {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;    /* Space between total lines */
}

.slide-in-cart-totals .totals-divider {
    border: none;
    border-top: 1.5px solid rgba(0, 21, 57, 0.15);
    margin-bottom: 8px;
}

.slide-in-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #001539;
}

.slide-in-cart-grand-total {
    font-weight: 600;
    font-size: 20px;    /* Larger font for the grand total */
}

.slide-in-cart-grand-total .woocommerce-Price-amount {
    font-weight: 600;
    font-size: 20px;
}

/* ======================================================================== */

/* STYLING VOOR CROSS-SELLS IN SLIDE-IN CART                                */

/* ======================================================================== */

.slide-in-cross-sells {
    padding-right: 1rem;
}

.cross-sells-title {
    color: #001539;
    font-size: 20px;
    line-height: 120%;
    font-weight: 500;
    margin: 0 0 1.5rem 0;
}

.cross-sells-products {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cross-sell-item {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid rgba(0, 21, 57, 0.15);
}

.cross-sell-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cross-sell-item-link-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;    /* 24px */
    align-items: center;
    flex-grow: 1;
    text-decoration: none;
}

.cross-sell-item-link-wrapper:hover .cross-sell-title {
    text-decoration: underline;
}

.cross-sell-image-container {
    background: #ffffff;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cross-sell-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cross-sell-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cross-sell-sku {
    color: #001539;
    font-size: 13px;
    line-height: 150%;
    font-weight: 400;
    margin: 0 0 4px 0;
}

.cross-sell-title {
    color: #001539;
    font-size: 16px;
    line-height: 140%;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.cross-sell-price {
    color: #001539;
}

.cross-sell-price .price, .cross-sell-price .woocommerce-Price-amount {
    font-size: 16px;
    line-height: 150%;
    font-weight: 700;
}

.cross-sell-price .woocommerce-price-suffix {
    font-size: 12px;
}

.cross-sell-add-to-cart .button {
    background: #016FD0 !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: white !important;
    flex-shrink: 0;
}

.cross-sell-add-to-cart .button-text {
    display: none;
}

/* FIX: Winkelwagen icon (wit) voor cross-sell knop */
.cross-sell-add-to-cart .button::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M19.822 4.431C19.73 4.29808 19.6072 4.18943 19.464 4.11436C19.3209 4.0393 19.1616 4.00006 19 4H5.333L4.179 1.23C4.02769 0.865226 3.77147 0.553593 3.44282 0.334615C3.11418 0.115638 2.72791-0.00082104 2.333 4.35724e-06H0V2H2.333L7.077 13.385C7.15299 13.5672 7.28118 13.7228 7.44542 13.8322C7.60967 13.9416 7.80263 14 8 14H16C16.417 14 16.79 13.741 16.937 13.352L19.937 5.352C19.9937 5.20063 20.0129 5.03776 19.9928 4.87735C19.9728 4.71695 19.9142 4.56379 19.822 4.431ZM15.307 12H8.667L6.167 6H17.557L15.307 12Z' fill='white'/%3E%3Cpath d='M8.5 18C9.32843 18 10 17.3284 10 16.5C10 15.6716 9.32843 15 8.5 15C7.67157 15 7 15.6716 7 16.5C7 17.3284 7.67157 18 8.5 18Z' fill='white'/%3E%3Cpath d='M15.5 18C16.3284 18 17 17.3284 17 16.5C17 15.6716 16.3284 15 15.5 15C14.6716 15 14 15.6716 14 16.5C14 17.3284 14.6716 18 15.5 18Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

.slide-in-cart-content .cart-totals {
    display: none;
}

.slide-in-cart-panel .slide-in-cart-content {
    overflow-x: hidden;
}

.cross-sell-add-to-cart .button.added::after, .cross-sell-add-to-cart .button.loading::after {
    display: none !important;
}

.cross-sell-add-to-cart .added_to_cart {
    display: none !important;
}

/* ======================================================================== */

/* MOBIELE OPTIMALISATIES VOOR PRODUCTPAGINA                               */

/* Toegevoegd op 4 september 2025                                           */

/* ======================================================================== */
@media (max-width:768px) {

    /* --- 1. Optimalisatie Product Info Tabs --- */

    /* De container zelf, minder verticale padding */
    .product-info-tabs-container {
        padding: 2rem 0;
    }

    /* Stapel de navigatie-items verticaal in plaats van horizontaal */
    .product-info-tabs-nav {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
        margin-bottom: 1.5rem;
    }

    /* Stijl elk navigatie-item als een volledige breedte knop */
    .product-info-tabs-nav a {
        width: 100%;
        opacity: 0.7;
        padding: 1rem;
        margin-bottom: 0;
        border-bottom: 1px solid #D9DCE1;
        padding-left: unset
    }

    /* Markeer het actieve item duidelijker */
    .product-info-tabs-nav a.active {
        opacity: 1;
        border-bottom: 2px solid #016FD0;
    }

    /* Zorg ervoor dat de content-secties goed worden weergegeven */
    .product-info-tab-pane {
    }

    .product-info-tabs-container .inner {
    }

    .custom-attributes-table .attribute-category-row {
        flex-direction: column;
        gap: 1rem;
    }

    .custom-attributes-table .attribute-category, .custom-attributes-table .attribute-specifications {
        width: 100%;
    }

    /* --- 2. Optimalisatie Variatie Formulier & Swatches --- */

    /* Verminder de padding van de hoofd-wrapper op mobiel */
    .vloerplus-product-summary-wrapper {
        padding: 1.5rem;        /* 40px -> 24px */
        gap: 1.5rem;        /* 32px -> 24px */
    }

    /* Verklein de producttitel */
    .vloerplus-product-summary-wrapper .product_title {
        font-size: 28px;        /* 40px -> 28px */
    }

    /* Verklein de prijs-tekst */
    .product-price-custom .price-main {
        font-size: 24px;        /* 28px -> 24px */
    }

    /* Verklein de titel boven de kleurstalen */
    .heading3.color-label {
        font-size: 18px;        /* 20px -> 18px */
        margin-bottom: 1rem;
    }

    /* Sta toe dat de kleurstalen wrappen naar een nieuwe regel */
    .swatches-wrapper {
        flex-wrap: wrap;
        gap: 10px;
    }

    .vloerplus-swatch-box {
        width: 60px;        /* 80px -> 60px */
        height: 60px;        /* 80px -> 60px */
        padding: 8px;        /* 16px -> 8px */
    }

    /* Zorg ervoor dat de "add to cart" knop en hoeveelheid-veld goed schalen */
    .woocommerce-variation-add-to-cart {
        flex-direction: column;
        align-items: stretch;        /* Laat knoppen de volledige breedte pakken */
    }

    .single_add_to_cart_button {
        width: 100%;
    }

    .quantity {
        width: 100%;
    }

    .quantity .qty {
        width: 100%;
        text-align: center;
    }

    /* --- 3. Optimalisatie "Vaak samen gekocht" Product Grid --- */

    /* Verander de grid naar één kolom op mobiel */
    .vaak-samen-gekocht-section .products-grid {
        grid-template-columns: 1fr;        /* Stapel de product cards */
        gap: 1.5rem;        /* Iets meer ruimte tussen de cards */
    }

    /* Verminder de padding binnen elke product card */
    .vaak-samen-gekocht-section .product-card {
        padding: 1.5rem;        /* 40px -> 24px */
    }

    /* Verklein de titel van het product in de card */
    .vaak-samen-gekocht-section .product-title {
        font-size: 18px;        /* 20px -> 18px */
    }

    /* Pas de footer aan zodat de prijs en knop onder elkaar komen te staan */
    .vaak-samen-gekocht-section .product-card-footer {
        flex-direction: column;
        align-items: flex-start;        /* Lijn links uit */
        gap: 1rem;
    }

    .vaak-samen-gekocht-section .product-add-to-cart .button {
        width: 100%;        /* Maak de knop volledig breed */
    }

    body .component-41 .frame-8114283 {
        flex-direction: column;
    }

    .product-info-tabs-nav li {
        width: 100%;
    }

    body .woocommerce-product-gallery .flex-viewport .bg-image-div {
        background-size: cover;
    }

    .bg-image-div {
        background-size: cover;
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__image a {
    }

    .component-41 {
        padding: 1.5rem;
    }

    .ervaringen-section .single-column {
        padding: 1.5rem;
    }

    .slide-in-item-main-content {
        flex-direction: column;
    }

}

/* ======================================================================== */

/* STYLING VOOR SALE BADGE OP PRODUCTKAARTEN (ARCHIEF) - V2                 */

/* Toegevoegd op 4 september 2025                                           */

/* ======================================================================== */

/* Make the H2 title a flex container to position the badge below the text */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* Aligns badge to the left */
    gap: 14px;    /* Space between title text and badge */
    margin-bottom: auto;
}

.woocommerce ul.products li.product .product-inner a.woocommerce-loop-product__link {
    justify-content: flex-end;
}

/* The badge itself, styled from your Figma specs */
.product-sale-badge {
    background: #ff7e00;    /* var(--groen) */
    border-radius: 80px;
    padding: 4px 14px;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The SVG icon inside the badge */
.product-sale-badge .shoppingmode {
    width: 16.5px;
    height: 16.5px;
}

/* The "SALE" text inside the badge */
.product-sale-badge .sale-badge-text {
    color: #ffffff;    /* var(--wit) */
    font-size: 16px;
    line-height: 150%;
    font-weight: 700;
}

/* ======================================================================== */

/* CUSTOM CHECKOUT ORDER REVIEW STYLING (TEMPLATE-BASED)                    */

/* ======================================================================== */

/* Hide the original table, since our template doesn't use it. */

.woocommerce-checkout-review-order-table {
    display: none;
}

/* Main wrapper for our new order review block */
.vloerplus-checkout-review {
    width: 100%;
}

/* Heading for the order review */
.vloerplus-checkout-review h3#order_review_heading {
    color: var(--Donker, #001539);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 140%;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* The light grey container for the list of items */
.checkout-items-wrapper {
    background: #F1EFE8;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-left: unset;
    margin-bottom: 1.5rem;
}

/* Individual item styles - reusing classes from slide-in cart */
.checkout-items-wrapper .slide-in-cart-item {
    border-bottom: 1px solid rgba(0, 21, 57, 0.1);
    padding-bottom: 1rem;
}

.checkout-items-wrapper .slide-in-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.checkout-items-wrapper .slide-in-item-main-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.checkout-items-wrapper .slide-in-item-image-container {
    width: 60px;
    height: 60px;
    padding: 8px;
    border: 1px solid #EEEEEE;
    background-color: #FFFFFF;
    border-radius: 8px;
    flex-shrink: 0;
}

.checkout-items-wrapper .slide-in-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.checkout-items-wrapper .slide-in-item-details-wrapper {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    align-items: flex-start;
    gap: 0.25rem;
}

.checkout-items-wrapper .slide-in-item-info {
    font-size: 0.875rem;
}

.checkout-items-wrapper .slide-in-item-name strong {
    font-size: 1rem;
    font-weight: 700;
}

.checkout-items-wrapper .slide-in-item-price {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.9rem;
    text-align: right;
}

#order_review>.order-review-title {
    display: none;
}

/* Styling for the totals section below the items */
.cart-totals-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cart-totals-summary .cart-subtotal {
    display: none;
}

.cart-totals-summary>div, .cart-totals-summary tr {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #EBEBEB;
}

.cart-totals-summary>div:last-of-type, .cart-totals-summary tr:last-of-type {
    border-bottom: none;
}

.cart-totals-summary th, .cart-totals-summary td {
    padding: 0;
    text-align: left;
    border: none;
}

.cart-totals-summary td {
    text-align: right;
    font-weight: 600;
}

.cart-totals-summary .order-total {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1.5px solid rgba(0, 21, 57, 0.15);
}

.cart-totals-summary .order-total strong {
    font-weight: 700;
}

.woocommerce-additional-fields>h3 {
    display: none;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    padding-left: unset;
}

/* ======================================================================== */

/* STYLING FOR CHECKOUT PAYMENT METHODS WIDGET                              */

/* ======================================================================== */

.vloerplus-payment-methods-widget {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    margin-top: 1rem;    /* Space above the widget */
}

.vloerplus-payment-methods-widget .frame-8114121 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 100%;
    position: relative;
}

.vloerplus-payment-methods-widget .heading {
    color: #001539;
    text-align: left;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
    position: relative;
    align-self: stretch;
}

.vloerplus-payment-methods-widget .frame-8114144 {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    flex-wrap: wrap;
}

.vloerplus-payment-methods-widget .frame-8114144 img {
    height: 30px;
    width: auto;
    max-width: 44px;
    object-fit: contain;
}

/* ======================================================================== */

/* PREVENT CHECKOUT LAYOUT SHIFT (FOUC)                                     */

/* ======================================================================== */

/* By default, hide the checkout form to prevent the layout jump */

body.woocommerce-checkout form.woocommerce-checkout {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
}

/* When the 'checkout-ready' class is added by JavaScript, fade the form in */
body.woocommerce-checkout.checkout-ready form.woocommerce-checkout {
    opacity: 1;
    visibility: visible;
}

/* --- Custom Radio Buttons (Aanhef) - Figma Style for Default WC Markup --- */
#billing_salutation_field .woocommerce-input-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Hide the actual radio input */
#billing_salutation_field .input-radio {
    display: none;
}

/* Style the label as the clickable element */
#billing_salutation_field label.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding-left: 32px;    /* Space for the custom radio button */
    font-size: 16px;
    line-height: 150%;
    margin: 0;
}

/* FIX: Custom outer circle for radio button */
#billing_salutation_field label.radio::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    border: 1.5px solid rgba(0, 21, 57, 0.2);    /* Unselected state from Figma */
    background-color: #fff;
    transition: border-color 0.2s;
}

/* Change the border color when the radio is checked */
#billing_salutation_field .input-radio:checked+label.radio::before {
    border-color: #016fd0;    /* Selected state border from Figma */
}

/* FIX: Inner blue dot when the radio is checked */
#billing_salutation_field .input-radio:checked+label.radio::after {
    content: '';
    position: absolute;
    left: 4px;    /* (20px width - 12px dot) / 2 */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: #016fd0;    /* Selected state inner dot from Figma */
}

/*
==========================================================================
PRODUCT CARD HOVER EFFECT
- Applies to both standard product grid and "Vaak samen gekocht" cards.
==========================================================================
*/

/* 1. Set up the transition on the base element */

ul.products li.product .product-inner, .vaak-samen-gekocht-section .product-card {
    box-shadow: 0 2px 10px rgba(0, 21, 57, 0.05);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* 2. Apply the shadow and lift effect on hover */
ul.products li.product .product-inner:hover, .vaak-samen-gekocht-section .product-card:hover {
    transform: translateY(-8px);    /* Lifts the card up slightly */
    box-shadow: 0 12px 28px rgba(0, 21, 57, 0.15), 0 5px 10px rgba(0, 21, 57, 0.1);    /* A soft, layered shadow */
}

/*
==========================================================================
PRODUCT OVERVIEW - SEO & LINKS SECTION
==========================================================================
*/
.seo-links-section {
    padding: 7.5rem 0;
    background-color: #F1EFE8;    /* Match theme background */
}

.seo-links-section .inner {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;    /* 60px gap between text and links */
}

.seo-links-section .inner:after {
    display: none;
}

/* SEO Text Area */
.seo-text-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.375rem;    /* 54px gap */
}

.seo-text-column h3 {
    color: #001539;
    font-size: 1.5rem;    /* 24px */
    line-height: 140%;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 2rem;    /* 32px */
}

.seo-text-column p {
    color: #001539;
    font-size: 1.125rem;    /* 18px */
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}

/* Links Area */
.seo-links-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 4rem;    /* Responsive gap */
}

.links-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;    /* 16px */
}

.links-column ul li a {
    color: #001539;
    font-size: 1.125rem;    /* 18px */
    line-height: 150%;
    font-weight: 400;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.links-column ul li a:hover {
    color: #016FD0;    /* Your theme's blue color */
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width:1279px) {
    .seo-links-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }

}

@media (max-width:767px) {
    .seo-text-container, .seo-links-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .seo-links-section {
        padding: 4rem 0;
    }

}

/*
==========================================================================
CUSTOM STYLING FOR SEARCH & FILTER PRO DROPDOWNS
==========================================================================
*/

/* 1. Style for the dropdown pop-up list (the <ul> element) */

.search-filter-component-combobox-base__listbox {
    border-radius: 1rem !important;    /* 16px */
    border: 1px solid #EBEBEB !important;
    background: #FFF !important;
    box-shadow: 0px 8px 24px 0px rgba(0, 21, 57, 0.10) !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem !important;
    max-height: 250px;
    overflow-y: auto;
}

/* 2. Style for individual options in the list (the <li> elements) */
.search-filter-component-combobox-base__listbox-option {
    border-radius: 0.5rem;    /* 8px */
    padding: 0.75rem 1rem;
    color: #001539;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

/* FIX: Hover and selected states for options (was broken aria-selected selector) */
.search-filter-component-combobox-base__listbox-option:hover,
.search-filter-component-combobox-base__listbox-option[aria-selected="true"] {
    background-color: #F1EFE8;    /* Your theme's light background color */
}

/*
==========================================================================
PRICE RANGE SLIDER AS A DROPDOWN
==========================================================================
*/

/* 1. Make the main container for the price filter relative */

.search-filter-field--type-range {
    position: relative;
}

/* 2. Style the new clickable header we will create with JS */
.price-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5rem;
    padding: 0.5rem 0.625rem 0.5rem 1.125rem;
    border: 1px solid #fff;
    color: #001539;
    background-color: #fff;
    cursor: pointer;
    user-select: none;
    height: 2.5rem;
    transition: border-color 0.2s ease;
}

.price-range-header:hover {
    border-color: #016FD0;    /* Theme blue */
}

.price-range-header span {
    font-weight: 700;
    font-size: 1rem;
}

.price-range-header .search-filter-icon {
    transition: transform 0.2s ease;
}

/* Rotate the arrow when the dropdown is open */
.price-range-header.active .search-filter-icon {
    transform: rotate(180deg);
}

body .search-filter-component-range-slider__range-text {
    justify-content: space-between;
}

/* 3. Style the slider content area to act as a pop-up */

/* ======================================================================== */

/* CUSTOM CHECKOUT FORM STYLING TO MATCH FIGMA (V2)                         */

/* ======================================================================== */

/* --- Main Form Wrapper --- */

.vloerplus-billing-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --- Row Wrapper --- */
.vloerplus-billing-form-wrapper .inputs {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

/* --- Specific Grid for Address Fields --- */
.vloerplus-billing-form-wrapper .address-inputs {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
}

/* --- Individual Input Wrapper --- */
.vloerplus-billing-form-wrapper .input {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.vloerplus-billing-form-wrapper .input.full-width {
    flex-basis: 100%;
}

.woocommerce form .vloerplus-billing-form-wrapper .form-row {
    padding-top: 0;
    width: 100%;
}

/* --- Labels --- */
.vloerplus-label {
    font-size: 16px;
    line-height: 150%;
    font-weight: 500;
    color: #000000;
}

.vloerplus-label .vloerplus-required {
    color: #016fd0;
    font-weight: 500;
}

.frame-8114058 .vloerplus-label {
    margin-bottom: 8px;
}

/* --- Input Fields --- */
.vloerplus-billing-form-wrapper .input-text, .vloerplus-billing-form-wrapper .select2-container .select2-selection--single {
    background: #ffffff;
    border-radius: 8px;
    border: 1.5px solid rgba(0, 21, 57, 0.15) !important;
    padding: 12px !important;
    height: auto !important;
    line-height: 1.5 !important;
    transition: border-color 0.3s ease;
    width: 100%;
}

.vloerplus-billing-form-wrapper .input-text:focus, .vloerplus-billing-form-wrapper .select2-container--open .select2-selection--single {
    border-color: #016fd0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Custom Radio Buttons (Aanhef) --- */
.frame-8114057 {
    display: flex;
    gap: 20px;
}

.vloerplus-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vloerplus-radio-option .radio-input {
    display: none;
}

.vloerplus-radio-option .radio-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
}

.vloerplus-radio-option .radio-label .radio-custom {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 21, 57, 0.2);
    background-color: #fff;
    position: relative;
}

.vloerplus-radio-option .radio-input:checked+.radio-label .radio-custom {
    border-color: #016fd0;
}

/* FIX: Inner dot for custom radio option */
.vloerplus-radio-option .radio-input:checked+.radio-label .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #016fd0;
}

/* --- Custom Checkboxes (Create Account etc.) --- */
.create-account-checkbox, .woocommerce-form-row.ship-to-different-address {
    margin-top: 24px;
}

.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-size: 16px;
    color: #000;
}

.woocommerce-form__label-for-checkbox .input-checkbox {
}

.woocommerce-form__label-for-checkbox span {
    line-height: 1.5;
    padding-left: 0;
}

/* FIX: Checkbox unchecked state - empty box with border */
.woocommerce-form__label-for-checkbox span::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #001539;
    background-color: #fff;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.woocommerce-form__label-for-checkbox {
    position: relative;
}

.woocommerce-form__label-for-checkbox input {
    opacity: 0;
}

#shipping-methods-mirror ul#shipping_method li label {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#shipping-methods-mirror ul#shipping_method li label .amount {
    color: var(--Blauw, #016FD0);
    text-align: right;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;    /* 1.5rem */
}

.shipping_labels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shipping_label+span {
    font-weight: 400;
}

body #ship-to-different-address-checkbox {
    width: 1rem;
    margin: 0;
}

/* FIX: Checkbox checked state - filled with checkmark SVG */
.woocommerce-form__label-for-checkbox input:checked+span::before {
    background-color: #001539;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6L5 9L10 3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.woocommerce form .form-row .input-checkbox {
    margin: 0;
    margin-left: 0;
    margin-right: 1rem;
    width: 1rem;
}

/* ======================================================================== */

/* CUSTOM RADIO BUTTON STYLING FOR SHIPPING METHODS                         */

/* ======================================================================== */

/* FIX: Hide the default radio button (was broken selector with color code) */

.woocommerce-shipping-methods li input[type="radio"] {
    display: none;
}

/* Style the label to be clickable and make space for the custom radio */
.woocommerce-shipping-methods li label {
    display: flex;
    align-items: center;
    position: relative;    /* Needed for pseudo-elements */
    padding-left: 32px;    /* Space for the custom radio */
    cursor: pointer;
}

/* Create the custom outer circle (default state) */
.woocommerce-shipping-methods li label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625rem;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 21, 57, 0.2);
    background-color: #fff;
    transition: border-color 0.2s;
}

/* Create the inner dot (hidden by default) */
.woocommerce-shipping-methods li label::after {
    content: '';
    position: absolute;
    left: 4px;    /* Centered inside the 20px circle */
    top: 0.625rem;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #016FD0;
    opacity: 0;    /* Hidden by default */
    transition: opacity 0.2s ease;
}

.search-filter-component-combobox__actions-input {
}

.custom-filter-container .search-filter-style--choice-select .search-filter-component-combobox__actions-input {
    display: block;
    max-width: unset;
}

.custom-filter-container .search-filter-style--choice-select .search-filter-component-combobox__actions-input::placeholder {
    display: block;
}

/* 1. Change the border color of the outer circle to blue */
.woocommerce-shipping-methods li.shipping-active label::before {
    border-color: #016FD0;
}

/* 2. Make the inner dot visible */
.woocommerce-shipping-methods li.shipping-active label::after {
    opacity: 1;
}

/* --- Responsive Styles --- */
@media (max-width:768px) {
    .vloerplus-billing-form-wrapper .inputs, .vloerplus-billing-form-wrapper .address-inputs {
        flex-direction: column;
        display: flex;
        gap: 28px;
        grid-template-columns: 1fr;
    }

    .frame-8114057 {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
    }

    .vloerplus-billing-form-wrapper .input {
        width: 100%;
    }

}

/*
==========================================================================
FINAL CODE: PRODUCT OVERVIEW WITH STYLED SIDEBAR FILTERS
This code handles both the layout (moving filters to the side)
and the visual styling of the sidebar and its contents.
==========================================================================
*/

/* --- DESKTOP STYLES (screen widths 1024px and wider) --- */
@media (min-width:1024px) {

    /* == LAYOUT RULES == */

    /* 1. Make the main shop container a flexbox layout */
    body.archive.woocommerce .shop-content-wrapper {
        display: flex;
        gap: 2.5rem;
        align-items: flex-start;
        margin-top: 1.5rem;
    }

    /* 2. Make the product list take the remaining space */
    body.archive.woocommerce .search-filter-query {
        flex: 1;
    }

    /* == STYLING RULES == */

    /* 3. Style the main sidebar container to look like a card */
    body.archive.woocommerce .custom-filter-container {
        flex: 0 0 320px;        /* This sets the sidebar width */
        margin-bottom: 0;
        background-color: #ffffff;        /* */
        padding: 2.5rem;        /* */
        border-radius: 1.5rem;        /* */
        box-shadow: 0 2px 10px rgba(0, 21, 57, 0.05);        /* */
    }

    /* 4. Adjust the title within the sidebar */
    body.archive.woocommerce .custom-filter-title {
        font-size: 1.75rem;
        font-weight: 500;
        margin-bottom: 0;
        padding-bottom: 1.5rem;
        border-bottom: 0;
    }

    /* 5. Stack the filter items vertically in the sidebar */
    body.archive.woocommerce .custom-filters {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
        margin-bottom: 0;
    }

    /* 6. Style individual filter dropdowns for better contrast */
    body.archive.woocommerce .search-filter-style--choice-select>div, body.archive.woocommerce .price-range-header {
        width: 100%;
        background-color: #F1EFE8;        /* */
        border: 1.5px solid rgba(0, 21, 57, 0.15);        /* */
        transition: border-color 0.2s ease;
    }

    body.archive.woocommerce .search-filter-style--choice-select>div:hover, body.archive.woocommerce .price-range-header:hover {
        border-color: #016FD0;        /* */
    }

    /* 7. Make the price slider pop-up match the sidebar width */
    body.archive.woocommerce .search-filter-component-range-slider {
        width: 100%;
    }

    /* 8. Style the "Clear Filters" button to be less prominent */
    body.archive.woocommerce .search-filter-field--control-type-reset .search-filter-input-button {
        background: transparent;
        color: #86868B;        /* */
        border: none;
        text-decoration: underline;
        font-weight: 400;
        padding: 0;
        margin-top: 0rem;
        justify-content: flex-start;
        height: auto;
    }

    body.archive.woocommerce .search-filter-field--control-type-reset .search-filter-input-button:hover {
        color: #001539;
        background: transparent;
        border: 0;
        outline: 0;
    }

    body.archive.woocommerce .search-filter-field--control-type-reset .search-filter-input-button:focus {
        border: 0;
        outline: 0;
    }

}

/* --- MOBILE & TABLET STYLES (screen widths up to 1023px) --- */
@media (max-width:1023px) {

    /* Revert to the original stacked layout */
    body.archive.woocommerce .shop-content-wrapper {
        display: block;
    }

    body.archive.woocommerce .custom-filter-container {
        margin-bottom: 0rem;
    }

}

body .wp-site-blocks:has(>.wp-block-woocommerce-coming-soon) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

body.home .purple-bg-last .single-column:last-child {
    display: none;
}

@media (min-width:1024px) {
    body.home .category-nav.radius-columns.purple-bg-last .columns-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}