/*
 * Shop features from quote 2608001 (USP's, tiered pricing, extra options, quote request,
 * bought together). Loaded after main.css (functions.php, load_css()).
 */

/* Product USP's on product tiles (inc/product-usps.php) */
.product-usps {
    margin: -4px 0 16px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dark);
}
.product-usps ul,
.woocommerce .products .product-usps ul {
    display: block; /* overrides the flex/negative margins of ".woocommerce .products ul" */
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-usps li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 4px;
}
.product-usps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5687 1.31872C13.8329 1.06727 14.1844 0.92825 14.549 0.93101C14.9137 0.933769 15.263 1.07809 15.5233 1.33351C15.7836 1.58894 15.9345 1.93549 15.9441 2.30005C15.9538 2.66461 15.8214 3.01865 15.575 3.28747L8.09374 12.6437C7.9651 12.7823 7.80984 12.8935 7.63724 12.9707C7.46464 13.0478 7.27825 13.0894 7.08921 13.0929C6.90017 13.0964 6.71237 13.0618 6.53703 12.991C6.3617 12.9203 6.20242 12.8149 6.06874 12.6812L1.10749 7.71997C0.969328 7.59123 0.858511 7.43598 0.781651 7.26348C0.704791 7.09099 0.663462 6.90477 0.660131 6.71595C0.656799 6.52714 0.691534 6.33958 0.762261 6.16448C0.832987 5.98938 0.938259 5.83031 1.07179 5.69678C1.20533 5.56324 1.36439 5.45797 1.53949 5.38725C1.7146 5.31652 1.90215 5.28178 2.09097 5.28512C2.27979 5.28845 2.466 5.32978 2.6385 5.40664C2.811 5.4835 2.96625 5.59431 3.09499 5.73247L7.02124 9.65685L13.5331 1.35998C13.5448 1.34554 13.5555 1.33177 13.5687 1.31872Z' fill='%2376C3D5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.product-usps p {
    margin: 0 0 4px 0;
}

/* Tiered pricing table on the product page (inc/tiered-pricing.php) */
.tiered-pricing {
    flex: 0 0 100%;
    order: -1; /* inside the flex row of the form, above the button */
    margin: 0 0 16px 0;
    font-size: 14px;
}
.tiered-pricing table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.tiered-pricing td {
    padding: 6px 10px;
    border-top: 1px solid rgba(27, 100, 128, .15);
    vertical-align: middle;
}
.tiered-pricing tr:first-child td {
    border-top: 0;
}
.tiered-pricing__discount,
.tiered-pricing__price {
    text-align: right;
    white-space: nowrap;
}
.tiered-pricing tr.is-active td {
    background: rgba(255, 255, 255, .7);
    font-weight: 600;
}
.tiered-pricing tr.is-active td:first-child {
    border-radius: 6px 0 0 6px;
}
.tiered-pricing tr.is-active td:last-child {
    border-radius: 0 6px 6px 0;
}

/* Extra order options above the add to cart button (inc/extra-options.php) */
.extra-order-options {
    flex: 0 0 100%;
    order: -1;
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.35;
}
.extra-order-options__title {
    font-weight: 600;
    margin-bottom: 6px;
}
.extra-order-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}
.extra-order-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    accent-color: var(--dark);
    cursor: pointer;
}
.extra-order-option__text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.extra-order-option__description {
    font-size: 13px;
    opacity: .75;
}
.extra-order-option__price {
    white-space: nowrap;
}
.extra-order-option input:checked ~ .extra-order-option__text .extra-order-option__label,
.extra-order-option input:checked ~ .extra-order-option__price {
    font-weight: 600;
}
/* Simple and variable product forms are flex rows; let the options take a full row. */
.woocommerce div.product .summary form.cart:not(.variations_form),
.summary .woocommerce-variation-add-to-cart {
    flex-wrap: wrap;
}
/* Composite: inside the grid above "Totaal". */
.summary .composite_form .extra-order-options {
    margin: 0 0 24px 0;
}

/* Quote request button + popup (inc/quote-request.php) */
.quote-request {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.summary .quote-request .quote-request__button,
.summary .quote-request .quote-request__button:hover {
    flex: 1;
    background: transparent;
    color: var(--dark);
    border: 1px solid var(--dark);
    box-shadow: none;
}
.summary .quote-request .quote-request__button:hover {
    background: rgba(255, 255, 255, .6);
}
.summary .composite_form .quote-request {
    grid-column: 1 / -1;
}

/* Generic info icon with tooltip (hover; keyboard via :focus-visible) */
.info-tip {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.info-tip__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--dark);
    border-radius: 50%;
    background: transparent;
    color: var(--dark);
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}
.info-tip__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: -10px;
    width: 260px;
    max-width: 80vw;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--dark);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 20;
}
.info-tip__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 13px;
    border: 6px solid transparent;
    border-top-color: var(--dark);
}
.info-tip:hover .info-tip__tooltip,
.info-tip__toggle:focus-visible + .info-tip__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quote-modal {
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 12px;
    background: #fff;
    color: var(--dark);
}
.quote-modal__title {
    margin: 0 0 8px 0;
}
.quote-modal__intro {
    margin: 0 0 12px 0;
    font-size: 15px;
}
.quote-modal__summary {
    margin: 0 0 20px 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--secondary);
    font-size: 14px;
    line-height: 1.45;
}
.quote-modal__product {
    font-weight: 700;
    margin-bottom: 4px;
}
.quote-modal__selection {
    margin: 0;
    padding-left: 18px;
}
.quote-modal .gform_wrapper {
    margin: 0;
}
.quote-modal .gform_wrapper.gravity-theme .gfield input.medium,
.quote-modal .gform_wrapper.gravity-theme .gfield input {
    width: 100%;
}
/* Popups above the fixed site header. */
.lity,
.lity-wrap {
    z-index: 100000;
}

/* "Andere klanten kochten ook" (inc/bought-together.php) */
.bought-together {
    padding: var(--section-spacing) 0;
}
.bought-together__title {
    margin: 0 0 24px 0;
}

/* Product filter sidebar on category pages (inc/product-filters.php) */
.product-filters {
    margin-bottom: 24px;
}
.product-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--dark);
    border-radius: 6px;
    background: #fff;
    color: var(--dark);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.product-filters__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
}
.product-filters__panel {
    padding: 20px 24px;
    border-radius: 15px;
    background: var(--secondary);
}
@media (max-width: 991.98px) {
    .product-filters__panel {
        display: none;
        margin-top: 12px;
    }
    .product-filters.is-open .product-filters__panel {
        display: block;
    }
}
/*
 * Desktop: the panel sticks to the top of the viewport. The site header hides on
 * scroll down and shows on scroll up (body.site-header-is-fixed, main.js), so the
 * panel moves along. A panel taller than the screen first scrolls along until its
 * bottom is in view (top is calculated in product-filters.js).
 */
@media (min-width: 992px) {
    .product-filters {
        --filters-top: 24px;
        position: sticky;
        top: var(--filters-sticky-top, var(--filters-top));
        transition: top .5s;
    }
    .site-header-is-fixed .product-filters {
        --filters-top: 90px;
    }
    .admin-bar .product-filters {
        --filters-top: 56px;
    }
    .admin-bar.site-header-is-fixed .product-filters {
        --filters-top: 122px;
    }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .product-filters { transition: none; }
}
.product-filters__reset {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    text-decoration: underline;
}
.product-filter + .product-filter {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(27, 100, 128, .15);
}
.product-filter__title {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 600;
}
.product-filter__options,
.woocommerce .product-filter__options {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-filter__option {
    margin: 0;
}
.product-filter__option.is-extra {
    display: none;
}
.product-filter.is-expanded .product-filter__option.is-extra {
    display: block;
}
.product-filter__option a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: var(--dark);
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
}
.product-filter__check {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--dark);
    border-radius: 4px;
    background: #fff center / 12px no-repeat;
}
.product-filter__option a:hover .product-filter__check {
    border-color: var(--primary);
}
.product-filter__option a.is-selected {
    font-weight: 600;
}
.product-filter__option a.is-selected .product-filter__check {
    background-color: var(--dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.product-filter__name {
    flex: 1;
}
.product-filter__count {
    font-size: 13px;
    opacity: .6;
}
.product-filter__more {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Product tiles next to the sidebar: 2 per row, 3 on wide screens. */
@media (min-width: 992px) {
    .products-with-filters .woocommerce ul.products li.product,
    .woocommerce .products-with-filters ul.products li.product {
        flex: 0 0 50%;
        padding: 24px 28px 40px 28px;
    }
}
@media (min-width: 1400px) {
    .woocommerce .products-with-filters ul.products li.product {
        flex: 0 0 33.33%;
    }
}

/* Info icon inside the "Offerte opvragen" button */
.summary .quote-request .quote-request__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible; /* .btn clips its content; the tooltip must stick out */
}
.info-tip--in-button .info-tip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    cursor: help;
}
.info-tip--in-button .info-tip__tooltip {
    right: -14px;
    text-transform: none;
    white-space: normal;
    letter-spacing: normal;
}
.quote-request__button:focus-visible .info-tip__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Loading state while filters/sorting/pagination update the product area */
#products {
    transition: opacity .15s ease;
}
#products.is-loading {
    opacity: .5;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    #products { transition: none; }
}

/* Result count + sorting dropdown above the products */
.woocommerce .woocommerce-result-count {
    margin: 0 0 24px 0;
    line-height: 40px;
    font-size: 15px;
}
.woocommerce .woocommerce-ordering {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px 0;
}
.woocommerce .woocommerce-ordering::before {
    content: 'Sorteren';
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}
.woocommerce .woocommerce-ordering select.orderby {
    height: 40px;
    min-width: 200px;
    padding: 0 40px 0 12px;
    border: 1px solid var(--dark);
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231B6480' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: 0;
}
.woocommerce .woocommerce-ordering select.orderby:hover {
    border-color: var(--primary);
}
.woocommerce .woocommerce-ordering select.orderby:focus-visible {
    box-shadow: 0 0 0 2px rgba(27, 100, 128, .2);
}
@media (max-width: 575.98px) {
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        float: none;
        width: 100%;
    }
    .woocommerce .woocommerce-result-count {
        margin-bottom: 8px;
    }
    .woocommerce .woocommerce-ordering select.orderby {
        flex: 1;
    }
}