/**
 * OLDFOX Fixes v3.0.10
 * Fixes voor vendor badges, sorteerbalk, wishlist, LAYOUT
 */

/* ===================================
   FIX 0: WORDPRESS BLOCK THEME VARIABELEN OVERSCHRIJVEN
   Deze variabelen worden door WordPress zelf gezet!
   =================================== */
:root {
    --wp-style-global-content-size: 1600px !important;
    --wp-style-global-wide-size: 1600px !important;
}

/* ===================================
   NUCLEAR FIX: FORCE ALLE WOOCOMMERCE CONTAINERS
   Op My Account pagina's overschrijft WooCommerce alles
   =================================== */
body.woocommerce-account .woocommerce,
body.woocommerce-account div.woocommerce,
body.woocommerce-account main .woocommerce,
body.woocommerce-account article .woocommerce,
body.woocommerce-account .woocommerce-MyAccount,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .entry-content .woocommerce,
.woocommerce-page .woocommerce,
.woocommerce-page div.woocommerce,
.ovd,
.ovd-reg,
body.woocommerce-account .ovd,
body.woocommerce-account .ovd-reg,
.woocommerce-MyAccount-content .ovd {
    max-width: 1600px !important;
    margin: 0 0 0 max(20px, calc((100% - 1600px) / 2)) !important;
    padding-right: 20px !important;
}

/* ===================================
   FIX 1: VENDOR NAAM LEESBAAR
   =================================== */
.of-vendor-strip__info strong {
    color: #EFEEE7 !important;
}

/* ===================================
   FIX 2: ZAKELIJKE VERKOPER BADGE VERBERGEN
   =================================== */
.of-vendor-badge.zakelijk,
.of-vendor-badge[data-type="zakelijk"],
span.of-vendor-badge:not(.particulier) {
    display: none !important;
}

.of-vendor-badge.particulier,
.of-vendor-badge[data-type="particulier"] {
    display: inline-block !important;
}

/* ===================================
   FIX 3: DUBBELE SORTEERBALK
   =================================== */
.of-shop-vendor-filter,
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

.of-filterbar {
    display: flex !important;
}

/* ===================================
   FIX 4: WISHLIST VERWIJDEREN
   =================================== */
.tinvwl_add_to_wishlist_button,
.tinv-wraper,
.tinv-wishlist,
a[href*="wishlist"],
.yith-wcwl-add-to-wishlist,
.add-to-wishlist,
.wishlist-icon,
button[name="add-to-wishlist"] {
    display: none !important;
}

/* ===================================
   FIX 5: ALLE PAGINA'S 1600PX + LINKS
   HOOGSTE PRIORITY - LAADT ALS LAATSTE
   =================================== */

/* My Account */
.woocommerce-MyAccount {
    max-width: 1600px !important;
    margin: 0 0 0 max(20px, calc((100% - 1600px) / 2)) !important;
    padding-right: 20px !important;
}

/* Vendor Profiel */
.oldfox-vendor-profiel,
.of-vendor-profiel {
    max-width: 1600px !important;
    margin: 0 0 0 max(20px, calc((100% - 1600px) / 2)) !important;
    padding-right: 20px !important;
}

/* Vendor Dashboard */
.ovd,
.ovd-reg,
.of-vendor-dashboard-wrap {
    max-width: 1600px !important;
    margin: 0 0 0 max(20px, calc((100% - 1600px) / 2)) !important;
    padding-right: 20px !important;
}

/* Headers */
body.woocommerce-account .entry-header,
body.page-template-vendor-profiel .entry-header,
body[class*="vendor"] .entry-header {
    max-width: 1600px !important;
    margin: 0 0 40px max(20px, calc((100% - 1600px) / 2)) !important;
    padding-right: 20px !important;
}
/* ===================================
   FIX 6: SUBCATEGORIEËN BALK
   Tweede balk onder hoofdfilterbalk
   =================================== */

/* Subcatbalk standaard verborgen */
.of-subcat-bar {
    display: none !important;
    background: rgba(41, 41, 40, 0.85) !important;
    top: 98px !important; /* 56px header + 42px hoofdbalk */
    border-top: 1px solid rgba(239, 238, 231, 0.1) !important;
    z-index: 89 !important;
}

/* Zichtbaar als parent actief is (server-side of via JS) */
.of-subcat-bar.is-visible {
    display: flex !important;
}

/* Pills in subcatbalk iets kleiner */
.of-subcat-bar .of-pill {
    font-size: 10px !important;
    padding: 4px 12px !important;
    border-color: rgba(239, 238, 231, 0.18) !important;
}

/* Pijltje op pills met subcategorieën */
.of-pill-arrow {
    display: inline-block;
    margin-left: 3px;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.of-pill.has-subcats.is-active .of-pill-arrow {
    transform: rotate(90deg);
}

/* Ruimte compenseren als subcatbalk zichtbaar is */
.of-shop-wrap:has(.of-subcat-bar.is-visible) .of-shop-main {
    margin-top: 0;
}

/* ===================================
   FIX 7: WISHLIST VOLLEDIG VERBERGEN
   Eigen kaartknop + alle externe plugins
   =================================== */
.of-card__wishlist-btn,
.of-wishlist-btn,
.tinvwl_add_to_wishlist_button,
.tinv-wraper,
.tinv-wishlist,
a[href*="wishlist"]:not(.of-pill),
.yith-wcwl-add-to-wishlist,
.add-to-wishlist,
.wishlist-icon,
button[name="add-to-wishlist"],
[class*="wishlist"] {
    display: none !important;
}

/* ===================================
   FIX 8: NAVIGATIE DROPDOWN SUBMENU
   Hover dropdown met pijltje
   =================================== */

/* Parent item met submenu: position relative voor dropdown */
.of-nav li.menu-item-has-children {
    position: relative !important;
}

/* Pijltje achter parent item */
.of-nav li.menu-item-has-children > a::before {
    content: ' ›' !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline !important;
    position: static !important;
    background: none !important;
    transform: none !important;
    transition: transform 0.2s !important;
}

/* Pijltje draaien bij hover */
.of-nav li.menu-item-has-children:hover > a::before {
    display: inline !important;
    transform: none !important;
}

/* Submenu verborgen by default */
.of-nav ul.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: var(--of-zwart) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    z-index: 999 !important;
}

/* Submenu zichtbaar bij hover op parent */
.of-nav li.menu-item-has-children:hover > ul.sub-menu {
    display: block !important;
}

/* Submenu items */
.of-nav ul.sub-menu li {
    display: block !important;
    margin: 0 !important;
}

/* Submenu links */
.of-nav ul.sub-menu li a {
    display: block !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    color: rgba(239,238,231,0.8) !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: background 0.15s, color 0.15s !important;
}

/* Submenu link hover */
.of-nav ul.sub-menu li a:hover {
    background: rgba(239,238,231,0.08) !important;
    color: #EFEEE7 !important;
}

/* Underline effect UIT op submenu links */
.of-nav ul.sub-menu li a::after {
    display: none !important;
}

/* Overbrugging gap tussen parent en submenu (zodat het niet sluit) */
.of-nav li.menu-item-has-children::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 8px !important;
    background: transparent !important;
}

/* ===================================
   FIX 9: INSTOCK FILTER CHECKBOX
   =================================== */
.of-instock-filter {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--of-zwart) !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.of-instock-filter input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--of-zwart) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.of-sort-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* ===================================
   FIX 9: VOORRAAD FILTERBALK
   Alles / In stock / Uitverkocht
   =================================== */
.of-stock-bar {
    background: rgba(41, 41, 40, 0.65) !important;
    top: auto !important;
    position: relative !important;
    z-index: 1 !important;
    border-top: 1px solid rgba(239, 238, 231, 0.08) !important;
}

.of-stock-bar .of-pill {
    font-size: 11px !important;
    padding: 4px 14px !important;
}

/* ===================================
   FIX 10: WINKELWAGEN LEGE TEKST
   Block cart gebruikt CSS ::before
   =================================== */
.wp-block-cart__empty-cart-title::before {
    content: 'Je winkelwagen is leeg.' !important;
}

/* ===================================
   FIX 10: LOGO BEELDMERK IN HEADER
   =================================== */
.of-logo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.of-logo__img {
    height: 1.4em !important;
    width: auto !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    filter: none !important;
}

/* ===================================
   FIX 11: ZOEKBALK IN FILTERBALK
   Rechts uitgelijnd naast stock pills
   =================================== */
.of-stock-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.of-stock-bar__pills {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.of-stock-zoek {
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(239,238,231,0.2) !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
    gap: 6px !important;
}

.of-stock-zoek input[type="search"],
.of-stock-zoek input[type="text"] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #EFEEE7 !important;
    font-family: 'Heebo', sans-serif !important;
    font-size: 12px !important;
    width: 160px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.of-stock-zoek input::placeholder {
    color: rgba(239,238,231,0.45) !important;
}

.of-stock-zoek__icon {
    color: rgba(239,238,231,0.55) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* ===================================
   FIX 12: BLOCKS CHECKOUT CHECKBOXES
   WC Blocks verbergt native input en gebruikt custom SVG.
   We herstellen de native checkbox + corrigeren layout.
   =================================== */

/* Container: altijd flex-row */
.wc-block-components-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    gap: 0 !important;
    position: relative !important;
}

/* De custom checkbox wrapper (bevat input + SVG mark) */
.wc-block-components-checkbox .wc-block-components-checkbox__input {
    flex-shrink: 0 !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    margin: 2px 10px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Native input terug zichtbaar + correct formaat */
.wc-block-components-checkbox .wc-block-components-checkbox__input input[type="checkbox"] {
    position: absolute !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--of-zwart) !important;
    z-index: 1 !important;
}

/* SVG mark verbergen — native checkbox is zichtbaar */
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
    display: none !important;
}

/* Label naast checkbox */
.wc-block-components-checkbox .wc-block-components-checkbox__label {
    flex: 1 !important;
    font-family: 'Heebo', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--of-zwart) !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Algemene voorwaarden checkbox */
.wc-block-checkout__terms .wc-block-components-checkbox {
    margin-top: 8px !important;
}


/* ===================================
   FIX 13: BODY MAX-WIDTH + PADDING FIX
   WordPress block theme zet max-width en padding
   op de body zelf via gegenereerde inline styles.
   Dit overschrijven we hier.
   =================================== */
body {
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wp-site-blocks {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Header altijd edge-to-edge */
.of-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}