.dkss-root {
    position: relative;
    width: 100%;
    max-width: 100%;
    isolation: isolate;
    overflow: visible;
}

.dkss-root[data-full-bleed="yes"] {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.dkss-stage {
    --dkss-stage-height: 100vh;
    position: relative;
    width: 100%;
    height: var(--dkss-stage-height);
    min-height: 480px;
    overflow: hidden;
    background: #fdfbf7;
    transform-style: preserve-3d;
    contain: layout paint;
}

.dkss-background,
.dkss-background__image,
.dkss-background__video,
.dkss-background__motion,
.dkss-background__motion-image,
.dkss-background__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkss-background {
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}

.dkss-background__image {
    z-index: 0;
    inset: -6%;
    width: 112%;
    height: 112%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
}

.dkss-background__video {
    z-index: 0;
    object-fit: cover;
}

.dkss-background__overlay {
    z-index: 1;
    background: transparent;
    pointer-events: none;
}

.dkss-background__motion {
    --dkss-motion-scale: 1.15;
    z-index: 2;
    inset: -14%;
    width: 128%;
    height: 128%;
    display: block;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(var(--dkss-motion-scale));
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform;
}

.dkss-background__motion.dkss-motion--seamless {
    transform: none;
    transform-origin: center;
    background-position: 0 0;
    background-repeat: repeat;
    will-change: background-position;
}

.dkss-background__motion.dkss-motion--seamless .dkss-background__motion-image {
    opacity: 0;
    visibility: hidden;
}

.dkss-background__motion-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
    filter: none;
    opacity: 1;
}

.dkss-actors {
    --dkss-actors-scale: 1;
    position: absolute;
    inset: 0;
    z-index: 10;
    transform: scale(var(--dkss-actors-scale));
    transform-style: preserve-3d;
    transform-origin: center;
    pointer-events: none;
    will-change: transform;
}

.dkss-actor {
    --dkss-actor-width: 400px;
    --dkss-actor-z: 10;
    --dkss-shadow-blur: 24px;
    --dkss-shadow-opacity: .35;
    position: absolute;
    inset: 0;
    z-index: var(--dkss-actor-z);
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transform-origin: center;
    will-change: transform, opacity;
}

.dkss-actor__image {
    grid-area: 1 / 1;
    display: block;
    width: var(--dkss-actor-width) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    opacity: 0;
    object-fit: contain;
    filter: drop-shadow(0 20px var(--dkss-shadow-blur) rgba(0, 0, 0, var(--dkss-shadow-opacity)));
    backface-visibility: hidden;
    will-change: opacity;
}

.dkss-actor__image:first-child {
    opacity: 1;
}

.dkss-content {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.dkss-step {
    position: absolute;
    inset: 0;
    display: flex;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: opacity, transform, filter;
}

.dkss-step:first-child {
    opacity: 1;
    visibility: visible;
}

.dkss-step.is-active {
    pointer-events: auto;
}

.dkss-step--justify-start { justify-content: flex-start; }
.dkss-step--justify-center { justify-content: center; }
.dkss-step--justify-end { justify-content: flex-end; }
.dkss-step--align-start { align-items: flex-start; }
.dkss-step--align-center { align-items: center; }
.dkss-step--align-end { align-items: flex-end; }

.dkss-step__panel {
    --dkss-step-width: 50%;
    --dkss-step-height: auto;
    --dkss-step-x: 0px;
    --dkss-step-y: 0px;
    --dkss-step-z: 20;
    --dkss-inner-h: flex-start;
    --dkss-inner-v: flex-start;
    --dkss-cont-radius: 0px;
    --dkss-cont-padding: 0px;
    --dkss-text-radius: 0px;
    --dkss-text-padding: 0px;
    position: relative;
    z-index: var(--dkss-step-z);
    display: flex;
    flex-direction: column;
    align-items: var(--dkss-inner-h);
    justify-content: var(--dkss-inner-v);
    width: var(--dkss-step-width);
    height: var(--dkss-step-height);
    padding: var(--dkss-cont-padding);
    overflow: hidden;
    border-radius: var(--dkss-cont-radius);
    box-sizing: border-box;
    transform: translate3d(var(--dkss-step-x), var(--dkss-step-y), 0);
}

.dkss-step__background,
.dkss-step__background-image,
.dkss-step__background-video,
.dkss-step__background-color,
.dkss-step__background-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkss-step__background {
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.dkss-step__background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dkss-step__background-video {
    object-fit: cover;
}

.dkss-step__background-overlay {
    z-index: 2;
}

.dkss-step__body {
    position: relative;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
}

.dkss-editor-text {
    width: 100%;
    padding: var(--dkss-text-padding);
    border-radius: var(--dkss-text-radius);
    color: #111;
    box-sizing: border-box;
}

.dkss-editor-text > :first-child { margin-top: 0; }
.dkss-editor-text > :last-child { margin-bottom: 0; }
.dkss-editor-text h1,
.dkss-editor-text h2,
.dkss-editor-text h3,
.dkss-editor-text h4,
.dkss-editor-text h5,
.dkss-editor-text h6 {
    margin-top: 0;
}
.dkss-editor-text img { display: block; max-width: 100%; height: auto; }
.dkss-content a { transition: color .2s ease, opacity .2s ease; }

.dkss-root--debug .dkss-stage { outline: 2px dashed #d71920; outline-offset: -2px; }
.dkss-root--debug .dkss-actor { outline: 1px dashed rgba(0, 100, 255, .65); }
.dkss-root--debug .dkss-step__panel { outline: 1px dashed rgba(215, 25, 32, .8); }

.dkss-root.dkss-is-static .dkss-stage {
    height: var(--dkss-stage-height);
}

.elementor-editor-active .dkss-root {
    min-height: 80px;
}

@media (max-width: 767px) {
    .dkss-stage {
        min-height: 520px;
    }

    .dkss-step__panel {
        max-width: 92vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dkss-root *,
    .dkss-root *::before,
    .dkss-root *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Visual Scene Builder / Common Canvas ------------------------------------ */
.dkss-root[data-common-canvas="yes"] .dkss-actor__image {
    width: var(--dkss-common-canvas-width, var(--dkss-actor-width)) !important;
}

.dkss-builder-active {
    --dkss-builder-accent: #fc1b1c;
    --dkss-builder-dark: #111111;
    --dkss-builder-panel: rgba(17, 17, 17, .94);
    --dkss-builder-border: rgba(255, 255, 255, .22);
    min-height: var(--dkss-stage-height, 100vh);
}

.dkss-builder-active .dkss-stage {
    cursor: grab;
    outline: 2px solid var(--dkss-builder-accent);
    outline-offset: -2px;
    user-select: none;
    touch-action: none;
}

.dkss-builder-dragging .dkss-stage {
    cursor: grabbing;
}

.dkss-builder-active .dkss-content {
    opacity: .4;
}

.dkss-builder-active .dkss-actor.is-selected .dkss-actor__image {
    outline: 1px solid var(--dkss-builder-accent);
    outline-offset: -1px;
}

.dkss-builder-grid .dkss-stage::before,
.dkss-builder-grid .dkss-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.dkss-builder-grid .dkss-stage::before {
    background-image:
        linear-gradient(rgba(17, 17, 17, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, .08) 1px, transparent 1px);
    background-size: 5% 5%;
}

.dkss-builder-grid .dkss-stage::after {
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(252, 27, 28, .7) 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px), rgba(252, 27, 28, .7) 50%, transparent calc(50% + .5px));
}

.dkss-builder-ui {
    position: absolute;
    inset: 0;
    z-index: 1000;
    color: #ffffff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.25;
    pointer-events: none;
}

.dkss-builder-ui button,
.dkss-builder-ui select,
.dkss-builder-ui input {
    font: inherit;
}

.dkss-builder-topbar,
.dkss-builder-layers,
.dkss-builder-controls {
    pointer-events: auto;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .28);
}

.dkss-builder-topbar {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 6px;
    background: var(--dkss-builder-panel);
    border: 1px solid var(--dkss-builder-border);
}

.dkss-builder-brand {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 12px;
    margin-right: 2px;
    color: #ffffff;
    background: var(--dkss-builder-accent);
    letter-spacing: .08em;
    white-space: nowrap;
}

.dkss-builder-ui button,
.dkss-builder-ui select {
    min-height: 30px;
    padding: 6px 10px;
    color: #ffffff;
    background: #282828;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    cursor: pointer;
}

.dkss-builder-ui button:hover,
.dkss-builder-ui button:focus-visible,
.dkss-builder-ui select:hover,
.dkss-builder-ui select:focus-visible {
    color: #ffffff;
    background: #3a3a3a;
    border-color: #ffffff;
    outline: none;
}

.dkss-builder-ui .dkss-builder-save {
    color: #ffffff;
    background: var(--dkss-builder-accent);
    border-color: var(--dkss-builder-accent);
    font-weight: 700;
}

.dkss-builder-status {
    min-width: 180px;
    margin-left: auto;
    padding: 0 8px;
    color: rgba(255, 255, 255, .72);
    text-align: right;
}

.dkss-builder-status.is-error {
    color: #ffb4b4;
}

.dkss-builder-layers {
    position: absolute;
    top: 68px;
    right: 14px;
    width: 210px;
    max-height: calc(100% - 190px);
    overflow: auto;
    padding: 7px;
    background: var(--dkss-builder-panel);
    border: 1px solid var(--dkss-builder-border);
}

.dkss-builder-panel-title {
    padding: 7px 8px 9px;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.dkss-builder-layer {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    width: 100%;
    margin: 0 0 4px;
    padding: 0 !important;
    text-align: left;
}

.dkss-builder-layer-number {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 32px;
    margin-right: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    font-weight: 700;
}

.dkss-builder-layer.is-selected {
    background: var(--dkss-builder-accent);
    border-color: var(--dkss-builder-accent);
}

.dkss-builder-layer.is-selected .dkss-builder-layer-number {
    background: rgba(0, 0, 0, .22);
}

.dkss-builder-controls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) auto auto minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--dkss-builder-panel);
    border: 1px solid var(--dkss-builder-border);
}

.dkss-builder-selected {
    padding: 8px 10px;
    color: rgba(255, 255, 255, .62);
    border-left: 3px solid var(--dkss-builder-accent);
}

.dkss-builder-selected strong {
    display: block;
    margin-top: 2px;
    color: #ffffff;
}

.dkss-builder-controls label {
    display: grid;
    grid-template-columns: auto minmax(55px, 1fr) auto;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.dkss-builder-controls label:nth-of-type(1),
.dkss-builder-controls label:nth-of-type(2) {
    display: flex;
    padding: 0 4px;
}

.dkss-builder-controls output {
    min-width: 38px;
    color: #ffffff;
    text-align: right;
}

.dkss-builder-controls input[type="range"] {
    width: 100%;
    min-width: 70px;
    accent-color: var(--dkss-builder-accent);
}

@media (max-width: 1180px) {
    .dkss-builder-topbar {
        flex-wrap: wrap;
    }

    .dkss-builder-status {
        width: 100%;
        margin: 0;
        text-align: left;
    }

    .dkss-builder-controls {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}