/* Fonts are self-hosted (no requests to Google Fonts - GDPR). Raleway and Open Sans are
   variable fonts (latin subset, SIL Open Font License): one file covers all weights. */
@font-face {
    font-family: "Raleway";
    src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/open-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/source-sans-pro-v21-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/source-sans-pro-v21-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --knopf7-primary: #c2247a;
    --knopf7-primary-dark: #9b1d62;
    --knopf7-primary-soft: #fff0f7;
    --knopf7-primary-border: #edb5d3;
    --knopf7-ink: #454a50;
    --knopf7-muted: #747b83;
    --knopf7-line: #e4e4e3;
    --knopf7-soft: #f4f5f6;
    --knopf7-white: #ffffff;
    --knopf7-radius: 8px;
    --knopf7-shadow: 0 14px 38px rgba(69, 74, 80, .12);
    --knopf7-content-max: 1480px;
    --bs-danger: #c2247a;
    --bs-danger-rgb: 194, 36, 122;
}

/* Unified storefront status palette: Apex/Bootstrap red becomes brand magenta. */
.text-danger,
.invalid-feedback,
.invalid-tooltip,
.stockFlag .text-danger {
    color: var(--knopf7-primary) !important;
}

.bg-danger,
.text-bg-danger,
.badge.bg-danger {
    color: #fff !important;
    background-color: var(--knopf7-primary) !important;
}

.border-danger {
    border-color: var(--knopf7-primary) !important;
}

.alert-danger {
    color: #731448 !important;
    background: var(--knopf7-primary-soft) !important;
    border-color: var(--knopf7-primary-border) !important;
}

.alert-danger a,
.alert-danger .alert-link {
    color: #731448 !important;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--knopf7-primary);
    --bs-btn-border-color: var(--knopf7-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--knopf7-primary-dark);
    --bs-btn-hover-border-color: var(--knopf7-primary-dark);
    --bs-btn-focus-shadow-rgb: 194, 36, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--knopf7-primary-dark);
    --bs-btn-active-border-color: var(--knopf7-primary-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d98bb5;
    --bs-btn-disabled-border-color: #d98bb5;
    color: #fff;
    background-color: var(--knopf7-primary);
    border-color: var(--knopf7-primary);
}

.btn-danger:hover,
.btn-danger:focus-visible,
.btn-danger:active {
    color: #fff;
    background-color: var(--knopf7-primary-dark);
    border-color: var(--knopf7-primary-dark);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid,
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--knopf7-primary);
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
    background-color: var(--knopf7-primary);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--knopf7-primary);
    box-shadow: 0 0 0 .25rem rgba(194, 36, 122, .18);
}

.table-danger,
.list-group-item-danger {
    --bs-table-bg: var(--knopf7-primary-soft);
    --bs-list-group-color: #731448;
    --bs-list-group-bg: var(--knopf7-primary-soft);
    --bs-list-group-border-color: var(--knopf7-primary-border);
}

body {
    color: var(--knopf7-ink);
    font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--knopf7-white);
    /* sticky footer: page fills the viewport, footer pinned to the bottom */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > #wrapper {
    flex: 1 0 auto;
}

body > .knopf7-footer,
body > footer {
    flex-shrink: 0;
    margin-top: auto;
}

a {
    color: var(--knopf7-primary);
}

a:hover {
    color: var(--knopf7-primary-dark);
}

/* free-shipping progress bar in the basket (magenta) */
.pavo-freeship {
    background: #fdeaf4;
    border: 1px solid #f3b8d9;
    border-radius: var(--knopf7-radius);
    padding: 14px 18px;
    margin-bottom: 1.25rem;
}
.pavo-freeship-text { color: #8f0a5c; margin-bottom: 8px; }
.pavo-freeship-track {
    height: 10px;
    background: #f6cfe5;
    border-radius: 5px;
    overflow: hidden;
}
.pavo-freeship-fill {
    height: 100%;
    background: linear-gradient(90deg, #d40384, #a80268);
    border-radius: 5px;
    transition: width .4s ease;
}
.pavo-freeship.done { background: #d40384; border-color: #a80268; }
.pavo-freeship.done .pavo-freeship-text { color: #fff; margin-bottom: 0; }
.pavo-freeship.done .pavo-freeship-track { display: none; }

/* low-stock notice on the product detail page */
.pavo-lowstock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--knopf7-primary-soft);
    border: 1px solid var(--knopf7-primary-border);
    color: #731448;
    border-radius: var(--knopf7-radius);
    padding: 8px 14px;
    margin: 10px 0;
    font-weight: 600;
}

/* comfortable page gutters — Bootstrap's 12px default hugs the viewport edge
   on screens narrower than the 1480px content max (e.g. 1440px displays).
   Container padding = half the gutter: 16px mobile … 56px on wide desktops.
   Nested .row elements re-declare --bs-gutter-x, so column gutters stay stock. */
.container-xxl {
    --bs-gutter-x: clamp(2rem, 5vw, 7rem);
}

.knopf7-bubbles > .container-xxl,
.knopf7-product-section > .container-xxl,
.knopf7-inspiration > .container-xxl,
.knopf7-banner-section > .container-xxl,
.knopf7-quicklinks > .container-xxl,
.knopf7-copy-section > .container-xxl {
    max-width: var(--knopf7-content-max);
}

.btn-highlight,
.btn-primary {
    --bs-btn-bg: var(--knopf7-primary);
    --bs-btn-border-color: var(--knopf7-primary);
    --bs-btn-hover-bg: var(--knopf7-primary-dark);
    --bs-btn-hover-border-color: var(--knopf7-primary-dark);
    --bs-btn-active-bg: var(--knopf7-primary-dark);
    --bs-btn-active-border-color: var(--knopf7-primary-dark);
    color: var(--knopf7-white);
    border-radius: 999px;
    font-weight: 400;
    letter-spacing: 0;
}

.btn-outline-primary {
    --bs-btn-color: var(--knopf7-primary);
    --bs-btn-border-color: var(--knopf7-primary);
    --bs-btn-hover-bg: var(--knopf7-primary);
    --bs-btn-hover-border-color: var(--knopf7-primary);
    border-radius: 999px;
    font-weight: 700;
}

.knopf7-servicebar {
    color: var(--knopf7-white);
    background: var(--knopf7-primary);
    font-size: .95rem;
    font-weight: 700;
    padding: .45rem 0;
}

.knopf7-servicebar a {
    color: var(--knopf7-white);
    text-decoration: none;
}

.knopf7-header-main {
    background: var(--knopf7-white);
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-header-grid {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-height: 108px;
}

.knopf7-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.knopf7-logo {
    width: 210px;
    max-width: 34vw;
    height: auto;
}

.knopf7-header-menu-button {
    display: none;
}

.knopf7-search-wrap .search {
    max-width: 620px;
}

.knopf7-search-wrap .input-group {
    border: 2px solid var(--knopf7-line);
    border-radius: 999px;
    background: var(--knopf7-soft);
    overflow: hidden;
}

.knopf7-search-wrap .form-control {
    min-height: 48px;
    border: 0;
    background: transparent;
    padding-left: 1.25rem;
    box-shadow: none;
}

.knopf7-search-wrap .btn {
    width: 54px;
    border: 0;
    color: var(--knopf7-primary);
    background: transparent;
}

/* Social links: round icon buttons in the service bar, labelled rows in the mobile menu */
.knopf7-social {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.knopf7-servicebar .knopf7-social {
    padding-right: .9rem;
    border-right: 1px solid rgba(255, 255, 255, .45);
}

.knopf7-servicebar .knopf7-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -.2rem 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.knopf7-servicebar-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.knopf7-servicebar-link:hover,
.knopf7-servicebar-link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.knopf7-social-link svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.knopf7-servicebar .knopf7-social-link:hover,
.knopf7-servicebar .knopf7-social-link:focus-visible {
    color: var(--knopf7-primary);
    background: var(--knopf7-white);
    transform: translateY(-1px);
}

.knopf7-social--menu {
    gap: 1.25rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--knopf7-line);
}

.knopf7-menu-utility .knopf7-social-link {
    gap: .5rem;
}

.knopf7-menu-utility .knopf7-social-link svg {
    width: 20px;
    height: 20px;
    color: var(--knopf7-primary);
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-servicebar .knopf7-social-link {
        transition: none;
    }
}

.knopf7-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
}

.knopf7-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    color: var(--knopf7-ink);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.knopf7-action svg,
.knopf7-minibasket svg {
    width: 22px;
    height: 22px;
}

.knopf7-minibasket .btn,
.knopf7-mobile-basket .btn {
    color: var(--knopf7-ink);
    background: transparent;
    border: 0;
    font-weight: 700;
}

.knopf7-minibasket .badge,
.knopf7-mobile-basket .badge {
    background: var(--knopf7-primary);
}

.knopf7-nav-wrap {
    position: relative;
    z-index: 20;
    background: var(--knopf7-white);
    border-bottom: 1px solid var(--knopf7-line);
    box-shadow: 0 8px 24px rgba(69, 74, 80, .06);
    /* keep the menu off the viewport edge, aligned with the page gutters */
    padding-left: clamp(1rem, 2.5vw, 3.5rem);
    padding-right: clamp(1rem, 2.5vw, 3.5rem);
}

.knopf7-nav-wrap .navbar-nav-mega {
    max-width: var(--knopf7-content-max);
    margin-left: auto;
    margin-right: auto;
}

.knopf7-nav-wrap .navbar-nav-mega {
    width: 100%;
    justify-content: center;
    gap: .2rem;
}

.knopf7-nav-wrap .nav-link-1 {
    color: var(--knopf7-ink);
    font-weight: 700;
    text-transform: uppercase;
    padding: 1rem .75rem;
    border-bottom: 3px solid transparent;
}

.knopf7-nav-wrap .nav-link-1:hover,
.knopf7-nav-wrap .nav-link-1.active {
    color: var(--knopf7-primary);
    border-bottom-color: var(--knopf7-primary);
}

.knopf7-nav-wrap .nav-level-2 {
    border-top: 1px solid var(--knopf7-line);
    box-shadow: var(--knopf7-shadow);
}

.knopf7-mobile-nav {
    border-top: 1px solid var(--knopf7-line);
    box-shadow: 0 -8px 20px rgba(69, 74, 80, .08);
}

.knopf7-mobile-menu {
    --bs-offcanvas-width: min(92vw, 420px);
    color: var(--knopf7-ink);
    background: var(--knopf7-white);
}

.knopf7-mobile-menu-header {
    min-height: 76px;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-mobile-menu-brand {
    display: inline-flex;
    align-items: center;
}

.knopf7-mobile-menu-brand img {
    display: block;
    width: 132px;
    height: auto;
}

.knopf7-mobile-menu .btn-close,
.knopf7-mobile-search .btn-close {
    width: 44px;
    height: 44px;
    padding: 0;
    background-position: center;
    border-radius: 999px;
}

.knopf7-menu-panel {
    display: none;
    min-height: 100%;
}

.knopf7-menu-panel.is-active {
    display: block;
    animation: knopf7-menu-in .18s ease-out;
}

@keyframes knopf7-menu-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

.knopf7-menu-panel-heading {
    display: grid;
    gap: .65rem;
    padding: 1.15rem 1rem .8rem;
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-menu-panel-heading h2 {
    color: var(--knopf7-ink);
    font-family: "Source Sans Pro", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.knopf7-menu-back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    gap: .55rem;
    margin: -.45rem 0 -.15rem -.5rem;
    padding: .45rem .5rem;
    color: var(--knopf7-primary);
    background: transparent;
    border: 0;
    font-weight: 700;
}

.knopf7-menu-back svg,
.knopf7-menu-forward svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.knopf7-menu-list {
    display: block;
}

.knopf7-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    gap: 1rem;
    padding: .8rem 1rem;
    color: var(--knopf7-ink);
    background: var(--knopf7-white);
    border: 0;
    border-bottom: 1px solid var(--knopf7-line);
    border-radius: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
}

.knopf7-menu-link:hover,
.knopf7-menu-link:focus-visible,
.knopf7-menu-child-link:hover,
.knopf7-menu-child-link:focus-visible {
    color: var(--knopf7-primary);
    background: #fff7fb;
}

.knopf7-menu-link.active,
.knopf7-menu-child-link.active {
    color: var(--knopf7-primary-dark);
    background: #fdeaf4;
    box-shadow: inset 4px 0 0 var(--knopf7-primary);
}

.knopf7-menu-all {
    color: var(--knopf7-primary);
    font-weight: 700;
}

.knopf7-menu-children {
    padding: .25rem 0 .5rem 1rem;
    background: var(--knopf7-soft);
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-menu-child-link {
    display: block;
    min-height: 44px;
    padding: .7rem 1rem;
    color: var(--knopf7-muted);
    font-size: .95rem;
    line-height: 1.35;
    text-decoration: none;
}

.knopf7-menu-utility {
    display: grid;
    gap: .15rem;
    padding: 1rem;
    background: var(--knopf7-soft);
}

.knopf7-menu-utility a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--knopf7-ink);
    font-weight: 600;
    text-decoration: none;
}

.knopf7-mobile-search {
    --bs-offcanvas-height: auto;
    color: var(--knopf7-ink);
    background: var(--knopf7-white);
    border-bottom: 0;
    box-shadow: var(--knopf7-shadow);
}

.knopf7-mobile-search .offcanvas-header {
    padding: 1rem 1rem .5rem;
}

.knopf7-mobile-search .offcanvas-title {
    font-family: "Source Sans Pro", system-ui, sans-serif;
    font-weight: 700;
}

.knopf7-mobile-search .offcanvas-body {
    padding: .75rem 1rem 1.25rem;
}

.knopf7-mobile-search-form .input-group {
    overflow: hidden;
    border: 2px solid var(--knopf7-primary);
    border-radius: 999px;
}

.knopf7-mobile-search-form .form-control {
    min-height: 52px;
    padding-left: 1.15rem;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
}

.knopf7-mobile-search-form .btn {
    width: 56px;
    border-radius: 0;
}

.knopf7-mobile-search-form svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.knopf7-hero {
    position: relative;
    min-height: clamp(430px, 54vw, 620px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--knopf7-soft);
}

.knopf7-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74) 44%, rgba(255, 255, 255, .08));
}

.knopf7-hero picture,
.knopf7-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.knopf7-hero-img {
    object-fit: cover;
}

.knopf7-hero .container-xxl {
    position: relative;
    z-index: 1;
}

.knopf7-hero-content {
    width: min(560px, 100%);
    padding: 3rem 0;
}

.knopf7-eyebrow {
    color: var(--knopf7-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: .55rem;
}

.knopf7-hero h2,
.knopf7-quicklinks h2,
.knopf7-story-band h2,
.knopf7-copy-section h2 {
    color: var(--knopf7-ink);
    font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}

.knopf7-hero h2 {
    font-size: clamp(2rem, 4.6vw, 3.8rem);
    line-height: 1.05;
    margin: 0 0 1rem;
}

.knopf7-hero p:not(.knopf7-eyebrow) {
    color: var(--knopf7-ink);
    font-size: 1.2rem;
    max-width: 38rem;
}

.knopf7-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.knopf7-hero-slider {
    position: relative;
    overflow: hidden;
    background: var(--knopf7-soft);
    box-shadow: 0 10px 26px rgba(69, 74, 80, .08);
}

.knopf7-hero-track {
    position: relative;
}

.knopf7-hero-slide {
    display: none;
    width: 100%;
}

.knopf7-hero-slide.is-active {
    display: block;
}

.knopf7-hero-slide picture {
    display: block;
    width: 100%;
}

.knopf7-hero-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.knopf7-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    display: flex;
    gap: .45rem;
    transform: translateX(-50%);
    z-index: 2;
}

.knopf7-hero-dot {
    width: .7rem;
    height: .7rem;
    padding: 0;
    border: 2px solid var(--knopf7-white);
    border-radius: 999px;
    background: rgba(69, 74, 80, .35);
}

.knopf7-hero-dot.is-active {
    background: var(--knopf7-primary);
}

.knopf7-bubbles,
.knopf7-quicklinks,
.knopf7-product-section,
.knopf7-inspiration,
.knopf7-story-band,
.knopf7-copy-section,
.knopf7-banner-section {
    padding: clamp(1.35rem, 2.8vw, 2.4rem) 0;
}

.knopf7-bubbles {
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.knopf7-bubbles + .knopf7-product-section,
.knopf7-banner-section + .knopf7-product-section {
    padding-top: clamp(1rem, 2vw, 1.5rem);
}

.knopf7-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.knopf7-section-head h2 {
    margin-bottom: 0;
}

.knopf7-section-head > p {
    max-width: 34rem;
    margin-bottom: .25rem;
    color: var(--knopf7-muted);
}

.knopf7-quicklinks h2,
.knopf7-copy-section h2,
.knopf7-bubbles h2,
.knopf7-inspiration h2,
.knopf7-storefront-heading {
    font-family: Raleway, sans-serif;
    font-size: 1.8em;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: .9rem;
}

.knopf7-bubble {
    display: block;
    transition: transform .18s ease;
}

.knopf7-bubble img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(69, 74, 80, .12);
}

.knopf7-bubble:hover {
    transform: translateY(-3px);
}

.knopf7-carousel--bubbles .knopf7-carousel-viewport {
    padding-top: .25rem;
}

.knopf7-carousel--bubbles .knopf7-bubble {
    width: 100%;
}

.knopf7-quicklink-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.knopf7-image-tile {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--knopf7-white);
    background: var(--knopf7-ink);
    border-radius: var(--knopf7-radius);
    text-decoration: none;
    box-shadow: var(--knopf7-shadow);
}

.knopf7-image-tile {
    aspect-ratio: 4 / 3;
}

.knopf7-image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.knopf7-image-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(69, 74, 80, .74), rgba(69, 74, 80, .04));
}

.knopf7-image-tile span {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
    color: var(--knopf7-white);
    font-size: 1.35rem;
    font-weight: 700;
}

.knopf7-image-tile:hover img {
    transform: scale(1.04);
}

.knopf7-inspiration-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    overflow: hidden;
}

.knopf7-inspiration-card {
    display: block;
}

.knopf7-inspiration-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--knopf7-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.knopf7-product-section-muted,
.knopf7-story-band,
.knopf7-inspiration {
    background: var(--knopf7-soft);
}

.knopf7-carousel {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.knopf7-carousel-viewport {
    overflow: hidden;
    outline: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.knopf7-carousel-viewport.is-dragging {
    cursor: grabbing;
}

.knopf7-carousel-viewport img,
.knopf7-carousel-viewport a {
    -webkit-user-drag: none;
}

.knopf7-carousel-viewport:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(194, 36, 122, .22);
}

.knopf7-carousel-track {
    display: flex;
    gap: 10px;
    transform: translate3d(0, 0, 0);
    transition: transform .34s ease;
    will-change: transform;
}

.cat-list {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cat-list::-webkit-scrollbar {
    display: none;
}

.cat-list-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.knopf7-carousel-slide {
    flex: 0 0 calc((100% - 50px) / 6);
    min-width: 0;
}

.knopf7-carousel-slide .product-card {
    height: 100%;
}

.knopf7-carousel .product-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.knopf7-carousel .product-card:hover {
    transform: none;
    box-shadow: none;
}

.knopf7-carousel .product-card .product-img-wrapper {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e9eb;
    border-radius: var(--knopf7-radius);
    box-shadow: 0 2px 8px rgba(69, 74, 80, .055);
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.knopf7-carousel .product-card .product-img,
.knopf7-carousel .product-card .product-img-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

.knopf7-carousel .product-card .product-img {
    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
    border-radius: var(--knopf7-radius);
}

.knopf7-carousel .product-card:hover .img-2,
.knopf7-carousel .product-card:focus-within .img-2 {
    width: 100%;
    height: 100%;
    max-height: none;
}

.knopf7-carousel .product-card .actions,
.knopf7-carousel .product-card .short-desc,
.knopf7-carousel .product-card .qty_weight,
.knopf7-carousel .product-card .pricePerUnit,
.knopf7-carousel .product-card .badges {
    display: none !important;
}

.knopf7-carousel .product-card .card-body {
    padding: 0;
}

.knopf7-carousel .product-card .card-body.sale {
    padding: 0;
}

.knopf7-carousel .product-card .card-body > .d-flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .5rem;
}

.knopf7-carousel .product-card .card-title {
    display: -webkit-box;
    height: auto;
    min-height: calc(10px + (2 * 1.35em));
    max-height: calc(10px + (2 * 1.35em));
    margin: 0;
    padding: 10px 0 0;
    color: var(--knopf7-ink);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.knopf7-carousel .product-card .price {
    display: block !important;
    align-items: center !important;
    margin: 0;
    padding-top: 10px;
    color: var(--knopf7-primary);
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

.knopf7-carousel .product-card .price .h5 {
    display: inline-block;
    margin: 0;
    color: inherit;
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    font-weight: 700;
}

.knopf7-carousel .product-card .oldPrice {
    display: none !important;
}

.knopf7-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.15rem;
}

.knopf7-carousel-prev,
.knopf7-carousel-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
}

.knopf7-carousel-prev svg,
.knopf7-carousel-next svg {
    width: 18px;
    height: 18px;
}

.knopf7-carousel-prev:disabled,
.knopf7-carousel-next:disabled {
    opacity: .4;
    pointer-events: none;
}

.knopf7-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 3rem;
}

.knopf7-carousel-dot {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--knopf7-line);
}

.knopf7-carousel-dot.is-active {
    background: var(--knopf7-primary);
}

.grid-view .product-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    text-align: left;
    transition: none;
}

.grid-view .product-card:hover {
    transform: none;
    box-shadow: none;
}

.grid-view .product-card .product-img-wrapper {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e9eb;
    border-radius: var(--knopf7-radius);
    box-shadow: 0 2px 8px rgba(69, 74, 80, .055);
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.grid-view .product-card .product-img,
.grid-view .product-card .product-img-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

.grid-view .product-card .product-img {
    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
    border-radius: var(--knopf7-radius);
}

.grid-view .product-card:hover .img-2,
.grid-view .product-card:focus-within .img-2 {
    width: 100%;
    height: 100%;
    max-height: none;
}

.grid-view .product-card .actions,
.grid-view .product-card .short-desc,
.grid-view .product-card .qty_weight,
.grid-view .product-card .pricePerUnit,
.grid-view .product-card .badges {
    display: none !important;
}

.grid-view .product-card .card-body,
.grid-view .product-card .card-body.sale {
    padding: 0;
}

.grid-view .product-card .card-body > .d-flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .5rem;
}

.grid-view .product-card .card-title {
    display: -webkit-box;
    height: auto;
    min-height: calc(10px + (2 * 1.35em));
    max-height: calc(10px + (2 * 1.35em));
    margin: 0;
    padding: 10px 0 0;
    color: var(--knopf7-ink);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.grid-view .product-card .price {
    display: block !important;
    align-items: center !important;
    margin: 0;
    padding-top: 10px;
    color: var(--knopf7-primary);
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

.grid-view .product-card .price .h5 {
    display: inline-block;
    margin: 0;
    color: inherit;
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    font-weight: 700;
}

.grid-view .product-card .oldPrice {
    display: none !important;
}

/* Product cards: title and price need independent rows at every card width. */
.grid-view .product-card .card-body > .d-flex,
.knopf7-carousel .product-card .card-body > .d-flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: .3rem;
}

.grid-view .product-card .card-title,
.knopf7-carousel .product-card .card-title {
    width: 100%;
    min-width: 0;
    min-height: calc(10px + (2 * 1.35em));
    max-height: calc(10px + (2 * 1.35em));
}

.grid-view .product-card .price,
.knopf7-carousel .product-card .price {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

.grid-view .product-card .price .h5,
.knopf7-carousel .product-card .price .h5 {
    margin: 0;
    line-height: 1.25;
}

@media (max-width: 575.98px) {
    .grid-view .product-card .card-title,
    .knopf7-carousel .product-card .card-title {
        font-size: .92rem;
    }

    .grid-view .product-card .price,
    .knopf7-carousel .product-card .price {
        font-size: .95rem;
    }
}

.knopf7-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
    gap: 2rem;
    align-items: center;
}

.knopf7-story-band h2 {
    font-size: clamp(1.7rem, 3vw, 2.55rem);
}

.knopf7-story-cards,
.knopf7-promo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.knopf7-story-card {
    aspect-ratio: 1 / 1;
}

.knopf7-banner-section {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.knopf7-wide-banner {
    display: block;
    overflow: hidden;
    border-radius: var(--knopf7-radius);
    box-shadow: var(--knopf7-shadow);
}

.knopf7-wide-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.knopf7-copy-section {
    background: var(--knopf7-white);
}

.knopf7-copy-section .container-xxl {
    max-width: 960px;
}

.knopf7-copy-section p {
    color: var(--knopf7-muted);
    font-size: 1.08rem;
}

.knopf7-footer {
    color: rgba(255, 255, 255, .84);
    background: var(--knopf7-ink);
    padding: 0 0 2rem;
}

.knopf7-footer a {
    color: var(--knopf7-white);
    text-decoration: none;
}

.knopf7-footer a:hover {
    color: #ffd3e9;
}

.knopf7-footer .h4 {
    color: var(--knopf7-white);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
}

.knopf7-footer-promo {
    color: var(--knopf7-white);
    background: var(--knopf7-primary);
    padding: 1.25rem 0;
    margin-bottom: 2.25rem;
}

.knopf7-footer-promo .btn {
    color: var(--knopf7-primary);
    background: var(--knopf7-white);
    border-color: var(--knopf7-white);
}

.knopf7-footer-promo-title {
    font-weight: 700;
    text-transform: uppercase;
}

.knopf7-footer-logo {
    width: 185px;
    max-width: 100%;
    height: auto;
    padding: .8rem;
    background: var(--knopf7-white);
    border-radius: var(--knopf7-radius);
    margin-bottom: 1rem;
}

.knopf7-footer-copy,
.knopf7-address,
.knopf7-vat-info {
    color: rgba(255, 255, 255, .78);
}

.knopf7-social--footer {
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.knopf7-social--footer .knopf7-social-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: 0 .95rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.knopf7-social--footer .knopf7-social-link svg {
    width: 17px;
    height: 17px;
}

.knopf7-social--footer .knopf7-social-link:hover,
.knopf7-social--footer .knopf7-social-link:focus-visible {
    color: var(--knopf7-white);
    background: var(--knopf7-primary);
    border-color: var(--knopf7-primary);
}

.knopf7-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.knopf7-footer-list li + li {
    margin-top: .55rem;
}

.knopf7-vat-info {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: right;
}

@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .knopf7-servicebar {
        min-height: 40px;
        padding: .35rem 0;
        font-size: .88rem;
        line-height: 1.25;
        text-align: center;
    }

    .knopf7-header-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: auto;
        gap: .75rem;
        padding: .7rem 0;
    }

    .knopf7-logo-link {
        justify-content: flex-start;
        width: max-content;
        max-width: 100%;
    }

    .knopf7-logo {
        width: auto;
        max-width: min(148px, 100%);
        max-height: 66px;
    }

    .knopf7-header-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        width: 46px;
        height: 46px;
        padding: 0;
        color: var(--knopf7-ink);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .knopf7-header-menu-button:hover,
    .knopf7-header-menu-button:focus-visible {
        color: var(--knopf7-primary);
        background: transparent;
    }

    .knopf7-header-menu-button:focus-visible {
        outline: 3px solid rgba(194, 36, 122, .2);
        outline-offset: 2px;
    }

    .knopf7-header-menu-button svg {
        width: 29px;
        height: 29px;
        fill: currentColor;
    }

    .knopf7-header-actions {
        display: none;
    }

    .knopf7-nav-wrap .navbar-collapse {
        padding: 1rem 0;
    }

    .knopf7-nav-wrap .nav-link-1 {
        padding: .7rem 0;
    }

    .knopf7-hero {
        min-height: 560px;
        align-items: flex-end;
    }

    .knopf7-hero::after {
        background: linear-gradient(0deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .72) 58%, rgba(255, 255, 255, .12));
    }

    .knopf7-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .knopf7-quicklink-grid,
    .knopf7-inspiration-rail {
        grid-template-columns: 1fr;
    }

    .knopf7-mobile-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: calc(68px + env(safe-area-inset-bottom));
        padding: 4px 4px env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(12px);
        z-index: 1035;
        transition: transform .18s ease, opacity .18s ease;
    }

    body.knopf7-mobile-overlay-open .knopf7-mobile-nav {
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
    }

    .knopf7-mobile-nav > .btn,
    .knopf7-mobile-nav > .knopf7-mobile-basket {
        display: flex;
        align-items: stretch;
        justify-content: center;
        min-width: 0;
        min-height: 60px;
        margin: 0;
        padding: 0;
        color: var(--knopf7-ink);
        background: transparent;
        border: 0;
        border-radius: 10px;
        text-decoration: none;
    }

    .knopf7-mobile-nav > .btn {
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-size: .75rem;
        line-height: 1.1;
    }

    .knopf7-mobile-nav > .btn:hover,
    .knopf7-mobile-nav > .btn:focus-visible,
    .knopf7-mobile-nav > .btn.active {
        color: var(--knopf7-primary);
        background: #fff1f8;
    }

    .knopf7-mobile-nav > .btn svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    .knopf7-mobile-basket > * {
        display: flex;
        width: 100%;
    }

    .knopf7-mobile-basket .btn {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 60px;
        gap: 3px;
        padding: 0 2px;
        border-radius: 10px;
        font-size: .75rem;
        line-height: 1.1;
    }

    .knopf7-mobile-basket .btn:hover,
    .knopf7-mobile-basket .btn:focus-visible {
        color: var(--knopf7-primary);
        background: #fff1f8;
    }

    .knopf7-mobile-basket .badge {
        position: absolute;
        top: 5px;
        margin-left: 18px;
        min-width: 18px;
        height: 18px;
        padding: 2px 5px;
        border-radius: 999px;
        font-size: .68rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .knopf7-menu-panel.is-active {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .knopf7-hero-content {
        padding-bottom: 2rem;
    }

    .knopf7-hero-actions .btn {
        width: 100%;
    }

    .knopf7-quicklink-grid {
        gap: .75rem;
    }

    .knopf7-image-tile {
        aspect-ratio: 16 / 10;
    }

    .knopf7-carousel-slide {
        flex-basis: 82%;
    }
}

@media (max-width: 1199.98px) {
    .knopf7-carousel-slide {
        flex-basis: calc((100% - 30px) / 4);
    }
}

@media (max-width: 767.98px) {
    .knopf7-carousel-slide {
        flex-basis: calc((100% - 20px) / 3);
    }
}

@media (max-width: 575.98px) {
    .knopf7-carousel-slide {
        flex-basis: calc((100% - 10px) / 2);
    }

    .knopf7-carousel--bubbles .knopf7-carousel-slide {
        flex-basis: calc((100% - 20px) / 3);
    }
}

@media (max-width: 767.98px) {
    /* Denser mobile start page: less empty vertical space, more content above the fold. */
    .cl-start .promoslider.py-3 {
        padding-top: .45rem !important;
        padding-bottom: .45rem !important;
    }

    .cl-start .knopf7-bubbles,
    .cl-start .knopf7-quicklinks,
    .cl-start .knopf7-product-section,
    .cl-start .knopf7-inspiration,
    .cl-start .knopf7-story-band,
    .cl-start .knopf7-copy-section,
    .cl-start .knopf7-banner-section {
        padding-top: .8rem;
        padding-bottom: .8rem;
    }

    .cl-start .knopf7-bubbles .knopf7-section-head {
        display: none;
    }

    .cl-start .knopf7-storefront-heading,
    .cl-start .knopf7-inspiration h2,
    .cl-start .knopf7-quicklinks h2,
    .cl-start .knopf7-copy-section h2 {
        margin-bottom: .55rem;
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .cl-start .knopf7-section-head {
        margin-bottom: .55rem;
    }

    .cl-start .knopf7-carousel-controls {
        margin-top: .65rem;
    }

    .cl-start .knopf7-bubbles + .knopf7-product-section,
    .cl-start .knopf7-banner-section + .knopf7-product-section {
        padding-top: .65rem;
    }

    .cl-start .knopf7-inspiration-rail {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cl-start .knopf7-inspiration-rail::-webkit-scrollbar {
        display: none;
    }

    .cl-start .knopf7-inspiration-card {
        min-width: 0;
        scroll-snap-align: start;
    }
}

/* Product detail: compact, responsive gallery and purchase area */
.details-top {
    padding-top: clamp(.75rem, 2vw, 1.75rem);
}

.knopf7-details-grid {
    --bs-gutter-x: clamp(1.5rem, 4vw, 4.5rem);
    --bs-gutter-y: 1.5rem;
    align-items: flex-start;
}

.knopf7-product-gallery > .carousel {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    height: min(70vh, 720px);
    min-height: 480px;
}

.knopf7-product-gallery .wrap {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 100%;
    border: 1px solid var(--knopf7-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.knopf7-product-gallery .wrap figure {
    padding: clamp(1rem, 3vw, 2.5rem);
}

.knopf7-product-gallery .wrap img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.knopf7-product-gallery .thumbnails {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: 82px;
    min-width: 0;
    max-height: 100%;
    gap: .65rem;
    padding: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    align-self: stretch;
    justify-content: flex-start;
}

.knopf7-product-gallery .thumbnails .thumb {
    display: grid;
    place-items: center;
    flex: 0 0 78px;
    width: 78px;
    min-width: 0;
    height: 78px;
    margin: 0;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    overflow: clip;
    contain: paint;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.knopf7-product-gallery .thumbnails .thumb:hover,
.knopf7-product-gallery .thumbnails .thumb:focus-visible {
    border-color: #d9a1bf;
    outline: none;
}

.knopf7-product-gallery .thumbnails .thumb.is-active,
.knopf7-product-gallery .thumbnails .thumb[aria-current="true"] {
    border-color: var(--knopf7-primary);
    box-shadow: 0 0 0 2px rgba(194, 36, 122, .12);
}

.knopf7-product-gallery .thumbnails .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 7px !important;
    background: var(--knopf7-soft);
    object-fit: contain;
    object-position: center;
    overflow: hidden;
    clip-path: inset(0 round 7px);
}

.knopf7-gallery-counter {
    display: none;
}

.knopf7-details-buybox {
    padding-top: .25rem;
}

.knopf7-details-buybox .details-title {
    margin-top: .35rem;
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    line-height: 1.15;
    text-wrap: balance;
}

.knopf7-details-buybox .details-shortdesc {
    margin: 1rem 0;
    line-height: 1.55;
}

.knopf7-details-buybox .details-information {
    margin-bottom: 1.25rem !important;
    padding: 1rem;
    gap: .75rem;
    border-radius: 10px;
    background: #f7f7f7;
}

.knopf7-details-buybox .details-information > div {
    width: 100%;
}

.knopf7-details-buybox .price-wrapper {
    margin: 1rem 0;
}

.knopf7-details-buybox .tobasket-function {
    flex-wrap: nowrap;
}

.knopf7-details-buybox .tobasket-function .form-control {
    min-width: 78px;
    min-height: 52px;
    text-align: center;
}

.knopf7-details-buybox .tobasket-function .btn {
    min-height: 52px;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .breadcrumb-wrapper {
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
    }

    .breadcrumb-wrapper .container-xxl {
        overflow: hidden;
    }

    .breadcrumb-wrapper .breadcrumb {
        flex-wrap: nowrap;
        margin: 0;
        padding-bottom: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .breadcrumb-wrapper .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-wrapper .breadcrumb-item {
        flex: 0 0 auto;
    }

    .details-top > .container-xxl {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .knopf7-details-grid {
        --bs-gutter-y: 1.25rem;
    }

    .knopf7-product-gallery > .carousel {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        gap: .75rem;
    }

    .knopf7-product-gallery .wrap {
        order: 1;
        display: flex;
        width: 100%;
        height: auto;
        aspect-ratio: var(--knopf7-gallery-ratio, 1);
        min-height: 250px;
        max-height: min(72vh, 560px);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .knopf7-product-gallery .wrap::-webkit-scrollbar {
        display: none;
    }

    .knopf7-product-gallery .wrap figure {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        height: 100%;
        margin: 0;
        padding: clamp(.75rem, 4vw, 1.25rem);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .knopf7-product-gallery .wrap img {
        position: static;
        transform: none;
    }

    .knopf7-product-gallery .thumbnails {
        order: 2;
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        height: 68px;
        gap: .5rem;
        padding: 2px 1px 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .knopf7-product-gallery .thumbnails::-webkit-scrollbar {
        display: none;
    }

    .knopf7-product-gallery .thumbnails .thumb {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
        scroll-snap-align: start;
    }

    .knopf7-gallery-counter {
        position: absolute;
        z-index: 3;
        top: .75rem;
        right: .75rem;
        display: flex;
        align-items: center;
        gap: .2rem;
        min-width: 48px;
        min-height: 30px;
        padding: .25rem .65rem;
        color: var(--knopf7-ink);
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(69, 74, 80, .12);
        border-radius: 999px;
        box-shadow: 0 3px 12px rgba(69, 74, 80, .1);
        font-size: .8rem;
        font-variant-numeric: tabular-nums;
    }

    .knopf7-details-buybox {
        padding-top: 0;
    }

    .knopf7-details-buybox .details-title {
        margin-top: 0;
        font-size: clamp(1.45rem, 6vw, 1.8rem);
    }

    .knopf7-details-buybox .product-links {
        margin-bottom: 1rem;
    }
}

/* cross-selling in the buy-box column (details page, desktop only) */
.knopf7-xsell-side {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--knopf7-line);
}
.knopf7-xsell-side-head {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--knopf7-ink);
}
.knopf7-xsell-side-sub {
    font-size: .875rem;
    color: var(--knopf7-muted);
    margin-bottom: .75rem;
}
.knopf7-xsell-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.knopf7-xsell-side-list li + li {
    border-top: 1px solid var(--knopf7-line);
}
.knopf7-xsell-side-list a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem 0;
    color: var(--knopf7-ink);
    text-decoration: none;
}
.knopf7-xsell-side-list a:hover .knopf7-xsell-side-title {
    color: var(--knopf7-primary);
}
.knopf7-xsell-side-list img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--knopf7-radius);
    background: var(--knopf7-soft);
}
.knopf7-xsell-side-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.knopf7-xsell-side-title {
    font-size: .9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.knopf7-xsell-side-price {
    font-size: .9rem;
    font-weight: 700;
    color: var(--knopf7-primary);
    margin-top: .15rem;
}

/* smartphone/tablet: cross-selling as one-row auto-playing slider (knopf7.js) */
@media (max-width: 991.98px) {
    .knopf7-xsell-side-list {
        display: flex;
        gap: .75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }
    .knopf7-xsell-side-list::-webkit-scrollbar {
        display: none;
    }
    .knopf7-xsell-side-list li {
        flex: 0 0 calc((100% - 1.5rem) / 3);
        scroll-snap-align: start;
    }
    .knopf7-xsell-side-list li + li {
        border-top: 0;
    }
    .knopf7-xsell-side-list a {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        padding: 0;
    }
    .knopf7-xsell-side-list img {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border: 1px solid var(--knopf7-line);
    }
    .knopf7-xsell-side-title {
        font-size: .8rem;
    }
    .knopf7-xsell-side-price {
        font-size: .85rem;
        margin-top: .1rem;
    }
}

/* endless slider: clones only exist for the mobile slider */
.knopf7-xsell-clone {
    display: none;
}
@media (max-width: 991.98px) {
    .knopf7-xsell-clone {
        display: block;
    }
    .knopf7-xsell-side-controls {
        margin-top: .75rem;
    }
    .knopf7-xsell-side-controls .knopf7-carousel-prev,
    .knopf7-xsell-side-controls .knopf7-carousel-next {
        width: 36px;
        height: 36px;
    }
    .knopf7-xsell-side-controls .knopf7-carousel-dots {
        flex-wrap: wrap;
        gap: .35rem;
    }
    .knopf7-xsell-side-controls .knopf7-carousel-dot {
        width: .5rem;
        height: .5rem;
    }
}

/* desktop: all cross-selling articles in a vertically scrollable list */
@media (min-width: 992px) {
    .knopf7-xsell-side-list {
        max-height: 420px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: .5rem;
        scrollbar-width: thin;
        scrollbar-color: var(--knopf7-primary-border) transparent;
    }
    .knopf7-xsell-side-list::-webkit-scrollbar {
        width: 6px;
    }
    .knopf7-xsell-side-list::-webkit-scrollbar-thumb {
        background: var(--knopf7-primary-border);
        border-radius: 3px;
    }
}

/* details gallery thumbnails: always filled, no borders. object-fit: cover crops
   non-square images; knopf7.js additionally detects plain-colour margins inside
   the picture and zooms in (.knopf7-thumb-cropped, inline size/position in %). */
.knopf7-product-gallery .thumbnails .thumb {
    position: relative;
    padding: 0;
    background: var(--knopf7-soft);
}
.knopf7-product-gallery .thumbnails .thumb img {
    object-fit: cover;
    object-position: center top; /* portrait pictures (mostly people): show the top */
    border-radius: 0 !important;
    clip-path: none;
}
.knopf7-product-gallery .thumbnails .thumb img.knopf7-thumb-cropped {
    position: absolute;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: fill;
}

/* ---- "added to basket" feedback modal (widget/minibasket/newbasketitemmodal.html.twig) ---- */
.knopf7-basket-added .modal-content {
    --bs-modal-border-radius: 20px;
    --bs-modal-inner-border-radius: 20px;
    border: 0;
    border-radius: 20px;
    box-shadow: var(--knopf7-shadow);
    overflow: hidden;
}

.knopf7-basket-added .modal-header {
    padding: 1.5rem 1.75rem 1.25rem;
}

.knopf7-basket-added .modal-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.knopf7-basket-added-item img,
.knopf7-basket-added-list img {
    border-radius: 12px !important;
}

@media (max-width: 575.98px) {
    .knopf7-basket-added .modal-dialog {
        margin: .75rem;
    }

    .knopf7-basket-added .modal-header {
        padding: 1.25rem 1.25rem 1rem;
    }

    .knopf7-basket-added .modal-body {
        padding: 1.25rem;
    }
}

.knopf7-basket-added .modal-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.knopf7-basket-added-check {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: .3rem;
    border-radius: 50%;
    background: var(--knopf7-primary);
    fill: var(--knopf7-white);
}

.knopf7-basket-added-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.knopf7-basket-added-item img {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--knopf7-radius);
    background: var(--knopf7-soft);
}

.knopf7-basket-added-msg {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

.knopf7-basket-added-summary {
    margin: 0;
    color: var(--knopf7-muted);
    font-size: .9rem;
}

.knopf7-basket-added-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin: 1rem 0 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-basket-added-section {
    margin-top: 1.25rem;
}

.knopf7-basket-added-head {
    margin-bottom: .6rem;
    color: var(--knopf7-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.knopf7-basket-added-list {
    display: flex;
    gap: .75rem;
    margin: 0;
    padding: 0 0 .4rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--knopf7-primary-border) transparent;
}

.knopf7-basket-added-list li {
    flex: 0 0 calc((100% - 3rem) / 5);
    min-width: 0;
    scroll-snap-align: start;
}

.knopf7-basket-added-list a {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    color: var(--knopf7-ink);
    text-decoration: none;
}

.knopf7-basket-added-list a:hover .knopf7-basket-added-ptitle {
    color: var(--knopf7-primary);
}

.knopf7-basket-added-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--knopf7-radius);
    background: var(--knopf7-soft);
}

.knopf7-basket-added-ptitle {
    display: -webkit-box;
    overflow: hidden;
    font-size: .85rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.knopf7-basket-added-price {
    color: var(--knopf7-primary);
    font-size: .9rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .knopf7-basket-added-item {
        align-items: flex-start;
    }

    .knopf7-basket-added-item img {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .knopf7-basket-added-msg {
        font-size: .95rem;
    }

    .knopf7-basket-added-actions .btn {
        flex: 1 1 100%;
    }

    .knopf7-basket-added-list li {
        flex-basis: calc((100% - 1.5rem) / 2.4);
    }
}

/* ---- one-click "to basket" button on product tiles (widget/product/quickadd.html.twig) ----
   A sewn-on label: magenta tab flush in the bottom-left corner of the picture (the product photos
   carry the Stoff & Liebe ribbon bottom-right), with a stitched seam. The seam "sews" while the
   article is being added; afterwards the tab briefly shows a check mark. */
.knopf7-quickadd {
    --qa-h: 2.6rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3; /* above .stretched-link */
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: var(--qa-h);
    min-width: var(--qa-h);
    padding: 0 .8rem 0 .75rem;
    border: 0;
    border-radius: 0 14px 0 var(--knopf7-radius);
    background: var(--knopf7-primary);
    color: var(--knopf7-white);
    font-family: "Open Sans", sans-serif;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, gap .22s ease;
}

/* the seam */
.knopf7-quickadd::before {
    content: "";
    position: absolute;
    inset: 4px 4px 4px 4px;
    border: 1px dashed rgba(255, 255, 255, .62);
    border-radius: 0 10px 0 calc(var(--knopf7-radius) - 3px);
    pointer-events: none;
}

.knopf7-quickadd-icon,
.knopf7-quickadd-done {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-quickadd-done {
    display: none;
    stroke-width: 2.4;
}

.knopf7-quickadd-label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .22s ease, opacity .18s ease;
}

.knopf7-quickadd:hover {
    background: var(--knopf7-primary-dark);
}

.knopf7-quickadd:focus-visible {
    outline: 2px solid var(--knopf7-white);
    outline-offset: -7px;
    box-shadow: 0 0 0 2px var(--knopf7-primary-dark);
}

/* desktop with a mouse: the label unfolds on hover / keyboard focus */
@media (hover: hover) and (min-width: 992px) {
    .product-card:hover .knopf7-quickadd,
    .knopf7-quickadd:focus-visible {
        gap: .45rem;
    }

    .product-card:hover .knopf7-quickadd-label,
    .knopf7-quickadd:focus-visible .knopf7-quickadd-label {
        max-width: 11rem;
        opacity: 1;
    }
}

/* adding: the seam runs along like a sewing machine stitch */
.knopf7-quickadd.is-loading {
    pointer-events: none;
}

.knopf7-quickadd.is-loading::before {
    border-color: transparent;
    background:
        linear-gradient(90deg, #fff 55%, transparent 0) 0 0 / 9px 1px repeat-x,
        linear-gradient(90deg, #fff 55%, transparent 0) 0 100% / 9px 1px repeat-x;
    animation: knopf7-quickadd-sew .45s linear infinite;
}

@keyframes knopf7-quickadd-sew {
    to { background-position: 9px 0, -9px 100%; }
}

/* added: check mark for a moment */
.knopf7-quickadd.is-added .knopf7-quickadd-icon {
    display: none;
}

.knopf7-quickadd.is-added .knopf7-quickadd-done {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-quickadd,
    .knopf7-quickadd-label {
        transition: none;
    }

    .knopf7-quickadd.is-loading::before {
        animation: none;
    }
}

/* list-based tiles (cross-selling, basket modal): the tab sits in the bottom-left corner of the
   square picture; margin-top in % is relative to the width, i.e. the picture height */
.knopf7-xsell-side-list li,
.knopf7-basket-added-list li {
    position: relative;
}

.knopf7-basket-added-list .knopf7-quickadd {
    --qa-h: 2.35rem;
    top: 0;
    bottom: auto;
    margin-top: calc(100% - var(--qa-h));
    padding: 0 .6rem;
    border-radius: 0 12px 0 12px;
}

.knopf7-basket-added-list .knopf7-quickadd::before {
    border-radius: 0 8px 0 9px;
}

/* cross-selling in the buy box, desktop: rows -> square stitched tab at the end of the row */
@media (min-width: 992px) {
    .knopf7-xsell-side-list a {
        padding-right: 3.1rem;
    }

    .knopf7-xsell-side-list .knopf7-quickadd {
        --qa-h: 2.4rem;
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;
        justify-content: center;
        padding: 0;
        border-radius: 10px;
        transform: translateY(-50%);
    }

    .knopf7-xsell-side-list .knopf7-quickadd::before {
        border-radius: 7px;
    }
}

/* cross-selling slider, smartphone/tablet: small tiles, icon-only tab */
@media (max-width: 991.98px) {
    .knopf7-xsell-side-list .knopf7-quickadd {
        --qa-h: 2.15rem;
        top: 0;
        bottom: auto;
        margin-top: calc(100% - var(--qa-h));
        padding: 0 .5rem;
        border-radius: 0 10px 0 var(--knopf7-radius);
    }

    .knopf7-xsell-side-list .knopf7-quickadd::before {
        inset: 3px;
        border-radius: 0 7px 0 5px;
    }

    .knopf7-xsell-side-list .knopf7-quickadd-icon,
    .knopf7-xsell-side-list .knopf7-quickadd-done {
        width: 1.1rem;
        height: 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .knopf7-quickadd {
        --qa-h: 2.4rem;
        padding: 0 .65rem;
    }
}

/* ---- payment buttons (PayPal, Pay Later, Google Pay, Apple Pay) ----
   Rendered by the osc_paypal module next to the shop's own buttons (mini basket, basket,
   order step). They get breathing room and the same pill shape as .btn. */
.paypal-button-container:not(:empty) {
    margin-top: .85rem;
}

.paypal-button-container.float-right,
.paypal-button-container.pull-right {
    float: none !important;
    width: 100%;
}

.paypal-button-wrapper.large {
    max-width: none;
}

.google-pay-loading-container:not(:empty) {
    margin-top: .85rem;
}

/* Google Pay renders a plain <button> in the page, Apple Pay a custom element */
.paypal-button-container .gpay-button,
.paypal-button-container .gpay-card-info-container {
    border-radius: 999px !important;
}

.paypal-button-container .gpay-card-info-container {
    width: 100%;
    min-height: 45px;
}

apple-pay-button {
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 45px;
    --apple-pay-button-border-radius: 999px;
    --apple-pay-button-padding: 0 1rem;
    display: block;
}

/* hint for a running PayPal Express session, shown right below the buttons */
.minibasket-menu-box .bottom > .alert,
.paypal-button-container + .alert {
    margin-top: .85rem;
    margin-bottom: 0;
}

/* mini basket: gap between the totals, the basket button and the payment buttons */
.minibasket-menu-box .bottom > .btn {
    margin-top: .35rem;
}

/* ---- category long text: images are stripped in the template, remaining column uses full width ---- */
#catLongDescLocator .row > [class*="col-"]:only-child {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* ---- subcategories on category pages: round image slider like the start page bubbles ---- */
.knopf7-subcat {
    color: var(--knopf7-ink);
    text-align: center;
    text-decoration: none;
}

.knopf7-subcat img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.knopf7-subcat-name {
    display: block;
    margin-top: .7rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.knopf7-subcat:hover .knopf7-subcat-name,
.knopf7-subcat:focus-visible .knopf7-subcat-name {
    color: var(--knopf7-primary);
}

.knopf7-carousel--subcats .knopf7-carousel-viewport {
    padding-bottom: .25rem;
}

/* everything fits on one page: no controls */
.knopf7-carousel.is-single-page .knopf7-carousel-controls {
    display: none;
}

@media (max-width: 575.98px) {
    .knopf7-subcat-name {
        font-size: .85rem;
    }
}

/* subcategory circles are a bit smaller than the start page bubbles */
.knopf7-carousel--subcats .knopf7-carousel-slide {
    flex-basis: calc((100% - 70px) / 8);
}

@media (max-width: 1199.98px) {
    .knopf7-carousel--subcats .knopf7-carousel-slide {
        flex-basis: calc((100% - 50px) / 6);
    }
}

@media (max-width: 767.98px) {
    .knopf7-carousel--subcats .knopf7-carousel-slide {
        flex-basis: calc((100% - 30px) / 4);
    }
}

@media (max-width: 575.98px) {
    .knopf7-carousel--subcats .knopf7-carousel-slide {
        flex-basis: calc((100% - 20px) / 3);
    }
}

/* ==== header + first screen ("Boutique"): centred logo, one-line menu, quiet search ==== */
.knopf7-servicebar {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.knopf7-servicebar .knopf7-social {
    padding-right: 0;
    border-right: 0;
}

.knopf7-action,
.knopf7-header-actions .btn-minibasket {
    font-size: .95rem;
    font-weight: 600;
}

@media (min-width: 992px) {
    .knopf7-servicebar {
        padding: .3rem 0;
    }

    /* search left, logo centred, account + basket right */
    .knopf7-header-grid {
        grid-template-columns: 1fr auto 1fr;
        min-height: 124px;
    }

    .knopf7-logo-link {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .knopf7-logo {
        width: 272px;
    }

    .knopf7-search-wrap {
        grid-column: 1;
        grid-row: 1;
        /* optically a little below the centre line, level with the logo lettering */
        position: relative;
        top: 10px;
    }

    .knopf7-header-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        gap: 1.25rem;
    }

    .knopf7-header-actions .btn-minibasket {
        padding-right: 0;
    }

    /* menu: one line, flush with the page gutters */
    .knopf7-nav-wrap {
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }

    .knopf7-nav-wrap .navbar-nav-mega {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0;
    }

    .knopf7-nav-wrap .navbar-nav-mega .nav-item {
        margin: 0;
    }

    .knopf7-nav-wrap .navbar-nav.navbar-nav-mega .nav-link-1 {
        margin: 0;
        padding: .85rem .35rem;
        font-family: Raleway, sans-serif;
        font-size: clamp(.7rem, .25rem + .68vw, .84rem);
        font-weight: 600;
        letter-spacing: clamp(.02em, .3vw - .14em, .08em);
        white-space: nowrap;
    }

    .knopf7-nav-wrap .navbar-nav.navbar-nav-mega > .nav-item:first-child .nav-link-1 {
        padding-left: 0;
    }

    .knopf7-nav-wrap .navbar-nav.navbar-nav-mega > .nav-item:last-child .nav-link-1 {
        padding-right: 0;
    }

    .knopf7-carousel--bubbles:not(.knopf7-carousel--subcats) .knopf7-carousel-slide {
        flex-basis: calc((100% - 60px) / 7);
    }
}

/* start page rhythm and type: Raleway for headings, Source Sans for everything else */
.cl-start .promoslider {
    padding-bottom: 0 !important;
}

.knopf7-bubbles {
    padding-top: 1.5rem;
}

.knopf7-storefront-heading,
.knopf7-section-head h2 {
    font-family: Raleway, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
}

.knopf7-carousel .product-card .card-title {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
}

/* search field (all widths) */
/* search: a single light line instead of a box */
.knopf7-search-wrap .search {
    display: block !important;
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    background: transparent;
}

.knopf7-search-wrap .search:focus-within {
    outline: 0;
}

.knopf7-search-wrap .input-group {
    position: relative;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid #c6c9cd;
    border-radius: 0;
    background: transparent;
    transition: border-color .15s ease;
}

.knopf7-search-wrap .input-group:focus-within {
    border-bottom-color: var(--knopf7-primary);
}

.knopf7-search-wrap .form-control {
    min-height: 38px;
    padding-left: 2rem;
    padding-right: 0;
    font-size: .95rem;
}

.knopf7-search-wrap .btn {
    /* magnifier on the left, in front of the text */
    left: 0;
    right: auto;
    width: 26px;
    padding: 0 0 0 3px;
    overflow: visible;
    justify-content: flex-start;
    border: 0;
    color: var(--knopf7-ink);
    background: transparent;
}

/* phone/tablet: magnifier next to the menu button opens the search panel */
@media (max-width: 991.98px) {
    .knopf7-header-grid {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: .1rem;
    }

    .knopf7-header-basket-button {
        position: relative;
    }

    .knopf7-header-basket-button .badge {
        position: absolute;
        top: 3px;
        right: 1px;
        min-width: 18px;
        padding: 3px 5px;
        border-radius: 999px;
        color: var(--knopf7-white);
        background: var(--knopf7-primary);
        font-size: .68rem;
        line-height: 1;
    }

    .knopf7-header-grid .knopf7-header-menu-button svg {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 992px) {
    .knopf7-search-wrap .search {
        width: 260px;
        margin-left: 0 !important;
    }
}

/* ---- details page: amount stepper (− 1 +) as a pill next to the basket button ---- */
.knopf7-details-buybox .tobasket-function {
    gap: .6rem;
}

.knopf7-qty {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    border: 1px solid #c6c9cd;
    border-radius: 999px;
    background: var(--knopf7-white);
    overflow: hidden;
}

.knopf7-qty:focus-within {
    border-color: var(--knopf7-primary);
}

.knopf7-details-buybox .tobasket-function .knopf7-qty .form-control {
    flex: 0 0 auto;
    width: 3ch;
    min-width: 0;
    min-height: 0;
    padding: 0;
    text-align: right;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

.knopf7-qty .form-control::-webkit-outer-spin-button,
.knopf7-qty .form-control::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.knopf7-qty-btn {
    flex: 0 0 auto;
    width: 44px;
    padding: 0;
    border: 0;
    color: var(--knopf7-ink);
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
}

.knopf7-qty-btn:hover,
.knopf7-qty-btn:focus-visible {
    color: var(--knopf7-primary);
    background: var(--knopf7-soft);
    outline: 0;
}

/* the basket button stands on its own now: fully rounded on both sides */
.knopf7-details-buybox .tobasket-function .btn {
    flex: 1 1 auto;
    border-radius: 999px !important;
}

.knopf7-qty-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 5.2rem;
    margin: 0;
    padding: 0 .15rem;
    font-size: 1.05rem;
    cursor: text;
}

.knopf7-qty-unit {
    color: var(--knopf7-muted);
    font-weight: 600;
}

/* ---- checkout header: logo centred, progress steps in their own row below ---- */
.knopf7-header-grid.knopf7-header-grid--checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
    padding: 1rem 0 1.1rem;
}

.knopf7-header-grid--checkout .knopf7-logo-link {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
}

.knopf7-header-grid--checkout > section {
    grid-column: 1;
    min-width: 0;
}

.knopf7-header-grid--checkout .steps {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-size: .85rem;
}

/* progress steps in brand colour instead of green */
.steps .step.active {
    color: var(--knopf7-primary);
    font-weight: 700;
}

.steps .step.active .num {
    border-color: var(--knopf7-primary);
    color: var(--knopf7-primary);
}

.steps .step.done .num {
    border-color: var(--knopf7-primary);
    background: var(--knopf7-primary);
    color: var(--knopf7-white);
}

/* ==== mini basket: centred dialog (widget/minibasket/minibasket.html.twig) ==== */
.knopf7-mb .modal-dialog {
    max-width: 560px;
}

.knopf7-mb .modal-content {
    --bs-modal-border-radius: 20px;
    --bs-modal-inner-border-radius: 20px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(47, 50, 55, .28);
    overflow: hidden;
}

.knopf7-mb .modal-header {
    align-items: flex-start;
    padding: 1.5rem 1.75rem .9rem;
    border-bottom: 0;
}

.knopf7-mb .modal-body {
    padding: 0 1.75rem 1.6rem;
}

.knopf7-mb-title {
    font-family: Raleway, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.knopf7-mb-count {
    margin-top: .15rem;
    color: var(--knopf7-muted);
    font-size: .95rem;
}

.knopf7-mb-empty {
    padding-top: 1rem !important;
    color: var(--knopf7-muted);
    text-align: center;
}

.knopf7-mb-ship {
    margin-bottom: .6rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: #fdeaf4;
}

.knopf7-mb-ship-text {
    color: #8f0a5c;
    font-size: .92rem;
}

.knopf7-mb-ship-track {
    height: 6px;
    margin-top: .45rem;
    border-radius: 3px;
    background: #f6cfe5;
    overflow: hidden;
}

.knopf7-mb-ship-track div {
    height: 100%;
    border-radius: 3px;
    background: var(--knopf7-primary);
}

.knopf7-mb-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.knopf7-mb-items li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .9rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-mb-img img {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--knopf7-soft);
    object-fit: cover;
}

.knopf7-mb-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.knopf7-mb-name {
    display: -webkit-box;
    color: var(--knopf7-ink);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.knopf7-mb-name:hover {
    color: var(--knopf7-primary);
}

.knopf7-mb-meta {
    color: var(--knopf7-muted);
    font-size: .88rem;
}

.knopf7-mb-price {
    font-weight: 700;
    white-space: nowrap;
}

.knopf7-mb-remove-form {
    margin: 0;
}

.knopf7-mb-remove {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #9a9ea5;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
}

.knopf7-mb-remove:hover,
.knopf7-mb-remove:focus-visible {
    color: var(--knopf7-primary);
    background: var(--knopf7-soft);
    outline: 0;
}

.knopf7-mb-items li.is-removing {
    opacity: .45;
    pointer-events: none;
}

.knopf7-mb-sums {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 0 .2rem;
    color: var(--knopf7-muted);
}

.knopf7-mb-sums .knopf7-mb-total {
    margin-top: .3rem;
    color: #2f3237;
    font-size: 1.2rem;
    font-weight: 700;
}

.knopf7-mb-total small {
    color: var(--knopf7-muted);
    font-size: .8rem;
    font-weight: 400;
}

.knopf7-mb-note {
    font-size: .85rem;
}

.knopf7-mb-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}

.knopf7-mb-actions .btn {
    padding: .7rem 1rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

/* "or pay directly" only when a payment module actually put buttons here */
.knopf7-mb-or {
    display: none;
    align-items: center;
    gap: .8rem;
    margin: 1.1rem 0 0;
    color: #9a9ea5;
    font-size: .85rem;
}

.knopf7-mb-or::before,
.knopf7-mb-or::after {
    flex: 1;
    border-top: 1px solid var(--knopf7-line);
    content: "";
}

.knopf7-mb-pay:has(.paypal-button-container) .knopf7-mb-or {
    display: flex;
}

@media (max-width: 575.98px) {
    .knopf7-mb .modal-header {
        padding: 1.2rem 1.1rem .8rem;
    }

    .knopf7-mb .modal-body {
        padding: 0 1.1rem 1.3rem;
    }

    .knopf7-mb-items li {
        grid-template-columns: 56px minmax(0, 1fr) auto;
    }

    .knopf7-mb-img img {
        width: 56px;
        height: 56px;
    }

    .knopf7-mb-remove-form {
        display: none;
    }

    .knopf7-mb-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .knopf7-mb-actions .btn-highlight {
        order: -1;
    }
}

/* ==== checkout (basket, address, payment, order): same look as the mini basket ==== */
.is-checkout .knopf7-nav-wrap {
    display: none;
}

.knopf7-app main.content {
    background: #f7f4f6;
}

.knopf7-app main.content > [class*="container"] {
    padding-top: 2rem !important;
}

/* cards */
.knopf7-app main .card {
    margin-bottom: 1.25rem !important;
    padding: 1.4rem 1.6rem;
    border: 0;
    border-radius: 20px;
    background: var(--knopf7-white);
    box-shadow: 0 6px 24px rgba(69, 74, 80, .07);
}

.knopf7-app main .card .card {
    padding: 0;
    box-shadow: none;
}

.knopf7-app main .card-header {
    margin: 0;
    padding: 0 0 .9rem;
    border: 0;
    background: transparent;
    font-family: Raleway, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
}

.knopf7-app main .card-header.h5 {
    font-size: 1.1rem;
}

.knopf7-app main .card-body + .card-header,
.knopf7-app main .card-body + form > .card-header,
.knopf7-app main .card form + form > .card-header,
.knopf7-app main #orderAddress + .card-header,
.knopf7-app main .card-body + div > form > .card-header {
    margin-top: 1.1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--knopf7-line);
}

.knopf7-app main .card-body {
    padding: 0;
}

/* form fields */
.knopf7-app main .form-control,
.knopf7-app main .form-select {
    border: 1px solid #d9dbde;
    border-radius: 12px;
    background-color: var(--knopf7-white);
    box-shadow: none;
}

.knopf7-app main .form-control:focus,
.knopf7-app main .form-select:focus {
    border-color: var(--knopf7-primary);
    box-shadow: 0 0 0 .2rem rgba(194, 36, 122, .12);
}

/* buttons */
.knopf7-app main .btn-highlight,
.knopf7-app main .btn-outline-primary,
.knopf7-app main .btn-primary {
    border-radius: 999px;
    font-weight: 700;
}

.knopf7-app main .btn-lg {
    padding: .75rem 1.25rem;
    font-size: 1.05rem;
}

.knopf7-app main .btn-back {
    margin-left: .25rem;
}

/* price summary */
.knopf7-app main .list-group-flush > .list-group-item {
    padding: .2rem 0;
    border: 0;
    color: var(--knopf7-muted);
    background: transparent;
}

.knopf7-app main .list-group-flush > .knopf7-co-total {
    margin-top: .5rem;
    padding-top: .7rem;
    border-top: 1px solid var(--knopf7-line);
    color: #2f3237;
    font-size: 1.25rem;
    font-weight: 700;
}

.knopf7-co-total small {
    color: var(--knopf7-muted);
    font-size: .8rem;
    font-weight: 400;
}

.knopf7-co-vat {
    color: var(--knopf7-muted);
    font-size: .82rem;
    text-align: right;
}

.knopf7-app main .sticky-md-top {
    top: 1rem;
}

.knopf7-app main .sticky-md-top > .btn,
.knopf7-app main .sticky-md-top > form > .btn {
    margin-top: .25rem;
}

/* selectable rows: payment methods and shipping */
.is-checkout .payment-option,
.knopf7-co-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .6rem;
    padding: .85rem 2.6rem .85rem 1rem;
    border: 1px solid #d9dbde;
    border-radius: 14px;
    background: var(--knopf7-white);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.is-checkout .payment-option:hover,
.knopf7-co-option:hover {
    border-color: var(--knopf7-primary);
}

.is-checkout .payment-option:has(input[name="paymentid"]:checked),
.knopf7-co-option:has(input:checked) {
    border-color: var(--knopf7-primary);
    background: #fdeaf4;
}

/* a tick on the right instead of the round option dot */
.is-checkout .payment-option::after,
.knopf7-co-option::after {
    position: absolute;
    top: 1.05rem;
    right: 1rem;
    width: .85rem;
    height: .45rem;
    border-bottom: 2px solid var(--knopf7-primary);
    border-left: 2px solid var(--knopf7-primary);
    content: "";
    opacity: 0;
    transform: rotate(-45deg);
}

.is-checkout .payment-option:has(input[name="paymentid"]:checked)::after,
.knopf7-co-option:has(input:checked)::after {
    opacity: 1;
}

.is-checkout .payment-option input[name="paymentid"],
.knopf7-co-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.is-checkout .payment-option:has(input[name="paymentid"]:focus-visible),
.knopf7-co-option:has(input:focus-visible) {
    box-shadow: 0 0 0 .2rem rgba(194, 36, 122, .18);
}

.is-checkout .payment-option-form {
    flex: 1 1 auto;
    min-width: 0;
}

.is-checkout .payment-option-form > label {
    display: block;
    color: #2f3237;
    font-weight: 600;
    cursor: pointer;
}

/* the whole row selects the method */
.is-checkout .payment-option-form > label::before {
    position: absolute;
    inset: 0;
    content: "";
}

.is-checkout .payment-option .payment-option-info,
.is-checkout .payment-option [class*="option-info"] {
    position: relative;
    z-index: 1;
    color: var(--knopf7-muted);
    font-size: .92rem;
}

.is-checkout .payment-option .payment-option-price {
    position: static;
    flex: 0 0 auto;
    color: var(--knopf7-muted);
    font-weight: 600;
}

.knopf7-co-option-text {
    color: #2f3237;
    font-weight: 600;
}

.knopf7-co-shipcost {
    margin-top: .2rem;
    color: var(--knopf7-muted);
    font-size: .92rem;
}

/* carrier badge: DHL logo in red on yellow */
.knopf7-dhl {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: .3rem .45rem;
    border-radius: 6px;
    color: #d40511;
    background: #ffcc00;
    vertical-align: middle;
}

.knopf7-dhl svg {
    display: block;
    width: 4rem;
    height: auto;
}

/* order step: edit buttons and address blocks */
.knopf7-app main .card-header-edit .btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    color: var(--knopf7-muted);
    background: var(--knopf7-soft);
}

.knopf7-app main .card-header-edit .btn:hover {
    color: var(--knopf7-white);
    background: var(--knopf7-primary);
}

.knopf7-app main .card-header-edit .btn svg {
    width: 15px;
    height: 15px;
}

/* basket rows (basket page and order step) */
.is-checkout .basketitemrow {
    padding: .9rem 0;
    border: 0;
    border-bottom: 1px solid var(--knopf7-line);
    background: transparent;
}

.is-checkout .basketitemrow:last-child {
    border-bottom: 0;
}

.is-checkout .basketitemrow .col-img {
    flex: 0 0 auto;
    width: 88px;
}

.is-checkout .basketitemrow .col-img img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--knopf7-soft);
    object-fit: cover;
}

.is-checkout .basketitemrow .h5 {
    margin-bottom: .25rem;
    color: #2f3237;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.is-checkout .basketitemrow .basket-item-desc,
.is-checkout .basketitemrow .basket-item-desc .list-unstyled {
    margin-bottom: 0;
    color: var(--knopf7-muted);
    font-size: .88rem;
}

.is-checkout .basketitemrow .totalPrice .h5 {
    font-size: 1.1rem;
    font-weight: 700;
}

/* amount stepper on the basket page: one pill like on the product page */
.is-checkout .basketitemrow .js-amount {
    flex-wrap: nowrap;
    width: auto;
    border: 1px solid #c6c9cd;
    border-radius: 999px;
    background: var(--knopf7-white);
    overflow: hidden;
}

.is-checkout .basketitemrow .js-amount .btn {
    width: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--knopf7-ink);
    background: transparent;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
}

.is-checkout .basketitemrow .js-amount .btn:hover {
    color: var(--knopf7-primary);
    background: var(--knopf7-soft);
}

.is-checkout .basketitemrow .js-amount .form-control {
    flex: 0 0 3.6rem;
    width: 3.6rem;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

.is-checkout .basketitemrow .js-amount .form-control::-webkit-outer-spin-button,
.is-checkout .basketitemrow .js-amount .form-control::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.is-checkout .basketitemrow .btn-remove,
.is-checkout .basketitemrow .btn-noticelist:not(.dropdown-item) {
    width: 38px;
    height: 38px;
    margin-left: .25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #9a9ea5;
    background: transparent;
}

.is-checkout .basketitemrow .btn-remove:hover,
.is-checkout .basketitemrow .btn-noticelist:not(.dropdown-item):hover {
    color: var(--knopf7-primary);
    background: var(--knopf7-soft);
}

/* free-shipping bar on the basket page in the lighter mini basket style */
.is-checkout .pavo-freeship {
    padding: .8rem 1.1rem;
    border: 0;
    border-radius: 14px;
}

.is-checkout .pavo-freeship-track {
    height: 6px;
}

.is-checkout .pavo-freeship-fill {
    background: var(--knopf7-primary);
}

@media (max-width: 575.98px) {
    .knopf7-app main .card {
        padding: 1.1rem 1.1rem;
        border-radius: 16px;
    }

    .is-checkout .basketitemrow .col-img {
        width: 68px;
    }

    .is-checkout .basketitemrow .col-img img {
        width: 56px;
        height: 56px;
    }
}

/* checkout: remove inherited APEX details */
.knopf7-app main .card-header::before,
.knopf7-app main .card-header::after {
    display: none;
}

.knopf7-app main .list-group {
    margin: 0 !important;
    padding: 0;
}

.knopf7-app main .basket .quantity {
    max-width: none;
    margin-top: 0;
    border: 0;
}

.knopf7-app main .card-collapse {
    padding-bottom: 0;
}

.knopf7-app main .card-collapse:not(.collapsed) {
    padding-bottom: .9rem;
}

.knopf7-app main .card-collapse svg {
    top: .45rem;
    right: 0;
    fill: var(--knopf7-muted);
}

.knopf7-app main.content {
    margin-bottom: 0;
    padding-bottom: 2.5rem;
}

.is-checkout .knopf7-footer {
    margin-top: 0;
}

/* checkout: checkboxes as round on/off switches */
.knopf7-app main .form-check:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 0;
    padding-left: 0;
}

.knopf7-app main input[type="checkbox"].form-check-input {
    flex: 0 0 auto;
    float: none;
    width: 2.75rem;
    height: 1.6rem;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: #d3d6da;
    background-image: radial-gradient(circle, #fff 0 .58rem, transparent .6rem);
    background-position: left .12rem center;
    background-repeat: no-repeat;
    background-size: 1.36rem 1.36rem;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .18s ease, background-position .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.knopf7-app main input[type="checkbox"].form-check-input:checked {
    background-color: var(--knopf7-primary);
    background-position: right .12rem center;
}

.knopf7-app main input[type="checkbox"].form-check-input:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(194, 36, 122, .22);
    outline: 0;
}

.knopf7-app main input[type="checkbox"].form-check-input + .form-check-label {
    padding-top: .1rem;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-app main input[type="checkbox"].form-check-input {
        transition: none;
    }
}

body.knopf7-app {
    background: #f7f4f6;
}

.knopf7-app main .card h3,
.knopf7-app main .card .h3 {
    margin: 1.1rem 0 .8rem;
    font-family: Raleway, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.knopf7-app main .card .card-header + h3,
.knopf7-app main .card .card-body > h3:first-child {
    margin-top: 0;
}

/* order step: buy button greyed out until the confirmations are switched on */
.knopf7-order-locked #orderAgbTop ~ * {
    filter: grayscale(1);
    opacity: .45;
    pointer-events: none;
}

.knopf7-app main .btn-highlight:disabled {
    border-color: #b9bcc1;
    color: var(--knopf7-white);
    background: #b9bcc1;
    opacity: 1;
}

.knopf7-order-locked #orderAgbTop ~ .btn-highlight:disabled {
    filter: none;
    opacity: 1;
}

.knopf7-app main .agb .form-check-label a {
    position: relative;
}

/* order step: confirmation card flashes when the greyed-out buy button is clicked */
@keyframes knopf7-blink {
    0%, 100% {
        box-shadow: 0 6px 24px rgba(69, 74, 80, .07);
        background-color: var(--knopf7-white);
    }

    50% {
        box-shadow: 0 0 0 3px var(--knopf7-primary);
        background-color: #fdeaf4;
    }
}

.knopf7-app main .card.knopf7-blink {
    animation: knopf7-blink .45s ease-in-out 3;
}

/* gaps between the locked elements must not swallow the click */
.knopf7-order-locked {
    cursor: default;
}

/* ==== customer account: same cards as the checkout ==== */
.knopf7-app main .page-header {
    margin-bottom: 1.25rem;
    font-family: Raleway, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.knopf7-app main .button-col .dropdown-toggle {
    padding: .45rem 1rem;
    border: 1px solid #d9dbde;
    border-radius: 999px;
    color: var(--knopf7-ink);
    background: var(--knopf7-white);
    font-weight: 600;
}

.knopf7-app main .button-col .dropdown-toggle:hover,
.knopf7-app main .button-col .dropdown-toggle.show {
    border-color: var(--knopf7-primary);
    color: var(--knopf7-primary);
}

.knopf7-app main .dropdown-menu {
    padding: .4rem;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(69, 74, 80, .16);
}

.knopf7-app main .dropdown-item {
    padding: .5rem .8rem;
    border-radius: 9px;
}

.knopf7-app main .dropdown-item.active,
.knopf7-app main .dropdown-item:active {
    color: var(--knopf7-primary);
    background: #fdeaf4;
    font-weight: 600;
}

/* dashboard tiles */
.knopf7-app main .card.h-100 {
    margin-bottom: 0 !important;
    transition: box-shadow .18s ease, transform .18s ease;
}

.knopf7-app main .card.h-100:hover {
    box-shadow: 0 12px 30px rgba(69, 74, 80, .13);
    transform: translateY(-2px);
}

.knopf7-app main .card.h-100 .card-header {
    padding-bottom: .5rem;
    font-size: 1.2rem;
}

.knopf7-app main .card.h-100 .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.knopf7-app main .card.h-100 .card-text {
    color: var(--knopf7-muted);
}

.knopf7-app main .card.h-100 .stretched-link {
    margin-top: auto;
    padding: .3rem .95rem;
    font-size: .9rem;
}

/* order history: one card per order, labels above the values */
.knopf7-app main .card-header:has(> .row) {
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--knopf7-line);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.knopf7-app main .card-header > .row {
    row-gap: .75rem;
}

.knopf7-app main .card-header > .row > [class*="col-"] {
    flex: 1 1 11rem;
    width: auto;
}

.knopf7-app main .card-header > .row strong {
    display: block;
    color: var(--knopf7-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.knopf7-app main .card-header .note {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    color: #8f0a5c;
    background: #fdeaf4;
    font-size: .88rem;
    font-weight: 600;
}

.knopf7-app main .card-header:has(> .row) + .card-body {
    padding-top: .9rem;
}

.knopf7-app main .card-body > strong:first-child {
    display: block;
    margin-bottom: .3rem;
    color: var(--knopf7-muted);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.knopf7-app main .card-body > ol.list-unstyled {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-app main .card.h-100 {
        transition: none;
    }

    .knopf7-app main .card.h-100:hover {
        transform: none;
    }
}

/* account/login pages: headings and side-by-side cards */
.knopf7-app main h1 {
    margin-bottom: 1.25rem;
    font-family: Raleway, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.knopf7-app main .card-group {
    gap: 1.25rem;
}

.knopf7-app main .card-group > .card {
    margin-bottom: 0 !important;
    border-radius: 20px !important;
}

.knopf7-app main > [class*="container"] {
    padding-top: 2rem;
}

/* basket page: unit behind the amount inside the stepper */
.is-checkout .basketitemrow .js-amount .form-control {
    flex: 0 0 2.9rem;
    width: 2.9rem;
    text-align: right !important;
}

.knopf7-basket-unit {
    align-self: center;
    min-width: 1.9rem;
    padding: 0 .1rem 0 .3rem;
    color: var(--knopf7-muted);
    font-weight: 600;
}

/* order history: item rows with pictures */
.knopf7-order-items li {
    grid-template-columns: 64px minmax(0, 1fr) auto;
}

.knopf7-order-items li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.knopf7-order-noimg {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--knopf7-soft);
}

@media (max-width: 575.98px) {
    .knopf7-order-items li {
        grid-template-columns: 56px minmax(0, 1fr) auto;
    }

    .knopf7-order-noimg {
        width: 56px;
        height: 56px;
    }
}

/* ==== pagination: round page buttons in the shop colours ==== */
.pagination {
    flex-wrap: wrap;
    gap: .35rem;
    margin: 1.5rem 0;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .6rem;
    border: 1px solid #d9dbde;
    border-radius: 999px !important;
    color: var(--knopf7-ink);
    background: var(--knopf7-white);
    font-weight: 600;
    line-height: 1;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.pagination .page-link:hover,
.pagination .page-link:focus-visible {
    border-color: var(--knopf7-primary);
    color: var(--knopf7-primary);
    background: #fdeaf4;
    box-shadow: none;
    outline: 0;
}

.pagination .page-link:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(194, 36, 122, .2);
}

.pagination .page-item.active .page-link {
    border-color: var(--knopf7-primary);
    color: var(--knopf7-white);
    background: var(--knopf7-primary);
}

.pagination .page-item.disabled .page-link {
    border-color: transparent;
    color: #b3b6bb;
    background: transparent;
}

/* previous / next arrows a little larger */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    font-size: 1.25rem;
}

@media (max-width: 575.98px) {
    .pagination {
        gap: .25rem;
    }

    .pagination .page-link {
        min-width: 38px;
        height: 38px;
        padding: 0 .4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagination .page-link {
        transition: none;
    }
}

/* ==== pre-order badge on product tiles: lorry with a clock, top right.
   Same stitched corner tab as the basket button bottom left, colours inverted ==== */
.knopf7-preorder-badge {
    --pb-h: 2.6rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3; /* above .stretched-link */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pb-h);
    min-width: var(--pb-h);
    padding: 0 .7rem;
    border-radius: 0 var(--knopf7-radius) 0 14px;
    color: var(--knopf7-primary);
    background: var(--knopf7-white);
}

.knopf7-preorder-badge::before {
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(194, 36, 122, .62);
    border-radius: 0 calc(var(--knopf7-radius) - 3px) 0 10px;
    content: "";
    pointer-events: none;
}

.knopf7-preorder-badge svg {
    position: relative;
    width: 25px;
    height: 21px;
}

@media (max-width: 575.98px) {
    .knopf7-preorder-badge {
        --pb-h: 2.4rem;
        padding: 0 .6rem;
    }
}

/* Reveal the pre-order label to the left; keep the lorry anchored in its corner. */
.knopf7-preorder-badge {
    max-width: calc(100% - .5rem);
    overflow: hidden;
}
.knopf7-preorder-badge svg {
    flex: 0 0 25px;
}
.knopf7-preorder-badge__label {
    min-width: 0;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    color: inherit;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateX(.35rem);
    transition: max-width .25s ease, margin-right .25s ease, opacity .18s ease, transform .25s ease;
}
.knopf7-preorder-badge:hover .knopf7-preorder-badge__label,
.product-img-wrapper:focus-within .knopf7-preorder-badge__label {
    max-width: 12rem;
    margin-right: .45rem;
    opacity: 1;
    transform: translateX(0);
}
@media (hover: none) {
    .knopf7-preorder-badge__label {
        max-width: 12rem;
        margin-right: .45rem;
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 575.98px) {
    .knopf7-preorder-badge__label { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
    .knopf7-preorder-badge__label { transition: none; }
}

/* ==== pre-order notice on the product page, above the basket button ==== */
.knopf7-preorder-note {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px dashed rgba(194, 36, 122, .55);
    border-radius: 14px;
    color: #8f0a5c;
    background: #fdeaf4;
    font-size: .95rem;
    line-height: 1.35;
}

.knopf7-preorder-note svg {
    flex: 0 0 auto;
    width: 30px;
    height: 26px;
    color: var(--knopf7-primary);
}

.knopf7-preorder-note svg circle {
    fill: #fdeaf4;
}

.knopf7-preorder-note strong {
    display: block;
}

/* sections "from subcategory" in sparsely filled categories (module pavocategorylist) */
.pavocatlist-section {
    padding: .5rem 0 1.75rem;
}

.pavocatlist-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--knopf7-border, #e8e9eb);
}

.pavocatlist-head h2 {
    margin: 0;
}

/* the sliders per subcategory follow each other without a separating line */
.pavocatlist-section .pavocatlist-head {
    padding-top: 0;
    border-top: 0;
}

.pavocatlist-all {
    flex: 0 0 auto;
    color: var(--knopf7-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pavocatlist-all::after {
    content: " \203A";
}

.pavocatlist-all:hover {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .pavocatlist-head h2 {
        font-size: 1.25rem;
    }
}

/* endless scrolling in product lists */
.knopf7-endless.is-active .pagination {
    display: none;
}

.knopf7-endless-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0 .5rem;
}

.knopf7-endless-status {
    margin: 0;
    color: var(--knopf7-muted, #6a6e75);
    font-size: .95rem;
}

.knopf7-endless-ui.is-loading .knopf7-endless-status::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: -.15em;
    border: 2px solid var(--knopf7-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: knopf7-endless-spin .7s linear infinite;
}

@keyframes knopf7-endless-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-endless-ui.is-loading .knopf7-endless-status::before {
        animation: none;
    }
}

.knopf7-endless-start {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--knopf7-primary);
    font-weight: 600;
    text-decoration: none;
}

.knopf7-endless-start::before {
    content: "\2039  ";
}

/* neighbouring categories at the end of a product list (module pavocategorylist) */
.pavocatlist-more {
    padding: .5rem 0 2rem;
}

.pavocatlist-more .pavocatlist-head a {
    color: var(--knopf7-primary);
    text-decoration: none;
}

.pavocatlist-more .pavocatlist-head a:hover {
    text-decoration: underline;
}

/* discreet jump arrows in the right corners */
.knopf7-jump-btn {
    position: fixed;
    right: 14px;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(194, 36, 122, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 8px rgba(47, 50, 55, .1);
    color: var(--knopf7-primary);
    opacity: .7;
    transition: opacity .15s ease, border-color .15s ease;
}

.knopf7-jump-btn[hidden] {
    display: none;
}

.knopf7-jump-btn:hover,
.knopf7-jump-btn:focus-visible {
    opacity: 1;
    border-color: var(--knopf7-primary);
}

.knopf7-jump-top {
    top: 14px;
}

.knopf7-jump-bottom {
    bottom: 14px;
}

@media (max-width: 991.98px) {
    /* above the fixed mobile bar */
    .knopf7-jump-bottom {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .knopf7-jump-btn {
        right: 10px;
        width: 36px;
        height: 36px;
    }
}

@media print {
    .knopf7-jump {
        display: none;
    }
}

/* category text below the product list (SEO copy) */
.knopf7-list-seo {
    padding: 1.5rem 0 2.5rem;
    color: var(--knopf7-muted, #6a6e75);
}

.knopf7-list-seo .categoryDescription {
    max-width: 80ch;
    padding-top: 1.5rem;
    border-top: 1px solid var(--knopf7-border, #e8e9eb);
    font-size: .95rem;
}

.knopf7-list-seo .categoryDescription .row {
    padding-top: 0 !important;
}

.knopf7-list-seo .categoryDescription [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.knopf7-list-seo h2,
.knopf7-list-seo h3 {
    font-size: 1.25rem;
}

/* runs of blank lines from the editor */
.knopf7-list-seo br + br + br {
    display: none;
}

/* category short description: close to the title, little space below */
.list-header .knopf7-cat-short {
    margin-top: -.7rem;
    color: var(--knopf7-muted, #6a6e75);
}

.list-header:has(.knopf7-cat-short) {
    margin-bottom: .6rem !important;
}

/* slider heading with an "all" link on the right (start page) */
.knopf7-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.knopf7-slider-all {
    flex: 0 0 auto;
    color: var(--knopf7-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.knopf7-slider-all::after {
    content: " \203A";
}

.knopf7-slider-all:hover {
    text-decoration: underline;
}

/* sold out: the basket tab as a grey label */
.knopf7-quickadd.knopf7-soldout,
.knopf7-quickadd.knopf7-soldout:hover {
    padding: 0 .95rem 0 .9rem;
    background: #7d8289;
    cursor: default;
    pointer-events: none;
    font-weight: 600;
    letter-spacing: .01em;
}

/* the picture of a sold-out product steps back a little */
.product-card:has(.knopf7-soldout) .product-img-wrapper > img,
.product-card:has(.knopf7-soldout) .product-img-wrapper picture {
    opacity: .72;
}

/* ---- notice list ("Merkzettel") heart ---- */
.knopf7-fav-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: fill .15s ease, stroke .15s ease, transform .15s ease;
}

/* on product pictures: top left */
.knopf7-fav {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3; /* above .stretched-link */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 1px 4px rgba(47, 50, 55, .14);
    color: var(--knopf7-ink);
    cursor: pointer;
    text-decoration: none;
}

.knopf7-fav:hover,
.knopf7-fav:focus-visible {
    color: var(--knopf7-primary);
    background: var(--knopf7-white);
}

.knopf7-fav:focus-visible {
    outline: 2px solid var(--knopf7-primary);
    outline-offset: 2px;
}

.knopf7-fav.is-active {
    color: var(--knopf7-primary);
}

.knopf7-fav.is-active .knopf7-fav-icon {
    fill: var(--knopf7-primary);
}

.knopf7-fav.is-pop .knopf7-fav-icon {
    animation: knopf7-fav-pop .4s ease;
}

@keyframes knopf7-fav-pop {
    40% { transform: scale(1.32); }
    100% { transform: scale(1); }
}

/* details page: button with text */
.knopf7-fav.knopf7-fav--label {
    position: static;
    width: auto;
    height: auto;
    gap: .55rem;
    padding: .6rem 1.4rem .6rem 1.1rem;
    border: 1px solid rgba(194, 36, 122, .45);
    border-radius: 999px;
    background: var(--knopf7-white);
    box-shadow: none;
    color: var(--knopf7-primary);
    font-weight: 600;
    line-height: 1.2;
}

.knopf7-fav.knopf7-fav--label:hover,
.knopf7-fav.knopf7-fav--label:focus-visible {
    border-color: var(--knopf7-primary);
    background: #fdeaf4;
}

.knopf7-fav.knopf7-fav--label.is-active {
    border-color: var(--knopf7-primary);
    background: #fdeaf4;
}

/* header and phone bar */
.knopf7-fav-link {
    position: relative;
}

.knopf7-fav-link .knopf7-fav-icon {
    width: 22px;
    height: 22px;
}

.knopf7-fav-link.is-filled .knopf7-fav-icon {
    fill: var(--knopf7-primary);
    stroke: var(--knopf7-primary);
}

.knopf7-fav-link .badge {
    position: absolute;
    top: 0;
    left: 14px;
    min-width: 1.15rem;
    padding: .2em .4em;
    border-radius: 999px;
    background: var(--knopf7-primary);
    color: var(--knopf7-white);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.knopf7-fav-link .badge[hidden] {
    display: none;
}

@media (max-width: 991.98px) {
    .knopf7-mobile-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .knopf7-mobile-nav .knopf7-fav-link .badge {
        top: 6px;
        left: calc(50% + 4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-fav.is-pop .knopf7-fav-icon {
        animation: none;
    }
}

/* heart on product pictures: white disc behind it. A noted product always shows it (magenta);
   otherwise it appears when the pointer is over the tile. Touch screens cannot hover, so there it stays visible. */
.knopf7-fav:not(.knopf7-fav--label) {
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(255, 255, 255, .92);
    transition: opacity .15s ease;
}

.knopf7-fav:not(.knopf7-fav--label) .knopf7-fav-icon {
    width: 1.5rem;
    height: 1.5rem;
}

@media (hover: hover) {
    .knopf7-fav:not(.knopf7-fav--label):not(.is-active) {
        opacity: 0;
    }

    .product-card:hover .knopf7-fav:not(.knopf7-fav--label),
    .knopf7-fav:not(.knopf7-fav--label):focus-visible {
        opacity: 1;
    }
}


/* ---- favourites page ("Meine Lieblingsstoffe") ---- */
.knopf7-favpage-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-favpage-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--knopf7-primary);
}

.knopf7-favpage-icon svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

.knopf7-favpage-title {
    flex: 1 1 0;
    min-width: 0;
}

.knopf7-favpage-title h1 {
    margin: 0;
}

.knopf7-favpage-sub {
    margin: .15rem 0 0;
    color: var(--knopf7-primary);
    font-weight: 600;
}

.knopf7-favpage-menu .btn {
    margin-bottom: 0 !important;
}

.knopf7-favpage [data-knopf7-favlist] .col {
    transition: opacity .25s ease, transform .25s ease;
}

.knopf7-favpage [data-knopf7-favlist] .col.is-leaving {
    opacity: 0;
    transform: scale(.94);
}

.knopf7-favpage-hint {
    margin: 1.5rem 0 0;
    color: #6a6e75;
    font-size: .9rem;
    text-align: center;
}

.knopf7-favpage-empty {
    max-width: 30rem;
    margin: 2.5rem auto 1rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed rgba(194, 36, 122, .35);
    border-radius: 18px;
    text-align: center;
}

.knopf7-favpage-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: .75rem;
    fill: none;
    stroke: var(--knopf7-primary);
    stroke-width: 1.4;
}

.knopf7-favpage-empty p {
    margin: .5rem 0 1.5rem;
    color: #6a6e75;
}

@media (max-width: 575.98px) {
    .knopf7-favpage-head {
        flex-wrap: wrap;
    }

    .knopf7-favpage-icon {
        width: 44px;
        height: 44px;
    }

    .knopf7-favpage-icon svg {
        width: 24px;
        height: 24px;
    }

    .knopf7-favpage-menu {
        flex: 1 0 100%;
    }

    .knopf7-favpage-menu .btn {
        float: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-favpage [data-knopf7-favlist] .col {
        transition: none;
    }
}


/* ---- favourites strip in basket and mini basket (widget/product/favstrip.html.twig) ----
   Deliberately small: a reminder below the basket, not a second product list. Scrolls sideways,
   with arrows (knopf7.js) when there are more fabrics than fit. */
.knopf7-favstrip {
    margin-top: 1.25rem;
    padding: .9rem 1.25rem .8rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(47, 50, 55, .06);
}

.knopf7-favstrip-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
}

.knopf7-favstrip-head > svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: var(--knopf7-primary);
}

.knopf7-favstrip-head > div:first-of-type {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .5rem;
}

.knopf7-favstrip-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--knopf7-ink);
}

.knopf7-favstrip-sub {
    font-size: .85rem;
    color: var(--knopf7-muted);
}

.knopf7-favstrip-all {
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--knopf7-primary);
    white-space: nowrap;
}

.knopf7-favstrip-nav {
    flex: 0 0 auto;
    display: flex;
    gap: .3rem;
}

.knopf7-favstrip-nav[hidden] {
    display: none;
}

.knopf7-favstrip-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--knopf7-line);
    border-radius: 999px;
    background: #fff;
    color: var(--knopf7-ink);
}

.knopf7-favstrip-nav button:hover:not(:disabled) {
    border-color: var(--knopf7-primary);
    color: var(--knopf7-primary);
}

.knopf7-favstrip-nav button:disabled {
    opacity: .35;
}

.knopf7-favstrip-nav svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.knopf7-favstrip-list {
    gap: .6rem;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.knopf7-favstrip-list::-webkit-scrollbar {
    display: none;
}

.knopf7-favstrip-list li {
    flex: 0 0 96px;
}

.knopf7-favstrip-list a {
    gap: .15rem;
}

.knopf7-favstrip-list img {
    border-radius: 10px !important;
}

.knopf7-favstrip-list .knopf7-basket-added-ptitle {
    font-size: .76rem;
    line-height: 1.25;
}

.knopf7-favstrip-list .knopf7-basket-added-price {
    font-size: .78rem;
}

.knopf7-favstrip-list .knopf7-quickadd {
    --qa-h: 1.9rem;
    padding: 0 .4rem;
    border-radius: 0 10px 0 10px;
}

.knopf7-favstrip-list .knopf7-quickadd-icon,
.knopf7-favstrip-list .knopf7-quickadd-done {
    width: 17px;
    height: 17px;
}

/* in the mini basket: no card of its own, separated by a line */
.knopf7-favstrip--mini {
    margin-top: 1rem;
    padding: .9rem 0 0;
    border-top: 1px solid var(--knopf7-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.knopf7-favstrip--mini .knopf7-favstrip-list li {
    flex-basis: 84px;
}


/* mini basket: a fabric that was just added from the favourites strip lights up briefly */
.knopf7-mb-items > li {
    transition: background-color .6s ease;
}

.knopf7-mb-items > li.is-new {
    background-color: rgba(194, 36, 122, .1);
    animation: knopf7-mb-new .45s ease;
}

@keyframes knopf7-mb-new {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-mb-items > li.is-new {
        animation: none;
    }
}


/* ---- order history: one foldable card per order (page/account/order.html.twig) ---- */
.knopf7-order {
    margin-bottom: .75rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(47, 50, 55, .06);
}

.knopf7-order > summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    list-style: none;
    cursor: pointer;
}

.knopf7-order > summary::-webkit-details-marker {
    display: none;
}

.knopf7-order > summary:hover .knopf7-order-nr {
    color: var(--knopf7-primary);
}

.knopf7-order-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.knopf7-order-nr {
    font-weight: 700;
    color: var(--knopf7-ink);
}

.knopf7-order-date {
    font-size: .875rem;
    color: var(--knopf7-muted);
}

.knopf7-order-badge {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: #fdf0c8;
    color: #7a5a00;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.knopf7-order-badge.is-paid,
.knopf7-order-badge.is-cutting {
    background: var(--knopf7-primary-soft);
    color: var(--knopf7-primary);
}

.knopf7-order-badge.is-sent,
.knopf7-order-badge.is-shipped {
    background: #dff3e4;
    color: #1d6b34;
}

.knopf7-order-badge.is-canceled {
    background: #eceef0;
    color: #5b6770;
}

.knopf7-order-sum {
    min-width: 5.5rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.knopf7-order-chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform .2s ease;
}

.knopf7-order[open] .knopf7-order-chevron {
    transform: rotate(180deg);
}

/* an open order lifts off the page: deeper shadow, header in the shop colour */
.knopf7-order[open] {
    margin: 1.1rem 0 1.4rem;
    box-shadow: 0 14px 34px rgba(47, 50, 55, .16), 0 2px 6px rgba(47, 50, 55, .08);
}

.knopf7-order[open] > summary {
    border-radius: 18px 18px 0 0;
    background: var(--knopf7-primary);
    color: #fff;
}

.knopf7-order[open] > summary .knopf7-order-nr,
.knopf7-order[open] > summary:hover .knopf7-order-nr,
.knopf7-order[open] > summary .knopf7-order-sum {
    color: #fff;
}

.knopf7-order[open] > summary .knopf7-order-date {
    color: rgba(255, 255, 255, .85);
}

.knopf7-order[open] > summary .knopf7-order-badge {
    background: #fff;
}

.knopf7-order:not([open]) {
    transition: box-shadow .15s ease, transform .15s ease;
}

.knopf7-order:not([open]):hover {
    box-shadow: 0 6px 18px rgba(47, 50, 55, .12);
}

.knopf7-order-body {
    padding: 1.1rem 1.25rem 0;
}

/* three panels of equal width: delivery address, billing address, shipping */
.knopf7-order-addresses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.knopf7-order-address {
    margin: 0;
    padding: .85rem 1rem .9rem;
    border: 1px solid var(--knopf7-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(47, 50, 55, .06);
    font-size: .9rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--knopf7-ink);
    overflow-wrap: anywhere;
}

.knopf7-order-address-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .45rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--knopf7-line);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--knopf7-ink);
}

.knopf7-order-address-title svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--knopf7-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-order-track {
    margin-top: .5rem;
}

.knopf7-order-shipping a:not(.btn) {
    font-weight: 600;
    color: var(--knopf7-primary);
}

/* section heading with a line running to the right edge */
.knopf7-order-section-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.4rem 0 .2rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--knopf7-ink);
}

.knopf7-order-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--knopf7-line);
}

/* sums as a closing bar across the card */
.knopf7-order-sums {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem 2rem;
    margin: 1.25rem -1.25rem 0;
    padding: .8rem 1.25rem;
    border-top: 1px solid var(--knopf7-line);
    border-radius: 0 0 18px 18px;
    background: var(--knopf7-soft);
    font-size: .9rem;
}

.knopf7-order-sums > div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.knopf7-order-sums > .knopf7-order-invoice {
    margin-right: auto;
    align-items: center;
}

.knopf7-order-invoice .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
}

.knopf7-order-invoice svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-order-sums dt {
    font-weight: 400;
    color: var(--knopf7-muted);
}

.knopf7-order-sums dd {
    margin: 0;
    font-weight: 600;
    color: var(--knopf7-ink);
    white-space: nowrap;
}

.knopf7-order-sums .is-total dt,
.knopf7-order-sums .is-total dd {
    font-size: 1rem;
    font-weight: 700;
    color: var(--knopf7-ink);
}

/* ordered articles as tiles (shared look: .knopf7-basket-added-list), wrapping instead of scrolling */
.knopf7-order-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 1rem .9rem;
    padding: .7rem 0 0;
    overflow: visible;
}

.knopf7-order-tiles li {
    flex: none;
}

.knopf7-order-tiles img,
.knopf7-order-tiles .knopf7-order-noimg {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px !important;
}

.knopf7-order-tile {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.knopf7-order-tile-meta {
    font-size: .8rem;
    color: var(--knopf7-muted);
}

.knopf7-order-tiles li.is-gone img {
    opacity: .6;
    filter: grayscale(.6);
}

.knopf7-order-tiles .knopf7-soldout {
    max-width: 100%;
    font-size: .66rem;
    padding: 0 .45rem;
    white-space: nowrap;
    border-bottom-right-radius: 12px;
}

@media (max-width: 575.98px) {
    .knopf7-order > summary {
        flex-wrap: wrap;
        gap: .4rem .75rem;
        padding: .85rem 1rem;
    }

    .knopf7-order-main {
        flex: 1 0 calc(100% - 2rem);
        order: 1;
    }

    .knopf7-order-chevron {
        order: 2;
    }

    .knopf7-order-status {
        order: 3;
    }

    .knopf7-order-sum {
        order: 4;
        margin-left: auto;
    }

    .knopf7-order-body {
        padding: 1rem 1rem 0;
    }

    .knopf7-order-addresses {
        grid-template-columns: minmax(0, 1fr);
    }

    .knopf7-order-sums {
        flex-direction: column;
        align-items: stretch;
        gap: .3rem;
        margin: 1.1rem -1rem 0;
        padding: .8rem 1rem;
    }

    .knopf7-order-sums > div {
        justify-content: space-between;
    }

    .knopf7-order-tiles {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: .9rem .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knopf7-order-chevron {
        transition: none;
    }
}


/* ---- order history: progress of an order (received -> paid -> being cut -> sent / cancelled) ---- */
.knopf7-order-steps {
    display: flex;
    margin: 0 0 1.1rem;
    padding: .9rem 1rem .8rem;
    border: 1px solid var(--knopf7-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(47, 50, 55, .06);
    list-style: none;
}

.knopf7-order-steps li {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    text-align: center;
}

/* connecting line from the previous step */
.knopf7-order-steps li + li::before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(50% + 18px);
    left: calc(-50% + 18px);
    height: 2px;
    background: var(--knopf7-line);
}

.knopf7-order-steps li.is-done + li.is-done::before {
    background: var(--knopf7-primary);
}

.knopf7-order-step-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--knopf7-line);
    border-radius: 999px;
    background: #fff;
}

.knopf7-order-step-dot svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-order-steps li.is-done .knopf7-order-step-dot {
    border-color: var(--knopf7-primary);
    background: var(--knopf7-primary);
}

.knopf7-order-steps li.is-current .knopf7-order-step-dot {
    box-shadow: 0 0 0 4px rgba(194, 36, 122, .2);
}

.knopf7-order-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.knopf7-order-step-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--knopf7-muted);
}

.knopf7-order-steps li.is-done .knopf7-order-step-label {
    color: var(--knopf7-ink);
}

.knopf7-order-steps li.is-current .knopf7-order-step-label {
    color: var(--knopf7-primary);
    font-weight: 700;
}

.knopf7-order-step-date {
    font-size: .78rem;
    color: var(--knopf7-muted);
}

/* cancelled: what happened stays visible but steps back, the last step is the cancellation */
.knopf7-order-steps.is-canceled li.is-done:not(.is-storno) .knopf7-order-step-dot {
    border-color: #9aa0a6;
    background: #9aa0a6;
}

.knopf7-order-steps.is-canceled li.is-done + li.is-done::before {
    background: #9aa0a6;
}

.knopf7-order-steps li.is-storno .knopf7-order-step-dot {
    border-color: #b3261e;
    background: #b3261e;
    box-shadow: 0 0 0 4px rgba(179, 38, 30, .18);
}

.knopf7-order-steps li.is-storno .knopf7-order-step-label {
    color: #b3261e;
}

/* phone: the steps run downwards */
@media (max-width: 575.98px) {
    .knopf7-order-steps {
        flex-direction: column;
        gap: .9rem;
        padding: .9rem 1rem;
    }

    .knopf7-order-steps li {
        flex-direction: row;
        align-items: center;
        gap: .75rem;
        text-align: left;
    }

    .knopf7-order-steps li + li::before {
        top: calc(-.9rem - 2px);
        right: auto;
        left: 13px;
        width: 2px;
        height: calc(.9rem + 4px);
    }

    .knopf7-order-step-text {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .5rem;
    }
}


/* ---- account: shipping vouchers (module pavoshippingvouchers, account_shippingvouchers.html.twig) ---- */
.knopf7-svpage-icon {
    fill: none !important;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-svpage-hint {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 60rem;
    margin: 0 0 1.75rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: var(--knopf7-primary-soft);
    color: var(--knopf7-ink);
    font-size: .95rem;
    line-height: 1.5;
}

.knopf7-svpage-hint svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: .1rem;
    fill: none;
    stroke: var(--knopf7-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-svpage .knopf7-order-section-title {
    margin: 0 0 .9rem;
}

/* a voucher as a ticket: coloured stub with the amount, perforation, details on the right */
.knopf7-sv-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.knopf7-sv-ticket {
    position: relative;
    display: flex;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(47, 50, 55, .1), 0 1px 4px rgba(47, 50, 55, .06);
    overflow: hidden;
}

.knopf7-sv-ticket-value {
    position: relative;
    flex: 0 0 9.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: 1.25rem .75rem;
    background: var(--knopf7-primary);
    color: #fff;
    text-align: center;
}

/* perforation between stub and body: a dashed seam with a notch at top and bottom */
.knopf7-sv-ticket-value::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    bottom: 12px;
    border-right: 2px dashed rgba(255, 255, 255, .7);
}

.knopf7-sv-ticket::before,
.knopf7-sv-ticket::after {
    content: "";
    position: absolute;
    left: calc(9.5rem - 10px);
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    /* the notches show the page behind the ticket: this page has a white background */
    background: #fff;
    box-shadow: inset 0 0 4px rgba(47, 50, 55, .12);
}

.knopf7-sv-ticket::before {
    top: -10px;
}

.knopf7-sv-ticket::after {
    bottom: -10px;
}

.knopf7-sv-ticket-amount {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.knopf7-sv-ticket-kind {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.knopf7-sv-ticket-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: 1rem 1.1rem 1.05rem 1.3rem;
}

.knopf7-sv-ticket-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--knopf7-muted);
}

.knopf7-sv-ticket-code {
    display: flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
}

.knopf7-sv-ticket-code code,
.knopf7-sv-usedlist code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--knopf7-ink);
    overflow-wrap: anywhere;
}

.knopf7-sv-copy {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--knopf7-line);
    border-radius: 8px;
    background: #fff;
    color: var(--knopf7-muted);
}

.knopf7-sv-copy:hover,
.knopf7-sv-copy.is-done {
    border-color: var(--knopf7-primary);
    color: var(--knopf7-primary);
}

.knopf7-sv-copy svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-sv-copy.is-done::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + .4rem);
    top: 50%;
    transform: translateY(-50%);
    padding: .15rem .5rem;
    border-radius: 6px;
    background: var(--knopf7-ink);
    color: #fff;
    font-size: .75rem;
    white-space: nowrap;
}

.knopf7-sv-ticket-date {
    margin-bottom: .55rem;
    font-size: .85rem;
    color: var(--knopf7-muted);
}

.knopf7-sv-ticket-note {
    font-size: .85rem;
    font-weight: 600;
    color: var(--knopf7-primary);
}

.knopf7-sv-none {
    margin: 0 0 2rem;
    color: var(--knopf7-muted);
}

/* redeemed vouchers: folded away, quiet rows */
.knopf7-sv-used > summary {
    padding: .85rem 1.25rem;
}

.knopf7-sv-used[open] > summary {
    background: #fff;
    color: inherit;
    border-bottom: 1px solid var(--knopf7-line);
}

.knopf7-sv-used[open] > summary .knopf7-order-nr,
.knopf7-sv-used[open] > summary:hover .knopf7-order-nr {
    color: var(--knopf7-ink);
}

.knopf7-sv-used[open] > summary .knopf7-order-date {
    color: var(--knopf7-muted);
}

.knopf7-sv-usedlist {
    margin: 0;
    padding: .25rem 1.25rem .6rem;
    list-style: none;
}

.knopf7-sv-usedlist li {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--knopf7-line);
    color: var(--knopf7-muted);
}

.knopf7-sv-usedlist li:last-child {
    border-bottom: 0;
}

.knopf7-sv-used-amount {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.knopf7-sv-usedlist code {
    font-size: .9rem;
    font-weight: 600;
    color: var(--knopf7-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(116, 123, 131, .5);
}

.knopf7-sv-used-date {
    font-size: .85rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .knopf7-sv-ticket-value {
        flex-basis: 6.6rem;
        padding: 1rem .5rem;
    }

    .knopf7-sv-ticket::before,
    .knopf7-sv-ticket::after {
        left: calc(6.6rem - 10px);
    }

    .knopf7-sv-ticket-amount {
        font-size: 1.3rem;
    }

    .knopf7-sv-ticket-body {
        padding: .9rem .9rem .95rem 1.1rem;
    }

    .knopf7-sv-usedlist li {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .15rem .9rem;
    }

    .knopf7-sv-used-amount {
        text-align: left;
    }

    .knopf7-sv-used-date,
    .knopf7-sv-usedlist .knopf7-order-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .knopf7-sv-ticket-code code {
        font-size: .9rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .knopf7-sv-usedlist code {
        font-size: .85rem;
        white-space: nowrap;
    }
}


/* imprint: credit line of the agency with its small monochrome logo */
.knopf7-credit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--knopf7-line);
    font-size: .95rem;
}

.knopf7-credit-logo img {
    display: block;
    width: 150px;
    height: auto;
    opacity: .9;
}

.knopf7-credit-logo:hover img {
    opacity: 1;
}


/* account overview: shipping voucher tile - a ticket stub with the number of redeemable vouchers */
.knopf7-sv-dash {
    position: relative;
    display: flex;
    height: 100%;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(47, 50, 55, .1), 0 1px 4px rgba(47, 50, 55, .06);
    overflow: hidden;
}

.knopf7-sv-dash-count {
    position: relative;
    flex: 0 0 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: 1.25rem .75rem;
    background: var(--knopf7-primary);
    color: #fff;
    text-align: center;
}

.knopf7-sv-dash-count::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    bottom: 12px;
    border-right: 2px dashed rgba(255, 255, 255, .7);
}

.knopf7-sv-dash-number {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
}

.knopf7-sv-dash-unit {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.knopf7-sv-dash-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1.25rem 1.4rem 1.3rem 1.6rem;
}

.knopf7-sv-dash-body h2 {
    margin: 0;
    /* same heading face as the other tiles of the account overview */
    font-family: Raleway, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--knopf7-ink);
}

.knopf7-sv-dash-body p {
    margin: 0 0 .4rem;
    color: var(--knopf7-ink);
}

.knopf7-sv-dash-body strong {
    color: var(--knopf7-primary);
    white-space: nowrap;
}

/* nothing to redeem: the stub steps back */
.knopf7-sv-dash.is-empty .knopf7-sv-dash-count {
    background: #9aa0a6;
}

.knopf7-sv-dash.is-empty .knopf7-sv-dash-body p {
    color: var(--knopf7-muted);
}

@media (max-width: 575.98px) {
    .knopf7-sv-dash-count {
        flex-basis: 6rem;
    }

    .knopf7-sv-dash-number {
        font-size: 2.4rem;
    }

    .knopf7-sv-dash-body {
        padding: 1rem 1rem 1.1rem 1.2rem;
    }
}


/* basket: redeemable shipping vouchers as small tickets (module pavoshippingvouchers, summary_sidebar) */
.knopf7-sv-basket {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--knopf7-line);
}

.knopf7-sv-basket-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .15rem;
    font-family: inherit !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--knopf7-ink);
}

.knopf7-sv-basket-head svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--knopf7-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knopf7-sv-basket-hint {
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--knopf7-muted);
}

.knopf7-sv-mini {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.knopf7-sv-miniticket {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--knopf7-primary-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.knopf7-sv-miniticket-value {
    position: relative;
    flex: 0 0 4.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .3rem;
    background: var(--knopf7-primary);
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    white-space: nowrap;
}

.knopf7-sv-miniticket-value::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    bottom: 6px;
    border-right: 2px dashed rgba(255, 255, 255, .7);
}

.knopf7-sv-miniticket-code {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .4rem .4rem .4rem .65rem;
    line-height: 1.25;
}

.knopf7-sv-miniticket-code span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--knopf7-muted);
}

.knopf7-sv-miniticket-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--knopf7-ink);
    /* break only at the hyphens of the code */
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.knopf7-sv-miniticket button {
    flex: 0 0 auto;
    align-self: center;
    margin-right: .5rem;
    padding: .3rem .7rem;
    border: 0;
    border-radius: 999px;
    background: var(--knopf7-primary-soft);
    color: var(--knopf7-primary);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.knopf7-sv-miniticket button:hover,
.knopf7-sv-miniticket button:focus-visible {
    background: var(--knopf7-primary);
    color: #fff;
}


/* account overview: order history tile - number of orders on the stub, latest order at a glance */
.knopf7-order-dash-last {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
    margin-bottom: .35rem;
}

.knopf7-order-dash-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--knopf7-muted);
}

.knopf7-order-dash-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .9rem;
    font-size: .95rem;
    color: var(--knopf7-ink);
}

.knopf7-sv-dash-body .knopf7-order-dash-line strong {
    color: var(--knopf7-ink);
}

.knopf7-order-dash-thumbs {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .15rem;
}

.knopf7-order-dash-thumbs img,
.knopf7-order-dash-thumbs .knopf7-order-noimg {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
}

.knopf7-order-dash-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 .4rem;
    border-radius: 10px;
    background: var(--knopf7-soft);
    font-size: .85rem;
    font-weight: 700;
    color: var(--knopf7-muted);
}

/* long numbers (e.g. 128 orders) still fit on the stub */
.knopf7-order-dash .knopf7-sv-dash-number {
    font-size: 2.8rem;
}

@media (max-width: 575.98px) {
    .knopf7-order-dash .knopf7-sv-dash-number {
        font-size: 2.1rem;
    }

    .knopf7-order-dash-thumbs img,
    .knopf7-order-dash-thumbs .knopf7-order-noimg,
    .knopf7-order-dash-more {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
}


/* account overview: orders first, vouchers second, then the remaining tiles */
#knopf7-account-orders {
    order: -2;
}

#pavo-account-shipping-vouchers {
    order: -1;
}

.knopf7-sv-dash-body h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: manual;
}

.knopf7-sv-dash-count {
    min-width: 0;
    overflow: hidden;
}

.knopf7-order-dash-thumbs {
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .knopf7-sv-dash-unit {
        font-size: .62rem;
        letter-spacing: .04em;
    }
}

@media (max-width: 575.98px) {
    .knopf7-sv-dash-body h2 {
        font-size: 1.15rem;
    }
}