/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythreechild
Template: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

:root {
    /*--wp--preset--color--black: #282828;*/
    /*--wp--preset--color--white: #FBFBFB;*/
    --wp--preset--spacing--10: clamp(.75rem, 2vw, 1rem);
    --wp--preset--spacing--20: clamp(1rem, 3vw, 1.5rem);
    --bs-body-color: #62615C;
    --bs-body-bg: #FFFFFF;
    --bs-border-color: #dee2e6;
    --bs-border-width: 1px;
    --bs-border-style: solid;
}

body {
    --wp--style--global--content-size: 75rem;
    padding: unset !important;
}

img {
    max-inline-size: 100%;
    height: 100%;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: .75rem;
}

table {
    caption-side: top;
    border-collapse: collapse;
}

caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--wp--preset--color--secondary);
    text-align: left;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}


.table,
.group_table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}

.table > :not(caption) > * > *,
.group_table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    background-color: var(--bs-table-bg);
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.table > tbody,
.group_table > tbody {
    vertical-align: inherit;
}

.table > thead,
.group_table > thead {
    vertical-align: bottom;
}

.table-group-divider {
    border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}

.caption-top {
    caption-side: top;
}

.table-sm > :not(caption) > * > * {
    padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
    border-width: var(--bs-border-width) 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 var(--bs-border-width);
}

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-active {
    --bs-table-color-state: var(--bs-table-active-color);
    --bs-table-bg-state: var(--bs-table-active-bg);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive * {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


@media (min-width: 782px) {
    .order-md-first {
        order: -1;
    }

    .d-md-none.d-md-none {
        display: none;
    }
}


dl {
    & > div {
        display: flex;
        justify-content: flex-start;

        & > * {
            flex: 1;
        }
    }
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--puro-cluster-justify-content, flex-start);
    gap: var(--puro-cluster-gap, 1em);
    padding-inline-start: unset;
    list-style-type: none;
}

.cluster--center {
    --puro-cluster-justify-content: center;
}

/*
 * Hide page titles
 */
body.home h1.wp-block-post-title,
body.hide-title h1.wp-block-heading,
body.hide-title h1.wp-block-post-title {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    margin-bottom: unset !important;
}

.wp-block-site-logo.is-default-size img {
    width: 10rem !important;
}

.wp-block-media-text .wp-block-media-text__content {
    padding-inline: unset;
}

/*.wp-block-cover .wp-block-cover__inner-container,*/
/*.wp-block-cover-image .wp-block-cover__inner-container {*/
/*    color: var(--wp--preset--color--white);*/
/*}*/

/*.wp-block-cover-image.is-light .wp-block-cover__inner-container,*/
/*.wp-block-cover.is-light .wp-block-cover__inner-container {*/
/*    color: var(--wp--preset--color--black);*/
/*}*/

/* Add your custom styles here... */

.label {
    border: 1px solid;
    font-size: 1rem;
    padding: .75em 1.5em;
}

.label:empty {
    display: none;
}

.label--primary {
    border-color: #d0ad5b;
    background-color: #d0ad5b;
    color: #ffffff;
}

.label--card {
    position: absolute;
    top: 2em;
}

/**
 * Sticky Header
 */

header.wp-block-template-part {
    position: relative;
    z-index: 11;
    background: var(--wp--preset--color--base);
    backdrop-filter: unset;
    border-bottom-color: hsla(0, 0%, 0%, .05);
    box-shadow: 0 2px 8px 0 hsla(245deg 88% 20% / 7%);
}

header.wp-block-template-part .is-position-sticky {
    position: sticky;
    top: 0;
    z-index: 11;
    align-self: normal;
}

header > .wp-block-cover,
:where(.wp-site-blocks) > :first-child:first-child {
    overflow: visible;
    z-index: 10;
}

.wp-block-post-excerpt ul {
    padding-inline-start: 1em;
}

.wp-block-post-excerpt li {
    list-style-type: "✓";
    padding-inline-start: 1em;
}


.wc-block-components-product-sale-badge {
    background: #ab1e25;
    border-color: #ffffff;
    color: #ffffff;
}

.woocommerce span.onsale,
.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale {
    left: unset;
    right: -1rem;

    background: #ab1e25;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-block;
    font-size: .875em;
    font-weight: 600;
    margin: 0 auto 12px;
    padding: 0.25em 0.75em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: auto;
    z-index: 9;
}

.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale {
    background: #ab1e25;
    color: #ffffff;
    border: 1px solid #ffffff;
}


[data-gtm4wp_product_data*="outofstock"] + a .wc-block-grid__product-image,
.outofstock .wc-block-grid__product-image,
.outofstock .woocommerce-product-gallery__image {
    position: relative;
}

[data-gtm4wp_product_data*="outofstock"] + a .wc-block-grid__product-image::after,
.outofstock .wc-block-grid__product-image::after,
.outofstock .woocommerce-product-gallery__image::after {
    content: 'niet op voorraad';
    background: #ab1e25;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    display: inline-block;
    font-size: .875em;
    font-weight: 600;
    left: auto;
    padding: 0.25em 0.75em;
    position: absolute;
    right: 4px;
    text-align: center;
    text-transform: uppercase;
    top: 4px;
    width: auto;
    z-index: 9;
}

p.out-of-stock {
    background: #ab1e25;
    color: #ffffff !important;
    border-radius: 4px;
    padding: 0.25em 0.75em;
    text-transform: uppercase;
}

/**
 * Utilities
 */

.position\:relative {
    position: relative;
}

.visually\:hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover__inner-container {
    color: var(--wp--preset--color--base);
}

.wp-block-cover-image.is-light .wp-block-cover__inner-container,
.wp-block-cover.is-light .wp-block-cover__inner-container {
    color: var(--wp--preset--color--contrast);
}

.has-text-align-center {
    text-align: center;
}

nav.wp-block-navigation {
    flex: 1;
}

/**
 * https://github.com/PuroNL/puro.nl/issues/105
 * failed to adjust the template/*.html
 * overrides in child theme where not adopted
 */
main {
    margin-block: unset !important;
}

/**
 * List modifiers
 */

.list--check {
    list-style-type: "✓";
    padding-inline-start: 1em;
}

.list--unstyled {
    list-style: none !important;
    padding-inline-start: unset;
}


.wp-block-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}

/*.wp-block-columns > .wp-block-column > *:where(:has(+ *:last-child:not(.wp-block-query))) {*/
/*    margin-block-end: 1rem;*/
/*}*/

/*.wp-block-columns > .wp-block-column > *:last-child:not(.wp-block-query):not(:first-child) {*/
/*    margin-block-start: auto;*/
/*}*/


/**
 * Header items
 * https://github.com/PuroNL/marketing/issues/13
 */
@media (min-width: 768px) {
    .header--items {
        flex-basis: 60%;
    }

    .wp-block-search,
    .aws-container {
        flex: 1;
    }

    [data-search="open"] {
        display: none;
    }
}

@media (max-width: 767px) {
    .header--items [data-search="open"] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: unset;
        margin: unset;
        border: none;
        background: none;
        font-size: 1.5rem;
        color: var(--wp--preset--color--secondary);
    }

    .header--items [data-search="open"] > svg {
        width: 1em;
        height: 1em;
        color: currentColor;
    }

    .header--items > .wp-block-search,
    .header--items > .aws-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 100vh;
        padding: 1em;
        box-sizing: border-box;
        overflow: hidden;
        visibility: hidden;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .25);
        opacity: .65;
        transform: scaleY(0);
        transform-origin: 0 0;
        transition: visibility linear .3s, transform .3s, opacity .2s;
    }

    .header--items > .wp-block-search.is-open,
    .header--items > .aws-container.is-open {
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
        transition: visibility linear, transform .3s, opacity .2s
    }
}

/**
 * WOOCOMMERCE
 */

/**
 * https://github.com/PuroNL/puro.nl/issues/122
 */

.wp-block-post-template.is-flex-container.columns-3 > li {
    width: calc(50% - 0.83333em);
}

/**
 * https://github.com/PuroNL/puro.nl/issues/148
 */

.wc-block-product-template.is-flex-container > li {
    width: calc(50% - 1.25em);
}


.gtranslate_wrapper {
    max-block-size: 1.5rem;
}

.postid-11760 .product-key-info > div:first-child {
    display: none;
}

.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
    width: unset;
}

/**
 * Hide Fokker field
 * https://github.com/PuroNL/puro.nl/issues/1
 */
#naam_fokker_kennel_field {
    display: none;


    /**
     * Stock Manager
     * https://github.com/PuroNL/puro.nl/issues/19
     */

    .stock_notifier-subscribe-form .woo_fields_wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }

    .stock_notifier-subscribe-form [type="text"] {
        font-size: var(--wp--preset--font-size--small);
        padding: 0.9rem 1.1rem;
    }

    .stock_alert_button {
        background-color: var(--wp--preset--color--secondary);
        border-radius: 1rem;
        border-width: 0;
        color: var(--wp--preset--color--base);
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        padding: calc(0.667em + 2px) calc(1.333em + 2px);
        text-decoration: none;
    }


    .stock_alert_button:hover {
        background-color: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
    }
}

.payment_box.payment_method_mollie_wc_gateway_ideal {
    display:none !important;
}


.cart-icon {
    position: relative;
    display: flex;
    font-size: 1rem;
    line-height: 1;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    svg {
        fill: currentColor;
        width: 2em;
        height: 2em;
    }

    .cart-count {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        background: red;
        border-radius: 100%;
        aspect-ratio: 1 / 1;
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: -1em;
        right: -1em;
    }
}


.wc-block-grid__product-rating .star-rating,
.wc-block-grid__product-rating .wc-block-grid__product-rating__stars {
    font-family: 'star';
}



.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div .wp-block-cart-cross-sells-product__product-title {
    font-size: var(--wp--preset--font-size--medium);
}


.wp-site-blocks>.wp-block-group {
    padding-inline: 1rem;
}


.wp-block-column:has(.wcpf-all-filters-disabled) {
    display: none;

    & + .wp-block-column.wp-block-column {
        flex-grow:  1;
    }
}

details[open] summary {
    height: auto;
}
