/**
 * awcf_zirbe_woo_toolbar
 * Styling voor product-card (Loop Item 337, gebruikt op archive + homepage),
 * archive-sidebar filters, result-count en ordering-dropdown.
 * Ontworpen tegen Zirbe design-system tokens (DESIGN-SYSTEM.md).
 */

/* ==========================================================================
   1. PRODUCT CARD (Loop Item 337 - used on archive + homepage populair)
   ========================================================================== */

/* Loop container: equal-height cards */
.elementor-widget-loop-grid .elementor-loop-container .e-loop-item {
    display: flex;
    height: 100%;
}
.elementor-widget-loop-grid .elementor-loop-container .e-loop-item > .elementor-element {
    width: 100%;
}

/* Card root (article) */
.aw-prod-card {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #FFFDF9;
    border: 1px solid #E9DCC4;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.aw-prod-card:hover {
    box-shadow: 0 8px 22px rgba(94, 46, 28, 0.12);
    transform: translateY(-1px);
}

/* Image area: perfect 1:1 square with beige fallback background */
.aw-prod-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F3E4C8;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.aw-prod-card__image .elementor-widget-image,
.aw-prod-card__image .elementor-widget-container {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aw-prod-card__image .elementor-widget-image a,
.aw-prod-card__image .elementor-widget-image .elementor-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aw-prod-card__image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    /* Padding creates whitespace around the product against the beige fallback */
    padding: 14px;
    box-sizing: border-box;
}

/* Card body: fills remaining height, pushes CTA to bottom */
.aw-prod-card__body {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px !important;
    gap: 8px !important;
    background: #FFFDF9;
}
.aw-prod-card__body > .elementor-element {
    width: 100%;
}

/* Title */
.aw-prod-card__title {
    margin: 0 !important;
}
.aw-prod-card__title .elementor-heading-title,
.aw-prod-card__title h1, .aw-prod-card__title h2, .aw-prod-card__title h3,
.aw-prod-card__title h4, .aw-prod-card__title h5, .aw-prod-card__title h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: #A76626;
    margin: 0;
    /* Cap to 2 lines so all cards align vertically */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 14px * 1.35); /* reserve height for 2 lines */
}
.aw-prod-card__title a {
    color: inherit;
    text-decoration: none;
}
.aw-prod-card__title a:hover {
    color: #8E5720;
}

/* Price (dynamic Woo price incl. sale <del>/<ins>) */
.aw-prod-card__price {
    margin: 0 !important;
}
.aw-prod-card__price .elementor-heading-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    color: #5E2E1C;
    line-height: 1.2;
}
.aw-prod-card__price del,
.aw-prod-card__price del .woocommerce-Price-amount {
    color: #8a6f56 !important;
    font-weight: 400 !important;
    text-decoration: line-through;
    font-size: 13.5px;
    margin-right: 6px;
}
.aw-prod-card__price ins {
    text-decoration: none;
    background: transparent;
}
.aw-prod-card__price .woocommerce-Price-amount,
.aw-prod-card__price bdi {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 800;
    color: #5E2E1C;
}

/* CTA: sits at bottom of body, full-width, groene winkel-CTA (#3d7a3d) */
.aw-prod-card__cta {
    margin-top: auto !important;
    padding-top: 4px;
}
.aw-prod-card__cta .elementor-button-wrapper,
.aw-prod-card__cta .elementor-widget-container {
    width: 100%;
}
.aw-prod-card__cta a.elementor-button {
    display: flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 14px !important;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    background: #3d7a3d !important;
    color: #FFFDF9 !important;
    border: 0;
    border-radius: 3px !important;
}
.aw-prod-card__cta a.elementor-button:hover {
    background: #316231 !important;
    color: #FFFDF9 !important;
}

/* Sale-badge (if we ever add via loop-item) is intentionally not styled here yet.
   Placeholder rule so overlays don't break the card border-radius. */
.aw-prod-card .aw-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #C1272D;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    z-index: 2;
    font-family: 'Ubuntu', sans-serif;
}


/* ==========================================================================
   2. ARCHIVE SIDEBAR (Archive 347)
   ========================================================================== */

/* Row-container: sidebar-height follows content, not full grid row */
.aw-archive-row,
.aw-archive-row.e-con,
.aw-archive-row.elementor-element {
    align-items: start !important;
    grid-template-rows: auto !important;
}

/* Sidebar wrapper: sticky at top, self-height, subtle card */
.aw-archive-sidebar {
    align-self: start;
    position: sticky;
    top: 24px;
    height: auto !important;
    padding: 20px !important;
    background: #FFFDF9;
    border: 1px solid #E9DCC4;
    border-radius: 6px;
    gap: 20px !important;
}

/* Filters heading */
.aw-archive-sidebar h3 {
    margin: 0 0 4px 0 !important;
}

/* Filter-group container */
.aw-archive-sidebar .aw-filter-group {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    padding: 0 !important;
}
.aw-archive-sidebar .aw-filter-group + .aw-filter-group {
    padding-top: 16px !important;
    border-top: 1px solid #F1E6D3;
}
.aw-archive-sidebar .aw-filter-group__label,
.aw-archive-sidebar .aw-filter-group .elementor-widget-heading .elementor-heading-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #3A2317;
    line-height: 1.2;
    margin: 0;
}

/* Category list (aw_category_list): multi-select checkboxes */
.aw-category-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.aw-category-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    color: #5A4736;
    cursor: pointer;
}
.aw-category-list__cb {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #C1272D;
    flex: 0 0 auto;
    cursor: pointer;
}
.aw-category-list__label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.aw-category-list__item:hover { color: #3A2317; }

/* Price filter (aw_price_filter): radio-buckets */
.aw-price-buckets {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.aw-price-buckets__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    color: #5A4736;
    cursor: pointer;
}
.aw-price-buckets__radio {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #C1272D;
    flex: 0 0 auto;
    cursor: pointer;
}
.aw-price-buckets__label {
    flex: 1 1 auto;
    min-width: 0;
}
.aw-price-buckets__item:hover { color: #3A2317; }
.aw-price-buckets__item--reset {
    font-size: 12.5px;
    color: #8a6f56;
    margin-bottom: 2px;
}

/* In-stock toggle (aw_in_stock_toggle): native checkbox met bold label */
.aw-instock-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #3A2317;
    cursor: pointer;
}
.aw-instock-toggle__cb {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #C1272D;
    flex: 0 0 auto;
    cursor: pointer;
}
.aw-instock-toggle__label {
    flex: 1 1 auto;
    min-width: 0;
}
.aw-instock-toggle:hover { color: #C1272D; }


/* ==========================================================================
   3. SORT ROW (result-count + ordering-dropdown)
   ========================================================================== */
.woocommerce-result-count {
    margin: 0;
    color: #5A4736;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select.orderby {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: #3A2317;
    background: #FFFDF9;
    border: 1px solid #E9DCC4;
    border-radius: 3px;
    padding: 9px 32px 9px 14px;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='%235A4736' d='M0 0h12L6 8z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.woocommerce-ordering select.orderby:focus {
    outline: 2px solid #C1272D;
    outline-offset: 2px;
}

/* Category-count badge (aw_category_product_count) */
.aw-category-count {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #5E2E1C;
    line-height: 1.2;
}

/* Filter reset-link (aw_filter_reset) */
.aw-filter-reset {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #C1272D;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.aw-filter-reset:hover,
.aw-filter-reset:focus {
    color: #a01e23;
    text-decoration: underline;
}
.aw-filter-reset.is-hidden { display: none; }

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .aw-archive-sidebar { position: static; }
}
@media (max-width: 520px) {
    .aw-prod-card__body { padding: 14px !important; }
    .aw-prod-card__title .elementor-heading-title { font-size: 13.5px; }
    .aw-prod-card__price .elementor-heading-title { font-size: 15px; }
}

/* ==========================================================================
   5. WOOCOMMERCE NOTICES (add-to-cart, info, error)
   ========================================================================== */
.woocommerce-notices-wrapper { margin: 0; }
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 14px 20px !important;
    margin: 14px auto !important;
    max-width: 1280px;
    width: calc(100% - 48px);
    box-sizing: border-box;
    background: #FFFDF9 !important;
    border: 1px solid #E9DCC4 !important;
    border-left: 4px solid #3d7a3d !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(94, 46, 28, 0.06);
    color: #3A2317 !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.45;
    list-style: none;
    position: relative;
}
.woocommerce-info    { border-left-color: #5E2E1C !important; }
.woocommerce-error   { border-left-color: #C1272D !important; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: '' !important;
    display: inline-block !important;
    flex: 0 0 auto;
    width: 22px !important;
    height: 22px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color: transparent !important;
    text-indent: -9999px !important;
    font-family: inherit !important;
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
}
.woocommerce-message::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7a3d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12l3 3 5-6'/></svg>");
}
.woocommerce-info::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2E1C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><circle cx='12' cy='16' r='0.5' fill='%235E2E1C'/></svg>");
}
.woocommerce-error::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1272D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><circle cx='12' cy='16' r='0.5' fill='%23C1272D'/></svg>");
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    order: 99;
    margin-inline-start: auto !important; margin-left: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    background: #C1272D !important;
    color: #FFFDF9 !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
    background: #a01e23 !important;
    color: #FFFDF9 !important;
}

.woocommerce-error li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.woocommerce-error li + li { margin-top: 4px !important; }

@media (max-width: 520px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error { flex-wrap: wrap; gap: 10px; padding: 12px 16px !important; }
    .woocommerce-message .button,
    .woocommerce-info .button,
    .woocommerce-error .button { margin-left: 0 !important; width: 100%; }
}

/* ==========================================================================
   6. CART LAYOUT FIX
   AWCC's inner Bootstrap-grid rendert een lege .awcc-summary-col naast de
   cart-form, waardoor de form onnodig smal wordt en de SUBTOTAAL-kolom clipt.
   De echte totalen-card zit in .cart-collaterals in de RECHTER Elementor Pro
   grid-column, dus de LINKER summary-col is een dubbele/ongebruikte placeholder.
   ========================================================================== */

/* Notice: kill any focus-outline that browser draws on the wrapper */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    outline: none !important;
}
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
    outline: none !important;
    box-shadow: 0 2px 8px rgba(94, 46, 28, 0.06) !important;
}





/* Mobile/desktop visibility fixes: Elementor rendert klasse met underscore
   (elementor-hidden_mobile) i.p.v. dash (elementor-hidden-mobile) waardoor
   sommige responsive-hide-classes niet triggeren. */
@media (max-width: 900px) {
    .elementor-hidden_tablet,
    .elementor-hidden-tablet,
    .elementor-widget.elementor-hidden_tablet,
    .elementor-widget.elementor-hidden-tablet {
        display: none !important;
    }
}
@media (max-width: 520px) {
    .elementor-hidden_mobile,
    .elementor-hidden-mobile {
        display: none !important;
    }
}
@media (min-width: 901px) {
    .elementor-hidden_desktop,
    .elementor-hidden-desktop {
        display: none !important;
    }
}


/* ==========================================================================
   Mobile hamburger widget (4d004c2, in icon-group): alleen toggle, geen inline
   ========================================================================== */
.elementor-element.elementor-element-4d004c2 .elementor-nav-menu--main,
.elementor-element.elementor-element-4d004c2 nav.elementor-nav-menu__container:not(.elementor-nav-menu--dropdown) {
    display: none !important;
}
.elementor-element.elementor-element-4d004c2 .elementor-menu-toggle {
    display: flex !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: #5E2E1C !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 26px !important;
    height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
}
.elementor-element.elementor-element-4d004c2 .elementor-menu-toggle svg {
    width: 26px !important;
    height: 26px !important;
    fill: currentColor !important;
}
/* Dropdown-panel bij openen: full-width overlay onder header ipv smalle slide-in */
.elementor-element.elementor-element-4d004c2 .elementor-nav-menu--dropdown {
    display: none;
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: #FFFDF9 !important;
    border-top: 1px solid #E9DCC4 !important;
    box-shadow: 0 8px 22px rgba(94,46,28,.10);
    z-index: 999;
}
.elementor-element.elementor-element-4d004c2 .elementor-nav-menu--dropdown[aria-hidden="false"] {
    display: block !important;
}
.elementor-element.elementor-element-4d004c2 .elementor-nav-menu--dropdown .elementor-nav-menu {
    padding: 12px 20px !important;
}
.elementor-element.elementor-element-4d004c2 .elementor-nav-menu--dropdown .elementor-item {
    padding: 14px 4px !important;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid #F1E6D3;
}
.elementor-element.elementor-element-4d004c2 .elementor-nav-menu--dropdown li:last-child .elementor-item {
    border-bottom: 0;
}

/* ==========================================================================
   Logo-text-stack: tight title+tagline (verwijder alle vertical spacing)
   ========================================================================== */
#logo-text-stack { gap: 0 !important; row-gap: 0 !important; }
#logo-text-stack > .elementor-widget { margin: 0 !important; padding: 0 !important; }
#logo-text-stack > .elementor-widget > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
#logo-text-stack > .elementor-widget:first-child .elementor-heading-title {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#logo-text-stack > .elementor-widget:last-child { margin-top: 2px !important; }
#logo-text-stack > .elementor-widget:last-child .elementor-heading-title {
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    white-space: nowrap;
}

/* ==========================================================================
   Mobile ≤900: icon-group klit tegen rechter rand, natuurlijke breedte
   ========================================================================== */
@media (max-width: 900px) {
    /* Parent header-inner: 2 clusters, space-between duwt icons naar rechts */
    .elementor-54 .elementor-element.elementor-element-be72ef4 {
        --justify-content: space-between;
        justify-content: space-between !important;
    }
    /* Icon-group: geen fit-content meer (dat gooide hamburger buiten box); 
       gewoon flex-nowrap met flex-end voor spacing */
    #icon-group,
    .elementor-54 .elementor-element.elementor-element-309fa70 {
        --flex-direction: row;
        --flex-wrap: nowrap;
        --justify-content: flex-end;
        --gap: 18px 18px;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 18px !important;
    }
    /* Elk icon-widget zonder extra padding */
    #icon-group > .elementor-widget,
    #icon-group > .elementor-widget > .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    #icon-group .elementor-menu-cart__toggle_button { padding: 0 !important; }
    /* Logo-text-stack mobile-specifiek */
    #logo-text-stack .elementor-widget-heading:first-child .elementor-heading-title {
        font-size: 22px !important;
    }
    #logo-text-stack .elementor-widget-heading:last-child .elementor-heading-title {
        font-size: 10.5px !important;
        letter-spacing: 0.8px !important;
    }
}

/* Mobiel: op 2 kolommen is de knop ~135px breed; Elementor-padding wordt hierboven door !important overschreven */
@media (max-width: 767px) {
    .aw-prod-card__cta a.elementor-button {
        padding: 12px 6px !important;
        gap: 4px;
        font-size: 11.5px;
    }
}