h1:focus {
    outline: none;
}

/* Featured products grid */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 900px) {
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
}

.featured-grid__load-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.btn--load-more {
    padding: 12px 40px;
    background: #222;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: .05em;
}

.btn--load-more:hover {
    background: #ec6c23;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Form errors: a little room under the field. ValidationMessage renders a div whose class attribute replaces its
   own "validation-message", so the forms' messages are div.text-danger. The template's textarea has a large bottom
   margin (up to 45px on desktop) that pushed its error far down: with an error it moves under the last message. */
.comment-form :is(.validation-message, div.text-danger) {
    margin-top: 6px;
    line-height: 1.35;
}

.comment-form :is(.validation-message, div.text-danger) + :is(.validation-message, div.text-danger) {
    margin-top: 2px;
}

.comment-form__textarea:has(+ :is(.validation-message, div.text-danger)) {
    margin-bottom: 0;
}

.comment-form__textarea ~ :is(.validation-message, div.text-danger):has(+ :not(.validation-message, div.text-danger)) {
    margin-bottom: 10px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Small helpers for markup that previously relied on Bootstrap */
.form-control {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font: inherit;
}

.form-label {
    display: inline-block;
    margin-bottom: 4px;
}

.mb-3 { margin-bottom: 1rem; }
.mt-2 { margin-top: .5rem; }
.mt-5 { margin-top: 3rem; }
.ps-0 { padding-left: 0; }
.text-danger { color: #dc3545; }

/* Product thumbnails */
.details-content-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.details-content-images__img {
    cursor: pointer;
}

.details-content-images__img-image {
    width: 100px;
    height: 80px;
    object-fit: cover;
}

/* YouTube videos in the gallery: a thumbnail with a play button, the player once clicked */
.details-content .details-content__video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
    cursor: pointer;
}

.details-content .details-content-images__img--video {
    position: relative;
    padding: 0;
    background: none;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.details-content-images__img--video .video-play {
    width: 34px;
    height: 24px;
}

.video-play svg {
    display: block;
    width: 100%;
    height: 100%;
}

.video-play__bg {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill 0.2s, fill-opacity 0.2s;
}

.video-play__arrow {
    fill: #fff;
}

.details-content__video:hover .video-play__bg,
.details-content__video:focus-visible .video-play__bg,
.details-content-images__img--video:hover .video-play__bg {
    fill: #de0a89;
    fill-opacity: 1;
}

.details-content__video-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Main product/pack image: below 850px (where the details stack) show the whole
   image at the viewport width instead of cropping it to the template's fixed height
   (app.css loads before style.min.css, hence the extra parent class) */
@media (max-width: 850px) {
    .details-content .details-content__view {
        height: auto;
        max-height: none;
    }

    .details-content .details-content__view-img {
        height: auto;
        object-fit: contain;
    }

    .details-content .details-content__video-frame {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Language switcher in the top header */
.header-top__inner {
    justify-content: flex-end;
}

.language-switcher {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switcher__link {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    opacity: .7;
}

.language-switcher__link--active,
.language-switcher__link:hover {
    opacity: 1;
}

/* Loading feedback: top bar during page changes and form posts, spinner in submit buttons (site.js) */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}

.page-progress--active {
    opacity: 1;
}

.page-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #490083, #de0a89, #ec6c23);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease-out;
}

.btn.is-loading {
    cursor: progress;
}

.btn.is-loading span:first-child svg {
    visibility: hidden;
}

/* The decorative slash of the template button becomes the spinner. */
.btn.is-loading span:first-child::after {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: none;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    transform: none;
    transition: none;
    animation: dv-spin .7s linear infinite;
}

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

/* Price calculator before WebAssembly has started: visible, but not yet usable. */
.details-aside-content-options[aria-busy="true"] input,
.details-aside-content-options[aria-busy="true"] button {
    cursor: progress;
    opacity: .6;
}

/* Catalog cards: same height per row, with the request button at the bottom. */
.catalog-grid-item {
    display: flex;
    flex-direction: column;
}

.catalog-grid-item .catalog-grid-item__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.catalog-grid-item .catalog-grid-item-rent--row {
    margin-bottom: 30px;
}

.catalog-grid-item .catalog-grid-item-rent--row + .catalog-grid-item-info {
    padding-top: 0;
}

.catalog-grid-item .catalog-grid-item__link {
    margin-top: auto;
}

/* Request button on the product and pack details pages. */
.details-content .details-content__button {
    margin-top: 30px;
    margin-bottom: 40px;
}

/* Price pane: the four rental prices in one block, spacing above and below the calculator. */
.details-aside-content-top .details-aside-content-top__rent {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 12px 25px;
    padding: 25px 20px;
}

.details-aside-content__inner .details-aside-content-options {
    padding-top: 35px;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.details-aside-content-options .details-aside-content-options__address-label {
    margin-top: 15px;
}

.details-aside-content-options .details-aside-content-options__address {
    margin-bottom: 25px;
}

/* Address suggestions under the delivery address (address-autocomplete.js, appended to <body>). */
.address-suggestions {
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    max-height: 260px;
    overflow-y: auto;
}

.address-suggestions li {
    padding: 10px 12px;
    color: #222;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
}

.address-suggestions li:hover,
.address-suggestions li[aria-selected="true"] {
    background: #490083;
    color: #fff;
}

/* Calculated price, between the options and the button (white on the purple pane). */
.details-aside-content-options .price-result {
    margin-bottom: 25px;
    color: #fff;
}

.price-result .price-result__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 4px;
}

/* The sidebar is narrow: the label may wrap, the amount never does. */
.price-result .price-result__row > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.price-result .price-result__detail {
    display: block;
    font-size: 12px;
    line-height: 16px;
    opacity: .8;
}

.price-result .price-result__total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .4);
    font-weight: 700;
    font-size: 18px;
}

.price-result .price-result__hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    opacity: .8;
}

.details-aside-content-options .price-result__error {
    margin-bottom: 25px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-left: 3px solid #de0a89;
    padding-left: 10px;
}

/* The template's button slash is clipped at the edge of the coloured block; on screens with a
   fractional pixel ratio (most phones) the block's colour bleeds through as a thin line there. */
.btn:not(:hover):not(.is-loading) span:first-child::before {
    width: auto;
    right: 1px;
}

/* Mobile header: hamburger left in the white bar (not over the language switcher), logo centred. */
@media (max-width: 1000px) {
    .header .header-content__wrapper {
        position: relative;
        justify-content: center;
        gap: 0;
        min-height: 60px;
    }

    .header-content__wrapper .dl-menuwrapper {
        top: calc(50% - 30px);
        left: 0;
        pointer-events: none;
    }

    .header-content__wrapper .dl-menuwrapper button {
        pointer-events: auto;
    }

    .header-content__wrapper .header-content__logo {
        padding-left: 0;
    }
}

/* Template buttons (html prefix: app.css loads before the template CSS). The text stays on one line and the
   button grows with it, so the coloured block keeps the button's height. On hover the padding swaps sides, so
   the width does not change and the arrow gets its own space on the right instead of covering the text. */
html .btn {
    width: fit-content;
    min-width: 225px;
    max-width: 100%;
    padding-right: 30px;
    transition: padding .3s;
}

html .btn span:first-child {
    top: 0;
    bottom: 0;
    height: auto;
}

html .btn span:last-child {
    white-space: nowrap;
}

html .btn:hover {
    padding-left: 30px;
    padding-right: 80px;
}

html .btn:hover span:first-child svg {
    left: auto;
    right: 22px;
}

html .comment-form__btn {
    width: fit-content;
    min-width: 245px;
    max-width: 100%;
}

/* Contact and request forms: the template's bottom padding shrinks to almost nothing on phones, so the send button
   touched the footer. Keep at least 50px (70px on wide screens, as in the template). */
html .main__send-message {
    padding-bottom: clamp(50px, calc(70 * (100vw - 360px) / 1560), 70px);
}

/* Contact and request forms: fields of a row share the width, room around the delivery option. */
.comment-form .comment-form__box {
    align-items: flex-start;
}

.comment-form__box > div {
    flex: 1;
    min-width: 0;
}

.main__send-message .comment__text--sentence {
    text-transform: none;
    margin-bottom: 30px;
}

/* Same spacing as the template's form rows (.main__send-message .comment-form__box). */
.comment-form__delivery {
    margin-bottom: calc(15px + 10 * ((100vw - 360px) / 1560));
}

.comment-form__delivery .comment-form__box-input {
    display: block;
    margin-bottom: 12px;
}

.comment-form__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
}

.comment-form__checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #ec6c23;
}

.comment-form__checkbox:has(input:disabled) {
    opacity: .5;
    cursor: not-allowed;
}


/* Explanations under a form field (free pickup days, installation rate). */
.comment-form__hint {
    margin: -5px 0 15px;
    font-size: 13px;
    line-height: 20px;
    opacity: .75;
}

/* Date fields: iOS Safari gives a date input a native look and an intrinsic minimum width that ignores width: 100%,
   so it overflowed the price calculator and the request form. A plain appearance lets it shrink to its box; the
   min-height keeps an empty one as tall as a filled one, and the value stays left-aligned like the other fields. */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 2.75em;
    background-color: #fff;
    color: #212121;
}

input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Date pairs of the request form sit under each other on phones. */
@media (max-width: 600px) {
    .comment-form__box--dates {
        flex-direction: column;
        align-items: stretch;
    }

    .comment-form__box--dates > div {
        flex: none;
        width: 100%;
    }
}

/* Room between the request button and the footer. */
#rental-request-form .comment-form__btn {
    margin-bottom: calc(40px + 40 * ((100vw - 360px) / 1560));
}

/* Price estimate of the rental list (filled by site.js), in the purple of the product details pane. */
.rental-estimate {
    margin-bottom: calc(20px + 10 * ((100vw - 360px) / 1560));
    padding: 20px 25px;
    background: #490083;
    color: #fff;
}

.rental-estimate__title {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

/* While site.js waits for the estimate: a spinner next to the title, the old amounts dimmed. */
.rental-estimate.is-loading .rental-estimate__title::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dv-spin .7s linear infinite;
}

.rental-estimate.is-loading .rental-estimate__rows {
    opacity: .5;
    transition: opacity .15s;
}

.rental-estimate__message {
    margin-bottom: 8px;
    font-size: 15px;
}

.rental-estimate .text-danger {
    color: #fff;
    border-left: 3px solid #de0a89;
    padding-left: 10px;
}

.rental-estimate__rows {
    margin: 0 0 8px;
}

.rental-estimate__row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-weight: 500;
    font-size: 15px;
    line-height: 26px;
}

/* display: flex would win over the hidden attribute that site.js sets on rows that do not apply. */
.rental-estimate__row[hidden] {
    display: none;
}

.rental-estimate__row dd {
    margin: 0;
    white-space: nowrap;
}

.rental-estimate__row--total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .4);
    font-weight: 700;
    font-size: 18px;
}

.rental-estimate__note {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    opacity: .8;
}

/* Card prices (day / weekend / week): three equal columns, the amount on one line with the period under it. */
.catalog-grid-item .catalog-grid-item-rent--row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.catalog-grid-item .catalog-grid-item-rent--row .catalog-grid-item-rent__item {
    padding: 0 6px;
    text-align: center;
}

.catalog-grid-item .catalog-grid-item-rent--row .catalog-grid-item-rent__item + .catalog-grid-item-rent__item {
    border-left: 1px solid #d9d9d9;
}

html .catalog-grid-item .catalog-grid-item-rent--row .catalog-grid-item-rent__item::before {
    content: none;
}

.catalog-grid-item-rent__price,
.catalog-grid-item-rent__period {
    display: block;
    white-space: nowrap;
}

.catalog-grid-item-rent__price {
    font-weight: 600;
}

.catalog-grid-item-rent__period {
    color: #515151;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
}

/* Rental list: header link with a counter (filled by site.js), add-to-list forms and the list page. */
.rental-list-link {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
    padding: 6px;
}

.rental-list-link__count {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #de0a89;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

@media (max-width: 1000px) {
    .header .header-content__wrapper .rental-list-link {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}

.add-to-rental-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.add-to-rental-list__label {
    font-weight: 600;
}

.add-to-rental-list__quantity,
.rental-list__quantity input {
    width: 80px;
    height: 50px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    font: inherit;
}

/* Phones: the add button on product and pack pages stays at the bottom of the screen while scrolling. */
@media (max-width: 1000px) {
    .add-to-rental-list--sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    }

    .add-to-rental-list--sticky .btn {
        flex: 1;
        min-width: 0;
        margin: 0;
        padding-right: 12px;
    }

    /* The button takes the room next to the quantity; a long label ("toevoegen aan huurlijst") wraps instead of
       running off the screen. */
    .add-to-rental-list--sticky .btn span:last-child {
        white-space: normal;
        font-size: 14px;
        line-height: 18px;
    }

    .add-to-rental-list--sticky .add-to-rental-list__quantity {
        width: 64px;
        flex-shrink: 0;
    }

    /* Keep the page's last lines (footer) clear of the bar. */
    body:has(.add-to-rental-list--sticky) {
        padding-bottom: 76px;
    }
}

.catalog-grid-item .add-to-rental-list {
    margin-top: auto;
}

.rental-list {
    padding: 40px 0 20px;
}

.rental-list__empty {
    margin-bottom: 25px;
}

.rental-list__item {
    margin-bottom: 20px;
}

.rental-list__item .catalog-list-content-item-body-top__title a {
    color: inherit;
}

.rental-list__kind {
    display: block;
    color: #ec6c23;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.rental-list__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.rental-list__quantity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rental-list__link {
    padding: 0;
    border: 0;
    background: none;
    color: #490083;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.rental-list__link--remove {
    color: #de0a89;
}

.rental-list__more {
    display: inline-block;
    margin-top: 10px;
    color: #490083;
    font-weight: 600;
}

/* Legal pages (privacy, rental terms) */
.legal {
    padding: 60px 0 100px;
}

.legal__inner {
    max-width: 860px;
    margin: 0 auto;
}

.legal__updated {
    font-size: 15px;
    color: #6e6e6e;
    margin-bottom: 30px;
}

.legal__title {
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #202020;
    margin: 40px 0 15px;
}

.legal__text,
.legal__list li {
    font-size: 17px;
    line-height: 28px;
    color: #3d3d3d;
}

.legal__text {
    margin-bottom: 15px;
}

.legal__list {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 15px;
}

.legal__list li + li {
    margin-top: 6px;
}

.footer-bottom__company {
    text-align: right;
}

@media (max-width: 767px) {
    .footer-bottom__company {
        text-align: center;
    }
}

/* "By sending you accept ..." under the forms */
.form-legal-notice {
    font-size: 15px;
    line-height: 24px;
    color: #6e6e6e;
    margin: 15px 0 25px;
}

.form-legal-notice a {
    color: #de0a89;
    text-decoration: underline;
}

/* Rental list: one message at the top when quantities were lowered to what we own. */
.rental-list__alert {
    margin-bottom: 25px;
    padding: 15px 20px;
    border-left: 4px solid #de0a89;
    background: #fff;
    color: #202020;
}

.rental-list__alert p + p {
    margin-top: 8px;
}

/* Footer "Cookie settings": a button that looks like the other footer links. */
.footer-content__list-button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

/* Cookie banner (Shared/CookieConsent.razor, cookie-consent.js). Refuse and accept share one style. */
.cookie-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.cookie-consent[hidden],
.cookie-consent [hidden],
.video-consent[hidden] {
    display: none;
}

.cookie-consent__inner {
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    background: #fff;
    border-top: 4px solid #490083;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    font-family: "Archivo", sans-serif;
    color: #222;
    pointer-events: auto;
}

.cookie-consent__title {
    margin: 0 0 10px;
    font-family: "Lexend Deca", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #490083;
}

.cookie-consent__text,
.video-consent__text {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
}

.cookie-consent__text a,
.video-consent__text a {
    color: #de0a89;
    text-decoration: underline;
}

.cookie-consent__settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.cookie-consent__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}

.cookie-consent__option input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #490083;
}

.cookie-consent__option strong {
    display: block;
}

.cookie-consent__actions,
.video-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.cookie-consent__button {
    flex: 1 1 160px;
    min-height: 46px;
    padding: 10px 18px;
    border: 2px solid #490083;
    background: #490083;
    color: #fff;
    font-family: "Archivo", sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.cookie-consent__button:hover,
.cookie-consent__button:focus-visible {
    background: #de0a89;
    border-color: #de0a89;
}

.cookie-consent__button--secondary {
    background: #fff;
    color: #490083;
}

.cookie-consent__button--secondary:hover,
.cookie-consent__button--secondary:focus-visible {
    color: #fff;
}

/* "This video is on YouTube" notice under the main product/pack view, shown until external media is allowed. */
.video-consent {
    margin-bottom: 20px;
    padding: 18px;
    background: #f6f1fa;
    border-left: 4px solid #490083;
    font-family: "Archivo", sans-serif;
}

@media (max-width: 600px) {
    .cookie-consent {
        left: 0;
        right: 0;
        bottom: 0;
    }

    .cookie-consent__inner {
        padding: 18px 16px;
    }

    /* Refuse and accept side by side, settings below. */
    .cookie-consent__button {
        flex-basis: 120px;
    }
}