/*  dbcb/before-after-slider — frontend styles (loaded on all pages where the
    block is present). Uses the same brand palette as the rest of the site. */

.dbcb-bna-slider {
    --bna-primary:   #9e4a2a;
    --bna-secondary: #fae8e5;
    --bna-text:      #2d2419;
    --bna-line:      rgba(158, 74, 42, 0.18);
    --bna-shadow:    0 8px 32px rgba(45, 36, 25, 0.12);
    --bna-radius:    12px;
    /* Default = 800px max (matches treatment-page prose constraint).
       Blog post wrappers (.single-post .entry-content) widen automatically.
       Escape hatch: add .is-wide for full container width.
       2026-06-16 Tatyana — фон/border-radius/shadow убраны: перегружали
       визуально. Padding оставлен для breathing room вокруг slider'a. */
    /* max-width: 800px; removed — width is constrained by .max-w-shell / the
       gutter column; 800 cap caused a right-side staircase. Tanya 2026-06-24. */
    margin-inline: auto;
    padding: 0; /* was 32px 0 — vertical pad broke the block rhythm (others rely on my-12 only); keep 0 H so content aligns at column edge. Tanya 2026-06-24 */
    color: var(--bna-text);
}

.dbcb-bna-header { margin-bottom: 20px; }
.dbcb-bna-title {
    /* Canonical "BIG" section H2 — matches comparison-table / faq / brand-cards
       / hub-cta outer h2 (font-display Cormorant Garamond text-h1 = 32px mobile,
       text-h1-lg = 40px lg). Tatyana 2026-06-15. */
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--bna-text);
    font-weight: 500;
    text-wrap: balance;
}
@media (min-width: 1024px) {
    .dbcb-bna-title { font-size: 40px; }
}
.dbcb-bna-subtitle {
    color: var(--bna-text);
    opacity: 0.7;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.dbcb-bna-stage { position: relative; }

.dbcb-bna-slide { display: block; }
.dbcb-bna-slide[hidden] { display: none; }

/* Compare mode */
.dbcb-bna-compare {
    position: relative;
    width: 100%;
    max-width: 600px;          /* contained — never wider/taller than 600 (Tanya 2026-06-24) */
    max-height: 600px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;       /* default square; data-aspect overrides */
    overflow: hidden;
    border-radius: var(--bna-radius);
    background: #000;
    user-select: none;
}
.dbcb-bna-slider[data-aspect="1:1"]  .dbcb-bna-compare,
.dbcb-bna-slider[data-aspect="1:1"]  .dbcb-bna-pair-frame { aspect-ratio: 1 / 1; }
.dbcb-bna-slider[data-aspect="3:2"]  .dbcb-bna-compare,
.dbcb-bna-slider[data-aspect="3:2"]  .dbcb-bna-pair-frame { aspect-ratio: 3 / 2; }
.dbcb-bna-slider[data-aspect="16:9"] .dbcb-bna-compare,
.dbcb-bna-slider[data-aspect="16:9"] .dbcb-bna-pair-frame { aspect-ratio: 16 / 9; }
.dbcb-bna-slider[data-aspect="4:3"]  .dbcb-bna-compare,
.dbcb-bna-slider[data-aspect="4:3"]  .dbcb-bna-pair-frame { aspect-ratio: 4 / 3; }
.dbcb-bna-slider[data-aspect="4:5"]  .dbcb-bna-compare,
.dbcb-bna-slider[data-aspect="4:5"]  .dbcb-bna-pair-frame { aspect-ratio: 4 / 5; }
/* Auto — fit the uploaded photo's own aspect (the After image drives the height),
   never taller than 600px. Tanya 2026-06-24. */
.dbcb-bna-slider[data-aspect="auto"] .dbcb-bna-compare { aspect-ratio: auto; }
.dbcb-bna-slider[data-aspect="auto"] .dbcb-bna-after {
    position: relative; inset: auto; display: block;
    width: 100%; height: auto; max-height: 600px; object-fit: cover;
}
.dbcb-bna-compare img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.dbcb-bna-after  { z-index: 1; }
.dbcb-bna-clip {
    position: absolute; inset: 0; z-index: 2;
    clip-path: inset(0 50% 0 0);
}
.dbcb-bna-before { position: relative; }

.dbcb-bna-handle {
    position: absolute; inset: 0; z-index: 5;
    width: 100%; height: 100%;
    opacity: 0; cursor: ew-resize;
    margin: 0; padding: 0;
}
.dbcb-bna-handle-bar {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 3px;
    background: var(--bna-primary);
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;

}
.dbcb-bna-handle-grip {
    position: absolute; top: 50%; left: 50%;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bna-primary);
    color: #fff;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(158, 74, 42, .4);
}
.dbcb-bna-handle-grip::before {
    content: "";
    width: 14px; height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 3 12 9 18'/><polyline points='15 6 21 12 15 18'/></svg>");
    background-size: contain;
}

.dbcb-bna-label-l,
.dbcb-bna-label-r {
    position: absolute; top: 12px; z-index: 4;
    background: rgba(45, 36, 25, .7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.dbcb-bna-label-l { left: 12px; }
.dbcb-bna-label-r { right: 12px; }

/* Side-by-side mode */
.dbcb-bna-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dbcb-bna-pair-frame {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--bna-radius);
    overflow: hidden;
    background: #fff;
}
.dbcb-bna-pair-frame > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.dbcb-bna-pair-frame .ph {
    width: 100%; height: 100%;
    background: #f0e1dd;
}
.dbcb-bna-label-corner {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: rgba(45, 36, 25, .7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.dbcb-bna-caption {
    margin: 16px 0 4px;
    font-weight: 400;
    color: var(--bna-text);
    opacity: 0.7;
    font-size: 16px;
    line-height: 1.55;
}


/* Composite-mode stage — let image keep its natural aspect, cap at 600px tall,
   center on screen. Composite photos are pre-merged with their own BEFORE/AFTER
   labels baked in, so hide the corner labels too. Tatyana 2026-06-19. */
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-slide {
    text-align: center;        /* center figure + caption + meta */
}
/* Composite stage: RESERVE the displayed box so the slide keeps its height
   before the lazy image loads — kills the layout-shift "jump" when swiping.
   Width capped per aspect so square images don't blow up to full width.
   Skeleton shimmer shows until the image paints. Tatyana 2026-06-20. */
.dbcb-bna-slider[data-mode="composite"][data-aspect] .dbcb-bna-composite--single {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 600px;
    aspect-ratio: 1 / 1;
    width: min(100%, 600px);
    border-radius: 12px;
    overflow: hidden;
    background: #f3e7e4;          /* static skeleton placeholder — no animation (no flicker) */
}
.dbcb-bna-slider[data-mode="composite"][data-aspect="3:2"]  .dbcb-bna-composite--single { aspect-ratio: 3 / 2;  width: min(100%, 900px); }
.dbcb-bna-slider[data-mode="composite"][data-aspect="4:5"]  .dbcb-bna-composite--single { aspect-ratio: 4 / 5;  width: min(100%, 480px); }
.dbcb-bna-slider[data-mode="composite"][data-aspect="16:9"] .dbcb-bna-composite--single { aspect-ratio: 16 / 9; width: min(100%, 1000px); }
.dbcb-bna-slider[data-mode="composite"][data-aspect="2:1"]  .dbcb-bna-composite--single { aspect-ratio: 2 / 1;  width: min(100%, 1000px); }
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-composite--single > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
} }
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-label-corner {
    display: none;
}
/* Composite-mode caption — centered, slightly smaller than the
   default. Tatyana 2026-06-19. */
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-caption {
    text-align: center;
    font-size: 14px;
}
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-meta {
    text-align: center;
}
.dbcb-bna-meta {
    color: var(--bna-text);
    opacity: 0.7;
    font-size: 14px;
    margin: 0;
}

.dbcb-bna-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.dbcb-bna-prev,
.dbcb-bna-next {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bna-line);
    background: #fff;
    color: var(--bna-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s, color 0.2s;
}
.dbcb-bna-prev:hover,
.dbcb-bna-next:hover {
    background: var(--bna-primary);
    color: #fff;
}
.dbcb-bna-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.dbcb-bna-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bna-line);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, width 0.2s, border-radius 0.2s;
}
.dbcb-bna-dot[aria-current="true"] {
    background: var(--bna-primary);
    width: 24px;
    border-radius: 4px;
}

.dbcb-bna-cta {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin: 16px auto 0;
    padding: 0;
    background: transparent;
    color: var(--bna-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
}
.dbcb-bna-cta:hover { background: transparent; color: #7a3920; }

/* Mobile */
@media (max-width: 768px) {
    .dbcb-bna-slider { padding: 20px 16px; }
    .dbcb-bna-handle-grip { width: 36px; height: 36px; }
    .dbcb-bna-pair { gap: 12px; }
}

/* Blog-post context = full container width.
   Escape hatch: add .is-wide modifier for page contexts where wider needed. */
.single-post .dbcb-bna-slider,
.single .dbcb-bna-slider.is-wide,
.dbcb-bna-slider.is-wide {
    max-width: none;
}

/* Gallery variant — 2-col grid of pairs, no slider chrome, all cases visible.
   Each card = before|after side-by-side with corner labels + caption below. */
.dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
}
.dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-slide {
    display: block !important;
}
.dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-controls,
.dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-handle,
.dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-handle-bar { display: none !important; }
@media (max-width: 768px) {
    .dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-stage {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Gallery composite — single merged before|after image with decorative corner labels.
   Default aspect 2:1 (suits side-by-side composites). Override via data-aspect. */
.dbcb-bna-composite {
    position: relative;
    margin: 0;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--bna-radius);
    background: #f3e3e0;
}
.dbcb-bna-slider[data-aspect="1:1"] .dbcb-bna-composite { aspect-ratio: 1 / 1; }
.dbcb-bna-slider[data-aspect="4:5"] .dbcb-bna-composite { aspect-ratio: 8 / 5; }
.dbcb-bna-slider[data-aspect="3:2"] .dbcb-bna-composite { aspect-ratio: 3 / 1; }
.dbcb-bna-slider[data-aspect="16:9"] .dbcb-bna-composite { aspect-ratio: 32 / 9; }
.dbcb-bna-composite > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.dbcb-bna-label-corner {
    position: absolute;
    top: 14px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    line-height: 1;
}
.dbcb-bna-label-corner--l {
    left: 14px;
    right: auto;
    background: #ffffff;
    color: var(--bna-text);
    z-index: 5;
}
.dbcb-bna-label-corner--r {
    right: 14px;
    left: auto;            /* override base .dbcb-bna-label-corner left: 12px to prevent stretch */
    background: var(--bna-primary);
    color: #fff;
    z-index: 5;
}

/* 2:1 aspect for gallery composites */
.dbcb-bna-slider[data-aspect="2:1"] .dbcb-bna-composite { aspect-ratio: 2 / 1; }
.dbcb-bna-slider[data-aspect="2:1"] .dbcb-bna-compare,
.dbcb-bna-slider[data-aspect="2:1"] .dbcb-bna-pair-frame { aspect-ratio: 2 / 1; }

/* Gallery pair mode — 2 photos glued together with no gap (looks like 1 merged image). */
.dbcb-bna-composite--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.dbcb-bna-composite--pair > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Thin separator between the two halves to visually mark the seam */
.dbcb-bna-composite--pair > img:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.6);
}

/* Composite-single mode (one pre-merged file). The shared rules above default
   the wrapper to 2:1 because pair-mode composites are made of two side-by-side
   images. Single composites are single files with their own intrinsic aspect
   (typically square or portrait), so override per data-aspect to match the
   value the author chose rather than the doubled pair value. */
.dbcb-bna-composite--single { aspect-ratio: auto; }
.dbcb-bna-slider[data-aspect="1:1"]  .dbcb-bna-composite--single { aspect-ratio: 1 / 1; }
.dbcb-bna-slider[data-aspect="4:5"]  .dbcb-bna-composite--single { aspect-ratio: 4 / 5; }
.dbcb-bna-slider[data-aspect="3:2"]  .dbcb-bna-composite--single { aspect-ratio: 3 / 2; }
.dbcb-bna-slider[data-aspect="16:9"] .dbcb-bna-composite--single { aspect-ratio: 16 / 9; }
.dbcb-bna-slider[data-aspect="2:1"]  .dbcb-bna-composite--single { aspect-ratio: 2 / 1; }

/* Composite-mode thumbnail = single image, not a pair. Square. */
/* Composite-mode thumb wrapper — single pre-merged photo. Double-class
   specificity beats .dbcb-bna-thumb-pair which appears later in file.
   Aspect ratio inherits from the slider data-aspect to avoid cropping. */
.dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single {
    display: block;
    grid-template-columns: none;
    aspect-ratio: 3 / 2; /* default — composites are usually 3:2 */
}
.dbcb-bna-slider[data-aspect="1:1"]  .dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single { aspect-ratio: 1 / 1; }
.dbcb-bna-slider[data-aspect="4:5"]  .dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single { aspect-ratio: 4 / 5; }
.dbcb-bna-slider[data-aspect="3:2"]  .dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single { aspect-ratio: 3 / 2; }
.dbcb-bna-slider[data-aspect="16:9"] .dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single { aspect-ratio: 16 / 9; }
.dbcb-bna-slider[data-aspect="2:1"]  .dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single { aspect-ratio: 2 / 1; }
.dbcb-bna-thumb-pair.dbcb-bna-thumb-pair--single > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Frame wrapper — main stage + thumbnail strip side-by-side (compare mode only). */
.dbcb-bna-frame {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.dbcb-bna-slider[data-mode="compare"] .dbcb-bna-frame {
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: start;
}
/* Composite mode: stage on top, thumb-strip as horizontal slider below. */
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 4px;
}
.dbcb-bna-slider[data-mode="composite"] .dbcb-bna-thumb {
    flex: 0 0 140px;
    text-align: left;
}
.dbcb-bna-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 100%;
    overflow-y: auto;
}
.dbcb-bna-thumb {
    appearance: none;
    border: 2px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    text-align: left;
}
.dbcb-bna-thumb:hover { transform: translateY(-1px); border-color: var(--bna-line); }
.dbcb-bna-thumb[aria-current="true"] { border-color: var(--bna-primary); }
.dbcb-bna-thumb-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    aspect-ratio: 2 / 1;
    background: #f3e3e0;
}
.dbcb-bna-thumb-pair > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* On narrow screens, drop thumbs below as horizontal strip */
@media (max-width: 720px) {
    /* Mobile compare-mode: hide thumb strip, fall back to arrow + dot controls. */
    .dbcb-bna-slider[data-mode="compare"] .dbcb-bna-frame,
    .dbcb-bna-slider[data-mode="composite"] .dbcb-bna-frame {
        grid-template-columns: 1fr;
    }
    .dbcb-bna-thumbs { display: none; }
}

@media (min-width: 721px) {
    /* Desktop compare-mode WITH thumb strip → hide redundant bottom dots/arrows. */
    .dbcb-bna-slider[data-mode="compare"] .dbcb-bna-frame + .dbcb-bna-controls {
        display: none;
    }
}

/* Gallery click-to-zoom — composite images open in fullscreen lightbox */
.dbcb-bna-composite { cursor: zoom-in; }
.dbcb-bna-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.dbcb-bna-lightbox.is-open { opacity: 1; pointer-events: auto; }
.dbcb-bna-lightbox__inner {
    position: relative;
    max-width: 95vw; max-height: 95vh;
    display: flex; align-items: center; justify-content: center;
}
.dbcb-bna-lightbox__inner img,
.dbcb-bna-lightbox__inner .dbcb-bna-composite--pair {
    max-width: 95vw; max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}
.dbcb-bna-lightbox__inner .dbcb-bna-composite--pair img {
    max-width: 47vw; max-height: 90vh;
}
.dbcb-bna-lightbox__caption {
    position: absolute; bottom: -40px; left: 0; right: 0;
    color: #fff; text-align: center;
    font-size: 14px;
}
.dbcb-bna-lightbox__close {
    position: absolute; top: -40px; right: 0;
    background: transparent; border: 0; color: #fff;
    font-size: 28px; cursor: pointer;
    line-height: 1;
}

.dbcb-bna-thumb-cap { display: none; }

/* Tiny screens (≤480px) — break out of parent padding so the pink frame
   reaches edge-to-edge. Removes rounded corners & side padding to give
   the photo more screen width. */
@media (max-width: 480px) {
    .dbcb-bna-slider {
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
        padding: 20px 16px;
    }
    .dbcb-bna-slider .dbcb-bna-title {
        font-size: 26px;
    }
}

/* Lightbox nav arrows (prev/next) + full-size figure. Tatyana 2026-06-20. */
.dbcb-bna-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12); border: 0; color: #fff;
    width: 52px; height: 52px; border-radius: 50%;
    font-size: 34px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease; z-index: 1;
}
.dbcb-bna-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.dbcb-bna-lightbox__prev { left: 16px; }
.dbcb-bna-lightbox__next { right: 16px; }
.dbcb-bna-lightbox__inner .dbcb-bna-composite--single,
.dbcb-bna-lightbox__inner .dbcb-bna-composite {
    aspect-ratio: auto !important; width: auto !important;
    max-width: 95vw; max-height: 90vh;
    background: transparent !important; animation: none !important;
    overflow: visible; border-radius: 8px; display: block;
}
@media (max-width: 600px) {
    .dbcb-bna-lightbox__nav { width: 42px; height: 42px; font-size: 28px; }
    .dbcb-bna-lightbox__prev { left: 6px; } .dbcb-bna-lightbox__next { right: 6px; }
}

/* Compare handle: native range input is keyboard-only; mouse/touch drag is handled
   directly on the slide (JS) so the divider follows the cursor smoothly. Tanya 2026-06-24. */
.dbcb-bna-slide .dbcb-bna-handle { pointer-events: none; }
.dbcb-bna-slide { touch-action: pan-y; cursor: ew-resize; }

/* Edge padding on small screens — the slider otherwise touches the screen edge
   (other blocks keep ~20px). Desktop stays 0 (aligns at the gutter column edge).
   Higher specificity beats the base `padding:0`. Tanya 2026-06-24. */
@media (max-width: 991.98px) {
  section.dbcb-bna-slider { padding-left: 1.25rem; padding-right: 1.25rem; }
}


/* side-by-side: 2 columns at ALL sizes (above) + tap any photo → fullscreen lightbox
   with prev/next through every photo in the slider. Tanya 2026-06-24. */
.dbcb-bna-pair-frame { cursor: pointer; }
.dbcb-bna-lightbox__inner .dbcb-bna-pair-frame {
    aspect-ratio: auto !important; width: auto !important; height: auto !important;
    max-width: 95vw; max-height: 90vh;
    background: transparent !important; overflow: visible; border-radius: 8px; display: block;
}
.dbcb-bna-lightbox__inner .dbcb-bna-pair-frame > img {
    width: auto; height: auto; max-width: 95vw; max-height: 90vh; object-fit: contain;
}

/* Stop the browser's native image-drag on desktop (mouse) — otherwise dragging a
   photo starts a ghost-drag instead of moving the compare divider. Tanya 2026-06-24. */
.dbcb-bna-compare img, .dbcb-bna-slide img { -webkit-user-drag: none; user-select: none; }