/**
 * WooCommerce Blocks (Cart / Checkout) — donker thema, leesbare velden,
 * land-dropdown zonder overlappende tekst.
 */

body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-page .wc-block-components-form {
    --wc-form-color-text: #f2f2f2;
    --wc-form-color-background: #141414;
    --wc-primary-color: var(--petjes-primary, #c9a962);
    color: #f2f2f2;
}

/* Witte / lichte panelen uit Woo defaults → donkere achtergrond, lichte tekst */
.wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-components-sidebar-layout .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout-order-summary,
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper,
.wc-block-components-address-card,
.wc-block-components-address-form,
.wc-block-checkout__main .wc-block-components-checkout-step,
.wc-block-cart .wc-block-cart__totals-container {
    background-color: var(--petjes-surface, #121212) !important;
    color: #f2f2f2 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-metadata,
.wc-block-components-product-name,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__description,
.wc-block-components-form .wc-block-components-title,
.wc-block-cart-items__header,
.wc-block-cart-item__wrap,
.wc-block-components-order-summary-item__description {
    color: #e8e8e8 !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price {
    color: var(--petjes-primary, #c9a962) !important;
}

/* Tekstvelden & textarea — extra ruimte bovenin (o.a. e-mail naast floating label) */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input textarea,
.wc-block-components-text-input .wc-block-components-text-input__input,
.wc-block-components-country-input input:not(.components-combobox-control__input),
.wc-block-components-address-form input[type="text"],
.wc-block-components-address-form input[type="email"],
.wc-block-components-address-form input[type="tel"] {
    background-color: #141414 !important;
    color: #f2f2f2 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 2px !important;
    min-height: 3.35rem !important;
    padding: 1rem 1rem 0.75rem 1rem !important;
    line-height: 1.45 !important;
}

.wc-block-components-text-input textarea {
    min-height: 6rem !important;
}

/* Floating labels: leesbaar, geen wit-op-wit */
.wc-block-components-text-input label,
.wc-block-components-text-input .wc-block-components-text-input__label,
.wc-block-components-select-wrapper label,
.wc-block-components-select-wrapper .wc-block-components-select-wrapper__label {
    color: #c4c4c4 !important;
    background-color: transparent !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
    color: var(--petjes-primary, #c9a962) !important;
}

/* Ruimte zodat label + waarde niet over elkaar vallen (e-mail e.d.) */
.wc-block-components-text-input .wc-block-components-text-input__input {
    padding-top: 1.55rem !important;
    padding-bottom: 0.7rem !important;
    min-height: 3.45rem !important;
}

/* Native select & country — extra padding-top: waarde staat niet tegen de bovenrand */
.wc-block-components-select-wrapper select,
.wc-block-components-country-select select,
.wc-block-components-address-form select,
select.wc-block-components-select-control__input,
.wc-block-components-select-control .components-select-control__input {
    background-color: #141414 !important;
    color: #f2f2f2 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 2px !important;
    min-height: 3.5rem !important;
    padding: 1rem 2.75rem 0.8rem 1rem !important;
    line-height: 1.45 !important;
    font-size: 1rem !important;
}

.wc-block-components-select-wrapper label,
.wc-block-components-select-wrapper .wc-block-components-select-wrapper__label,
.wc-block-components-country-input .components-base-control__label,
.wc-block-components-address-form .components-base-control__label {
    margin-bottom: 0.35rem !important;
}

/* Checkout blokken: land/regio — label verder van het veld; blok iets luchtiger */
body.woocommerce-checkout .wc-block-components-country-input {
    margin-top: 0.25rem !important;
    margin-bottom: 1rem !important;
}

body.woocommerce-checkout .wc-block-components-country-input .components-base-control__label,
body.woocommerce-checkout .wc-block-components-country-input label {
    margin-bottom: 0.65rem !important;
    line-height: 1.35 !important;
}

/* Combobox land/regio (zoekveld + geselecteerde waarde): niet tegen de bovenrand */
body.woocommerce-checkout .wc-block-components-address-form .components-combobox-control {
    margin-bottom: 1rem !important;
}

body.woocommerce-checkout .wc-block-components-address-form .components-combobox-control .components-base-control__label {
    margin-bottom: 0.65rem !important;
}

/* Contact / e-mail stap: ruimte onder e-mail zodat volgende sectie niet klemt */
body.woocommerce-checkout .wc-block-components-checkout-contact-information-step .wc-block-components-text-input,
body.woocommerce-checkout .wc-block-checkout__contact-fields .wc-block-components-text-input {
    margin-bottom: 1rem !important;
}

body.woocommerce-checkout .wc-block-components-checkout-contact-information-step .wc-block-components-text-input:last-of-type {
    margin-bottom: 1.25rem !important;
}

/* WordPress Components combobox (land/regio) — ruimte rond geselecteerde tekst */
.wc-block-components-combobox .components-form-token-field__input,
.wc-block-components-combobox .components-combobox-control__input,
.components-combobox-control__input.components-text-control__input {
    background: #141414 !important;
    color: #f2f2f2 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    min-height: 3.5rem !important;
    padding: 1.05rem 2.5rem 0.85rem 1rem !important;
    line-height: 1.5 !important;
}

.components-form-token-field__suggestions-list,
.components-popover__content,
[role="listbox"],
.wc-blocks-components-select__option {
    background: #1a1a1a !important;
    color: #f2f2f2 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Land/regio combobox: chevron suffix volgt Customizer-primaire kleur (WP Components / currentColor) */
body.woocommerce-checkout .wc-block-components-address-form .components-combobox-control .components-input-control__suffix,
body.woocommerce-checkout .wc-block-components-country-input .components-input-control__suffix {
    color: var(--petjes-primary, #c9a962) !important;
}

body.woocommerce-checkout .wc-block-components-address-form .components-combobox-control .components-input-control__suffix svg,
body.woocommerce-checkout .wc-block-components-country-input .components-input-control__suffix svg {
    fill: currentColor !important;
}

/* Checkout blokken: overflow knipt land/regio-dropdown niet af; popovers boven totaal/sidebar */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-components-form,
body.woocommerce-checkout .wc-block-components-address-form,
body.woocommerce-checkout .wc-block-components-checkout-step {
    overflow: visible !important;
}

body.woocommerce-checkout .components-popover,
body.woocommerce-checkout .components-popover__content,
body.woocommerce-checkout [role="listbox"],
body.woocommerce-checkout .components-form-token-field__suggestions-list,
body.woocommerce-checkout .components-combobox-control__menu,
body.woocommerce-checkout .components-select-control__menu {
    z-index: 100090 !important;
}

body.woocommerce-checkout .components-form-token-field__suggestions-list {
    max-height: min(50vh, 22rem) !important;
    overflow-y: auto !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

[role="listbox"] [role="option"],
.components-form-token-field__suggestion {
    color: #f2f2f2 !important;
    background: #1a1a1a !important;
    padding: 0.62rem 1rem !important;
    line-height: 1.45 !important;
    min-height: 2.65rem !important;
}

[role="listbox"] [role="option"][data-active-item="true"],
[role="listbox"] [role="option"]:hover,
.components-form-token-field__suggestion.is-highlighted,
.components-form-token-field__suggestion:focus {
    background: rgba(201, 169, 98, 0.28) !important;
    color: #fff !important;
}

/* Secundaire blokknoppen — outline in huisstijl (niet grijs WP-default) */
.components-button.is-secondary {
    background: transparent !important;
    color: var(--petjes-primary, #c9a962) !important;
    border: 1px solid var(--petjes-primary, #c9a962) !important;
    border-radius: var(--petjes-radius, 2px) !important;
    font-family: var(--font-body, "DM Sans", sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1.75rem !important;
}

.components-button.is-secondary:hover,
.components-button.is-secondary:focus-visible {
    background: rgba(201, 169, 98, 0.12) !important;
    color: var(--petjes-primary, #c9a962) !important;
}

/* Primaire blokknoppen — gelijk aan .button in main.css */
.wc-block-components-button.wc-block-components-button--primary,
.wc-block-cart__submit-button,
.wc-block-checkout__actions .wc-block-components-button--primary,
.wc-block-components-checkout-place-order-button .wc-block-components-button,
.wc-block-components-totals-coupon__button {
    font-family: var(--font-body, "DM Sans", sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-radius: var(--petjes-radius, 2px) !important;
    padding: 0.85rem 1.75rem !important;
    line-height: 1.3 !important;
    background: var(--petjes-primary, #c9a962) !important;
    color: #0a0a0a !important;
    border: 1px solid var(--petjes-primary, #c9a962) !important;
    box-shadow: none !important;
    transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s, box-shadow 0.25s !important;
}

.wc-block-components-button.wc-block-components-button--primary:hover,
.wc-block-components-button.wc-block-components-button--primary:focus,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions .wc-block-components-button--primary:hover,
.wc-block-components-checkout-place-order-button .wc-block-components-button:hover,
.wc-block-components-totals-coupon__button:hover {
    background: transparent !important;
    color: var(--petjes-primary, #c9a962) !important;
    box-shadow: 0 0 32px rgba(201, 169, 98, 0.15) !important;
}

.wc-block-components-button.wc-block-components-button--primary:focus-visible,
.wc-block-components-checkout-place-order-button .wc-block-components-button:focus-visible {
    outline: 2px solid var(--petjes-primary, #c9a962) !important;
    outline-offset: 2px !important;
}

/* Radio / verzendopties */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control__option-layout {
    color: #e8e8e8 !important;
}

.wc-block-components-radio-control__option-checked {
    border-color: var(--petjes-primary, #c9a962) !important;
}

/* Links in blokken */
.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-checkout-step__container a {
    color: var(--petjes-primary, #c9a962) !important;
}

/**
 * Cart-/checkoutpagina als gewone WordPress-pagina: main.css zet .entry-content op max-width 42rem.
 * Dat is te smal voor wc-block-cart (sidebar + items) en voor "New in store" (4 kolommen) — op desktop
 * oogt het dan krap/onevenwichtig. Gebruik dezelfde breedte als .site-main.
 */
body.woocommerce-cart .site-main .entry-content,
body.woocommerce-checkout .site-main .entry-content {
    max-width: min(100%, var(--content-max, 1280px));
}

body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
body.woocommerce-checkout .wc-block-checkout.alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/**
 * Lege winkelwagen: gevulde-cart-sectie verbergen zodra WC is-empty zet (back-up naast plugin-CSS).
 */
.wp-block-woocommerce-cart.is-empty .wp-block-woocommerce-filled-cart-block,
.wc-block-cart.is-empty .wp-block-woocommerce-filled-cart-block {
    display: none !important;
}

/* Lege staat + cross-sells: luchtige sectie */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    width: 100%;
    max-width: 100%;
    padding-top: var(--space-2, 1rem);
}

body.woocommerce-cart .wc-block-cart__empty-cart__title {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

/**
 * Product grid "New in store": vaste 4 kolommen in een smalle .entry-content gaf piepkleine tegels.
 * Auto-fit zorgt voor nette 1–3 kolommen op desktop afhankelijk van breedte en aantal producten.
 */
body.woocommerce-cart .wc-block-grid.has-4-columns .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: var(--space-4, 2rem) var(--space-3, 1.5rem) !important;
    list-style: none !important;
}

body.woocommerce-cart .wc-block-grid.has-4-columns .wc-block-grid__product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}