:root {
    --hlpf-paper: #f6f1e8;
    --hlpf-paper-light: #fffdf8;
    --hlpf-paper-deep: #ebe4d9;
    --hlpf-ink: #211f1b;
    --hlpf-muted: #6a635a;
    --hlpf-line: #c8c0b5;
    --hlpf-line-strong: #8f877b;
    --hlpf-accent: #a43d33;
    --hlpf-accent-dark: #762d27;
    --hlpf-focus: #8e2f27;
    --hlpf-content: 1240px;
    --hlpf-radius: 12px;
    --hlpf-control-shadow: 0 2px 0 rgba(33, 31, 27, 0.05), 0 4px 12px rgba(33, 31, 27, 0.08);
    --hlpf-control-shadow-pressed: 0 1px 2px rgba(33, 31, 27, 0.12);
    --hlpf-motion-press: 130ms cubic-bezier(0.2, 0.75, 0.25, 1);
    --hlpf-motion-state: 260ms cubic-bezier(0.22, 0.8, 0.24, 1);
    --hlpf-motion-enter: 520ms cubic-bezier(0.2, 0.78, 0.24, 1);
    --hlpf-motion-exit: 190ms cubic-bezier(0.4, 0, 1, 1);
    --hlpf-motion: var(--hlpf-motion-state);
    --hlpf-font-serif: ui-serif, "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
    --hlpf-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

@keyframes hlpf-hero-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hlpf-control-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hlpf-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hlpf-image-switch {
    0% {
        opacity: 0.35;
        transform: scale(0.985);
    }
    55% {
        opacity: 0.82;
        transform: scale(1.008);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hlpf-loading-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: var(--hlpf-control-shadow);
    }
    50% {
        opacity: 0.62;
        box-shadow: var(--hlpf-control-shadow-pressed);
    }
}

@keyframes hlpf-dialog-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hlpf-dialog-backdrop-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes hlpf-dialog-inner-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hlpf-dialog-inner-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
}

@keyframes hlpf-gallery-scrim-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hlpf-gallery-scrim-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes hlpf-gallery-shell-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hlpf-gallery-shell-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
}

@keyframes hlpf-gallery-progress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes hlpf-view-change {
    from {
        opacity: 0.35;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

html.hlpf-page,
body.hlpf-page,
html:has(.hlpf),
body:has(.hlpf) {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--hlpf-paper) !important;
    color: var(--hlpf-ink);
    font-size: 16px;
}

body.hlpf-page .site,
body.hlpf-page .site-main,
body.hlpf-page .entry-content,
body.hlpf-page .post-content,
body.hlpf-page .wp-block-post-content,
body:has(.hlpf) .site,
body:has(.hlpf) .site-main,
body:has(.hlpf) .entry-content,
body:has(.hlpf) .post-content,
body:has(.hlpf) .wp-block-post-content {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
}

.hlpf,
.hlpf *,
.hlpf *::before,
.hlpf *::after,
.dialog,
.dialog *,
.dialog *::before,
.dialog *::after {
    box-sizing: border-box;
}

.hlpf-dialog,
.hlpf-dialog *,
.hlpf-dialog *::before,
.hlpf-dialog *::after {
    box-sizing: border-box;
}

.hlpf {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(32px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(40px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    overflow-x: hidden;
    color: var(--hlpf-ink);
    background-color: var(--hlpf-paper);
    font-family: var(--hlpf-font-sans);
    font-size: 16px;
    line-height: 1.55;
    font-synthesis: none;
    isolation: isolate;
    touch-action: pan-y;
}

.hlpf :where(h1, h2, h3, p, figure) {
    margin-top: 0;
}

.hlpf :where(a, button) {
    color: inherit;
    font: inherit;
    touch-action: manipulation;
}

.hlpf :where(a, button, input, [tabindex]):focus-visible,
.dialog :where(a, button, input, [tabindex]):focus-visible,
.hlpf-dialog :where(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid var(--hlpf-focus);
    outline-offset: 3px;
}

.hlpf :where(a, button),
.dialog :where(a, button),
.hlpf-dialog :where(a, button) {
    transition: color var(--hlpf-motion), background-color var(--hlpf-motion),
        border-color var(--hlpf-motion), opacity var(--hlpf-motion),
        transform var(--hlpf-motion-press), box-shadow var(--hlpf-motion-press);
}

/* Editorial masthead. The legacy dock names remain aliases for older markup. */
.hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) {
    position: static;
    z-index: auto;
    display: grid;
    width: min(100%, var(--hlpf-content));
    max-width: var(--hlpf-content);
    min-width: 0;
    margin: 0 auto;
    padding: 0 0 clamp(32px, 8vw, 72px);
    transform: none;
    border: 0;
    border-bottom: 1px solid var(--hlpf-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: hlpf-hero-in var(--hlpf-motion-enter) both;
    animation-delay: 0ms;
    transform-origin: center top;
    will-change: opacity, transform;
}

.hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) :where(.brand, .hlpf-brand) {
    display: block;
    margin: 0 0 clamp(24px, 6vw, 48px);
    color: var(--hlpf-accent);
    font-family: var(--hlpf-font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    white-space: normal;
}

.hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) :where(.title, .hlpf-title) {
    display: block;
    max-width: 100%;
    margin: 0;
    color: var(--hlpf-ink);
    font-family: var(--hlpf-font-serif);
    font-size: clamp(2.75rem, 14vw, 7rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) :where(.title-en, .hlpf-title-en) {
    display: inline-block;
    margin-left: 0.4em;
    color: var(--hlpf-muted);
    font-family: var(--hlpf-font-sans);
    font-size: 0.24em;
    font-weight: 600;
    letter-spacing: 0.08em;
    vertical-align: 0.28em;
}

.hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) :where(.count, .hlpf-count) {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: clamp(20px, 5vw, 32px) 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--hlpf-accent);
    color: var(--hlpf-muted);
    font-family: var(--hlpf-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Part navigation stays readable and wraps before it can overflow a phone. */
.hlpf :where(.part-browser, .hlpf-filterdock) {
    position: static;
    z-index: auto;
    width: min(100%, var(--hlpf-content));
    max-width: var(--hlpf-content);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 40px) 0;
    transform: none;
    border: 0;
    border-bottom: 1px solid var(--hlpf-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hlpf :where(.hlpf-part-browser) {
    position: static;
    z-index: auto;
    width: min(100%, var(--hlpf-content));
    max-width: var(--hlpf-content);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 40px) 0;
    transform: none;
    border: 0;
    border-bottom: 1px solid var(--hlpf-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hlpf :where(.part-browser) > :where(.label, .kicker, p):first-child {
    margin-bottom: 14px;
    color: var(--hlpf-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hlpf :where(.part, .hlpf-chip, .hlpf-part) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--hlpf-line);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: var(--hlpf-control-shadow);
}

.hlpf :where(.part-name, .hlpf-part-name) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hlpf :where(.part-count, .hlpf-part-count) {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--hlpf-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.hlpf :where(.part, .hlpf-part) {
    justify-content: space-between;
    text-align: left;
}

.hlpf :where(.part, .hlpf-chip, .hlpf-part):hover {
    border-color: var(--hlpf-accent);
    color: var(--hlpf-accent-dark);
    background-color: var(--hlpf-paper-light);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

.hlpf :where(.part.is-active, .part[aria-current="page"], .part[aria-selected="true"],
    .hlpf-chip.is-active, .hlpf-part.is-active, .hlpf-part[aria-current="page"],
    .hlpf-part[aria-selected="true"]) {
    border-width: 1px;
    border-color: var(--hlpf-accent);
    color: #fffaf2;
    background-color: var(--hlpf-accent);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--hlpf-accent-dark), 0 2px 5px rgba(164, 61, 51, 0.2);
    text-decoration: none;
}

.hlpf :where(.part.is-active, .part[aria-current="page"], .part[aria-selected="true"],
    .hlpf-chip.is-active, .hlpf-part.is-active, .hlpf-part[aria-current="page"],
    .hlpf-part[aria-selected="true"]) :where(.part-name, .part-count, .hlpf-part-name, .hlpf-part-count) {
    color: #fffaf2;
}

.hlpf :where(.part, .hlpf-chip, .hlpf-part):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

/* Keep the first navigation affordances lively without relying on hover. */
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > * {
    --hlpf-part-stagger: 0ms;
    animation: hlpf-control-in 420ms var(--hlpf-motion-state) var(--hlpf-part-stagger) both;
    will-change: opacity, transform;
}

.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(2) { --hlpf-part-stagger: 64ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(3) { --hlpf-part-stagger: 128ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(4) { --hlpf-part-stagger: 192ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(5) { --hlpf-part-stagger: 256ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(6) { --hlpf-part-stagger: 320ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(7) { --hlpf-part-stagger: 384ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(8) { --hlpf-part-stagger: 448ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(9) { --hlpf-part-stagger: 512ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(10) { --hlpf-part-stagger: 576ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(11) { --hlpf-part-stagger: 640ms; }
.hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > :nth-child(12) { --hlpf-part-stagger: 704ms; }

/* The portfolio remains a compact, top-aligned two-column wall on phones and tablets. */
.hlpf :where(.grid, .hlpf-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 28px;
    align-items: start;
    width: min(100%, var(--hlpf-content));
    min-width: 0;
    margin: 0 auto;
    padding-top: clamp(32px, 8vw, 64px);
}

.hlpf :where(.card, .hlpf-card) {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding-top: 10px;
    border: 0;
    border-top: 1px solid var(--hlpf-line-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform-origin: center top;
}

.hlpf :where(.grid, .hlpf-grid) > :where(.card, .hlpf-card, .hlpf-empty) {
    --hlpf-card-stagger: 0ms;
    animation: hlpf-card-in var(--hlpf-motion-enter) var(--hlpf-card-stagger) both;
    will-change: opacity, transform;
}

.hlpf :where(.grid, .hlpf-grid) > :where(.card, .hlpf-card, .hlpf-empty).is-entering {
    animation: hlpf-card-in var(--hlpf-motion-enter) var(--hlpf-card-stagger) both;
}

.hlpf :where(.grid, .hlpf-grid) > :where(.card, .hlpf-card, .hlpf-empty).is-visible {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
}

.hlpf :where(.grid, .hlpf-grid) > :nth-child(2) { --hlpf-card-stagger: 64ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(3) { --hlpf-card-stagger: 128ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(4) { --hlpf-card-stagger: 192ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(5) { --hlpf-card-stagger: 256ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(6) { --hlpf-card-stagger: 320ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(7) { --hlpf-card-stagger: 384ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(8) { --hlpf-card-stagger: 448ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(9) { --hlpf-card-stagger: 512ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(10) { --hlpf-card-stagger: 576ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(11) { --hlpf-card-stagger: 640ms; }
.hlpf :where(.grid, .hlpf-grid) > :nth-child(12) { --hlpf-card-stagger: 704ms; }

.hlpf :where(.card-media, .hlpf-card-media, .hlpf-compare) {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hlpf-line);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-deep);
    color: inherit;
    cursor: zoom-in;
    text-align: left;
    box-shadow: var(--hlpf-control-shadow);
    transition: border-color var(--hlpf-motion), background-color var(--hlpf-motion),
        transform var(--hlpf-motion-press), box-shadow var(--hlpf-motion-press);
}

button.card-media,
button.hlpf-card-media,
button.hlpf-compare {
    appearance: none;
    -webkit-appearance: none;
}

.hlpf :where(.card-media, .hlpf-card-media, .hlpf-compare):hover {
    border-color: var(--hlpf-accent);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

.hlpf :where(.card-media, .hlpf-card-media, .hlpf-compare):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

/* Keep source proportions with intrinsic sizing and no cropping. */
.hlpf :where(.card-image, .hlpf-card-image, .hlpf-compare > img) {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    background-color: transparent;
    user-select: none;
    -webkit-user-drag: none;
}

.hlpf :where(.card-media, .hlpf-card-media, .hlpf-compare--single) {
    cursor: zoom-in;
}

.hlpf :where(.lazy, .hlpf-lazy) {
    opacity: 0;
    transition: opacity var(--hlpf-motion);
}

.hlpf :where(.lazy.is-ready, .hlpf-lazy.is-ready) {
    opacity: 1;
}

.hlpf :where(.card-image, .hlpf-card-image).is-switching,
.hlpf :where(.dialog-image, .hlpf-dialog-image, .single-image, .hlpf-dialog-single-image).is-switching {
    animation: hlpf-image-switch var(--hlpf-motion-state) both;
    will-change: opacity, transform;
}

.hlpf :where(.card-caption, .hlpf-card-caption) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px 10px;
    min-width: 0;
    margin-top: 8px;
}

.hlpf :where(.card-title, .hlpf-card-title) {
    min-width: 0;
    margin: 0;
    color: var(--hlpf-ink);
    font-family: var(--hlpf-font-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hlpf :where(.card-state, .hlpf-card-state) {
    flex: 0 0 auto;
    margin: 0;
    color: var(--hlpf-accent);
    font-family: var(--hlpf-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hlpf :where(.view-switch, .hlpf-view-switch) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    grid-column: 1 / -1;
}

.hlpf :where(.view-button, .hlpf-view-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--hlpf-line);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--hlpf-control-shadow);
}

.hlpf :where(.view-button:hover, .view-button:focus-visible,
    .hlpf-view-button:hover, .hlpf-view-button:focus-visible) {
    border-color: var(--hlpf-accent);
    color: var(--hlpf-accent-dark);
    background-color: var(--hlpf-paper-light);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

.hlpf :where(.view-button.is-selected, .view-button[aria-pressed="true"],
    .view-button[aria-current="true"], .hlpf-view-button.is-selected,
    .hlpf-view-button.is-active, .hlpf-view-button[aria-pressed="true"],
    .hlpf-view-button[aria-current="true"]) {
    border-width: 1px;
    border-color: var(--hlpf-accent);
    color: #fffaf2;
    background-color: var(--hlpf-accent);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--hlpf-accent-dark), 0 2px 5px rgba(164, 61, 51, 0.2);
    text-decoration: none;
}

.hlpf :where(.view-button, .hlpf-view-button):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

.hlpf :where(.load-more, .hlpf-load-more) {
    display: block;
    min-width: min(100%, 220px);
    min-height: 46px;
    margin: clamp(36px, 8vw, 64px) auto 0;
    padding: 10px 18px;
    border: 1px solid var(--hlpf-line-strong);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: var(--hlpf-control-shadow);
}

.hlpf :where(.load-more:hover, .load-more:focus-visible,
    .hlpf-load-more:hover, .hlpf-load-more:focus-visible) {
    border-color: var(--hlpf-accent);
    background-color: var(--hlpf-accent);
    color: #fffaf2;
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(164, 61, 51, 0.16);
    transform: translateY(-1px);
}

.hlpf :where(.load-more, .hlpf-load-more):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

.hlpf :where(.is-loading) {
    cursor: progress;
    pointer-events: none;
    animation: hlpf-loading-pulse 1100ms ease-in-out infinite;
}

.hlpf :where(.status, .hlpf-status, .hlpf-load-status, .hlpf-empty) {
    max-width: 42rem;
    margin: 20px auto 0;
    color: var(--hlpf-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
}

.hlpf :where(.hlpf-global-bg) {
    display: none;
}

.hlpf :where(.hlpf-pagination) {
    width: min(100%, var(--hlpf-content));
    min-width: 0;
    margin: clamp(36px, 8vw, 64px) auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--hlpf-line);
}

.hlpf :where(.hlpf-pagination) .hlpf-load-status {
    margin: 0;
}

.hlpf-legal-footer {
    width: min(100%, var(--hlpf-content));
    margin: 24px auto 0;
    padding: 0 8px 30px;
    color: var(--hlpf-muted);
    font-family: var(--hlpf-font-sans);
    font-size: 0.72rem;
    line-height: 1.65;
    text-align: center;
}

.hlpf :where(.hlpf-pagination-links) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.hlpf :where(.hlpf-page-link, .hlpf-page-previous, .hlpf-load-more) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid var(--hlpf-line-strong);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: var(--hlpf-control-shadow);
}

.hlpf :where(.hlpf-page-link:hover, .hlpf-page-link:focus-visible) {
    border-color: var(--hlpf-accent);
    color: var(--hlpf-accent-dark);
    background-color: var(--hlpf-paper-light);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

.hlpf :where(.hlpf-page-link, .hlpf-page-previous):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

.hlpf :where(.hlpf-load-more) {
    border-color: var(--hlpf-line-strong);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
}

.hlpf :where(.hlpf-load-more:hover, .hlpf-load-more:focus-visible) {
    border-color: var(--hlpf-accent);
    background-color: var(--hlpf-accent);
    color: #fffaf2;
}

/* Full-screen detail layer. It is a page surface, not a compact system dialog. */
.dialog,
dialog.dialog,
.hlpf-dialog,
dialog.hlpf-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: var(--hlpf-paper);
    color: var(--hlpf-ink);
    font-family: var(--hlpf-font-sans);
    font-size: 16px;
    line-height: 1.55;
}

.dialog[open],
.dialog.is-open,
.dialog.is-opening,
.dialog.is-closing,
.hlpf-dialog[open],
.hlpf-dialog.is-open,
.hlpf-dialog.is-opening,
.hlpf-dialog.is-closing {
    display: block;
}

/* The production dialog is a direct full-screen gallery. Keep any legacy
 * detail nodes inert if an older fixture is still present beside it. */
.hlpf-dialog:has(> .hlpf-dialog-single) {
    background-color: transparent;
}

.hlpf-dialog:has(> .hlpf-dialog-single) > :where(
    .hlpf-dialog-inner,
    .dialog-inner,
    .hlpf-dialog-header,
    .hlpf-dialog-compare,
    .hlpf-dialog-hint
) {
    display: none !important;
}

.dialog::backdrop,
.hlpf-dialog::backdrop {
    background-color: rgba(25, 22, 18, 0.46);
    animation: hlpf-dialog-backdrop-in var(--hlpf-motion-state) both;
}

.dialog.is-closing::backdrop,
.hlpf-dialog.is-closing::backdrop {
    animation: hlpf-dialog-backdrop-out var(--hlpf-motion-exit) both;
}

.dialog :where(a, button),
.hlpf-dialog :where(a, button) {
    color: inherit;
    font: inherit;
    touch-action: manipulation;
}

.dialog-inner,
.hlpf-dialog-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--hlpf-paper);
    transform-origin: center bottom;
    will-change: opacity, transform;
}

.dialog[open] .dialog-inner,
.dialog.is-open .dialog-inner,
.dialog.is-opening .dialog-inner,
.hlpf-dialog[open] .hlpf-dialog-inner,
.hlpf-dialog.is-open .hlpf-dialog-inner,
.hlpf-dialog.is-opening .hlpf-dialog-inner {
    animation: hlpf-dialog-inner-in var(--hlpf-motion-state) both;
}

.dialog.is-closing .dialog-inner,
.hlpf-dialog.is-closing .hlpf-dialog-inner {
    animation: hlpf-dialog-inner-out var(--hlpf-motion-exit) both;
    pointer-events: none;
}

:where(.dialog, .hlpf-dialog) :where(.header, .dialog-header, .hlpf-dialog-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
    width: min(100%, 1100px);
    min-width: 0;
    margin: 0 auto clamp(24px, 5vw, 40px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hlpf-line-strong);
}

:where(.dialog, .hlpf-dialog) :where(.kicker, .dialog-kicker, .hlpf-dialog-kicker) {
    flex: 1 1 100%;
    order: 0;
    margin: 0;
    color: var(--hlpf-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

:where(.dialog, .hlpf-dialog) :where(.title, .dialog-title, .hlpf-dialog-title) {
    flex: 1 1 auto;
    order: 1;
    min-width: 0;
    margin: 0;
    color: var(--hlpf-ink);
    font-family: var(--hlpf-font-serif);
    font-size: clamp(1.625rem, 7vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

:where(.dialog, .hlpf-dialog) :where(.close, .dialog-close, .hlpf-dialog-close),
:where(.dialog, .hlpf-dialog) :where(.back, .dialog-back, .hlpf-dialog-back),
:where(.dialog, .hlpf-dialog) :where(.return, .dialog-return, .hlpf-dialog-return) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--hlpf-line-strong);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: var(--hlpf-control-shadow);
}

:where(.dialog, .hlpf-dialog) :where(.close, .dialog-close, .hlpf-dialog-close) {
    flex: 0 0 auto;
    order: 2;
}

:where(.dialog, .hlpf-dialog) :where(.close, .dialog-close, .hlpf-dialog-close):hover,
:where(.dialog, .hlpf-dialog) :where(.back, .dialog-back, .hlpf-dialog-back):hover,
:where(.dialog, .hlpf-dialog) :where(.return, .dialog-return, .hlpf-dialog-return):hover {
    border-color: var(--hlpf-accent);
    color: var(--hlpf-accent-dark);
    background-color: var(--hlpf-paper-light);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

:where(.dialog, .hlpf-dialog) :where(.close, .dialog-close, .hlpf-dialog-close,
    .back, .dialog-back, .hlpf-dialog-back, .return, .dialog-return, .hlpf-dialog-return):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

:where(.dialog, .hlpf-dialog) :where(.compare, .dialog-compare, .hlpf-dialog-compare) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(8px, 2.5vw, 24px);
    width: min(100%, 1100px);
    min-width: 0;
    margin: 0 auto;
}

:where(.dialog, .hlpf-dialog) :where(.panel, .dialog-panel, .hlpf-dialog-panel) {
    display: block;
    min-width: 0;
    margin: 0;
    padding-bottom: 28px;
}

:where(.dialog, .hlpf-dialog) button:where(.panel, .dialog-panel, .hlpf-dialog-panel) {
    width: 100%;
    min-height: 46px;
    padding: 8px 8px 36px;
    border: 1px solid var(--hlpf-line);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    box-shadow: var(--hlpf-control-shadow);
    color: var(--hlpf-ink);
    text-align: left;
    cursor: zoom-in;
    appearance: none;
    -webkit-appearance: none;
    overflow: visible;
}

:where(.dialog, .hlpf-dialog) button:where(.panel, .dialog-panel, .hlpf-dialog-panel):hover {
    border-color: var(--hlpf-accent);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

:where(.dialog, .hlpf-dialog) button:where(.panel, .dialog-panel, .hlpf-dialog-panel):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

/* Each panel follows its own source ratio; columns stay aligned at the top. */
:where(.dialog, .hlpf-dialog) :where(.panel-frame, .dialog-panel-frame, .hlpf-dialog-panel-frame) {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-color: var(--hlpf-paper-deep);
}

:where(.dialog, .hlpf-dialog) :where(.panel-frame, .dialog-panel-frame, .hlpf-dialog-panel-frame)
    :where(.image, .dialog-image, .hlpf-dialog-image),
:where(.dialog, .hlpf-dialog) :where(.panel-frame, .dialog-panel-frame, .hlpf-dialog-panel-frame) > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 0;
}

:where(.dialog, .hlpf-dialog) :where(.label, .dialog-label, .hlpf-dialog-label) {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 4px 6px;
    border: 1px solid var(--hlpf-line);
    border-radius: 6px;
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.hlpf :where(.dialog, .hlpf-dialog) :where(.hint, .dialog-hint, .hlpf-dialog-hint),
:where(.dialog, .hlpf-dialog) :where(.hint, .dialog-hint, .hlpf-dialog-hint) {
    width: min(100%, 1100px);
    min-width: 0;
    margin: 28px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--hlpf-line);
    color: var(--hlpf-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single) {
    display: none;
    width: min(100%, 1100px);
    min-width: 0;
    margin: 0 auto;
}

/* View changes keep the surface stable while the active image state settles. */
:where(.dialog, .hlpf-dialog).is-view-changing :where(.compare, .dialog-compare, .hlpf-dialog-compare),
:where(.dialog, .hlpf-dialog).is-view-changing :where(.single, .dialog-single, .hlpf-dialog-single),
:where(.dialog, .hlpf-dialog) :where(.compare, .dialog-compare, .hlpf-dialog-compare).is-view-changing,
:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single).is-view-changing {
    animation: hlpf-view-change var(--hlpf-motion-state) both;
    transform-origin: center top;
    will-change: opacity, transform;
}

:where(.dialog, .hlpf-dialog) :where(.compare, .dialog-compare, .hlpf-dialog-compare).is-visible,
:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single).is-visible {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
}

:where(.dialog.is-single, .hlpf-dialog.is-single) :where(.compare, .dialog-compare, .hlpf-dialog-compare),
:where(.dialog[data-mode="single"], .hlpf-dialog[data-mode="single"]) :where(.compare, .dialog-compare, .hlpf-dialog-compare),
:where(.dialog[data-hlpf-mode="single"], .hlpf-dialog[data-hlpf-mode="single"]) :where(.compare, .dialog-compare, .hlpf-dialog-compare),
:where(.dialog[data-hlpf-mode="combined"], .hlpf-dialog[data-hlpf-mode="combined"]) :where(.compare, .dialog-compare, .hlpf-dialog-compare),
:where(.dialog[data-hlpf-zoom], .hlpf-dialog[data-hlpf-zoom]) :where(.compare, .dialog-compare, .hlpf-dialog-compare) {
    display: none;
}

:where(.dialog.is-single, .hlpf-dialog.is-single) :where(.single, .dialog-single, .hlpf-dialog-single),
:where(.dialog[data-mode="single"], .hlpf-dialog[data-mode="single"]) :where(.single, .dialog-single, .hlpf-dialog-single),
:where(.dialog[data-hlpf-mode="single"], .hlpf-dialog[data-hlpf-mode="single"]) :where(.single, .dialog-single, .hlpf-dialog-single),
:where(.dialog[data-hlpf-mode="combined"], .hlpf-dialog[data-hlpf-mode="combined"]) :where(.single, .dialog-single, .hlpf-dialog-single),
:where(.dialog[data-hlpf-zoom], .hlpf-dialog[data-hlpf-zoom]) :where(.single, .dialog-single, .hlpf-dialog-single),
:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single).is-active {
    display: block;
}

:where(.dialog.is-single, .hlpf-dialog.is-single) :where(.hint, .dialog-hint, .hlpf-dialog-hint),
:where(.dialog[data-mode="single"], .hlpf-dialog[data-mode="single"]) :where(.hint, .dialog-hint, .hlpf-dialog-hint),
:where(.dialog[data-hlpf-mode="single"], .hlpf-dialog[data-hlpf-mode="single"]) :where(.hint, .dialog-hint, .hlpf-dialog-hint),
:where(.dialog[data-hlpf-mode="combined"], .hlpf-dialog[data-hlpf-mode="combined"]) :where(.hint, .dialog-hint, .hlpf-dialog-hint),
:where(.dialog[data-hlpf-zoom], .hlpf-dialog[data-hlpf-zoom]) :where(.hint, .dialog-hint, .hlpf-dialog-hint) {
    display: none;
}

:where(.dialog, .hlpf-dialog) :where(.single-image, .dialog-single-image, .hlpf-dialog-single-image) {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    cursor: zoom-out;
    user-select: none;
    -webkit-user-drag: none;
}

:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single)
    :where(.panel-frame, .dialog-panel-frame, .hlpf-dialog-panel-frame) {
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background-color: transparent;
}

:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single)
    :where(.single-image, .dialog-single-image, .hlpf-dialog-single-image) {
    width: 100%;
    height: auto;
    max-height: none;
}

:where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single)
    img:where(.single-image, .dialog-single-image, .hlpf-dialog-single-image) {
    width: 100%;
    height: auto;
    max-height: none;
}

:where(.dialog, .hlpf-dialog) :where(.back, .dialog-back, .hlpf-dialog-back) {
    margin: 0 0 16px;
}

:where(.dialog, .hlpf-dialog) :where(.return, .dialog-return, .hlpf-dialog-return) {
    margin: 20px 0 0;
}

.hlpf-dialog-single :where(.hlpf-dialog-return, .gallery-return) {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin-top: 16px;
}

:where(.dialog, .hlpf-dialog) [hidden] {
    display: none !important;
}

/*
 * Detail gallery lightbox.
 * The gallery is deliberately scoped to the single-view container so the
 * existing compare view can keep its intrinsic image ratios and layout.
 */
.hlpf-dialog-single {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--hlpf-ink);
    isolation: isolate;
    overscroll-behavior: contain;
}

.hlpf-dialog-single::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    content: "";
    background-color: rgba(25, 22, 18, 0.74);
    animation: hlpf-gallery-scrim-in var(--hlpf-motion-state) both;
    pointer-events: none;
}

.hlpf-dialog-single.is-gallery-closing::before,
.hlpf-dialog-single.is-closing::before {
    animation: hlpf-gallery-scrim-out var(--hlpf-motion-exit) both;
}

.hlpf-dialog-single.is-gallery-open,
.hlpf-dialog-single.is-gallery-opening,
.hlpf-dialog-single.is-gallery-closing,
.hlpf-dialog-single.is-open,
.hlpf-dialog-single.is-opening,
.hlpf-dialog[open] .hlpf-dialog-single,
.hlpf-dialog.is-open .hlpf-dialog-single,
.hlpf-dialog.is-opening .hlpf-dialog-single,
.hlpf-dialog.is-closing .hlpf-dialog-single,
.hlpf-dialog.is-gallery-open .hlpf-dialog-single,
.hlpf-dialog.is-single .hlpf-dialog-single,
.hlpf-dialog[data-hlpf-zoom] .hlpf-dialog-single {
    display: flex !important;
}

.hlpf-dialog-single :where(.hlpf-gallery-scrim, .gallery-scrim) {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
    cursor: zoom-out;
}

.hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell) {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    width: min(100%, 720px);
    max-width: 720px;
    max-height: calc(100vh - 24px);
    max-height: calc(100svh - 24px);
    min-width: 0;
    min-height: 0;
    margin: auto;
    padding: clamp(14px, 3.5vw, 24px);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(143, 135, 123, 0.64);
    border-radius: 16px;
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
    box-shadow: 0 24px 64px rgba(25, 22, 18, 0.32), 0 4px 16px rgba(25, 22, 18, 0.2);
    scrollbar-gutter: stable;
    transform-origin: center center;
    will-change: opacity, transform;
}

/* The shell may receive programmatic focus for dialog focus management; it is not a control. */
.hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell):focus,
.hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell):focus-visible {
    outline: none;
}

.hlpf-dialog-single.is-gallery-open :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog-single.is-gallery-opening :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog[open] .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog.is-open .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog.is-opening .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog.is-closing .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog.is-single .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog[data-hlpf-zoom] .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog.is-gallery-open .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell) {
    animation: hlpf-gallery-shell-in var(--hlpf-motion-state) both;
}

.hlpf-dialog-single.is-gallery-closing :where(.hlpf-gallery-shell, .gallery-shell),
.hlpf-dialog-single.is-closing :where(.hlpf-gallery-shell, .gallery-shell) {
    animation: hlpf-gallery-shell-out var(--hlpf-motion-exit) both;
    pointer-events: none;
}

.hlpf-dialog.is-closing .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell) {
    animation: hlpf-gallery-shell-out var(--hlpf-motion-exit) both !important;
    pointer-events: none;
}

.hlpf-dialog-single :where(.hlpf-gallery-header, .gallery-header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--hlpf-line);
}

.hlpf-dialog-single :where(.hlpf-gallery-header, .gallery-header)
    :where(.hlpf-gallery-kicker, .gallery-kicker, .hlpf-gallery-eyebrow, .gallery-eyebrow) {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--hlpf-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-transform: uppercase;
}

.hlpf-dialog-single :where(.hlpf-gallery-title, .gallery-title) {
    min-width: 0;
    margin: 0;
    color: var(--hlpf-ink);
    font-family: var(--hlpf-font-serif);
    font-size: clamp(1.125rem, 4.8vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.hlpf-dialog-single :where(.hlpf-gallery-status, .gallery-status) {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 22px;
    margin: 0 0 12px;
    color: var(--hlpf-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.hlpf-dialog-single :where(.hlpf-gallery-live, .gallery-live) {
    min-width: 0;
    margin: 8px 0 0;
    color: var(--hlpf-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.hlpf-dialog-single.is-gallery-error :where(.hlpf-gallery-status, .gallery-status) {
    color: var(--hlpf-accent-dark);
}

.hlpf-dialog :where(.hlpf-gallery-close, .gallery-close, .hlpf-dialog-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--hlpf-line-strong);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: var(--hlpf-control-shadow);
}

.hlpf-dialog-single :where(.hlpf-gallery-header, .gallery-header)
    :where(.hlpf-gallery-close, .gallery-close, .hlpf-dialog-close) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
}

.hlpf-dialog :where(.hlpf-gallery-close, .gallery-close, .hlpf-dialog-close):hover,
.hlpf-dialog :where(.hlpf-gallery-close, .gallery-close, .hlpf-dialog-close):focus-visible {
    border-color: var(--hlpf-accent);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-accent-dark);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

.hlpf-dialog :where(.hlpf-gallery-close, .gallery-close, .hlpf-dialog-close):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage) {
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    flex: 0 0 auto;
    width: 100%;
    height: min(62vh, 640px);
    height: min(62svh, 640px);
    min-width: 0;
    min-height: clamp(180px, 36vh, 320px);
    min-height: clamp(180px, 36svh, 320px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(143, 135, 123, 0.58);
    border-radius: 12px;
    background-color: #302d29;
    isolation: isolate;
}

.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]) {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 320ms cubic-bezier(0.22, 0.8, 0.24, 1),
        transform 320ms cubic-bezier(0.22, 0.8, 0.24, 1);
    user-select: none;
    -webkit-user-drag: none;
    will-change: opacity, transform;
}

.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]).is-active,
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]).is-current,
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[data-active="true"],
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[data-hlpf-active="true"],
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[aria-hidden="false"] {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
}

.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]).is-inactive,
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[data-active="false"],
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[data-hlpf-active="false"],
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[aria-hidden="true"] {
    z-index: 1;
    opacity: 0;
    transform: scale(0.985);
}

.hlpf-dialog-single.is-gallery-switching :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-gallery-switching
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]) {
    will-change: opacity, transform;
}

.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-static
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]),
.hlpf-dialog-single.is-static :where(.hlpf-gallery-stage, .gallery-stage)
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage)[data-mode="combined"]
    :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]) {
    opacity: 1;
    transform: none;
    transition: none;
}

.hlpf-dialog-single :where(.hlpf-gallery-progress, .gallery-progress) {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 4;
    display: block;
    width: auto;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background-color: rgba(255, 250, 242, 0.36);
    pointer-events: none;
}

.hlpf-dialog-single :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background-color: var(--hlpf-accent);
    animation: hlpf-gallery-progress 2s linear both paused;
}

.hlpf-dialog-single.is-gallery-running :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-gallery-running
    :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
    animation-play-state: running;
}

.hlpf-dialog-single.is-running :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-running
    :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-progress, .gallery-progress).is-running
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
    animation-play-state: running;
}

.hlpf-dialog-single.is-gallery-paused :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-gallery-paused
    :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
    animation-play-state: paused;
}

.hlpf-dialog-single.is-paused :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-paused
    :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-progress, .gallery-progress).is-paused
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
    animation-play-state: paused;
}

/* Reset the two-second clock when JS marks a new image transition. */
.hlpf-dialog-single.is-gallery-switching :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
.hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage).is-gallery-switching
    :where(.hlpf-gallery-progress, .gallery-progress)
    :where(.hlpf-gallery-progress-bar, .gallery-progress-bar, .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
    animation: none;
    transform: scaleX(0);
}

.hlpf-dialog-single.is-gallery-error :where(.hlpf-gallery-stage, .gallery-stage) {
    border-color: var(--hlpf-accent);
}

.hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 12px 0 0;
}

.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views) {
    display: grid;
    flex: 1 1 220px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: min(100%, 220px);
}

.hlpf-dialog-single :where(.hlpf-gallery-toggle, .gallery-toggle) {
    flex: 0 1 auto;
    min-width: 120px;
}

.hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) button,
.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views) button,
.hlpf-dialog-single :where(.hlpf-gallery-toggle, .gallery-toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--hlpf-line);
    border-radius: var(--hlpf-radius);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--hlpf-control-shadow);
}

.hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) button:hover,
.hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) button:focus-visible,
.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views) button:hover,
.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views) button:focus-visible,
.hlpf-dialog-single :where(.hlpf-gallery-toggle, .gallery-toggle):hover,
.hlpf-dialog-single :where(.hlpf-gallery-toggle, .gallery-toggle):focus-visible {
    border-color: var(--hlpf-accent);
    background-color: var(--hlpf-paper-light);
    color: var(--hlpf-accent-dark);
    box-shadow: 0 3px 0 rgba(33, 31, 27, 0.05), 0 6px 14px rgba(33, 31, 27, 0.1);
    transform: translateY(-1px);
}

.hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) button:active,
.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views) button:active,
.hlpf-dialog-single :where(.hlpf-gallery-toggle, .gallery-toggle):active {
    transform: scale(0.95);
    box-shadow: var(--hlpf-control-shadow-pressed);
}

.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views)
    :where(button.is-active, button.is-selected, button[aria-pressed="true"], button[aria-current="true"]) {
    border-color: var(--hlpf-accent);
    background-color: var(--hlpf-accent);
    color: #fffaf2;
    box-shadow: inset 0 0 0 1px var(--hlpf-accent-dark), 0 2px 5px rgba(164, 61, 51, 0.2);
}

.hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views)
    :where(button[data-hlpf-gallery-view="before"].is-active, button[data-hlpf-gallery-view="after"].is-active,
        button[data-hlpf-view="before"].is-active, button[data-hlpf-view="after"].is-active) {
    color: #fffaf2;
}

.hlpf-dialog-single.is-static :where(.hlpf-gallery-views, .gallery-views,
    .hlpf-gallery-toggle, .gallery-toggle, .hlpf-gallery-progress, .gallery-progress),
.hlpf-dialog-single[data-mode="combined"] :where(.hlpf-gallery-views, .gallery-views,
    .hlpf-gallery-toggle, .gallery-toggle, .hlpf-gallery-progress, .gallery-progress),
.hlpf-dialog-single[data-hlpf-mode="combined"] :where(.hlpf-gallery-views, .gallery-views,
    .hlpf-gallery-toggle, .gallery-toggle, .hlpf-gallery-progress, .gallery-progress),
.hlpf-dialog[data-mode="combined"] .hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views,
    .hlpf-gallery-toggle, .gallery-toggle, .hlpf-gallery-progress, .gallery-progress),
.hlpf-dialog[data-hlpf-mode="combined"] .hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views,
    .hlpf-gallery-toggle, .gallery-toggle, .hlpf-gallery-progress, .gallery-progress),
.hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls).is-static {
    display: none !important;
}

.hlpf-dialog-single.is-static :where(.hlpf-gallery-stage, .gallery-stage),
.hlpf-dialog-single[data-mode="combined"] :where(.hlpf-gallery-stage, .gallery-stage),
.hlpf-dialog-single[data-hlpf-mode="combined"] :where(.hlpf-gallery-stage, .gallery-stage) {
    background-color: #302d29;
}

html:has(.dialog[open]),
body:has(.dialog[open]),
html:has(.dialog.is-open),
body:has(.dialog.is-open),
html:has(.hlpf-dialog[open]),
body:has(.hlpf-dialog[open]),
html:has(.hlpf-dialog.is-open),
body:has(.hlpf-dialog.is-open),
html.hlpf-dialog-open,
body.hlpf-dialog-open,
html.dialog-open,
body.dialog-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .hlpf {
        padding-right: max(32px, env(safe-area-inset-right));
        padding-left: max(32px, env(safe-area-inset-left));
    }

    .hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hlpf :where(.grid, .hlpf-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 28px;
        align-items: start;
    }

    .dialog-inner,
    .hlpf-dialog-inner {
        padding-right: max(32px, env(safe-area-inset-right));
        padding-left: max(32px, env(safe-area-inset-left));
    }
}

@media (min-width: 360px) and (max-width: 767px) {
    .hlpf {
        padding-top: max(24px, env(safe-area-inset-top));
    }

    .hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) {
        padding-bottom: 24px;
    }

    .hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) :where(.brand, .hlpf-brand) {
        margin-bottom: 16px;
    }

    .hlpf :where(.hero, .hlpf-hero, .hlpf-branddock) :where(.count, .hlpf-count) {
        margin-top: 12px;
    }

    .hlpf :where(.part-browser, .hlpf-part-browser, .hlpf-filterdock) {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .hlpf :where(.grid, .hlpf-grid) {
        padding-top: 20px;
    }

    .hlpf :where(.card, .hlpf-card) {
        padding-top: 12px;
    }
}

@media (min-width: 1280px) {
    .hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .hlpf :where(.grid, .hlpf-grid) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 28px;
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hlpf :where(.hero, .hlpf-hero, .hlpf-branddock),
    .hlpf :where(.part-grid, .hlpf-filter, .hlpf-part-grid) > *,
    .hlpf :where(.grid, .hlpf-grid) > :where(.card, .hlpf-card, .hlpf-empty),
    .dialog[open] .dialog-inner,
    .dialog.is-open .dialog-inner,
    .dialog.is-opening .dialog-inner,
    .dialog.is-closing .dialog-inner,
    .hlpf-dialog[open] .hlpf-dialog-inner,
    .hlpf-dialog.is-open .hlpf-dialog-inner,
    .hlpf-dialog.is-opening .hlpf-dialog-inner,
    .hlpf-dialog.is-closing .hlpf-dialog-inner,
    .dialog::backdrop,
    .hlpf-dialog::backdrop,
    .hlpf :where(.card-image, .hlpf-card-image).is-switching,
    .hlpf :where(.dialog-image, .hlpf-dialog-image, .single-image, .hlpf-dialog-single-image).is-switching,
    :where(.dialog, .hlpf-dialog) :where(.compare, .dialog-compare, .hlpf-dialog-compare).is-view-changing,
    :where(.dialog, .hlpf-dialog) :where(.single, .dialog-single, .hlpf-dialog-single).is-view-changing,
    .hlpf :where(.is-loading) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }

    .hlpf :where(a, button),
    .dialog :where(a, button),
    .hlpf-dialog :where(a, button),
    .hlpf :where(.lazy, .hlpf-lazy),
    .hlpf :where(.card-media, .hlpf-card-media, .hlpf-compare),
    :where(.dialog, .hlpf-dialog) :where(.panel, .dialog-panel, .hlpf-dialog-panel) {
        transition: none !important;
    }

    .hlpf :where(.lazy, .hlpf-lazy) {
        opacity: 1;
    }
}

@media (max-width: 359px) {
    .hlpf-dialog-single {
        padding: max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell) {
        max-height: calc(100vh - 16px);
        max-height: calc(100svh - 16px);
        padding: 12px;
        border-radius: 14px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage) {
        height: min(42vh, 270px);
        height: min(42svh, 270px);
        min-height: 180px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-views, .gallery-views) {
        flex-basis: 100%;
        min-width: 0;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-toggle, .gallery-toggle) {
        width: 100%;
        min-width: 0;
    }
}

@media (min-width: 360px) and (max-width: 767px) and (max-height: 700px) {
    .hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage) {
        height: min(42vh, 300px);
        height: min(42svh, 300px);
        min-height: 180px;
    }
}

@media (min-width: 768px) {
    .hlpf-dialog-single {
        padding: max(16px, env(safe-area-inset-top))
            max(24px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(24px, env(safe-area-inset-left));
    }

    .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell) {
        padding: 24px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) {
        gap: 10px;
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .hlpf-dialog-single {
        padding: max(8px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell) {
        max-height: calc(100vh - 16px);
        max-height: calc(100svh - 16px);
        padding: 12px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-header, .gallery-header) {
        gap: 6px 10px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-status, .gallery-status) {
        min-height: 18px;
        margin-bottom: 8px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-live, .gallery-live) {
        margin-top: 4px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-stage, .gallery-stage) {
        height: min(42vh, 480px);
        height: min(42svh, 480px);
        min-height: 160px;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-controls, .gallery-controls) {
        margin-top: 8px;
    }

    .hlpf-dialog-single :where(.hlpf-dialog-return, .gallery-return) {
        margin-top: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hlpf-dialog-single::before,
    .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]),
    .hlpf-dialog-single :where(.hlpf-gallery-progress-bar, .gallery-progress-bar,
        .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]),
    html.hlpf-reduced-motion .hlpf-dialog-single::before,
    html.hlpf-reduced-motion .hlpf-dialog-single :where(.hlpf-gallery-shell, .gallery-shell),
    html.hlpf-reduced-motion .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]),
    html.hlpf-reduced-motion .hlpf-dialog-single :where(.hlpf-gallery-progress-bar, .gallery-progress-bar,
        .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
        animation: none !important;
        transition: none !important;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]) {
        transform: none !important;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]).is-active,
    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]).is-current,
    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[data-active="true"],
    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[data-hlpf-active="true"],
    .hlpf-dialog-single :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image])[aria-hidden="false"],
    .hlpf-dialog-single.is-static :where(.hlpf-gallery-image, .gallery-image, [data-hlpf-gallery-image]) {
        opacity: 1 !important;
    }

    .hlpf-dialog-single :where(.hlpf-gallery-progress-bar, .gallery-progress-bar,
        .hlpf-gallery-progress-fill, .gallery-progress-fill, [data-hlpf-gallery-progress-bar]) {
        transform: scaleX(1) !important;
    }
}