/**
 * Hydroseals responsive listing skin
 * Keeps the matrix editor positions and business logic intact while applying
 * the visual language used by the Hydroseals header/footer modules.
 */
:root {
    --ulm-hs-green: #073b36;
    --ulm-hs-green-soft: #164d47;
    --ulm-hs-orange: #ff8d22;
    --ulm-hs-orange-hover: #e8780c;
    --ulm-hs-ink: #0b302d;
    --ulm-hs-muted: #637875;
    --ulm-hs-line: #d8e2e0;
    --ulm-hs-surface: #f5f8f7;
    --ulm-hs-white: #ffffff;
}

.ulm-hydroseals-theme,
.ulm-advanced-filter-container,
.ulm-qty-picker-wrapper,
.ulm-custom-pagination {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif !important;
}

/* Filterblok */
body .ulm-advanced-filter-container {
    padding: 24px !important;
    gap: 16px !important;
    margin-bottom: 26px !important;
    border: 1px solid var(--ulm-hs-line) !important;
    border-radius: 18px !important;
    background: var(--ulm-hs-surface) !important;
    box-shadow: 0 12px 30px rgba(7, 59, 54, .06) !important;
}

body .ulm-advanced-filter-container .ulm-search-row {
    width: 100% !important;
    max-width: 100% !important;
}

body .ulm-advanced-filter-container input,
body .ulm-advanced-filter-container select {
    height: 50px !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid #c9d6d3 !important;
    border-radius: 12px !important;
    background-color: var(--ulm-hs-white) !important;
    color: var(--ulm-hs-ink) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

body .ulm-advanced-filter-container input:focus,
body .ulm-advanced-filter-container select:focus {
    outline: 3px solid rgba(255, 141, 34, .18) !important;
    border-color: var(--ulm-hs-orange) !important;
}

body .ulm-advanced-filter-container #ulm-js-search-submit,
body .ulm-advanced-filter-container #ulm-js-search-reset {
    min-width: 126px !important;
    height: 50px !important;
    padding: 0 24px !important;
    border-radius: 11px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}

body .ulm-advanced-filter-container #ulm-js-search-submit {
    background: var(--ulm-hs-orange) !important;
    color: var(--ulm-hs-white) !important;
}

body .ulm-advanced-filter-container #ulm-js-search-submit:hover {
    background: var(--ulm-hs-orange-hover) !important;
}

body .ulm-advanced-filter-container #ulm-js-search-reset {
    background: transparent !important;
    color: var(--ulm-hs-green) !important;
    border: 1px solid var(--ulm-hs-green) !important;
}

/* Aantal per pagina */
body .ulm-qty-picker-wrapper > div {
    height: auto !important;
    padding: 5px !important;
    gap: 5px !important;
    border: 1px solid var(--ulm-hs-line) !important;
    border-radius: 999px !important;
    background: var(--ulm-hs-white) !important;
}

body .ulm-qty-picker-wrapper a {
    width: 38px !important;
    height: 30px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

/* Product- en sealkitrijen */
.ulm-hydroseals-theme .ulm-custom-live-balk {
    border-color: var(--ulm-hs-line) !important;
    border-radius: 16px !important;
    background: var(--ulm-hs-white) !important;
    box-shadow: 0 7px 22px rgba(7, 59, 54, .055) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.ulm-hydroseals-theme .ulm-custom-live-balk:hover {
    border-color: rgba(255, 141, 34, .72) !important;
    box-shadow: 0 11px 28px rgba(7, 59, 54, .10) !important;
    transform: translateY(-1px);
}

.ulm-hydroseals-theme .ulm-live-element {
    font-family: inherit !important;
}

.ulm-hydroseals-theme .ulm-type-title {
    color: var(--ulm-hs-green) !important;
    font-weight: 750 !important;
}

.ulm-hydroseals-theme .ulm-type-specs,
.ulm-hydroseals-theme .ulm-frontend-flex-specs {
    color: var(--ulm-hs-ink) !important;
}

.ulm-hydroseals-theme .ulm-frontend-flex-specs > div > span:first-child {
    color: var(--ulm-hs-green) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.ulm-hydroseals-theme .ulm-render-price-block,
.ulm-hydroseals-theme .ulm-render-price-block .amount {
    color: var(--ulm-hs-orange) !important;
    font-weight: 800 !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: var(--ulm-hs-green) !important;
    color: var(--ulm-hs-white) !important;
    font-family: inherit !important;
    font-weight: 750 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* Ook na een AJAX-filterwissel blijven de lijniconen transparant en nemen ze
   exact de ingestelde knoptekstkleur over. */
.ulm-type-buttons .button .ulm-inline-icon,
.ulm-type-buttons .button .ulm-inline-icon svg {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    background: transparent !important;
}

.ulm-hydroseals-theme .ulm-live-element.ulm-type-buttons > .ulm-snap-group-container {
    width: 100% !important;
    height: 100% !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .button:hover,
.ulm-hydroseals-theme .ulm-type-buttons .button:focus,
.ulm-hydroseals-theme .ulm-type-buttons .button:active {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    text-decoration: none !important;
}

/* BeTheme/WooCommerce may animate both the button and its icon separately.
   UltraListing action buttons deliberately have no hover animation. */
.ulm-type-buttons .button,
.ulm-type-buttons .button::before,
.ulm-type-buttons .button::after,
.ulm-type-buttons .button .ulm-inline-icon,
.ulm-type-buttons .button .ulm-inline-icon svg,
.ulm-type-buttons .button .dashicons {
    transition: none !important;
    animation: none !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .button .ulm-inline-icon,
.ulm-hydroseals-theme .ulm-type-buttons .button .ulm-inline-icon svg,
.ulm-hydroseals-theme .ulm-type-buttons .button .dashicons,
.ulm-hydroseals-theme .ulm-type-buttons .button:hover .ulm-inline-icon,
.ulm-hydroseals-theme .ulm-type-buttons .button:hover .ulm-inline-icon svg,
.ulm-hydroseals-theme .ulm-type-buttons .button:hover .dashicons {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ulm-type-buttons .button:hover::before,
.ulm-type-buttons .button:hover::after,
.ulm-type-buttons .button:focus::before,
.ulm-type-buttons .button:focus::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .button::before,
.ulm-hydroseals-theme .ulm-type-buttons .button::after {
    content: none !important;
    display: none !important;
}

.ulm-type-buttons .button:hover .ulm-inline-icon,
.ulm-type-buttons .button:focus .ulm-inline-icon,
.ulm-type-buttons .button:active .ulm-inline-icon,
.ulm-type-buttons .button:hover .ulm-inline-icon svg,
.ulm-type-buttons .button:focus .ulm-inline-icon svg,
.ulm-type-buttons .button:active .ulm-inline-icon svg,
.ulm-type-buttons .button:hover .dashicons,
.ulm-type-buttons .button:focus .dashicons,
.ulm-type-buttons .button:active .dashicons {
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .button:hover .ulm-inline-icon::before,
.ulm-hydroseals-theme .ulm-type-buttons .button:hover .ulm-inline-icon::after,
.ulm-hydroseals-theme .ulm-type-buttons .button:focus .ulm-inline-icon::before,
.ulm-hydroseals-theme .ulm-type-buttons .button:focus .ulm-inline-icon::after,
.ulm-hydroseals-theme .ulm-type-buttons .button:active .ulm-inline-icon::before,
.ulm-hydroseals-theme .ulm-type-buttons .button:active .ulm-inline-icon::after,
.ulm-hydroseals-theme .ulm-type-buttons .button:hover .dashicons::before,
.ulm-hydroseals-theme .ulm-type-buttons .button:focus .dashicons::before,
.ulm-hydroseals-theme .ulm-type-buttons .button:active .dashicons::before {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .ulm-snap-group-container .button {
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
}

.ulm-hydroseals-theme .ulm-type-buttons .ulm-snap-group-container .button:last-child {
    border-bottom: 0 !important;
}

.ulm-hydroseals-theme .ulm-img-render {
    padding: 5px !important;
    background: var(--ulm-hs-white) !important;
}

/* Paginering */
.ulm-custom-pagination a,
.ulm-custom-pagination span,
.ulm-hydroseals-theme + .woocommerce-pagination a,
.ulm-hydroseals-theme + .woocommerce-pagination span {
    border-radius: 999px !important;
}

@media (max-width: 767px) {
    body .ulm-advanced-filter-container {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    body .ulm-advanced-filter-container .ulm-filter-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body .ulm-advanced-filter-container .ulm-filter-cell {
        min-width: 0 !important;
        width: 100% !important;
    }

    body .ulm-advanced-filter-container input,
    body .ulm-advanced-filter-container select {
        height: 46px !important;
        padding-left: 12px !important;
        font-size: 13px !important;
    }

    body .ulm-advanced-filter-container #ulm-js-search-submit,
    body .ulm-advanced-filter-container #ulm-js-search-reset {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-custom-live-balk {
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-custom-live-balk:hover {
        transform: none;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-frontend-flex-specs {
        gap: 8px !important;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-frontend-flex-specs > div {
        min-width: 0 !important;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-type-buttons .ulm-snap-group-container {
        flex-direction: row !important;
        width: 100% !important;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-type-buttons .ulm-snap-group-container .button {
        min-width: 0 !important;
        flex: 1 1 50% !important;
        border-right: 1px solid rgba(255,255,255,.22) !important;
        border-bottom: 0 !important;
    }

    .ulm-hydroseals-theme.ulm-container-mobile .ulm-type-buttons .ulm-snap-group-container .button:last-child {
        border-right: 0 !important;
    }

}

/* Table 13 schakelt op basis van de werkelijke BeTheme-kolombreedte. */
.ulm-coded-responsive-table {
    container-name: ulm-coded-responsive-table;
    container-type: inline-size;
}

@container ulm-coded-responsive-table (max-width: 720px) {
    .ulm-coded-responsive-table .ulm-custom-live-balk {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 246px !important;
        min-height: 246px !important;
        margin: 0 0 15px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-row-ready .ulm-type-image {
        display: none !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-row-ready .ulm-live-element {
        box-sizing: border-box !important;
        z-index: 15 !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-title-1 {
        left: 18px !important;
        top: 14px !important;
        width: calc(100% - 36px) !important;
        height: 30px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 16px !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-specs-1 {
        left: 18px !important;
        top: 50px !important;
        width: calc(100% - 36px) !important;
        height: 96px !important;
        overflow: visible !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-specs-1 .ulm-frontend-flex-specs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 9px 18px !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-specs-1 .ulm-frontend-flex-specs > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 36px !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-price-1 {
        left: 32% !important;
        top: 151px !important;
        width: 25% !important;
        height: 42px !important;
        justify-content: center !important;
        text-align: center !important;
        color: var(--ulm-hs-orange) !important;
        font-size: 20px !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-title-2 {
        left: 18px !important;
        top: 154px !important;
        width: calc(32% - 22px) !important;
        height: 38px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 12px !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-qty-1 {
        left: 58% !important;
        top: 151px !important;
        width: calc(42% - 18px) !important;
        height: 42px !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-buttons-1 {
        left: 0 !important;
        top: 200px !important;
        width: 100% !important;
        height: 46px !important;
        border-radius: 0 !important;
        background: var(--ulm-hs-green) !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-row-ready:has(.ulm-responsive-role-buttons-2) .ulm-responsive-role-buttons-1 {
        width: 50% !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-buttons-2 {
        left: 50% !important;
        top: 200px !important;
        width: 50% !important;
        height: 46px !important;
        border-radius: 0 !important;
        background: var(--ulm-hs-green) !important;
    }

    .ulm-coded-responsive-table .ulm-responsive-role-buttons-1 .ulm-snap-group-container,
    .ulm-coded-responsive-table .ulm-responsive-role-buttons-1 .button,
    .ulm-coded-responsive-table .ulm-responsive-role-buttons-2 .ulm-snap-group-container,
    .ulm-coded-responsive-table .ulm-responsive-role-buttons-2 .button {
        height: 100% !important;
    }

    /* V90 heeft slechts één Min–Max-specificatie en heeft daarom niet de
       vaste hoogte nodig die voor vier maatvelden wordt gereserveerd. */
    .ulm-coded-responsive-table .ulm-v90-compact-row {
        height: 176px !important;
        min-height: 176px !important;
        max-height: 176px !important;
    }

    .ulm-coded-responsive-table .ulm-v90-compact-row .ulm-responsive-role-specs-1 {
        top: 48px !important;
        height: 38px !important;
    }

    .ulm-coded-responsive-table .ulm-v90-compact-row .ulm-responsive-role-price-1,
    .ulm-coded-responsive-table .ulm-v90-compact-row .ulm-responsive-role-qty-1 {
        top: 91px !important;
    }

    .ulm-coded-responsive-table .ulm-v90-compact-row .ulm-responsive-role-title-2 {
        top: 94px !important;
    }

    .ulm-coded-responsive-table .ulm-v90-compact-row .ulm-responsive-role-buttons-1,
    .ulm-coded-responsive-table .ulm-v90-compact-row .ulm-responsive-role-buttons-2 {
        top: 130px !important;
    }
}

@media (max-width: 767px) {
    /* Table 14 gebruikt op echte telefoons nog de opgeslagen mobiele
       elementposities. De onderste knoppen eindigen op 324px; voorkom dat de
       oude editorhoogte daaronder een lege witte strook laat staan. */
    #ulm-table-14.ulm-container-mobile .ulm-custom-live-balk {
        height: 324px !important;
        min-height: 324px !important;
        max-height: 324px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 430px) {
    body .ulm-advanced-filter-container .ulm-filter-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ulm-hydroseals-theme .ulm-custom-live-balk,
    .ulm-hydroseals-theme .button {
        transition: none !important;
    }
}


/* 10.0.79 - Style800 levertijd compacter zodat deze in alle talen netjes past */
.ulm-style800-delivery-line,
.ulm-style800-warehouse-note {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.15;
}

.ulm-style800-delivery-line {
    font-size: 0.96em;
    font-weight: 600;
}

.ulm-style800-warehouse-note {
    font-size: 0.88em;
}


/* 10.0.80 - Style800 levertijdblok echt als 2 nette regels forceren */
.ulm-live-element .ulm-style800-delivery-block {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    text-align: left !important;
}

.ulm-live-element .ulm-style800-delivery-block .ulm-style800-delivery-line,
.ulm-live-element .ulm-style800-delivery-block .ulm-style800-warehouse-note {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.1 !important;
    text-align: left !important;
}

.ulm-live-element .ulm-style800-delivery-block .ulm-style800-delivery-line {
    font-size: 0.92em !important;
    font-weight: 600 !important;
}

.ulm-live-element .ulm-style800-delivery-block .ulm-style800-warehouse-note {
    font-size: 0.82em !important;
    font-weight: 500 !important;
}