/*
CSS onderverdeling
Welke pagina's / globaal: PDP?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

:root {
    --addon-product-option-image-width: 48px;
    --addon-product-option-image-width-desktop: var(--addon-product-option-image-width);
    --addon-product-option-image-width-tablet: var(--addon-product-option-image-width);
    --addon-product-option-image-width-mobile: var(--addon-product-option-image-width);
}

/*-------- Productinfo Top --------*/
#productinfo_previous_next {
    --prevnext-padding-block-start: var(--st-spacing-2xs);
    --prevnext-padding-block-end: var(--st-spacing-sm);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-block: var(--prevnext-padding-block-start) var(--prevnext-padding-block-end);
}
.productinfo_previous-next {
    display: inline-flex;
    gap: var(--st-spacing-xs);
    justify-content: flex-end;
}

.productinfo_container {
    --gutter-min: 1rem;
    --gutter-preferred: 4%;
    --gutter-max: 4rem;
    --gutter: clamp(var(--gutter-min), var(--gutter-preferred), var(--gutter-max));
    display: grid;
    grid-template-columns: repeat(2, max(calc(50% - calc(var(--gutter) / 2))));
    column-gap: var(--gutter);
}

@media screen and (max-width: 767px) {
    .productinfo_container {
        display: flex;
        flex-direction: column;
    }
}

/*-------- Productinfo Slider col --------*/
.productinfo__socialshare-button-container {
    display: flex;
    justify-content: center;
    margin-block-start: var(--st-spacing-2xl);
}

.productinfo-image--single-image {
    margin-inline: auto;
}

/* Door de width en height attributes die ongeacht img-size op 355 blijven staan moet img width gespecificeerd worden. */
.productinfo-image .products_subimage1 {
    width: auto;
}

/*---------------------------------------*/
/*-------- Productinfo Info cols --------*/
/*---------------------------------------*/
.productinfo_bundles h4,
.productinfo_staffelprijzen .content-header,
.productinfo_staffelprijzen_box .content-header,
.productinfo_attribute h4,
.productinfo_attribute .optie_select_strong,
.productinfo_article_usps .content-header,
.productinfo_description:not(:has(.productinfo_desciption_no_tabs)) .productinfo_tab_description .content-header,
.productinfo_description:not(:has(.productinfo_desciption_no_tabs)) .productinfo_tab_reviews .content-header {
    font-size: var(--text-size-xl);
}

.productinfo_additional-info,
.staffelprijs_content {
    display: grid;
    grid-template-columns: minmax(150px, max-content) 1fr;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.productinfo_additional-info > div,
.staffelprijs_content > p,
.staffelprijs_content > div {
    padding-block: var(--st-spacing-2xs);
}

.staffelprijs_table,
.staffelprijs_table th,
.staffelprijs_table td {
    border: 1px solid var(--border-color);
    border-collapse: collapse;
    text-align: left;
}

@media screen and (max-width: 991px) {
    .productinfo_additional-info,
    .staffelprijs_content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .staffelprijs_table th,
    .staffelprijs_table td {
        padding: 6px 3px;
        text-align: left;
        font-size: 12px;
    }

    .staffelprijs_table th:first-child,
    .staffelprijs_table td:first-child {
        width: 20%;
    }
}

/*-------- Header --------*/
.productinfo_model {
    color: var(--grey-500);
}

/*-------- Manufacturer --------*/
.productinfo_manufacturer img {
    --manufacturer-image-height: 45px;
    max-height: var(--manufacturer-image-height);
    border-radius: var(--border-radius-small);
}

/*-------- Upload text & image message --------*/
.productinfo_uploaden {
    display: flex;
    margin-block-end: var(--message-my);
    padding: var(--message-padding);
    background-color: var(--message-info-background-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
    border-radius: var(--btn-border-radius);
}

.productinfo_uploaden i,
.productinfo_uploaden span,
.productinfo_uploaden p {
    font-size: var(--text-size-sm);
    color: var(--message-info-text-color) !important;
}

.productinfo_uploaden p {
    display: inline-flex;
    align-items: center;
}

/*-------- Attributes --------*/
.productinfo_attribute {
    display: flex;
    flex-direction: column;
}

.productinfo_attribute .optie_select_select {
    padding: var(--st-spacing-2xs) var(--st-spacing-xs);;
}

#productinfo_attributes ul.addon_radios_ul:not(:has(.addon_product_option_image)) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--st-spacing-xs);
}

/* Afbeelding opties */
#productinfo_attributes ul.addon_radios_ul:has(.addon_product_option_image) {
    display: flex;
    gap: var(--st-spacing-xs);
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    #productinfo_attributes ul.addon_radios_ul .addon_product_option_image {
        width: var(--addon-product-option-image-width-desktop);
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #productinfo_attributes ul.addon_radios_ul .addon_product_option_image {
        width: var(--addon-product-option-image-width-tablet);
    }
}

@media screen and (min-width: 1200px) {
    #productinfo_attributes ul.addon_radios_ul .addon_product_option_image {
        width: var(--addon-product-option-image-width-mobile);
    }
}

#productinfo_attributes ul.addon_radios_ul .addon_product_option_image {
    height: fit-content;
    padding: 0;
}

#productinfo_attributes ul.addon_radios_ul .addon_product_option_image:not(.addon_selected_option) {
    opacity: .7;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

#productinfo_attributes ul.addon_radios_ul .addon_product_option_image:hover,
#productinfo_attributes ul.addon_radios_ul .addon_product_option_image:focus {
    opacity: 1;
}

#productinfo_attributes ul.addon_radios_ul .addon_product_option_image img {
    border-radius: var(--border-radius);
}

/*-------- Price --------*/
.productinfo_price {
    display: flex;
    flex-direction: column;
    margin-block-end: var(--st-spacing-xs);
}

.productinfo_price .oldPrice {
    font-size: var(--body-font-size);
}

.productinfo_price .normalPrice,
.productinfo_price .specialPrice {
    --productinfo-price-size: var(--h1-font-size);
    --productinfo-price-color: var(--price-text-color);

    font-size: var(--productinfo-price-size);
    color: var(--productinfo-price-color);
}

.productinfo_no_tax,
.productinfo_yes_tax,
.recommended_retail_price {
    font-size: var(--text-size-xs);
    color: var(--text-color-muted);
}

.productinfo_price .discountPrice {
    font-size: var(--text-size-sm);
    color: var(--success-700);
    font-weight: var(--font-weight-bold);
}

/*-------- Buttons --------*/
#productinfo_price_buttons_shoppingcart {
    display: flex;
    flex-direction: column;
    width: fit-content;
    width: -moz-fit-content;
}

.productinfo_price_box_aantal select[name="product_cart_quantity"],
.productinfo_price_box_button .btn {
    min-height: 37px;
}

.productinfo_price_box_aantal select[name="product_cart_quantity"] {
    min-width: 40px;
    width: fit-content;
    width: -moz-fit-content;
}

#productinfo_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--st-spacing-xs);
}

.productinfo_price_box_aantal {
    border-radius: var(--border-radius-small);
}

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

.productinfo_price_box_aantal input[type=number] {
    -moz-appearance: textfield;
}

.productinfo_price_box_aantal {
    --input-border-color: var(--grey-300); /* TODO: grey-200 was too subtle and too light.  Maybe introduce a new var(--border-color-darker) or something like that?  */
}

.productinfo_price_box_aantal input {
    width: 80px !important;
    height: 37px !important;
    float: left;
    display: block;
    padding-inline-start: 1px;
    padding-inline-end: 21px;
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius-small);
}

.productinfo_price_box_aantal input:focus {
    outline: 0;
}

.productinfo_price_box_aantal .quantity-nav {
    float: left;
    position: relative;
    height: 35px;
}

.productinfo_price_box_aantal .quantity-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid var(--input-border-color);
    width: 20px;
    text-align: center;
    color: var(--body-text-color);
    font-size: 13px;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.5;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.productinfo_price_box_aantal .quantity-button.quantity-up {
    position: absolute;
    height: 50%;
    top: 0;
    border-bottom: 1px solid var(--input-border-color);
}

span.productinfo_price_box_aantal .quantity-button.quantity-down {
    position: absolute;
    bottom: -1px;
    height: 50%;
}

.fullwidth_buttons #productinfo_price_buttons_shoppingcart,
.fullwidth_buttons #productinfo_buttons{
    width: 100%;
}

.fullwidth_buttons #productinfo_price_buttons_shoppingcart .productinfo_price_box_button,
.fullwidth_buttons #productinfo_price_buttons_shoppingcart .productinfo_price_box_button button {
    width: -webkit-fill-available;
    width: -moz-available;
}

.productinfo_btn-wishlist {
    min-height: 19px;
}

@media screen and (max-width: 768px) {
    #productinfo_price_buttons_shoppingcart,
    #productinfo_buttons{
        width: 100%;
    }

    #productinfo_price_buttons_shoppingcart .productinfo_price_box_button,
    #productinfo_price_buttons_shoppingcart .productinfo_price_box_button button {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

#productinfo_price_buttons_shoppingcart .btn-backorder .btn-backorder_text {
    text-align: center;
}

/*-------- Article USP's --------*/
.productinfo_article_usps ul {
    margin-inline-start: 0 !important;
    list-style: none;
}

.productinfo_article_usps ul > li {
    position: relative;
    display: flex;
}

.productinfo_article_usps ul:not(.st-custom-list) > li:before {
    --st-icon-size: var(--text-size-xl);
    content: '';
    margin-inline-end: var(--st-spacing-xs);
    -webkit-mask-image: var(--usp-check-icon);
    mask-image: var(--usp-check-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--usp-icon-color);
    min-width: 1em;
    min-height: 1em;
    height: var(--st-icon-size);
    display: inline-block;
    vertical-align: text-bottom;
}

/*-------- Reviews --------*/
.reviews-written .reviews_product-name,
.reviews_subtitle {
    font-size: var(--h4-font-size);
}

.reviews_product-name,
.reviews_subtitle {
    font-weight: var(--heading-font-weight);
}

.no-reviews-written a.btn,
.reviews_button a.btn {
    margin-block-start: var(--st-spacing-md);
}

.reviews_button a.btn {
    margin-block-end: var(--st-spacing-md);
}

/* alignment werd hierdoor niet goed bij review-widgets en elders.  */
/*
.rating_stars .st-icon:first-of-type {
    padding-inline-start: var(--st-spacing-2xs);
}
*/


.products_row_review_stars .rating_stars > .st-icon:first-child {
    padding-inline-start: 0;
}

.reviews-written .show_more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-block-start: var(--st-spacing-sm);
}

/* Fix: Afbeelding gallery (mfp) boven QAP tonen zodat pijltjes klikbaar blijven */
#st_product:has(.mfp-wrap) .quick-access-panel_wrapper {
    --quick-access-panel-z-index: 7882;
}

.productinfo__geld-lenen-kost-geld-logo {
    max-width: 200px;
    margin-top: var(--gutter-half);
}
.productinfo__geld-lenen-kost-geld-logo {
    display: block;
}
@media screen and (max-width: 767px) {
    .productinfo_right {
        margin-block-start: 1.5rem;
    }
}

/*---------------------------------------*/
/*-------- Productinfo Info cols --------*/
/*---------------------------------------*/
.productinfo_manufacturer,
.productinfo_short_description,
.productinfo_upload_messages,
.productinfo_price_buttons,
.productinfo_bundles,
#vierkante_meter_prijs,
.productinfo_spraypay-price,
.productinfo_in3-price,
.productinfo_desciption_no_tabs .productinfo_tab_description {
    margin-block-end: 1.5rem;
}

.productinfo_price,
.productinfo_bundles,
.productinfo_description {
    margin-block-start: 1.5rem;
}

.productinfo_additional-info > div,
.staffelprijs_content > p,
.staffelprijs_content > div {
    padding-inline-start: var(--gutter-half);
}

.productinfo_additional-info > div:nth-child(even),
.staffelprijs_content > div:nth-child(even) {
    padding-inline-end: var(--gutter-half);
}

.productinfo_additional-info > div:nth-child(4n+3),
.productinfo_additional-info > div:nth-child(4n+4),
.staffelprijs_content > p:nth-child(4n+3),
.staffelprijs_content > div:nth-child(4n+4) {
    background-color: var(--grey-50);
}

#PRODUCT_INFO_MEER_VAN {
    margin-block-start: .5rem;
}

/*-------- Header --------*/
.productinfo_header {
    margin-block-end: 1rem;
}

.productinfo_name_heading {
    margin-block-end: .5rem !important;
}

.productinfo_header_subheader {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--st-spacing-2xs);
    column-gap: 1rem;
}

@media screen and (min-width: 767px) {
    .productinfo_header_subheader {
        flex-direction: column;
    }
}

.products_row_review_stars {
    display: flex;
    align-items: baseline;
}

.products_row_review_stars a {
    color: var(--grey-500);
    margin-inline-start: .25rem;
}

.products_row_review_stars a:hover {
    color: var(--link-color-hover);
}

/*-------- Attributes --------*/
.productinfo_attribute {
    margin-block-end: .75rem;
}

/*-------- Article USP's --------*/
.productinfo_article_usps {
    margin-block: 1.5rem;
}

.productinfo_article_usps ul {
    padding: .5rem 1rem .5rem 0;
    /*border-top: 1px solid var(--border-color);*/
    /*border-bottom: 1px solid var(--border-color);*/
}

/*-------- Vierkante meter prijs --------*/
#vierkante_meter_prijs {
    margin-block-start: 1.5rem;
}
@media screen and (max-width: 767px) {
    .show_title_desktop {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .show_title_above_product_image_mobile {
        display: none;
    }
}

/* Wensenlijst button heeft al .btn class */

/*#wishlist_button{*/
/*    position: relative;*/
/*    cursor: pointer;*/
/*}*/
/*
CSS onderverdeling
Welke pagina's / globaal: PDP - alleen als relevante optie aan staat?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.productinfo_stock-check span:not(:last-of-type),
.productinfo_bundles_stock-check span:not(:last-of-type) {
    margin-right: .25rem;
}

.productinfo_stock-check,
.productinfo_bundles_stock-check {
    display: flex;
    align-items: center;
}

.productinfo_stock-check #stoplicht,
.productinfo_stock-check #stoplichts {
    display: flex;
}

/*
CSS onderverdeling
Welke pagina's / globaal: PDP, bij tabblad setting?? Nog ergens anders?
Is het cruciaal boven de vouw?: Op pdp iig bij tab setting

dus ---> Intern inladen bij tabblad setting op PDP sowieso
*/

.ui-tabs {
    --tabs-bg-color: var(--webshop-background-color);
    --tabs-border-width: 1px;
    --tabs-border-width-negative: -1px;
    --tabs-border-color: var(--border-color);
    --tabs-border: var(--tabs-border-width) solid var(--tabs-border-color);
    --tabs-border-active: var(--tabs-border-width) solid var(--tabs-bg-color);
    --tabs-tab-text-color: var(--body-text-color);
    --tabs-tab-text-color-active: var(--body-text-color);
    --tabs-tab-bg-color: var(--tabs-bg-color);
    --tabs-tab-bg-color-active: var(--tabs-bg-color);
}

.ui-tabs .ui-tabs-nav {
    list-style: none;
    display: flex;
}

.ui-tabs .ui-tabs-nav,
.ui-tabs li[role="tab"] {
    margin-left: 0!important;
}

.ui-tabs li[role="tab"] {
    border-top: var(--tabs-border);
    border-left: var(--tabs-border);
    border-bottom: var(--tabs-border);
    background-color: var(--tabs-tab-bg-color);
}

.ui-tabs li[role="tab"]:last-of-type {
    border-right: var(--tabs-border);
}

.ui-tabs li[role="tab"][aria-selected="true"][aria-expanded="true"] {
    border-bottom: var(--tabs-border-active);
    background-color: var(--tabs-tab-bg-color-active);
}

.ui-tabs li[role="tab"] a {
    padding: var(--gutter-half) var(--gutter);
    color: var(--tabs-tab-text-color);
}

.ui-tabs li[role="tab"] a:hover {
    color: var(--tabs-tab-text-color-active);
}

.ui-tabs li[role="tab"][aria-selected="true"][aria-expanded="true"] a {
    color: var(--tabs-tab-text-color-active);
}

.ui-tabs div[role="tabpanel"] {
    padding: var(--gutter);
    margin-block-start: var(--tabs-border-width-negative);
    border: var(--tabs-border);
    background-color: var(--tabs-tab-bg-color);
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-half);
}

.ui-tabs li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs li.ui-tabs-loading .ui-tabs-anchor {
    cursor: default;
}

#content .ui-tabs-panel p:last-child,
#tep-desc p:last-child,
#tep-extra-desc p:last-child,
#tep-review-desc p:last-child {
    margin-bottom: 0;
}
.ui-tabs #reviewsContainer .box-border {
    border: none !important;
}