.sticky-beneath-title-box {
    position: sticky;
    top: var(--modular-view-title-box-height, 75px); /* ? INFO: var value or 75px if not found */
}
.sticky-above-conclusion-box {
    position: sticky;
    bottom: var(--modular-view-conclusion-box-height, 57px);
}

.modular-view {
    --title-box-margin-top: 0.5em;
    --offer-image-length: 20em; /* ! this gets OVERWRITTEN by JAVASCRIPT - this is only the default length */
}

.rounded-border-box {
    border: 0.1em solid var(--shop-container-color-1-border);
    border-radius: 0.5em;
}

.modular-view {
    position: relative;
    background-color: var(--shop-container-color-1-bg);
    margin: 0.8em 0;
    padding: 0 0.8em;
    z-index: 1;
    
    /* ? INFO: these can be unset/reset in skin with e.g. `--shop-select-box-active-bg: revert;` (or `: initial;`) */
    --modular-view-title-box-heading-color: var(--shop-color-primary-bg);
    --modular-view-section-icon-color: var(--shop-color-primary-bg);
    --shop-select-box-active-bg: hsl(from var(--shop-color-primary-bg) h s l / 30%);
}

@media (min-width: 768px) {
    html .modular-view {
        display: grid;
        grid-template-columns: [start] var(--offer-image-length) [image-end] auto [end];
        /* grid-template-rows: fit-content() fit-content() repeat(auto); */
        column-gap: 1em;
        
        margin: 1em 0;
        padding: 0 1.9em;
    }

    html .modular-view img#offer-image {
        display: initial;
        width: var(--offer-image-length);
        height: var(--offer-image-length);
        margin-top: var(--title-box-margin-top);
        object-fit: cover;
        
        grid-row: 1 / 3;
        grid-column: start / image-end;
        z-index: 3;
    }

    html .modular-view .component-title-box .overlaid-background {
        grid-column: start / end;
    }
    html .modular-view .component-title-box .title-middle-container {
        grid-column: image-end / end;
    }
    html .modular-view .component-title-box .overlaid-background,
    html .modular-view .component-title-box .title-middle-container {
        grid-row: 1 / 2;
    }
    html .modular-view .prefab-section-description.section-outer-container {
        grid-row: 2 / 3;
        grid-column: image-end / end;
    }
    html .modular-view > * {
        grid-column: start / end;
    }

    html .modular-view .component-title-box .title-heading {
        font-size: 2.2em;
    }
    html .modular-view .component-title-box .sub-title-heading {
        font-size: 1.4em;
    }
    html .modular-view .component-section-box .content.section-inner-container .section-content-container .empty-message {
        font-size: 1.2em;
    }
    html .modular-view .component-group-box .group-title {
        font-size: 1.3em;
    }
    html .modular-view .component-group-box[required] .group-title:after {
        font-size: 1.15em;
    }
    html .modular-view .component-group-box .group-hints {
        font-size: 1em;
    }
    html .modular-view .component-item-box img {
        width: 5em;
        min-height: 4em;
    }
    html .modular-view .component-icon-info,
    html .modular-view .icon {
        font-size: 1.2em;
    }
    html .modular-view .square {
        font-size: 2.2em;
    }
    html .modular-view .square.small {
        font-size: 1.4em;
    }
    html .modular-view .btn {
        font-size: 1.2em;
    }
    html .modular-view .component-conclusion-box .btn {
        font-size: 1.25em;
    }
    html .modular-view .text {
        font-size: 1.2em;
    }
    html .modular-view .back-button {
        grid-column: start / image-end;
        font-size: 1.4em;
    }
}

.modular-view .prefab-section-error-box.error .section-outer-container.title,
.modular-view .prefab-section-error-box.error .section-inner-container {
    color: #90151c;
}
.modular-view .prefab-section-error-box.error .section-inner-container {
    background-color: #f8d7da;
    border: 1px solid #e9929b;
}

.modular-view .prefab-section-error-box.warning .section-outer-container.title,
.modular-view .prefab-section-error-box.warning .section-inner-container {
    color: #664d37;
}
.modular-view .prefab-section-error-box.warning .section-inner-container {
    background-color: #fff3cd;
    border: 1px solid #eacd76;
}

.modular-view .prefab-section-error-box.info .section-outer-container.title,
.modular-view .prefab-section-error-box.info .section-inner-container {
    color: #31708f;
}
.modular-view .prefab-section-error-box.info .section-inner-container {
    background-color: #d9edf7;
    border: 1px solid #93d7e5;
}


/* GENERAL */

.modular-view hr {
    border-width: 0.09em;
}

.modular-view button,
.modular-view input {
    border-radius: 0.2em;
}
.modular-view input {
    background-color: #fff;
    color: #000;
}
.modular-view .btn {
    padding: 0.3em 0.6em;
    font-size: 1em;
    text-transform: capitalize;
}

.modular-view .input-group .form-control {
    z-index: 0;
}


/* STICKY-ELEMENTS */
.modular-view .component-title-box .overlaid-background,
.modular-view .component-title-box .title-middle-container,
.modular-view .component-conclusion-box.conclusion-outer-container,
.modular-view .component-section-box .title.section-outer-container {
    margin-left: -0.1em;
    margin-right: -0.1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    background-color: var(--shop-container-color-1-bg);
}



.modular-view #offer-image {
    display: none;
}

.modular-view .back-button {
    width: 100%;
    min-width: 10em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    text-transform: uppercase;
}

/* TITLE-BOX */

.modular-view .component-title-box.title-outer-container {
    display: contents;
}
.modular-view .component-title-box .overlaid-background,
.modular-view .component-title-box .title-middle-container {
    position: sticky;
    top: 0;
    padding-top: var(--title-box-margin-top);
    
    border-bottom-left-radius: 0.6em;
    border-bottom-right-radius: 0.6em;
    
    z-index: 2;
}
.modular-view .component-title-box .title-heading {
    margin: 0;
    font-size: 1.5em;
    text-align: center;
    color: var(--modular-view-title-box-heading-color, revert);
}
.modular-view .component-title-box .sub-title-heading:empty {
    display: none;
}
.modular-view .component-title-box .sub-title-heading {
    font-size: 1.15em;
}
.modular-view .component-title-box .title-inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}
.modular-view .component-title-box .container-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modular-view .component-title-box .container-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0.2em;
    column-gap: 1em;
}


/* CONCLUSION-BOX */

.modular-view .component-conclusion-box.conclusion-outer-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    
    position: sticky;
    bottom: 0;
    padding-bottom: 0.5em;
    margin-top: 1.5em;
    
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
    
    z-index: 2;
}
.modular-view .component-conclusion-box .conclusion-inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4em;
}

.modular-view .component-conclusion-box .container-left {
    padding-left: 0.3em;
}

.modular-view .component-conclusion-box .container-right {
    display: flex;
    align-items: center;
}
.modular-view .component-conclusion-box .nav-icon {
    margin: 0 0.5em;
}
.modular-view .component-conclusion-box .nav-icon .badge {
    right: -7px;
}

.modular-view .component-conclusion-box .btn {
    font-size: 1.05em;
}

.modular-view .component-conclusion-box .checkout-button {
    float: right;
    margin-top: 0.4em;
}


/* SECTION-BOX */

.modular-view .component-section-box .title.section-outer-container {
    display: flex;
    align-items: center;
    padding-top: 1em;
    margin-bottom: 1px; /* ? INFO: px here instead of em, since this is only to prevent the section-title's background to minimally overlap/hide the section-content's border */
    height: 3.5em;
    font-size: 1.2em;
    
    position: sticky;
    z-index: 1;
}

.modular-view .component-section-box .title.section-outer-container i {
    color: var(--modular-view-section-icon-color, revert);
}
.modular-view .component-section-box .title.section-outer-container hr {
    flex-grow: 1;
    border-color: var(--shop-container-color-1-border);
    margin: 0;
}

.modular-view .component-section-box .content.section-inner-container .section-content-container {
    padding: 0.7em;
}
.modular-view .component-section-box .content.section-inner-container .section-content-container.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.4em, 1fr));
    justify-content: space-between;
    justify-items: center;
    grid-gap: 0.5em;
}
.modular-view .component-section-box .content.section-inner-container .section-content-container:not(.badges-grid) .component-item-box:nth-child(n+2 of :not(.empty-message)) { /* ? INFO: the ":nth-child(n+2 ..." selects the second and all following elements of the elements that match the following selector (aka aren't the empty-message) */
    margin-top: 0.5em;
}
.modular-view .component-section-box .content.section-inner-container .section-content-container:not(.badges-grid) .component-group-box:nth-child(n+2 of :not(.empty-message)) { /* ? INFO: the ":nth-child(n+2 ..." selects the second and all following elements of the elements that match the following selector (aka aren't the empty-message) */
    margin-top: 1.5em;
}

.modular-view .component-section-box .content.section-inner-container .section-content-container .empty-message {
    width: 100%;
    text-align: center;
}
.modular-view .component-section-box .content.section-inner-container .section-content-container .empty-message:not(.hidden) ~ * {
    display: none;
}

.modular-view .component-section-box .content.section-inner-container.scroll {
    max-height: 10em;
    overflow: auto;
}

.modular-view .component-section-box .content.section-inner-container.expand {
    position: relative;
}
.modular-view .component-section-box .content.section-inner-container.expand:not(.too-small) {
    cursor: pointer;
    min-height: 10em;
}
.modular-view .component-section-box .content.section-inner-container.expand.collapse[aria-expanded="false"] {
    display: block;
    visibility: initial;
    overflow: hidden;
}
.modular-view .component-section-box .content.section-inner-container.expand.collapse[aria-expanded="false"]:not(.too-small) {
    height: 10em !important;
}
.modular-view .component-section-box .content.section-inner-container.expand.collapsing[aria-expanded="false"]:not(.too-small) {
    height: 10em !important;
}
.modular-view .component-section-box .content.section-inner-container.expand.too-small,
.modular-view .component-section-box .content.section-inner-container.expand.collapse[aria-expanded="false"].too-small,
.modular-view .component-section-box .content.section-inner-container.expand.collapsing[aria-expanded="false"].too-small {
    height: auto !important;
}

.modular-view .component-section-box .content.section-inner-container.expand.too-small .expand-icon {
    display: none;
}
.modular-view .component-section-box .content.section-inner-container.expand .expand-icon {
    position: absolute;
    right: 0.2em;
    bottom: 0.2em;
    font-size: 1.7em;
    background-color: rgba(var(--shop-container-color-1-opaque-raw), 0.071);
    backdrop-filter: blur(1px);
    padding: 0.3em;
    border-radius: 0.22em;
}
.modular-view .component-section-box .content.section-inner-container.expand .expand-icon:hover {
    background-color: rgba(var(--shop-container-color-1-opaque-raw), 0.129);
}

.modular-view .component-section-box .button-next-section-container {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5em;
    pointer-events: none;
    
    position: sticky;
}
.modular-view .component-section-box .button-next-section-container * {
    pointer-events: initial;
}

/* CALENDAR */ 

.modular-view .component-calendar {
    max-width: max(21.5em, 300px);
    margin: 0 auto;
}


/* GROUP-BOX */

.modular-view .component-group-box .group-title {
    font-size: 1.15em;
}
.modular-view .component-group-box[required] .group-title:after {
    content: ' *';
    color: var(--shop-signal-color-required, red);
    font-size: 1.1em;
    line-height: 0;
}

.modular-view .component-group-box .group-hints {
    margin-left: 0.1em;
    font-size: 0.9em;
}
.modular-view .component-group-box .group-hints[optional] {
    color: var(--shop-signal-color-optional, blue);
}
.modular-view .component-group-box .group-hints[required] {
    color: var(--shop-signal-color-required, red);
}

.group-title:empty,
.group-hints:empty {
    display: none;
}

.modular-view .section-content-container > .component-group-box > .group-header:has(> :not(:empty)) {
    margin-bottom: 0.3rem;
}


/* ITEM-BOX */

.modular-view .component-item-box .item-inner-container {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.modular-view .component-item-box .item-content-container {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    padding: 0.5em;
}

.modular-view .component-item-box img {
    width: 4em;
    min-height: 4em;
    height: auto;
    object-fit: cover;
    border-radius: 0.5em;
}

.modular-view .component-item-box .icon-infos {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.modular-view .component-item-box .buttons {
    display: flex;
    align-items: center;
}
.modular-view .component-item-box .buttons .component-select-icon.select-icon-container:last-child {
    margin-right: -0.3em;
}


/* ITEM-BADGE */

.modular-view .component-item-badge.item-outer-container {
    width: 100%;
}

.modular-view .component-item-badge .item-inner-container {
    min-width: 9.4em;
    width: 100%;
    padding: 0.3em 0.5em;
}


/* ICON-INFO */

.modular-view .component-icon-info {
    display: flex;
    align-items: center;
    min-height: 1.5em;
}
.modular-view .component-icon-info.main-info {
    font-weight: 600;
}
.modular-view .component-icon-info.sub-info {
    font-weight: 250;
    opacity: 0.8;
}

.modular-view .component-icon-info > * {
    margin-right: 0.5em;
}

.modular-view .component-icon-info > span {
    line-height: 1;
}

.modular-view .component-icon-info input {
    padding: 0.08em 0.3em;
    max-width: 2.6em;
    width: 100%;
    font-family: Helvetica, Arial, sans-serif;
}
.modular-view .component-icon-info input::-webkit-outer-spin-button,
.modular-view .component-icon-info input::-webkit-inner-spin-button { /* Chrome, Safari, Edge, Opera */
    -webkit-appearance: none;
    margin: 0;
}
.modular-view .component-icon-info input[type=number] { /* Firefox */
    -moz-appearance: textfield;
    appearance: textfield;
}


/* BUTTON-/ICON-SQUARE */

.square {
    width: 1.7em;
    height: 1.7em;
    font-size: 1.7em;
    padding: 0;
    margin-left: 0.2em;
}

.square.small {
    font-size: 1.2em;
}


/* ICON-BUTTON */

.modular-view button.element-button-icon {
    border: none;
    background-color: rgba(var(--shop-container-color-1-opaque-raw), 0.122);
}
.modular-view button.element-button-icon:hover {
    background-color: rgba(var(--shop-container-color-1-opaque-raw), 0.188);
}


/* DOUBLE-ICON-BUTTON */

.component-double-button-icon {
    display: flex;
    flex-direction: column;
}

.modular-view .component-double-button-icon > button.element-button-icon:first-child {
    background-color: rgba(var(--shop-container-color-1-opaque-raw), 0.188);
}
.component-double-button-icon > button.element-button-icon:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.component-double-button-icon > button.element-button-icon:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.modular-view .component-double-button-icon > button.element-button-icon:hover {
    background-color: rgba(var(--shop-container-color-1-opaque-raw), 0.251);
}