/* HALO Beauty: proporcjonalny mockup + modal prezentujący cały zestaw urządzeń. */
.halo-system-page .halo-beauty-showcase__chapter {
    max-width:1100px;
    margin-inline:auto;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:clamp(20px,3.6vw,45px);
    padding:clamp(21px,2.3vw,31px);
}
.halo-system-page .halo-beauty-showcase__media {
    width:100%;
    max-width:530px;
    justify-self:center;
    align-self:center;
    padding:5px 0 0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
}
.halo-system-page .halo-beauty-showcase__media .halo-beauty-mockup__stage {
    width:100%;
    max-width:530px;
    margin:0 auto;
    padding-bottom:5.4%;
    filter:none;
}
.halo-system-page .halo-beauty-showcase__media .halo-beauty-mockup__phone {
    width:20.5%;
    right:1.8%;
    bottom:5%;
}
.halo-system-page .halo-beauty-showcase__caption {
    margin:6px 0 0;
}
.halo-system-page .halo-beauty-showcase__stage--preview {
    position:relative;
}
.halo-system-page .halo-beauty-showcase__open {
    position:absolute;
    z-index:5;
    inset:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    box-sizing:border-box;
    padding:12px;
    border:0;
    border-radius:14px;
    color:#fff0db;
    background:transparent;
    cursor:zoom-in;
    -webkit-tap-highlight-color:transparent;
}
.halo-system-page .halo-beauty-showcase__open:hover {
    background:rgba(240,174,96,.035);
}
.halo-system-page .halo-beauty-showcase__open:focus-visible {
    outline:3px solid #edb875;
    outline-offset:4px;
}
.halo-system-page .halo-beauty-showcase__zoom-label {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(236,191,138,.4);
    border-radius:999px;
    background:rgba(19,13,11,.92);
    padding:7px 11px;
    color:#ffe6c6;
    font:600 12px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.halo-system-page .halo-beauty-showcase__zoom-label svg {
    flex:0 0 16px;
    width:16px;
    height:16px;
}
html.halo-beauty-modal-open {
    overflow:hidden;
    scrollbar-gutter:stable;
}
.halo-system-page dialog.halo-beauty-showcase__dialog {
    box-sizing:border-box;
    position:fixed;
    inset:0;
    width:min(1020px,calc(100vw - 48px));
    max-width:calc(100vw - 48px);
    height:auto;
    max-height:calc(100dvh - 36px);
    margin:auto;
    padding:0;
    overflow:auto;
    overscroll-behavior:contain;
    border:1px solid rgba(238,184,112,.32);
    border-radius:20px;
    background:linear-gradient(145deg,#291b14,#140d0b 85%);
    color:#fff2e2;
    box-shadow:0 32px 100px rgba(0,0,0,.75);
}
.halo-system-page dialog.halo-beauty-showcase__dialog:not([open]) {
    display:none;
}
.halo-system-page dialog.halo-beauty-showcase__dialog::backdrop {
    background:rgba(3,2,2,.86);
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
}
.halo-system-page .halo-beauty-showcase__dialog-inner {
    display:flex;
    flex-direction:column;
    min-height:0;
    width:100%;
}
.halo-system-page .halo-beauty-showcase__dialog-header {
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:78px;
    padding:14px 23px;
    box-sizing:border-box;
    border-bottom:1px solid rgba(232,180,113,.15);
    background:#241711;
}
.halo-system-page .halo-beauty-showcase__dialog-kicker {
    display:block;
    margin-bottom:5px;
    font:750 10px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:#e9b67a;
}
.halo-system-page .halo-beauty-showcase__dialog-header h3 {
    margin:0;
    color:#fff0dd;
    font:500 clamp(18px,2vw,26px)/1.2 Georgia,'Times New Roman',serif;
    letter-spacing:-.02em;
}
.halo-system-page .halo-beauty-showcase__close {
    display:grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border:1px solid rgba(232,180,113,.26);
    border-radius:12px;
    background:rgba(251,225,192,.07);
    color:#f6ddbc;
    cursor:pointer;
}
.halo-system-page .halo-beauty-showcase__close svg {
    width:22px;
    height:22px;
}
.halo-system-page .halo-beauty-showcase__close:hover {
    background:rgba(238,184,112,.16);
}
.halo-system-page .halo-beauty-showcase__close:focus-visible {
    outline:2px solid #edb875;
    outline-offset:3px;
}
.halo-system-page .halo-beauty-showcase__dialog-body {
    display:grid;
    justify-items:center;
    gap:10px;
    padding:clamp(20px,3vw,38px);
    min-width:0;
    box-sizing:border-box;
}
.halo-system-page .halo-beauty-showcase__stage--modal {
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:0 0 8%;
    box-sizing:border-box;
    filter:drop-shadow(0 18px 14px rgba(0,0,0,.35));
}
.halo-system-page .halo-beauty-showcase__stage--modal .halo-beauty-mockup__laptop {
    margin-left:1.6%;
    width:83%;
}
.halo-system-page .halo-beauty-showcase__stage--modal .halo-beauty-mockup__laptop-frame {
    padding:clamp(6px,1vw,13px);
    padding-top:clamp(11px,1.3vw,17px);
}
.halo-system-page .halo-beauty-showcase__stage--modal .halo-beauty-mockup__phone {
    width:20.5%;
    right:1.8%;
    bottom:7%;
}
.halo-system-page .halo-beauty-showcase__dialog-caption {
    margin:0;
    text-align:center;
    color:rgba(250,222,188,.73);
    font-size:13px;
    line-height:1.4;
}
@media(max-width:780px) {
    .halo-system-page .halo-beauty-showcase__chapter {
        grid-template-columns:minmax(0,1fr);
        padding:clamp(16px,3.5vw,24px);
        gap:12px;
    }
    .halo-system-page .halo-beauty-showcase__media {
        max-width:520px;
        width:100%;
        padding:0;
    }
    .halo-system-page .halo-beauty-showcase__media .halo-beauty-mockup__stage {
        width:100%;
        max-width:520px;
        margin:0 auto;
        min-height:0;
        padding-bottom:7%;
    }
    .halo-system-page .halo-beauty-showcase__zoom-label {
        padding:6px 9px;
        font-size:11px;
    }
    .halo-system-page dialog.halo-beauty-showcase__dialog {
        width:100vw;
        max-width:100vw;
        height:100dvh;
        max-height:100dvh;
        min-height:100dvh;
        margin:0;
        border:0;
        border-radius:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:env(safe-area-inset-bottom,0px);
    }
    .halo-system-page .halo-beauty-showcase__dialog-header {
        min-height:74px;
        padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
    }
    .halo-system-page .halo-beauty-showcase__dialog-body {
        min-height:0;
        padding:22px 12px 30px;
    }
    .halo-system-page .halo-beauty-showcase__stage--modal {
        width:min(100%,670px);
        max-width:670px;
        padding-bottom:10%;
    }
    .halo-system-page .halo-beauty-showcase__stage--modal .halo-beauty-mockup__laptop {
        width:82%;
    }
    .halo-system-page .halo-beauty-showcase__stage--modal .halo-beauty-mockup__phone {
        width:24%;
        right:0;
        bottom:6%;
    }
}
@media(max-width:420px) {
    .halo-system-page .halo-beauty-showcase__dialog-header h3 {
        font-size:17px;
        line-height:1.25;
    }
    .halo-system-page .halo-beauty-showcase__dialog-kicker {
        font-size:9px;
        letter-spacing:.1em;
    }
    .halo-system-page .halo-beauty-showcase__dialog-body {
        padding:32px 9px 24px;
    }
}
@supports not (height:100dvh) {
    @media(max-width:780px) {
        .halo-system-page dialog.halo-beauty-showcase__dialog {
            height:100vh;
            max-height:100vh;
            min-height:100vh;
        }
    }
}