.elementor-17828 .elementor-element.elementor-element-53a4a25{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:2rem 0rem;--row-gap:2rem;--column-gap:0rem;--padding-top:5rem;--padding-bottom:5rem;--padding-left:1.5rem;--padding-right:1.5rem;}.elementor-17828 .elementor-element.elementor-element-204ed33{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;}@media(max-width:1366px){.elementor-17828 .elementor-element.elementor-element-53a4a25{--padding-top:3rem;--padding-bottom:3rem;--padding-left:1rem;--padding-right:1rem;}}/* Start custom CSS for shortcode, class: .elementor-element-adccaaa *//* ================================
   PROMENS FLIPBOOK – FINAL CLEAN
================================ */

.promens-flipbook-card {
    --promens-flipbook-radius: var(--border_radius, 2.75rem);

    width: 100% !important;
    max-width: 100% !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.promens-flipbook-card .elementor-widget-container,
.promens-flipbook-card .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Celý DFlip thumb přes šířku kontejneru */
.promens-flipbook-card ._df_thumb,
.promens-flipbook-card .df-element,
.promens-flipbook-card .df-popup-thumb {
    position: relative;

    width: 100% !important;
    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    perspective: 1600px !important;
    transform-style: preserve-3d !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Roztáhne wrapper knihy a odstraní hranatý rámeček */
.promens-flipbook-card .df-book-wrapper {
    position: relative;
    z-index: 1;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    perspective: 1600px !important;
    transform-style: preserve-3d !important;
    overflow: visible !important;
}

.promens-flipbook-card ._df_thumb:hover .df-book-wrapper {
    transform: none !important;
}

/* Skrytí defaultních hranatých stránek za obálkou */
.promens-flipbook-card .df-book-page1,
.promens-flipbook-card .df-book-page2 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backface-visibility: hidden !important;
}

/* Obálka */
.promens-flipbook-card .df-book-cover {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: var(--promens-flipbook-radius) !important;
    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;

    transform-origin: left center !important;
    transform: perspective(1600px) rotateY(0deg) !important;

    box-shadow: 0rem 0.5rem 1.25rem 0rem var(--shadow, rgba(24, 28, 32, 0.14)) !important;

    transition:
        transform 300ms ease,
        box-shadow 300ms ease !important;

    will-change: transform;
    backface-visibility: hidden !important;
}

.promens-flipbook-card ._df_thumb:hover .df-book-cover {
    transform: perspective(1600px) rotateY(-3deg) !important;
    box-shadow: 0rem 1rem 2.5rem 0rem var(--shadow_hover, rgba(24, 28, 32, 0.22)) !important;
}

/* Thumbnail obrázek */
.promens-flipbook-card .df-book-cover img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    display: block !important;
    object-fit: cover;

    border-radius: inherit !important;
}

/* Skryje název knihy */
.promens-flipbook-card .df-book-title {
    display: none !important;
}

/* CTA tlačítko */
.promens-flipbook-card .df-book-cover::after {
    content: "Číst knihu";

    position: absolute;
    top: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    z-index: 10;

    width: max-content;
    min-width: 8rem;
    max-width: calc(100% - 2rem);
    min-height: calc(var(--btn_svg_dimensions, 2.5rem) + 0.5rem);

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    padding-block: 0.25rem;
    padding-inline-start: var(--btn_pad_x, 1.25rem);
    padding-inline-end: calc(var(--btn_svg_dimensions, 2.5rem) + var(--btn_gap, 0.75rem) + 0.5rem);

    border-radius: var(--radius_pill, 999rem);

    background: var(--White, var(--e-global-color-accent, #ffffff));
    color: var(--Primary, var(--e-global-color-primary, #1462AE));

    font-family: var(--Cabinet_Grotesk);
    font-size: var(--btn_label_size);
    font-weight: 500;
    line-height: 1;

    box-shadow: none !important;
    pointer-events: none;

    transform: none !important;
    transition: color 300ms ease;
}

/* Ikona v CTA */
.promens-flipbook-card .df-book-cover::before {
    content: "";

    position: absolute;
    top: calc(clamp(1rem, 2vw, 1.5rem) + 0.25rem);
    right: calc(clamp(1rem, 2vw, 1.5rem) + 0.25rem);
    z-index: 11;

    width: var(--btn_svg_dimensions, 2.5rem);
    height: var(--btn_svg_dimensions, 2.5rem);

    display: block !important;
    pointer-events: none;

    background-color: var(--Primary, var(--e-global-color-primary, #1462AE));

    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/04/circle-arrow-up-right.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/04/circle-arrow-up-right.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    transform: rotate(0deg);
    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

/* Hover na celou obálku */
.promens-flipbook-card ._df_thumb:hover .df-book-cover::after {
    color: var(--Secondary, var(--e-global-color-secondary, #45B2F9));
}

.promens-flipbook-card ._df_thumb:hover .df-book-cover::before {
    background-color: var(--Secondary, var(--e-global-color-secondary, #45B2F9));
    transform: rotate(45deg);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-376a76c *//* ================================
   PROMENS DFLIP LOADING – CLEAN
================================ */

.df-lightbox-wrapper .df-loading,
.df-lightbox-wrapper .df-loading-wrapper {
    position: absolute !important;
    inset: 0 !important;
    z-index: 80 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;

    padding: 1rem !important;
    margin: 0 !important;

    text-align: center !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Spinner */
.df-lightbox-wrapper .df-loading-icon {
    position: relative !important;
    order: 1 !important;

    width: 4rem !important;
    height: 4rem !important;
    flex: 0 0 4rem !important;

    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;

    float: none !important;

    border-radius: var(--radius_pill, 999rem) !important;

    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.df-lightbox-wrapper .df-loading-icon::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        conic-gradient(
            from 0deg,
            var(--Primary, var(--e-global-color-primary, #1462AE)) 0%,
            var(--Secondary, var(--e-global-color-secondary, #45B2F9)) 38%,
            rgba(255, 255, 255, 0.18) 72%,
            rgba(255, 255, 255, 0.04) 100%
        );

    mask: radial-gradient(circle, transparent 0 52%, #000 54% 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 54% 100%);

    animation: promensDflipLoaderSpin 900ms linear infinite;
}

/* Text box */
.df-lightbox-wrapper .df-loading-info,
.df-lightbox-wrapper .df-loading-text,
.df-lightbox-wrapper .df-loading span,
.df-lightbox-wrapper .df-loading-wrapper span {
    position: relative !important;
    order: 2 !important;

    width: fit-content !important;
    max-width: calc(100vw - 2rem) !important;

    display: block !important;
    margin: 0 auto !important;
    padding: 0.85rem 1.25rem !important;

    border-radius: var(--radius_pill, 999rem) !important;
    border: var(--border_size, 2px) solid var(--border, rgba(255, 255, 255, 0.5)) !important;

    background-image:
        linear-gradient(
            28deg,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(255, 255, 255, 0) 100%
        ) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;

    box-shadow: 0rem 0.5rem 0.75rem 0rem var(--shadow_hover, rgba(24, 28, 32, 0.22)) !important;

    backdrop-filter: saturate(170%) blur(0.35rem);
    -webkit-backdrop-filter: saturate(170%) blur(0.35rem);

    color: var(--White, var(--e-global-color-accent, #ffffff)) !important;

    font-family: var(--Cabinet_Grotesk, "Cabinet Grotesk") !important;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem) !important;
    font-weight: 500 !important;
    line-height: 1.15em !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: normal !important;

    transform: none !important;
}

@keyframes promensDflipLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile fix – loading přesně na střed viewportu */
@media (max-width: 767px) {
    .df-lightbox-wrapper .df-loading,
    .df-lightbox-wrapper .df-loading-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 1rem !important;
        margin: 0 !important;

        transform: none !important;
        translate: none !important;
        box-sizing: border-box !important;
    }

    .df-lightbox-wrapper .df-loading-icon,
    .df-lightbox-wrapper .df-loading-info,
    .df-lightbox-wrapper .df-loading-text,
    .df-lightbox-wrapper .df-loading span,
    .df-lightbox-wrapper .df-loading-wrapper span {
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform: none !important;
        translate: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-53a4a25 *//* =========================================
   PROMENS DFLIP LIGHTBOX – FINAL CLEAN
   Bez stylování knihy / page animací
========================================= */

.df-lightbox-wrapper {
    --df-btn-size: var(--btn_svg_dimensions, 2.5rem);
    --df-icon-size: 1.35rem;
    --df-button-bg: #000;
    --df-button-color: #fff;
    --df-side-space: clamp(4.75rem, 7vw, 7rem);
    --df-side-panel-top: clamp(0.25rem, 1.5vw, 0.5rem);
    --df-side-panel-left: clamp(0.625rem, 1.5vw, 1rem);
    --df-side-panel-width: min(20.75rem, calc(100vw - 1.25rem));
    --df-side-header-height: 2.5rem;
    --df-side-bottom-fade: 3.5rem;
    --df-side-inner-pad: 1.25rem;
    --df-side-card-gap: 0.875rem;
    background: transparent !important;
}

.df-lightbox-wrapper .df-lightbox-bg {
    background-color: rgba(24, 28, 32, 0.42) !important;
    backdrop-filter: saturate(130%) blur(1rem);
    -webkit-backdrop-filter: saturate(130%) blur(1rem);
}

.df-lightbox-wrapper .df-bg,
.df-lightbox-wrapper .df-app,
.df-lightbox-wrapper .df-container,
.df-lightbox-wrapper .df-viewer-container {
    background: transparent !important;
}

.df-lightbox-wrapper .df-app,
.df-lightbox-wrapper .df-container,
.df-lightbox-wrapper .df-viewer-container,
.df-lightbox-wrapper .df-book-wrapper,
.df-lightbox-wrapper .df-book-stage,
.df-lightbox-wrapper .df-book {
    transform-style: preserve-3d;
}

/* Bottom UI bar */
.df-lightbox-wrapper .df-ui {
    left: 50% !important;
    right: auto !important;
    bottom: clamp(1rem, 2vw, 1.5rem) !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    max-width: calc(100vw - 2rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.35rem, 0.75vw, 0.6rem) !important;
    padding: 1.75rem 0.5rem !important;
    border-radius: var(--border_radius, 2.75rem) !important;
    border: var(--border_size, 2px) solid rgba(255,255,255,.5) !important;
    background:
        linear-gradient(28deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 100%),
        rgba(255,255,255,.12) !important;
    box-shadow: 0 .5rem .75rem rgba(24,28,32,.22) !important;
    backdrop-filter: saturate(170%) blur(.35rem);
    -webkit-backdrop-filter: saturate(170%) blur(.35rem);
    overflow: visible !important;
    box-sizing: border-box !important;
    z-index: 120 !important;
}

.df-lightbox-wrapper .df-ui-left,
.df-lightbox-wrapper .df-ui-center,
.df-lightbox-wrapper .df-ui-right {
    display: contents !important;
}

/* Hide More button */
.df-lightbox-wrapper .df-ui-more,
.df-lightbox-wrapper .df-icon-more,
.df-lightbox-wrapper .df-ui-btn.df-ui-more,
.df-lightbox-wrapper .df-ui-btn.df-icon-more,
.df-lightbox-wrapper .df-ui-more.df-active,
.df-lightbox-wrapper .df-more-container,
div.df-ui-btn.df-ui-more.df-icon-more,
.df-more-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Buttons */
.df-lightbox-wrapper .df-ui .df-ui-btn,
.df-lightbox-wrapper .df-ui-nav .df-ui-btn,
.df-lightbox-wrapper .df-lightbox-close {
    width: var(--df-btn-size) !important;
    height: var(--df-btn-size) !important;
    min-width: var(--df-btn-size) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999rem !important;
    background: var(--df-button-bg) !important;
    color: var(--df-button-color) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: opacity 220ms ease, background-color 220ms ease, color 220ms ease !important;
}

.df-lightbox-wrapper .df-ui .df-ui-btn:hover,
.df-lightbox-wrapper .df-ui-nav .df-ui-btn:hover,
.df-lightbox-wrapper .df-lightbox-close:hover {
    opacity: .72 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Page number */
.df-lightbox-wrapper .df-ui .df-ui-page {
    position: relative !important;
    min-width: 5.25rem !important;
    height: var(--df-btn-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1rem !important;
    border-radius: 999rem !important;
    background: #000 !important;
    color: #fff !important;
    overflow: hidden !important;
}

.df-lightbox-wrapper .df-ui .df-ui-page input,
.df-lightbox-wrapper .df-ui .df-ui-page label {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #fff !important;
    text-align: center !important;
}

.df-lightbox-wrapper .df-ui .df-ui-page input {
    opacity: 0 !important;
}

.df-lightbox-wrapper .df-ui .df-ui-page input:focus {
    opacity: 1 !important;
}

.df-lightbox-wrapper .df-ui .df-ui-page input:focus + label {
    opacity: 0 !important;
}

/* Navigation + close */
.df-lightbox-wrapper .df-ui-nav {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--df-btn-size) !important;
    height: var(--df-btn-size) !important;
    background: transparent !important;
}

.df-lightbox-wrapper .df-ui-prev {
    left: clamp(1rem, 2.5vw, 3rem) !important;
}

.df-lightbox-wrapper .df-ui-next {
    right: clamp(1rem, 2.5vw, 3rem) !important;
}

.df-lightbox-wrapper .df-lightbox-controls {
    top: clamp(1rem, 2vw, 1.5rem) !important;
    left: 0 !important;
    right: 0 !important;
    pointer-events: none !important;
}

.df-lightbox-wrapper .df-lightbox-close {
    position: absolute !important;
    top: 0 !important;
    right: clamp(1rem, 2.5vw, 3rem) !important;
    pointer-events: auto !important;
}

/* Icons */
.df-lightbox-wrapper .df-ui .df-ui-zoomin::before,
.df-lightbox-wrapper .df-ui .df-ui-zoomout::before,
.df-lightbox-wrapper .df-ui .df-ui-fullscreen::before,
.df-lightbox-wrapper .df-ui .df-ui-share::before,
.df-lightbox-wrapper .df-lightbox-close::before,
.df-lightbox-wrapper .df-ui-close::before,
.df-lightbox-wrapper .df-ui-prev .df-ui-btn::before,
.df-lightbox-wrapper .df-ui-next .df-ui-btn::before {
    content: "" !important;
    width: var(--df-icon-size) !important;
    height: var(--df-icon-size) !important;
    display: block !important;
    background-color: currentColor !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
}

.df-lightbox-wrapper .df-ui .df-ui-btn span,
.df-lightbox-wrapper .df-ui-nav .df-ui-btn span,
.df-lightbox-wrapper .df-lightbox-close span,
.df-lightbox-wrapper .df-ui-close span {
    display: none !important;
}

.df-lightbox-wrapper .df-ui .df-ui-zoomin::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/zoom-in.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/zoom-in.svg") !important;
}

.df-lightbox-wrapper .df-ui .df-ui-zoomout::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/zoom-out.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/zoom-out.svg") !important;
}

.df-lightbox-wrapper .df-ui .df-ui-share::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/share.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/share.svg") !important;
}

.df-lightbox-wrapper .df-ui .df-ui-fullscreen::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/arrows-maximize.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/arrows-maximize.svg") !important;
}

.df-lightbox-wrapper .df-ui .df-ui-fullscreen.df-active::before,
.df-lightbox-wrapper .df-ui .df-ui-fullscreen.active::before,
.df-lightbox-wrapper.df-fullscreen .df-ui-fullscreen::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/arrows-minimize.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/arrows-minimize.svg") !important;
}

.df-lightbox-wrapper .df-lightbox-close::before,
.df-lightbox-wrapper .df-ui-close::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/x.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/x.svg") !important;
}

.df-lightbox-wrapper .df-ui-prev .df-ui-btn::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/chevron-left.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/chevron-left.svg") !important;
}

.df-lightbox-wrapper .df-ui-next .df-ui-btn::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/chevron-right.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/chevron-right.svg") !important;
}

/* Sidemenu */
.df-lightbox-wrapper .df-sidemenu-wrapper {
    position: fixed !important;
    top: var(--df-side-panel-top) !important;
    left: var(--df-side-panel-left) !important;
    width: var(--df-side-panel-width) !important;
    height: calc(100vh - (2 * var(--df-side-panel-top))) !important;
    overflow: hidden !important;
    border-radius: var(--border_radius, 2.75rem) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(calc(-100% - 1.5rem)) !important;
    transition:
        transform 420ms cubic-bezier(0.22,1,0.36,1),
        opacity 260ms ease,
        visibility 0s linear 420ms !important;
    z-index: 60 !important;
}

.df-lightbox-wrapper .df-sidemenu-wrapper.df-sidemenu-visible,
.df-lightbox-wrapper .df-sidemenu-wrapper.df-sidemenu-open,
.df-lightbox-wrapper .df-sidemenu-wrapper:has(.df-sidemenu-visible) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    transition:
        transform 420ms cubic-bezier(0.22,1,0.36,1),
        opacity 260ms ease !important;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 2px solid rgba(255,255,255,.5) !important;
    background:
        rgba(242,242,253) !important;
    box-shadow: 0 .5rem .75rem rgba(24,28,32,.22) !important;
    backdrop-filter: saturate(170%) blur(.35rem);
    -webkit-backdrop-filter: saturate(170%) blur(.35rem);
    overflow: hidden !important;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu > .df-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--df-side-card-gap) !important;
    padding:
        var(--df-side-header-height)
        var(--df-side-inner-pad)
        calc(var(--df-side-bottom-fade) + var(--df-side-inner-pad))
        var(--df-side-inner-pad) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu > .df-wrapper::-webkit-scrollbar {
    width: .45rem !important;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu > .df-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
    margin-top: var(--df-side-header-height) !important;
    margin-bottom: calc(var(--df-side-bottom-fade) + var(--df-side-inner-pad)) !important;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu > .df-wrapper::-webkit-scrollbar-thumb {
    background: rgba(24,28,32,.35) !important;
    border-radius: 999rem !important;
}

/* Sidemenu header */
.df-lightbox-wrapper .df-sidemenu-title {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 12 !important;
    height: var(--df-side-header-height) !important;
    padding: 1.25rem 4rem 1.5rem 1.75rem !important;
    font-size: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.92) 46%,
            rgba(255,255,255,.56) 76%,
            rgba(255,255,255,0) 100%
        ) !important;
}

.df-lightbox-wrapper .df-sidemenu-title::after {
    content: "Všechny stránky" !important;
    color: var(--e-global-color-black, #000) !important;
    font-family: var(--Cabinet_Grotesk, "Cabinet Grotesk") !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.15em !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Top fade při scrollu dolů */
.df-lightbox-wrapper .df-thumb-container.df-sidemenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--df-side-header-height);
    z-index: 11;
    height: var(--df-side-bottom-fade);
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(242,242,242,.98) 0%,
            rgba(253,253,253,.88) 42%,
            rgba(253,253,253,.42) 72%,
            rgba(253,253,253,0) 100%
        );
    opacity: 0;
    transition: opacity 220ms ease;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu.has-top-scroll::before {
    opacity: 1;
}

/* Bottom fade */
.df-lightbox-wrapper .df-thumb-container.df-sidemenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11;
    height: var(--df-side-bottom-fade);
    pointer-events: none;
    background:
        linear-gradient(
            0deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.88) 42%,
            rgba(255,255,255,.42) 72%,
            rgba(255,255,255,0) 100%
        );
    opacity: 1;
    transition: opacity 220ms ease;
}

.df-lightbox-wrapper .df-thumb-container.df-sidemenu.is-at-bottom::after {
    opacity: 0;
}

/* Sidemenu close */
.df-lightbox-wrapper .df-sidemenu-buttons {
    position: absolute !important;
    top: 1rem !important;
    right: 1.15rem !important;
    z-index: 90 !important;
    box-shadow: none !important;
}

.df-lightbox-wrapper .df-sidemenu-buttons .df-ui-close {
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
}

/* Thumbnails */
.df-lightbox-wrapper .df-thumb {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.df-lightbox-wrapper .df-thumb > .df-wrapper {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    padding: .35rem !important;
    overflow: hidden !important;
    border-radius: calc(var(--border_radius, 2.75rem) * .35) !important;
}

.df-lightbox-wrapper .df-thumb .df-bg-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: calc(var(--border_radius, 2.75rem) * .28) !important;
    background-color: rgba(24,28,32,.68) !important;
}

.df-lightbox-wrapper .df-thumb-number {
    position: absolute !important;
    right: .85rem !important;
    bottom: .85rem !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999rem !important;
    background: #000 !important;
    color: #fff !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
}

.df-lightbox-wrapper .df-thumb:hover .df-thumb-number,
.df-lightbox-wrapper .df-thumb.df-selected .df-thumb-number {
    opacity: 1 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .df-lightbox-wrapper {
        --df-side-panel-width: min(20.5rem, calc(100vw - 1rem));
        --df-side-panel-top: .5rem;
        --df-side-panel-left: .5rem;
    }

    .df-lightbox-wrapper .df-ui {
        left: 50% !important;
        right: auto !important;
        bottom: .75rem !important;
        transform: translateX(-50%) !important;
        width: fit-content !important;
        max-width: calc(100vw - 1rem) !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: .35rem !important;
        padding: .65rem !important;
        min-height: calc(var(--df-btn-size) + 1.3rem) !important;
        border-radius: var(--radius_pill, 999rem) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .df-lightbox-wrapper .df-ui::-webkit-scrollbar {
        display: none !important;
    }

    .df-lightbox-wrapper .df-ui .df-ui-btn {
        flex: 0 0 var(--df-btn-size) !important;
    }

    .df-lightbox-wrapper .df-ui .df-ui-page {
        flex: 0 0 auto !important;
        min-width: 4.75rem !important;
    }

    .df-lightbox-wrapper .df-ui-prev {
        left: .75rem !important;
    }

    .df-lightbox-wrapper .df-ui-next,
    .df-lightbox-wrapper .df-lightbox-close {
        right: .75rem !important;
    }

    .df-lightbox-wrapper .df-sidemenu-title {
        padding: 1.15rem 3.75rem 1.35rem 1.5rem !important;
    }
}


/* Mobile only – hide lightbox close when sidemenu is open */
@media (max-width: 767px) {
    .df-lightbox-wrapper {
        --df-mobile-edge: 0.75rem;
        --df-mobile-bottom-safe: max(env(safe-area-inset-bottom, 0px), 1rem);

        --df-side-panel-top: var(--df-mobile-edge);
        --df-side-panel-left: var(--df-mobile-edge);
        --df-side-panel-width: calc(100vw - (2 * var(--df-mobile-edge)));
    }

    .df-lightbox-wrapper .df-sidemenu-wrapper {
        top: var(--df-mobile-edge) !important;
        left: var(--df-mobile-edge) !important;
        right: var(--df-mobile-edge) !important;
        bottom: calc(var(--df-mobile-edge) + var(--df-mobile-bottom-safe)) !important;

        width: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    .df-lightbox-wrapper .df-thumb-container.df-sidemenu {
        width: 100% !important;
        height: 100% !important;
    }

    .df-lightbox-wrapper .df-lightbox-close {
        transition:
            opacity 260ms ease,
            visibility 0s linear 0s !important;
    }

    .df-lightbox-wrapper.promens-sidemenu-open .df-lightbox-close {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity 220ms ease,
            visibility 0s linear 220ms !important;
    }
}

/* ================================
   FIX – MUTE + THUMBNAILS ICONS
================================ */

/* Společný icon renderer */
.df-lightbox-wrapper .df-ui .promens-dflip-mute::before,
.df-lightbox-wrapper .df-ui .promens-dflip-thumbs::before {
    content: "" !important;

    width: var(--df-icon-size, 1.35rem) !important;
    height: var(--df-icon-size, 1.35rem) !important;

    display: block !important;

    background-color: currentColor !important;

    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
}

/* Mute / unmute */
.df-lightbox-wrapper .df-ui .promens-dflip-mute::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/volume.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/volume.svg") !important;
}

.df-lightbox-wrapper .df-ui .promens-dflip-mute.is-muted::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/volume-off.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/volume-off.svg") !important;
}

/* Toggle thumbnails */
.df-lightbox-wrapper .df-ui .promens-dflip-thumbs::before {
    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/layout-grid.svg") !important;
    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/layout-grid.svg") !important;
}

/* Schovat původní ikony uvnitř těchto tlačítek */
.df-lightbox-wrapper .df-ui .promens-dflip-mute span,
.df-lightbox-wrapper .df-ui .promens-dflip-mute i,
.df-lightbox-wrapper .df-ui .promens-dflip-thumbs span,
.df-lightbox-wrapper .df-ui .promens-dflip-thumbs i {
    display: none !important;
}

/* Toggle Thumbnails icon */
.df-lightbox-wrapper .df-ui .df-ui-thumbnail.df-icon-grid-view.df-sidemenu-trigger::before {
    content: "" !important;

    width: var(--df-icon-size, 1.35rem) !important;
    height: var(--df-icon-size, 1.35rem) !important;

    display: block !important;

    background-color: currentColor !important;

    mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/layout-grid.svg") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    -webkit-mask-image: url("https://dobremistoprolidi.cz/wp-content/uploads/2026/05/layout-grid.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
}

.df-lightbox-wrapper .df-ui .df-ui-thumbnail.df-icon-grid-view.df-sidemenu-trigger span {
    display: none !important;
}

/* =========================================
   PROMENS DFLIP – OPEN / CLOSE / ZOOM FX
========================================= */

@keyframes promensLightboxFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes promensDflipControlsIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in celého lightboxu */
.df-lightbox-wrapper.promens-lightbox-entering {
    animation: promensLightboxFadeIn 320ms ease both;
}

/* Zpožděný nástup ovládání */
.df-lightbox-wrapper.promens-lightbox-entering .df-ui {
    animation: promensDflipControlsIn 280ms ease 140ms both;
}

.df-lightbox-wrapper.promens-lightbox-entering .df-ui-nav,
.df-lightbox-wrapper.promens-lightbox-entering .df-lightbox-close {
    animation: promensLightboxFadeIn 240ms ease 180ms both;
}

/* Fade out při zavírání */
.df-lightbox-wrapper.promens-lightbox-closing {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 260ms ease !important;
}

/* Zoom cloak – schová krátký glitch při překreslení stránky */
.df-lightbox-wrapper .df-viewer-container {
    transition:
        opacity 180ms ease,
        filter 180ms ease !important;
}


@media (prefers-reduced-motion: reduce) {
    .df-lightbox-wrapper.promens-lightbox-entering,
    .df-lightbox-wrapper.promens-lightbox-entering .df-ui,
    .df-lightbox-wrapper.promens-lightbox-entering .df-ui-nav,
    .df-lightbox-wrapper.promens-lightbox-entering .df-lightbox-close,
    .df-lightbox-wrapper .df-viewer-container,
    .df-lightbox-wrapper.promens-lightbox-closing {
        animation: none !important;
        transition: none !important;
    }
}/* End custom CSS */