:root {
    --hpro-primary: #f4b000;
    --hpro-primary-dark: #c58b00;
    --hpro-accent: #d0441f;
    --hpro-text: #202326;
    --hpro-muted: #6b6f76;
    --hpro-bg: #f7f6f2;
    --hpro-surface: #ffffff;
    --hpro-border: #dedbd2;
    --hpro-success: #28785d;
    --hpro-radius: 6px;
    --hpro-shadow: 0 14px 42px rgba(32, 35, 38, .12);
    --hpro-container: 1480px;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--hpro-text);
    background: var(--hpro-bg);
    letter-spacing: 0;
}

a {
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.container,
.container-fluid-xl {
    max-width: var(--hpro-container);
}

html[data-hpro-width="wide"] {
    --hpro-container: 1720px;
}

.btn,
button,
.form-control,
.custom-select,
.dropdown-menu,
.modal-content,
.card,
.box,
.productbox {
    border-radius: var(--hpro-radius);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: #202326;
    background: var(--hpro-primary);
    border-color: var(--hpro-primary);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #111111;
    background: #ffd048;
    border-color: #ffd048;
}

.btn-outline-primary {
    color: var(--hpro-text);
    border-color: var(--hpro-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #202326;
    background: var(--hpro-primary);
    border-color: var(--hpro-primary);
}

.hpro-trustbar {
    position: relative;
    z-index: 1040;
    color: #ffffff;
    background: #202326;
    font-size: .875rem;
}

.hpro-promo {
    color: #202326;
    background: var(--hpro-primary);
    font-weight: 800;
    text-align: center;
}

.hpro-promo a {
    display: block;
    max-width: var(--hpro-container);
    margin: 0 auto;
    padding: .55rem 1rem;
    color: inherit;
    text-decoration: none;
}

.hpro-header-usps {
    background: #2b2f33;
    color: #ffffff;
    font-size: .82rem;
}

.hpro-header-usps-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1.2rem;
    justify-content: center;
    max-width: var(--hpro-container);
    margin: 0 auto;
    padding: .45rem 1rem;
}

.hpro-header-usps span::before {
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--hpro-primary);
    content: "";
}

.hpro-trustbar-inner {
    display: flex;
    gap: .75rem 1.5rem;
    align-items: center;
    justify-content: center;
    max-width: var(--hpro-container);
    min-height: 42px;
    margin: 0 auto;
    padding: .45rem 1rem;
}

.hpro-trustbar span,
.hpro-trustbar a {
    color: inherit;
    white-space: nowrap;
}

.hpro-trustbar span::before,
.hpro-trustbar a::before {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--hpro-primary);
    content: "";
}

header,
#header-top-bar,
#jtl-nav-wrapper {
    background: var(--hpro-surface);
}

#jtl-nav-wrapper,
header .navbar {
    border-bottom: 1px solid rgba(32, 35, 38, .08);
}

.hpro-sticky-header #jtl-nav-wrapper,
.hpro-sticky-header header,
.hpro-sticky-header .header-main {
    position: sticky;
    top: 0;
    z-index: 1030;
}

#search-header,
.search-wrapper .form-control {
    border-color: var(--hpro-border);
}

.hpro-hero {
    position: relative;
    display: grid;
    min-height: clamp(360px, 45vw, 560px);
    margin: 0 auto 2rem;
    overflow: hidden;
    background: #202326;
    isolation: isolate;
}

.hpro-hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(32, 35, 38, .92) 0%, rgba(32, 35, 38, .78) 46%, rgba(32, 35, 38, .28) 100%),
        linear-gradient(135deg, rgba(244, 176, 0, .24), transparent 52%);
    content: "";
}

.hpro-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hpro-hero-no-image {
    background:
        linear-gradient(135deg, #202326 0%, #34302a 52%, #f4b000 180%);
}

.hpro-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: min(760px, 100%);
    padding: clamp(2rem, 8vw, 6rem) max(1rem, calc((100vw - var(--hpro-container)) / 2 + 1rem));
    color: #ffffff;
}

.hpro-eyebrow {
    margin: 0 0 .8rem;
    color: var(--hpro-primary);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hpro-hero h1 {
    max-width: 12ch;
    margin: 0 0 1rem;
    font-size: clamp(2.15rem, 6vw, 5rem);
    line-height: .98;
    letter-spacing: 0;
}

.hpro-hero p:not(.hpro-eyebrow) {
    max-width: 56ch;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.hpro-hero-cta {
    align-self: flex-start;
    min-width: 12rem;
}

.hpro-category-teasers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: var(--hpro-container);
    margin: 0 auto 2.25rem;
    padding: 0 1rem;
}

.hpro-category-teaser {
    display: grid;
    gap: .35rem;
    min-height: 124px;
    padding: 1.25rem;
    color: var(--hpro-text);
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-left: 5px solid var(--hpro-primary);
    border-radius: var(--hpro-radius);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hpro-category-teaser:hover,
.hpro-category-teaser:focus {
    color: var(--hpro-text);
    border-color: var(--hpro-primary);
    box-shadow: 0 12px 24px rgba(32, 35, 38, .1);
    transform: translateY(-2px);
}

.hpro-category-teaser span {
    font-size: 1.08rem;
    font-weight: 800;
}

.hpro-category-teaser small {
    color: var(--hpro-muted);
    line-height: 1.35;
}

.hpro-zone {
    max-width: var(--hpro-container);
    margin: 0 auto;
}

.hpro-zone-visible {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: .5rem .75rem;
    color: var(--hpro-muted);
    background: rgba(244, 176, 0, .1);
    border: 1px dashed rgba(244, 176, 0, .65);
    border-radius: var(--hpro-radius);
    font-size: .78rem;
}

.hpro-manufacturer-strip,
.hpro-news-panel {
    max-width: var(--hpro-container);
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

.hpro-manufacturer-strip header,
.hpro-news-panel {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.hpro-manufacturer-strip h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.hpro-manufacturer-strip-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .9rem;
}

.hpro-manufacturer-strip-grid a,
.hpro-socialprofiles a {
    display: grid;
    min-height: 54px;
    place-items: center;
    padding: .6rem;
    color: var(--hpro-text);
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.hpro-manufacturer-strip-grid a:hover,
.hpro-socialprofiles a:hover,
.hpro-manufacturer-strip-grid a:focus,
.hpro-socialprofiles a:focus {
    border-color: var(--hpro-primary);
    box-shadow: 0 8px 20px rgba(32, 35, 38, .08);
}

.hpro-news-panel {
    padding: 1rem;
    background: #fff8df;
    border: 1px solid rgba(244, 176, 0, .38);
    border-radius: var(--hpro-radius);
}

.hpro-news-panel strong,
.hpro-news-panel span {
    display: block;
}

.hpro-news-panel span {
    color: var(--hpro-muted);
}

.hpro-product-slider {
    margin-bottom: 2rem;
}

.productbox {
    height: 100%;
    background: var(--hpro-surface);
    border: 1px solid rgba(32, 35, 38, .1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.productbox:hover,
.productbox:focus-within {
    border-color: rgba(244, 176, 0, .75);
    box-shadow: var(--hpro-shadow);
    transform: translateY(-3px);
}

html[data-hpro-card="flat"] .productbox,
html[data-hpro-card="flat"] .hpro-category-teaser {
    background: transparent;
    box-shadow: none;
}

html[data-hpro-card="boxed"] .productbox {
    border-width: 2px;
    box-shadow: 0 10px 26px rgba(32, 35, 38, .08);
}

html[data-hpro-preset="minimal"] .hpro-hover-infos,
html[data-hpro-preset="minimal"] .hpro-product-shortdesc {
    display: none;
}

.productbox-inner {
    height: 100%;
}

.productbox-image img,
.productbox-images img {
    transition: transform .22s ease;
}

.productbox:hover .productbox-image img,
.productbox:focus-within .productbox-image img {
    transform: scale(1.025);
}

.ribbon,
.badge,
.productbox-ribbon {
    border-radius: 3px;
    font-weight: 800;
}

.hpro-product-manufacturer {
    margin-bottom: .25rem;
    color: var(--hpro-accent);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hpro-product-sku {
    margin-top: .35rem;
    color: var(--hpro-muted);
    font-size: .78rem;
}

.hpro-product-shortdesc {
    display: -webkit-box;
    min-height: 2.7em;
    margin-top: .5rem;
    overflow: hidden;
    color: var(--hpro-muted);
    font-size: .875rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hpro-quickview {
    margin-top: .5rem;
}

.hpro-product-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.hpro-product-trust div {
    padding: .85rem;
    background: #fff8df;
    border: 1px solid rgba(244, 176, 0, .38);
    border-radius: var(--hpro-radius);
}

.hpro-product-trust strong,
.hpro-product-trust span {
    display: block;
}

.hpro-product-trust strong {
    margin-bottom: .15rem;
    color: var(--hpro-text);
}

.hpro-product-trust span {
    color: var(--hpro-muted);
    font-size: .875rem;
}

.hpro-detail-ribbon {
    position: absolute;
    z-index: 3;
    top: .75rem;
    left: .75rem;
}

.hpro-newsletter-shell {
    margin: 2rem auto;
    padding: 1.25rem;
    background: #202326;
    border-radius: var(--hpro-radius);
}

.hpro-newsletter-shell,
.hpro-newsletter-shell a,
.hpro-newsletter-shell label,
.hpro-newsletter-shell .h1,
.hpro-newsletter-shell .h2,
.hpro-newsletter-shell .h3,
.hpro-newsletter-shell h1,
.hpro-newsletter-shell h2,
.hpro-newsletter-shell h3 {
    color: #ffffff;
}

.hpro-newsletter-shell .btn {
    background: var(--hpro-primary);
    border-color: var(--hpro-primary);
    color: #202326;
}

.hpro-brand-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    max-width: var(--hpro-container);
    margin: 1.5rem auto 0;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.hpro-brand-strip a {
    padding: .55rem .8rem;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hpro-radius);
    font-size: .875rem;
    font-weight: 800;
    text-decoration: none;
}

.hpro-brand-strip a:hover,
.hpro-brand-strip a:focus {
    background: var(--hpro-primary);
    color: #202326;
}

.hpro-quickview-modal[hidden] {
    display: none;
}

.hpro-quickview-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.hpro-quickview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .58);
}

.hpro-quickview-dialog {
    position: relative;
    width: min(980px, 100%);
    max-height: min(760px, calc(100vh - 2rem));
    overflow: auto;
    background: var(--hpro-surface);
    border-radius: var(--hpro-radius);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
}

.hpro-quickview-close {
    position: sticky;
    z-index: 2;
    top: 0;
    float: right;
    width: 44px;
    height: 44px;
    border: 0;
    background: #202326;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
}

.hpro-quickview-body {
    padding: 1.25rem;
}

.hpro-quickview-loading {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--hpro-muted);
}

.hpro-sticky-basket {
    transition: box-shadow .18s ease, transform .18s ease;
}

.hpro-search-active {
    box-shadow: 0 0 0 .18rem rgba(244, 176, 0, .2);
}

html[data-hpro-header="navcenter"] #mainNavigation,
html[data-hpro-header="navcenter"] .navbar-nav {
    justify-content: center;
}

html[data-hpro-header="toolbelt"] #jtl-nav-wrapper,
html[data-hpro-header="toolbelt"] header .navbar {
    border-bottom: 3px solid var(--hpro-primary);
}

html[data-hpro-header="fullscreen"] #mainNavigation .dropdown-menu {
    width: min(100vw, var(--hpro-container));
    left: 50%;
    transform: translateX(-50%);
}

html[data-hpro-dropdown-plus="Y"] #mainNavigation .dropdown-toggle::after {
    border: 0;
    content: "+";
    font-weight: 900;
    vertical-align: baseline;
}

html[data-hpro-mega-images="N"] #mainNavigation .dropdown-menu img {
    display: none !important;
}

.productbox,
.p-c {
    position: relative;
    overflow: hidden;
}

.hpro-discount-badge {
    position: absolute;
    z-index: 4;
    top: .65rem;
    left: .65rem;
    padding: .3rem .6rem;
    color: #ffffff;
    background: var(--hpro-accent);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.hpro-second-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    opacity: 0;
    background: var(--hpro-surface);
    transition: opacity .2s ease;
    pointer-events: none;
}

.hpro-second-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.productbox:hover .hpro-second-image,
.p-c:hover .hpro-second-image,
.productbox:focus-within .hpro-second-image,
.p-c:focus-within .hpro-second-image {
    opacity: 1;
}

.hpro-delivery-status {
    display: flex;
    gap: .35rem;
    align-items: center;
    margin-top: .5rem;
    color: var(--hpro-muted);
    font-size: .8rem;
}

.hpro-delivery-estimate,
.hpro-gpsr,
.hpro-service-note,
.hpro-account-head,
.hpro-filter-note,
.hpro-livesearch-page {
    display: grid;
    gap: .25rem;
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-left: 4px solid var(--hpro-primary);
    border-radius: var(--hpro-radius);
}

.hpro-delivery-estimate {
    display: flex;
    align-items: center;
}

.hpro-gpsr span,
.hpro-service-note span,
.hpro-account-head span,
.hpro-livesearch-page span {
    color: var(--hpro-muted);
}

.hpro-variation-preview {
    display: grid;
    gap: .25rem;
    margin-top: .5rem;
    color: var(--hpro-muted);
    font-size: .78rem;
}

.hpro-variation-name {
    color: var(--hpro-text);
    font-weight: 800;
}

.hpro-variation-values {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.hpro-variation-values em {
    padding: .15rem .35rem;
    background: #f2f0ea;
    border-radius: 999px;
    font-style: normal;
}

.hpro-price-note,
.hpro-checkout-step-marker,
.hpro-attribute-marker,
.hpro-variation-marker,
.hpro-tabs-marker {
    display: inline-block;
}

.hpro-price-note {
    margin-top: .4rem;
    padding: .25rem .5rem;
    color: #ffffff;
    background: var(--hpro-accent);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.hpro-list-cta {
    text-decoration: none;
}

html[data-hpro-list-cart="N"] .productbox form,
html[data-hpro-list-cart="N"] .productbox .basket-details,
html[data-hpro-list-cart="N"] .p-c form {
    display: none !important;
}

html[data-hpro-list-amount="N"] .productbox input[name*="anzahl"],
html[data-hpro-list-amount="N"] .p-c input[name*="anzahl"],
html[data-hpro-list-amount="N"] .productbox .hpro-quantity-control {
    display: none !important;
}

.hpro-status-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--hpro-muted);
}

.hpro-status-ok {
    background: var(--hpro-success);
}

.hpro-status-wait {
    background: var(--hpro-primary);
}

.hpro-hover-infos {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    z-index: 3;
    display: grid;
    gap: .25rem;
    padding: .65rem .75rem;
    color: #ffffff;
    background: rgba(32, 35, 38, .9);
    border-radius: var(--hpro-radius);
    font-size: .78rem;
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.productbox:hover .hpro-hover-infos,
.p-c:hover .hpro-hover-infos,
.productbox:focus-within .hpro-hover-infos,
.p-c:focus-within .hpro-hover-infos {
    opacity: 1;
    transform: translateY(0);
}

.hpro-sticky-addbar {
    position: fixed;
    z-index: 1050;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    max-width: var(--hpro-container);
    margin: 0 auto;
    padding: .75rem;
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
    box-shadow: 0 -12px 42px rgba(32, 35, 38, .18);
}

.hpro-sticky-addbar-info {
    display: flex;
    gap: .75rem;
    align-items: center;
    min-width: 0;
}

.hpro-sticky-addbar-info img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #f2f0ea;
    border-radius: var(--hpro-radius);
}

.hpro-sticky-addbar-info strong,
.hpro-sticky-addbar-info span {
    display: block;
}

.hpro-sticky-addbar-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpro-sticky-addbar-info span {
    color: var(--hpro-muted);
    font-size: .8rem;
}

.hpro-footer-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: var(--hpro-container);
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.hpro-footer-trust div {
    padding: 1rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hpro-radius);
}

.hpro-footer-trust strong,
.hpro-footer-trust span {
    display: block;
}

.hpro-footer-trust span {
    margin-top: .25rem;
    opacity: .78;
    font-size: .875rem;
}

.hpro-payment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    max-width: var(--hpro-container);
    margin: 1rem auto;
    padding: 0 1rem;
}

.hpro-payment-strip span {
    display: inline-grid;
    place-items: center;
    min-height: 38px;
    min-width: 76px;
    padding: .45rem .65rem;
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
    color: var(--hpro-text);
    font-size: .8rem;
    font-weight: 800;
}

.hpro-payment-strip img {
    max-width: 74px;
    max-height: 24px;
}

.hpro-socialprofiles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    max-width: var(--hpro-container);
    margin: 1rem auto;
    padding: 0 1rem;
}

.hpro-socialprofiles a {
    min-height: 38px;
    min-width: 96px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

.hpro-checkout-trust,
.hpro-crosssell-hint {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: #fff8df;
    border: 1px solid rgba(244, 176, 0, .38);
    border-radius: var(--hpro-radius);
}

.hpro-progress {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
}

.hpro-progress-label {
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.hpro-progress-label span {
    color: var(--hpro-muted);
    text-align: right;
}

.hpro-progress-track {
    height: .62rem;
    overflow: hidden;
    background: #ede9dd;
    border-radius: 999px;
}

.hpro-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--hpro-primary), var(--hpro-success));
    transition: width .25s ease;
}

.hpro-quantity-control {
    display: inline-grid;
    grid-template-columns: 2.25rem minmax(3rem, 4.5rem) 2.25rem;
    align-items: stretch;
    max-width: 9.2rem;
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
    overflow: hidden;
}

.hpro-quantity-control input {
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--hpro-border);
    border-left: 1px solid var(--hpro-border);
    text-align: center;
}

.hpro-qty-btn {
    border: 0;
    background: #f2f0ea;
    color: var(--hpro-text);
    font-weight: 900;
}

.hpro-qty-btn:hover,
.hpro-qty-btn:focus {
    background: var(--hpro-primary);
}

.hpro-quantity-hidden input {
    width: 1px;
    opacity: 0;
    pointer-events: none;
}

.hpro-checkout-trust span {
    font-weight: 800;
}

.hpro-crosssell-hint {
    align-items: flex-start;
    flex-direction: column;
}

.filter-collapsible-control,
.productlist-filter-headline {
    border-radius: var(--hpro-radius);
}

html[data-hpro-filter="top"] .productlist-filter,
html[data-hpro-filter="top"] .filter-wrapper {
    display: block;
    width: 100%;
}

html[data-hpro-filter="drawer"] .productlist-filter,
html[data-hpro-filter="drawer"] .filter-wrapper {
    max-width: 420px;
}

.active-filter,
.filter-item.active,
.snippets-filter-item-all {
    border-radius: 999px;
}

.hpro-livesearch {
    position: absolute;
    z-index: 1200;
    width: min(420px, calc(100vw - 2rem));
    margin-top: .35rem;
    padding: .5rem;
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
    box-shadow: var(--hpro-shadow);
}

.hpro-livesearch[hidden] {
    display: none;
}

.hpro-livesearch a {
    display: block;
    padding: .55rem .65rem;
    color: var(--hpro-text);
    text-decoration: none;
}

.hpro-sidebasket[hidden] {
    display: none;
}

.hpro-sidebasket {
    position: fixed;
    inset: 0;
    z-index: 2100;
}

.hpro-sidebasket-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .48);
}

.hpro-sidebasket-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(440px, 100%);
    height: 100%;
    background: var(--hpro-surface);
    box-shadow: -18px 0 54px rgba(0, 0, 0, .22);
}

.hpro-sidebasket-panel header,
.hpro-sidebasket-panel footer {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--hpro-border);
}

.hpro-sidebasket-panel footer {
    border-top: 1px solid var(--hpro-border);
    border-bottom: 0;
}

.hpro-sidebasket-panel h2 {
    margin: 0;
    font-size: 1.2rem;
}

.hpro-sidebasket-panel header button {
    width: 40px;
    height: 40px;
    border: 0;
    background: #202326;
    color: #ffffff;
    font-size: 1.45rem;
}

.hpro-sidebasket-body {
    overflow: auto;
    padding: 1rem;
}

.hpro-special-hero {
    position: relative;
    display: grid;
    min-height: 240px;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    background: #202326;
    color: #ffffff;
    isolation: isolate;
}

.hpro-special-hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(32, 35, 38, .94), rgba(32, 35, 38, .52));
    content: "";
}

.hpro-special-hero img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hpro-special-hero div {
    max-width: var(--hpro-container);
    margin: auto;
    padding: 2rem 1rem;
    width: 100%;
}

.hpro-special-hero h1 {
    max-width: 13ch;
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
}

.hpro-wizard,
.hpro-content-module {
    max-width: var(--hpro-container);
    margin: 1.5rem auto;
    padding: 1rem;
}

.hpro-wizard {
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
}

.hpro-wizard-form {
    display: grid;
    gap: 1rem;
}

.hpro-wizard-form fieldset {
    display: grid;
    gap: .45rem;
    padding: .85rem;
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
}

.hpro-wizard-form legend {
    width: auto;
    padding: 0 .35rem;
    font-weight: 800;
}

.hpro-wizard-form label {
    display: flex;
    gap: .55rem;
    align-items: center;
    margin: 0;
}

.hpro-content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.hpro-content-grid article,
.hpro-accordion details {
    padding: 1rem;
    background: var(--hpro-surface);
    border: 1px solid var(--hpro-border);
    border-radius: var(--hpro-radius);
}

.hpro-content-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hpro-radius);
}

.hpro-accordion {
    display: grid;
    gap: .6rem;
}

.hpro-accordion summary {
    cursor: pointer;
    font-weight: 800;
}

.hpro-content-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #202326;
    border-radius: var(--hpro-radius);
}

.hpro-content-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.hpro-zoom-image {
    display: block;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    background: #f2f0ea;
}

.hpro-load-more {
    display: block;
    margin: 1.5rem auto;
}

[data-hpro-debug="Y"] .hpro-zone::before {
    content: attr(data-hpro-zone);
}

@media (min-width: 992px) {
    html[data-hpro-mega-compact="Y"] #mainNavigation .dropdown-menu,
    html[data-hpro-mega="fullscreen"] #mainNavigation .dropdown-menu,
    html[data-hpro-mega="images"] #mainNavigation .dropdown-menu {
        border: 1px solid rgba(32, 35, 38, .12);
        box-shadow: var(--hpro-shadow);
    }

    html[data-hpro-mega-compact="Y"] #mainNavigation .dropdown-menu {
        font-size: .92rem;
    }
}

@media (max-width: 991.98px) {
    .hpro-trustbar-inner {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .hpro-category-teasers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hpro-manufacturer-strip-grid,
    .hpro-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hpro-news-panel,
    .hpro-progress-label {
        align-items: flex-start;
        flex-direction: column;
    }

    .hpro-progress-label span {
        text-align: left;
    }

    .hpro-product-trust {
        grid-template-columns: 1fr;
    }

    .hpro-sticky-basket {
        position: sticky;
        z-index: 1020;
        bottom: 0;
        margin: 1rem -1rem 0;
        padding: .75rem 1rem;
        background: var(--hpro-surface);
        box-shadow: 0 -10px 30px rgba(32, 35, 38, .18);
    }

    .hpro-footer-trust {
        grid-template-columns: 1fr;
    }

    .hpro-sticky-addbar {
        right: 0;
        bottom: 0;
        left: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--hpro-radius) var(--hpro-radius) 0 0;
    }

    .hpro-filter-sticky .filter-collapsible-control,
    .hpro-filter-sticky .productlist-filter-headline {
        position: sticky;
        z-index: 1000;
        top: 0;
        background: var(--hpro-surface);
        box-shadow: 0 8px 20px rgba(32, 35, 38, .12);
    }
}

@media (max-width: 575.98px) {
    .hpro-hero {
        min-height: 420px;
    }

    .hpro-hero-content {
        justify-content: flex-end;
        padding: 2rem 1rem;
    }

    .hpro-hero h1 {
        max-width: 11ch;
        font-size: 2.55rem;
    }

    .hpro-category-teasers {
        grid-template-columns: 1fr;
    }

    .hpro-manufacturer-strip-grid,
    .hpro-content-grid {
        grid-template-columns: 1fr;
    }

    .hpro-header-usps-inner {
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
    }

    .hpro-category-teaser {
        min-height: 96px;
    }

    .hpro-quickview-dialog {
        width: 100%;
        max-height: calc(100vh - 1rem);
    }

    .hpro-sticky-addbar-info img {
        display: none;
    }

    .hpro-sticky-addbar-button {
        min-width: 112px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}