/* Standalone detail page for /total-look/detail/?id=... .
   The same markup is used by the AJAX popup, but the direct URL needs its
   own page shell and normal document scrolling. */

.total-look-detail-page {
    background: #fff;
}

.total-look-detail-page__container {
    padding-top: 24px;
    padding-bottom: 80px;
}

.total-look-detail-page__back {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #130F0F;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.total-look-detail-page__content .tl-popup__layout {
    padding-top: 24px;
}

.total-look-detail-page__content .tl-popup__right {
    max-height: none;
    overflow: visible;
}

.total-look-detail-page__content .tl-popup__right .look-buy-panel {
    height: auto;
}

.total-look-detail-page__content .tl-popup__slider-nav--prev {
    left: 16px;
    right: auto;
}

.total-look-detail-page__content .tl-popup__slider-nav--next {
    right: 16px;
    left: auto;
}

.total-look-detail-page__content .look-buy-panel__close {
    display: none;
}

@media (max-width: 767px) {
    /* The standalone page starts immediately below the compact mobile header. */
    body:has(.total-look-detail-page) .header__bottom {
        display: none !important;
    }

    .total-look-detail-page__container {
        padding: 0 0 calc(96px + env(safe-area-inset-bottom));
    }

    .total-look-detail-page__back {
        margin: 16px;
    }

    .total-look-detail-page__content .tl-popup__layout {
        display: flex;
        flex-direction: column;
        padding: 0 0 calc(96px + env(safe-area-inset-bottom));
        column-gap: 0;
        row-gap: 0;
        grid-template-columns: none;
        align-items: stretch;
    }

    .total-look-detail-page__content .tl-popup__left,
    .total-look-detail-page__content .tl-popup__right,
    .total-look-detail-page__content .tl-popup__right .look-buy-panel {
        display: contents;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__header {
        order: 1;
        background: #fff;
        padding: 42px 16px 36px;
        margin: 0;
        align-items: center;
    }

    .total-look-detail-page__content .tl-popup__photos {
        order: 2;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .total-look-detail-page__content .tl-popup__video {
        display: none;
    }

    .total-look-detail-page__content .tl-popup__slider {
        aspect-ratio: 375 / 492;
    }

    .total-look-detail-page__content .tl-popup__slider-nav {
        display: block;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__subtitle {
        order: 3;
        font-size: 16px;
        padding: 0 16px;
        margin: 38px 0 24px;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__items {
        order: 4;
        padding: 0 16px;
        margin-bottom: 0;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__size {
        min-width: 49.6px;
        width: auto;
        padding: 0 20px;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__summary {
        order: 5;
        padding: 16px 0 0;
        margin: 0 16px 48px;
        gap: 16px;
    }

    .total-look-detail-page__content .tl-popup__sections {
        order: 6;
        gap: 8px;
        padding-left: 16px;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__buy-wrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        height: auto;
        background: #fff;
        margin: 0;
    }

    .total-look-detail-page__content .tl-popup__right .look-buy-panel__buy {
        height: 48px;
    }
}