/*
 * Stoeberkiste final visual parity pass v2
 * Loaded after twig-robbie-parity.css.
 * Scope: final geometry and responsive corrections from audit V10.
 */

:root {
    --sk-v2-page: 1024px;
    --sk-v2-side: 260px;
    --sk-v2-gap: 40px;
    --sk-v2-main: 724px;
    --sk-v2-blue: #285479;
    --sk-v2-red: #900001;
    --sk-v2-light: #e4e8e8;
    --sk-v2-line: #ebe9e9;
}

html,
body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

/* Keep Bootstrap rows from creating negative-margin overflow in the legacy shell. */
.sk-list-body .row,
.sk-content-body .row,
.sk-detail-body .row,
.sk-account-shell .row,
.sk-basket-page .row,
.sk-checkout-user-page .row,
.sk-checkout-payment-page .row,
.sk-checkout-order-page .row {
    min-width: 0;
}

/* Always retain the compact legacy search in checkout and basket headers. */
.sk-header .sk-search {
    display: block !important;
}

/* -------------------------------------------------------------------------
   Shared full-width category/CMS/account/product hero
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .sk-list-header,
    .sk-content-header,
    .sk-detail-header,
    .sk-account-hero,
    .sk-checkout-hero {
        position: relative !important;
        left: 50% !important;
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        height: 260px !important;
        min-height: 260px !important;
        margin: 0 0 0 -50vw !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .sk-list-header .sk-header-image,
    .sk-content-header .sk-header-image,
    .sk-detail-header .sk-header-image,
    .sk-account-hero .sk-header-image {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        display: block !important;
        width: 2000px !important;
        max-width: none !important;
        height: 260px !important;
        margin: 0 0 0 -1000px !important;
        transform: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .sk-checkout-hero {
        background: #fff url("../img/header-shop.jpg") center center / 2000px 260px no-repeat !important;
    }

    .sk-list-body,
    .sk-content-body,
    .sk-detail-body,
    .sk-account-shell {
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--sk-v2-gap) !important;
        width: var(--sk-v2-page) !important;
        max-width: var(--sk-v2-page) !important;
        margin: 0 auto !important;
        padding: 26px 0 40px !important;
    }

    .side-menu-complete.sk-side-menu {
        flex: 0 0 var(--sk-v2-side) !important;
        width: var(--sk-v2-side) !important;
        max-width: var(--sk-v2-side) !important;
    }

    .sk-product-list-panel,
    .sk-content-main,
    .sk-detail-main,
    .sk-account-main {
        flex: 0 0 var(--sk-v2-main) !important;
        width: var(--sk-v2-main) !important;
        max-width: var(--sk-v2-main) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 1024px) {
    .sk-list-header,
    .sk-content-header,
    .sk-detail-header,
    .sk-account-hero,
    .sk-checkout-hero {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .sk-list-body,
    .sk-content-body,
    .sk-detail-body,
    .sk-account-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 10px 34px !important;
    }

    .side-menu-complete.sk-side-menu {
        display: none !important;
    }

    .sk-product-list-panel,
    .sk-content-main,
    .sk-detail-main,
    .sk-account-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Start page: restore exact legacy 1024px composition
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    body.cl-start .wrapper,
    body.cl-start main.content,
    body.cl-start .sk-frontpage {
        display: block !important;
        width: var(--sk-v2-page) !important;
        max-width: var(--sk-v2-page) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* The old Smarty page relied on floats. A fixed grid reproduces the same
       500 / 24 / 500 composition without the float-collapse that made the
       migrated start page far too tall. */
    body.cl-start .welcome-top {
        display: grid !important;
        grid-template-columns: 500px 500px !important;
        column-gap: 24px !important;
        align-items: start !important;
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 0 0 160px !important;
        padding: 0 !important;
        float: none !important;
    }

    body.cl-start .hello {
        display: block !important;
        width: 500px !important;
        max-width: 500px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.cl-start .hello h1 {
        margin: 0 0 18px !important;
        float: none !important;
    }

    body.cl-start .hello p {
        width: 100% !important;
        margin: 0 0 14px !important;
        float: none !important;
        font-size: 22px !important;
        line-height: 26px !important;
    }

    body.cl-start .teaser-top {
        display: block !important;
        width: 500px !important;
        max-width: 500px !important;
        height: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: visible !important;
    }

    body.cl-start .teaser-top > img {
        display: block !important;
        width: 498px !important;
        max-width: 498px !important;
        height: 318px !important;
        margin: 0 !important;
        object-fit: cover !important;
    }

    body.cl-start .all-tiles {
        display: grid !important;
        grid-template-columns: repeat(3, 260px) !important;
        grid-auto-rows: 300px !important;
        column-gap: 122px !important;
        row-gap: 46px !important;
        clear: both !important;
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.cl-start .all-tiles .tile,
    body.cl-start .all-tiles .tile.last-tile,
    body.cl-start .all-tiles .tile:nth-child(3n) {
        display: block !important;
        width: 260px !important;
        max-width: 260px !important;
        height: 300px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.cl-start .all-tiles .tile > img {
        display: block !important;
        width: 258px !important;
        max-width: 258px !important;
        height: 298px !important;
        object-fit: cover !important;
    }

    body.cl-start .roros {
        display: block !important;
        clear: both !important;
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 80px 0 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.cl-start .roros .cloud-text {
        display: grid !important;
        grid-template-columns: 210px minmax(0, 1fr) !important;
        column-gap: 20px !important;
        align-items: start !important;
        width: 1024px !important;
        min-height: 178px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.cl-start .roros .cloud-text img {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 210px !important;
        height: auto !important;
        margin: 0 !important;
        float: none !important;
    }

    body.cl-start .roros .cloud-text p {
        grid-column: 2 !important;
        width: auto !important;
        margin: 0 0 10px !important;
        float: none !important;
    }

    body.cl-start .brands {
        display: block !important;
        clear: both !important;
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 36px 0 0 !important;
        padding: 26px 0 0 !important;
        float: none !important;
    }

    body.cl-start .brands .all-brands {
        display: flex !important;
        align-items: center !important;
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 0 0 46px !important;
        float: none !important;
    }

    body.cl-start .brands .all-brands a,
    body.cl-start .brands .all-brands img {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        float: none !important;
    }
}

@media (max-width: 1024px) {
    body.cl-start .wrapper,
    body.cl-start main.content,
    body.cl-start .sk-frontpage {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 16px 0 !important;
        overflow: hidden !important;
    }

    body.cl-start .welcome-top,
    body.cl-start .hello,
    body.cl-start .teaser-top,
    body.cl-start .all-tiles,
    body.cl-start .roros,
    body.cl-start .cloud-text,
    body.cl-start .brands,
    body.cl-start .all-brands {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        float: none !important;
    }

    body.cl-start .welcome-top {
        margin-bottom: 0 !important;
    }

    body.cl-start .hello {
        margin-bottom: 26px !important;
    }

    body.cl-start .hello h1 {
        margin: 0 0 14px !important;
        float: none !important;
    }

    body.cl-start .hello p {
        width: 100% !important;
        margin: 0 0 14px !important;
        float: none !important;
        font-size: 18px !important;
        line-height: 22px !important;
    }

    body.cl-start .teaser-top {
        height: 320px !important;
        margin-bottom: 26px !important;
        overflow: hidden !important;
    }

    body.cl-start .teaser-top > img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.cl-start .teaser-top .ribbon {
        right: 16px !important;
        margin-right: 0 !important;
    }

    body.cl-start .all-tiles {
        margin-top: 0 !important;
    }

    body.cl-start .all-tiles .tile,
    body.cl-start .all-tiles .tile.last-tile {
        display: block !important;
        width: 260px !important;
        max-width: 260px !important;
        height: 300px !important;
        margin: 0 auto 46px !important;
        float: none !important;
    }

    body.cl-start .all-tiles .tile > img {
        width: 258px !important;
        max-width: 258px !important;
        height: 298px !important;
        object-fit: cover !important;
    }

    body.cl-start .roros {
        margin: 6px 0 34px !important;
    }

    body.cl-start .roros .cloud-text {
        min-height: 0 !important;
        margin-top: 0 !important;
    }

    body.cl-start .roros .cloud-text img {
        display: none !important;
    }

    body.cl-start .roros .cloud-text p {
        width: 100% !important;
        margin: 0 0 10px !important;
        float: none !important;
    }

    body.cl-start .brands {
        margin: 0 0 26px !important;
    }

    body.cl-start .brands .all-brands a {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px !important;
        text-align: left !important;
    }

    body.cl-start .brands .all-brands img,
    body.cl-start .brands .all-brands img#roros-image {
        display: block !important;
        width: auto !important;
        max-width: 210px !important;
        height: auto !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* -------------------------------------------------------------------------
   Category and manufacturer lists
   ------------------------------------------------------------------------- */
.sk-list-intro,
.sk-list-intro h1,
.sk-list-intro .categoryDescription,
.sk-list-intro .categoryDescription p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
}

.sk-list-intro h1 {
    margin: 14px 0 !important;
}

.sk-list-intro .categoryDescription {
    margin: 0 0 22px !important;
}

.sk-subcategory-links,
.sk-manufacturer-overview {
    display: none !important;
}

.sk-product-list-panel .list-container,
.sk-product-list-panel .line-view {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sk-product-line {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 102px !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
}

.sk-product-line-image {
    display: block !important;
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 100px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
}

.sk-product-line-image img {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    margin: 0 !important;
    border: 1px solid var(--sk-v2-line) !important;
    object-fit: contain !important;
    float: none !important;
}

.sk-product-line-description {
    position: relative !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 102px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 0 6px !important;
    border-top: 1px solid var(--sk-v2-line) !important;
    border-bottom: 1px solid var(--sk-v2-line) !important;
    float: none !important;
    overflow: visible !important;
}

.sk-product-line-summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.sk-product-line-title,
.sk-product-line-price {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sk-v2-blue) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    float: none !important;
}

.sk-product-line-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.sk-product-line-price-block {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    text-align: right !important;
}

.sk-product-line-title a {
    color: var(--sk-v2-blue) !important;
    text-decoration: none !important;
}

.sk-product-line-price {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}

.sk-product-line-price del {
    font-size: 12px !important;
}

.sk-product-line-copy {
    margin-top: 3px !important;
    font-size: 13px !important;
    line-height: 17px !important;
}

.sk-product-line-actions {
    position: absolute !important;
    right: 0 !important;
    bottom: 7px !important;
    left: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.sk-product-line-vat {
    display: block !important;
    width: 100% !important;
    margin: 1px 0 0 !important;
    color: var(--sk-v2-blue) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: right !important;
    white-space: nowrap !important;
    float: none !important;
}

.sk-product-grid-vat {
    display: block !important;
    margin-top: 2px !important;
    color: var(--sk-v2-blue) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.sk-product-grid-vat a {
    color: inherit !important;
}

.sk-product-line-selection {
    flex: 0 1 150px !important;
    width: 150px !important;
    margin: 0 !important;
}

.sk-product-line-selection .selectorsBox,
.sk-product-line-selection .variant-dropdown,
.sk-product-line-selection select {
    width: 150px !important;
    max-width: 150px !important;
    min-height: 28px !important;
    margin: 0 !important;
    font-size: 12px !important;
}

.sk-product-line-details,
.sk-product-line .listRemoveButton {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 64px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-v2-blue) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.sk-product-line-details:hover,
.sk-product-line-details:focus,
.sk-product-line .listRemoveButton:hover,
.sk-product-line .listRemoveButton:focus {
    background: #285479 !important;
    color: #fff !important;
    text-decoration: none !important;
}

.sk-product-line + form[id^="remove_"] {
    display: none !important;
}

.sk-product-list-panel .pagination,
.sk-product-list-panel .listlocator,
.sk-product-list-panel .locator,
.sk-pia-page .pagination,
.sk-pia-page .listlocator,
.sk-pia-page .locator {
    justify-content: flex-end !important;
    margin-left: auto !important;
    text-align: right !important;
}

@media (max-width: 1024px) {
    .sk-user-meta {
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .sk-list-intro h1 {
        margin-top: 0 !important;
    }

    .sk-product-line {
        display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        min-height: 160px !important;
        margin-bottom: 10px !important;
    }

    .sk-product-line-image {
        grid-column: 1 !important;
        width: 100px !important;
        margin: 0 !important;
    }

    .sk-product-line-description {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 160px !important;
        padding-top: 4px !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    .sk-product-line-summary {
        display: block !important;
    }

    .sk-product-line-title,
    .sk-product-line-price {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .sk-product-line-price-block {
        display: block !important;
        width: 100% !important;
        margin-top: 2px !important;
        text-align: left !important;
    }

    .sk-product-line-title {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .sk-product-line-price {
        margin-top: 2px !important;
    }

    .sk-product-line-actions {
        position: absolute !important;
        right: auto !important;
        bottom: 4px !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .sk-product-line-vat {
        display: block !important;
        width: 100% !important;
        margin: 1px 0 5px !important;
        font-size: 11px !important;
        line-height: 14px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .sk-product-line-selection {
        display: inline-block !important;
        width: 100% !important;
        max-width: 150px !important;
        margin: 0 0 5px !important;
    }

    .sk-product-line-details {
        display: block !important;
        width: max-content !important;
        min-width: 64px !important;
    }
}

@media (max-width: 359px) {
    .sk-product-line {
        grid-template-columns: 90px minmax(0, 1fr) !important;
        column-gap: 10px !important;
    }

    .sk-product-line-image,
    .sk-product-line-image img {
        width: 90px !important;
        max-width: 90px !important;
        height: 90px !important;
    }
}

/* -------------------------------------------------------------------------
   Pia Malmros special category
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .sk-pia-inner {
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 0 auto !important;
        padding: 34px 0 34px !important;
    }

    .sk-pia-cards {
        display: grid !important;
        grid-template-columns: repeat(6, 125px) !important;
        column-gap: 28px !important;
        row-gap: 36px !important;
        justify-content: start !important;
        width: 100% !important;
    }

    .sk-pia-cards .card-item {
        width: 125px !important;
        max-width: 125px !important;
        margin: 0 !important;
    }
}

@media (max-width: 1024px) {
    .sk-pia-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 10px 34px !important;
    }

    .sk-pia-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 125px) !important;
        justify-content: space-between !important;
        gap: 36px 0 !important;
        width: 100% !important;
    }

    .sk-pia-cards .card-item {
        width: 125px !important;
        max-width: 125px !important;
        margin: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Product details: contain the inherited Bootstrap grid and match the legacy
   362px image + 334px information column on desktop.
   ------------------------------------------------------------------------- */
body.cl-details #details_container,
body.cl-details .sk-detail-main,
body.cl-details #detailsMain,
body.cl-details .details,
body.cl-details .details-top,
body.cl-details .details-top > .container-xxl {
    min-width: 0 !important;
    overflow: visible !important;
}

@media (min-width: 1025px) {
    body.cl-details .sk-detail-main #detailsMain,
    body.cl-details .details-top,
    body.cl-details .details-top > .container-xxl,
    body.cl-details .details-top .row {
        width: 724px !important;
        max-width: 724px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.cl-details .details-top .row {
        display: grid !important;
        grid-template-columns: 362px 334px !important;
        gap: 0 28px !important;
    }

    body.cl-details .details-top .row > div:first-child {
        width: 362px !important;
        max-width: 362px !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    body.cl-details .details-top .row > div:nth-child(2) {
        width: 334px !important;
        max-width: 334px !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    body.cl-details .details-top .gallery,
    body.cl-details .details-top .pictureBox,
    body.cl-details .details-top .zoomPad,
    body.cl-details .details-top .carousel,
    body.cl-details .details-top .carousel-inner {
        width: 362px !important;
        max-width: 362px !important;
    }

    body.cl-details .details-top img {
        max-width: 100% !important;
        height: auto !important;
    }

    body.cl-details .details-title {
        margin: 0 0 6px !important;
        color: var(--sk-v2-red) !important;
        font-size: 26px !important;
        line-height: 32px !important;
        font-weight: 300 !important;
    }

    body.cl-details .brand-name,
    body.cl-details .details-shortdesc,
    body.cl-details .details-information {
        color: var(--sk-v2-blue) !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    body.cl-details .price-wrapper,
    body.cl-details .tobasket-function,
    body.cl-details .product-links {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.cl-details .tobasket-function {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-top: 18px !important;
    }

    body.cl-details #amountToBasket {
        flex: 0 0 64px !important;
        width: 64px !important;
        max-width: 64px !important;
    }
}

body.cl-details .details-more,
body.cl-details .details-related,
body.cl-details .product-list-navigation {
    display: none !important;
}

body.cl-details .sk-product-question {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 724px !important;
    margin: 42px 0 0 !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid var(--sk-v2-line) !important;
    color: var(--sk-v2-blue) !important;
}

body.cl-details .sk-product-question > p,
body.cl-details .sk-product-question > textarea,
body.cl-details .sk-product-question > .sk-dsgvo-label,
body.cl-details .sk-product-question > #submit-product-detail {
    grid-column: 1 / -1 !important;
}

body.cl-details .sk-product-question > p {
    margin: 0 !important;
}

body.cl-details .sk-product-question input[type="text"],
body.cl-details .sk-product-question textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--sk-v2-blue) !important;
    border-radius: 2px !important;
    color: var(--sk-v2-blue) !important;
}

body.cl-details .sk-product-question textarea {
    min-height: 130px !important;
}

body.cl-details .sk-product-question .sk-dsgvo-check {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 15px !important;
    height: 15px !important;
    margin: 4px 0 0 !important;
}

body.cl-details .sk-product-question .sk-dsgvo-label {
    margin: 0 0 0 22px !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

body.cl-details .sk-product-question #submit-product-detail {
    justify-self: end !important;
    width: auto !important;
}

@media (max-width: 1024px) {
    body.cl-details .details-top,
    body.cl-details .details-top > .container-xxl,
    body.cl-details .details-top .row,
    body.cl-details .details-top .row > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.cl-details .details-top .gallery,
    body.cl-details .details-top .pictureBox,
    body.cl-details .details-top .zoomPad,
    body.cl-details .details-top .carousel,
    body.cl-details .details-top .carousel-inner,
    body.cl-details .details-top img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    body.cl-details .details-top .row > div:nth-child(2) {
        margin-top: 22px !important;
    }

    body.cl-details .sk-product-question {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 32px !important;
    }

    body.cl-details .sk-product-question input[type="text"],
    body.cl-details .sk-product-question textarea,
    body.cl-details .sk-product-question #submit-product-detail {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
    }

    body.cl-details .sk-product-question .sk-dsgvo-check {
        display: inline-block !important;
        width: 15px !important;
        margin-right: 6px !important;
    }

    body.cl-details .sk-product-question .sk-dsgvo-label {
        display: block !important;
        margin: -19px 0 12px 24px !important;
    }
}

/* -------------------------------------------------------------------------
   Account and login
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .sk-account-main section.story.with-border {
        min-height: 315px !important;
        padding: 0 0 24px !important;
    }

    .sk-account-main .with-inputs {
        margin: 26px 0 0 !important;
    }

    .sk-account-main .with-inputs form {
        width: 724px !important;
        max-width: 724px !important;
    }

    .sk-account-main .with-inputs label {
        width: 290px !important;
        margin: 0 16px 12px 0 !important;
    }

    .sk-account-main .with-inputs input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .sk-account-main .with-inputs select,
    .sk-account-main .with-inputs textarea {
        width: 400px !important;
        max-width: 400px !important;
    }

    .sk-account-main .with-inputs button,
    .sk-account-main .with-inputs .is-submit {
        display: block !important;
        width: 400px !important;
        max-width: 400px !important;
        margin: 8px 0 12px 306px !important;
    }

    .sk-account-main .with-inputs .link {
        margin-left: 0 !important;
    }
}

@media (max-width: 1024px) {
    .sk-account-main section.story,
    .sk-account-main section.story.with-border,
    .sk-account-main .all-user-settings,
    .sk-account-main .with-inputs,
    .sk-account-main .with-inputs form {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sk-account-main .with-inputs label,
    .sk-account-main .with-inputs input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .sk-account-main .with-inputs select,
    .sk-account-main .with-inputs textarea,
    .sk-account-main .with-inputs button,
    .sk-account-main .with-inputs .is-submit {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        float: none !important;
    }
}

/* Bootstrap uses .form-text for small validation/help copy. The legacy
   stylesheet used the same class for a large textarea, which produced the
   blank 260px panel visible in checkout/account forms. */
.sk-account-main .form-text,
.sk-checkout-user-page .form-text,
.sk-contact-form .form-text {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 2px 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    float: none !important;
}

/* -------------------------------------------------------------------------
   Basket and checkout
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    body.cl-basket .sk-basket-page,
    body.cl-user.is-checkout .sk-checkout-user-page,
    body.cl-payment .sk-checkout-payment-page,
    body.cl-order .sk-checkout-order-page,
    body.cl-thankyou .sk-checkout-thankyou-page {
        width: 1024px !important;
        max-width: 1024px !important;
        margin: 0 auto !important;
        padding: 26px 0 40px !important;
    }

    .sk-checkout-steps {
        width: 724px !important;
        max-width: 724px !important;
        margin: 0 0 46px !important;
    }

    .sk-checkout-login-options {
        display: grid !important;
        grid-template-columns: 320px 400px !important;
        grid-template-areas:
            "noreg login"
            "register login" !important;
        column-gap: 40px !important;
        row-gap: 48px !important;
        width: 760px !important;
        max-width: 760px !important;
        margin: 0 !important;
    }

    .sk-checkout-option {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sk-checkout-option--noreg { grid-area: noreg !important; }
    .sk-checkout-option--login { grid-area: login !important; }
    .sk-checkout-option--register { grid-area: register !important; }

    .sk-checkout-option-body h2 {
        margin: 0 0 3px !important;
    }

    .sk-checkout-option--login .user-reg-input {
        width: 400px !important;
        max-width: 400px !important;
    }

    body.cl-user.is-checkout .sk-checkout-user-form {
        width: 724px !important;
        max-width: 724px !important;
    }

    body.cl-user.is-checkout #user_form,
    body.cl-user.is-checkout form[name="order"] {
        width: 610px !important;
        max-width: 610px !important;
    }

    body.cl-user.is-checkout #user_form .form-floating,
    body.cl-user.is-checkout form[name="order"] .form-floating {
        grid-template-columns: 100px 400px minmax(0, 1fr) !important;
        width: 610px !important;
    }

    body.cl-user.is-checkout #user_form .form-floating > .form-control,
    body.cl-user.is-checkout #user_form .form-floating > .form-select,
    body.cl-user.is-checkout form[name="order"] .form-floating > .form-control,
    body.cl-user.is-checkout form[name="order"] .form-floating > .form-select {
        width: 400px !important;
        max-width: 400px !important;
    }
}

body.cl-basket .sk-basket-table-wrap,
body.cl-basket .table-responsive {
    max-width: 100% !important;
}

body.cl-basket .sk-basket-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

body.cl-basket .sk-basket-totals {
    width: 100% !important;
    max-width: 100% !important;
}

body.cl-basket .sk-basket-bottom {
    width: 100% !important;
}

@media (max-width: 1024px) {
    body.cl-basket .sk-basket-page,
    body.cl-user.is-checkout .sk-checkout-user-page,
    body.cl-payment .sk-checkout-payment-page,
    body.cl-order .sk-checkout-order-page,
    body.cl-thankyou .sk-checkout-thankyou-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 10px 34px !important;
    }

    .sk-checkout-steps {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 28px !important;
    }

    .sk-checkout-login-options {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .sk-checkout-option {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 34px !important;
    }

    .sk-checkout-option input.user-reg-input,
    body.cl-user.is-checkout .sk-checkout-user-form,
    body.cl-user.is-checkout #user_form,
    body.cl-user.is-checkout form[name="order"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.cl-user.is-checkout #user_form .form-floating,
    body.cl-user.is-checkout form[name="order"] .form-floating {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.cl-user.is-checkout #user_form .form-floating > .form-control,
    body.cl-user.is-checkout #user_form .form-floating > .form-select,
    body.cl-user.is-checkout form[name="order"] .form-floating > .form-control,
    body.cl-user.is-checkout form[name="order"] .form-floating > .form-select {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.cl-basket .sk-basket-table-wrap,
    body.cl-basket .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* -------------------------------------------------------------------------
   Footer and cookie bar
   ------------------------------------------------------------------------- */
footer.sk-legacy-footer {
    clear: both !important;
    width: 100% !important;
    margin: 0 !important;
    border-top: 3px solid var(--sk-v2-blue) !important;
    background: var(--sk-v2-light) !important;
}

@media (min-width: 1025px) {
    footer.sk-legacy-footer {
        min-height: 190px !important;
        padding: 26px 0 !important;
    }

    footer.sk-legacy-footer .fooInner {
        width: 1024px !important;
        max-width: 1024px !important;
        min-height: 190px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    footer.sk-legacy-footer .fooInner > ul {
        margin-right: 100px !important;
    }

    footer.sk-legacy-footer .help,
    footer.sk-legacy-footer .logo-bottom {
        width: 277px !important;
        max-width: 277px !important;
    }
}

#cookieNote {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10050 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#cookieNote .sk-cookie-note,
#cookieNote .alert {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 6px 60px 6px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .93) !important;
    color: #333 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-align: center !important;
    box-shadow: none !important;
}

#cookieNote .sk-cookie-note a {
    color: var(--sk-v2-blue) !important;
    text-decoration: underline !important;
}

#cookieNoteCloseButton {
    position: absolute !important;
    top: 4px !important;
    right: calc((100vw - min(100vw, 1024px)) / 2) !important;
    display: block !important;
    width: 38px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sk-v2-blue) !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 22px !important;
    text-align: center !important;
    opacity: 1 !important;
}

#cookieNoteCloseButton::before,
#cookieNoteCloseButton::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 1024px) {
    footer.sk-legacy-footer {
        min-height: 0 !important;
        padding: 26px 10px !important;
    }

    footer.sk-legacy-footer .fooInner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    footer.sk-legacy-footer .fooInner > ul {
        width: 100% !important;
        margin: 0 0 10px !important;
        float: none !important;
        text-align: center !important;
    }

    footer.sk-legacy-footer .help {
        width: 100% !important;
        max-width: 320px !important;
        margin: 20px auto 14px !important;
        float: none !important;
    }

    footer.sk-legacy-footer .logo-bottom {
        width: 277px !important;
        max-width: calc(100% - 20px) !important;
        margin: 10px auto 0 !important;
        float: none !important;
    }

    #cookieNote .sk-cookie-note,
    #cookieNote .alert {
        min-height: 31px !important;
        padding: 5px 46px 5px 3px !important;
        font-size: 9px !important;
        line-height: 11px !important;
        text-align: left !important;
    }

    #cookieNoteCloseButton {
        top: 4px !important;
        right: 3px !important;
        width: 34px !important;
        height: 22px !important;
    }
}

/* ==========================================================================
   Robbie V2.1 hotfix: Startseite / Roros-Bereich
   - entfernt die versehentlich geerbte grüne Debug-Fläche
   - stellt Wolke, Text und Roros-Bild wie im Referenzshop nebeneinander
   ========================================================================== */
@media (min-width: 1025px) {
    body.cl-start .roros .cloud-text {
        grid-template-columns: 230px minmax(0, 794px) !important;
        column-gap: 0 !important;
        min-height: 244px !important;
        background: transparent !important;
    }

    body.cl-start .roros .cloud-text > img {
        grid-column: 1 !important;
        align-self: start !important;
        display: block !important;
        position: static !important;
        width: 228px !important;
        max-width: 228px !important;
        height: 145px !important;
        margin: 0 !important;
        float: none !important;
        object-fit: contain !important;
    }

    body.cl-start .roros .cloud-text > p:first-of-type {
        grid-column: 2 !important;
        position: relative !important;
        box-sizing: border-box !important;
        width: 794px !important;
        min-height: 244px !important;
        margin: 0 !important;
        padding: 0 270px 0 0 !important;
        float: none !important;
    }

    body.cl-start .roros .cloud-text > p:first-of-type > img {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        width: 250px !important;
        max-width: 250px !important;
        height: 244px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        object-fit: cover !important;
    }

    body.cl-start .roros .cloud-text > p:not(:first-of-type) {
        display: none !important;
    }
}