/* DIGIKROM Configurator v21.7.3 - Drop Summary Data Hotfix */
.digikrom-config-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 75vh; 
    min-height: 500px; 
    background: #f4f4f4;
    font-family: 'Helvetica', sans-serif;
    border: 1px solid #ccc;
    overflow: hidden; 
    position: relative;
}

/* --- LEWA KOLUMNA (2D) --- */
.digikrom-config-ui {
    width: 40%;
    height: 100%;
    background: #fff;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

/* Pasek zakładek */
.digikrom-parts-nav {
    display: flex;
    background: #222;
    height: 45px;
    flex-shrink: 0;
}

.digikrom-part-btn {
    flex: 1;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    border-right: 1px solid #333;
    transition: 0.3s;
}
.digikrom-part-btn:hover { color: #fff; background: #333; }
.digikrom-part-btn.active { color: #fff; background: #0073aa; border-bottom: 3px solid #fff; }

/* --- OBSZAR ROBOCZY --- */
.canvas-container-wrapper {
    flex: 1;
    background: #e0e0e0;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    position: relative;
}

.canvas-wrapper {
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transform-origin: center center;
}

.canvas-wrapper.active {
    display: block !important;
}

/* --- DOLNY PASEK NARZĘDZI --- */
.digikrom-controls {
    padding: 8px 12px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #ddd;
    align-items: center;
    box-shadow: 0 -5px 10px rgba(0,0,0,0.05);
    flex-shrink: 0;
    min-height: 60px;
    justify-content: space-between; /* Rozsuwamy elementy */
}

/* Grupa Przycisków Głównych */
.digikrom-main-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.digikrom-btn {
    padding: 6px 10px;
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    white-space: nowrap;
}
.digikrom-btn:hover { background: #555; }
.digikrom-btn.save-print { background: #28a745; border-bottom: 2px solid #1e7e34; }
.digikrom-btn.add-image { background: #0073aa; }
.digikrom-btn.delete-item { background: #dc3545; }
.digikrom-btn.btn-undo { background: #6c757d; font-size: 14px; }

/* Kontener kolorów */
.digikrom-color-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
}
.digikrom-color-container input[type="number"] { -moz-appearance: textfield; }
.digikrom-color-container input[type="number"]::-webkit-outer-spin-button,
.digikrom-color-container input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- KONTEKSTOWE NARZĘDZIA (NOWY WYGLĄD) --- */
.digikrom-context-tools {
    width: 100%;
    padding: 10px;
    background: #eef9ff;
    border-top: 1px solid #0073aa;
    margin-top: 5px;
    display: none;
    align-items: center;
    gap: 15px;
    font-size: 11px;
    color: #333;
}

/* Grupa Suwaków - rozciągamy ją! */
.digikrom-transform-tools {
    display: flex;
    gap: 15px;
    align-items: center;
    flex: 1; /* To sprawia, że suwaki zajmują całe wolne miejsce */
    padding-right: 15px;
    border-right: 1px solid #ccc;
}

/* Same suwaki */
.digikrom-slider-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1; /* Suwak rozciąga się wewnątrz swojej grupy */
}
.digikrom-slider-wrap input[type="range"] {
    width: 100%; /* Pełna szerokość */
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    cursor: pointer;
}

/* Grupa Tekstowa */
.digikrom-text-tools {
    display: none;
    gap: 10px;
    align-items: center;
}

/* --- PRAWA KOLUMNA (3D) --- */
.digikrom-config-3d {
    width: 60%;
    height: 100%;
    position: relative;
    background: radial-gradient(circle, #ffffff 0%, #dcdcdc 100%);
}

/* --- FABRIC JS FIX (NAPRAWA SKAKANIA STRONY) --- */
/* To jest kluczowe! Ukrywa textarea w miejscu, a nie na dole strony */
.canvas-container textarea {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    opacity: 0 !important;
    z-index: -100 !important;
    width: 1px !important;
    height: 1px !important;
}

/* --- MODAL ZAMÓWIENIA --- */
.digikrom-order-modal {
    position: fixed !important; 
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 10000;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
}
.digikrom-order-modal > div {
    background: #fff !important;
    padding: 30px !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
    width: 90%; max-width: 900px;
    display: flex; gap: 30px;
    animation: fadeIn 0.3s ease-in-out;
}
.digikrom-order-modal input, .digikrom-order-modal textarea {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; background: #f9f9f9;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* MOBILE */
@media (max-width: 900px) {
    .digikrom-config-wrapper { flex-direction: column; height: auto; }
    .digikrom-config-ui { width: 100%; height: auto; order: 2; }
    .digikrom-config-3d { width: 100%; height: 50vh; min-height: 300px; order: 1; }
    .canvas-container-wrapper { min-height: 400px; }
    .digikrom-order-modal > div { flex-direction: column; max-height: 90vh; overflow-y: auto; }
    .digikrom-controls { justify-content: space-between; }
    /* Na mobile kontekstowe narzędzia pod spodem */
    .digikrom-context-tools { flex-direction: column; align-items: stretch; }
    .digikrom-transform-tools { border-right: none; border-bottom: 1px solid #ccc; padding-bottom: 10px; padding-right: 0; }
}

/* --- PRELOADER --- */
.digikrom-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 500; /* Musi być nad canvasem i 3D, ale pod modalem zamówienia */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    color: #555;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.digikrom-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa; /* Kolor Twojej marki */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === DIGIKROM Configurator v21.5.0: Stabilization polish === */
.digikrom-config-wrapper {
    isolation: isolate;
}

.digikrom-config-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.digikrom-config-wrapper .digikrom-loader {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.digikrom-config-wrapper .digikrom-loader span {
    max-width: 80%;
    text-align: center;
}


/* ==========================================================================
   DIGIKROM Configurator v21.6.0
   DK Product Studio UI + Style Presets
   ========================================================================== */

.dk-product-studio {
    --dkc-accent: #ff003c;
    --dkc-accent-2: #ff6a00;
    --dkc-bg: #050505;
    --dkc-surface: rgba(15, 15, 18, 0.86);
    --dkc-surface-2: rgba(255, 255, 255, 0.045);
    --dkc-border: rgba(255, 255, 255, 0.10);
    --dkc-text: rgba(255, 255, 255, 0.92);
    --dkc-muted: rgba(255, 255, 255, 0.56);
    --dkc-grid: rgba(255, 255, 255, 0.18);
    --dkc-panel-strength: .7;
    --dkc-glow-power: .72;
    --dkc-radius: 22px;

    position: relative;
    color: var(--dkc-text);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--dkc-accent), transparent 86%), transparent 34%),
        radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--dkc-accent-2), transparent 90%), transparent 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--dkc-bg), #ffffff 3%), var(--dkc-bg));
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%);
    box-shadow:
        0 0 calc(34px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 82%),
        inset 0 0 0 1px rgba(255,255,255,.025);
    overflow: hidden;
}

.dk-product-studio::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: calc(.10 + var(--dkc-panel-strength) * .10);
    background:
        linear-gradient(90deg, transparent 0 48%, color-mix(in srgb, var(--dkc-accent), transparent 72%) 50%, transparent 52%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px);
    mix-blend-mode: screen;
}

.dk-product-studio::after {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    top: 0;
    height: 2px;
    z-index: 3;
    background: linear-gradient(90deg, transparent, var(--dkc-accent), var(--dkc-accent-2), transparent);
    box-shadow: 0 0 calc(24px * var(--dkc-glow-power)) var(--dkc-accent);
    opacity: .9;
}

.dk-product-studio .dkc-studio-frame {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(420px, 40%) minmax(420px, 60%);
    min-height: 720px;
    gap: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.56), rgba(255,255,255,.025)),
        transparent;
}

.dk-product-studio .digikrom-config-ui,
.dk-product-studio .digikrom-config-3d {
    position: relative;
    min-height: 720px;
}

.dk-product-studio .digikrom-config-ui {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--dkc-accent), transparent 90%), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        rgba(0,0,0, calc(.28 + var(--dkc-panel-strength) * .34));
    border-right: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%);
    box-shadow: inset -18px 0 46px rgba(0,0,0,.22);
}

.dk-product-studio .digikrom-config-3d {
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--dkc-accent), transparent 88%), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.26)),
        rgba(255,255,255,.035);
}

.dk-product-studio .canvas-container-wrapper {
    position: relative;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 42%),
        linear-gradient(90deg, var(--dkc-grid) 1px, transparent 1px),
        linear-gradient(0deg, var(--dkc-grid) 1px, transparent 1px),
        rgba(0,0,0,.42) !important;
    background-size: auto, 22px 22px, 22px 22px, auto !important;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 75%);
    box-shadow:
        inset 0 0 60px rgba(0,0,0,.34),
        0 0 calc(22px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 90%);
}

.dk-product-studio .digikrom-parts-nav {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
        rgba(0,0,0,.44) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 72%);
}

.dk-product-studio .digikrom-parts-nav button,
.dk-product-studio .digikrom-part-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
        rgba(0,0,0,.40) !important;
    color: var(--dkc-text) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease !important;
}

.dk-product-studio .digikrom-parts-nav button:hover,
.dk-product-studio .digikrom-part-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 35%) !important;
    box-shadow: 0 0 calc(16px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 74%);
}

.dk-product-studio .digikrom-parts-nav button.active,
.dk-product-studio .digikrom-part-btn.active,
.dk-product-studio .digikrom-parts-nav .active {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--dkc-accent), #ffffff 8%), color-mix(in srgb, var(--dkc-accent), transparent 22%)) !important;
    color: #060606 !important;
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 12%) !important;
    box-shadow:
        0 0 calc(24px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 50%),
        inset 0 0 0 1px rgba(255,255,255,.20);
}

.dk-product-studio .digikrom-controls {
    position: relative;
    z-index: 2;
    padding: 14px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
        rgba(0,0,0, calc(.36 + var(--dkc-panel-strength) * .24)) !important;
    border-top: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%);
}

.dk-product-studio .digikrom-controls button,
.dk-product-studio button {
    border-radius: 12px;
}

.dk-product-studio .digikrom-controls input[type="range"] {
    accent-color: var(--dkc-accent);
}

.dk-product-studio .digikrom-controls input[type="color"],
.dk-product-studio .digikrom-controls input[type="number"],
.dk-product-studio .digikrom-controls input[type="text"],
.dk-product-studio .digikrom-order-modal input,
.dk-product-studio .digikrom-order-modal textarea {
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%) !important;
    background: rgba(0,0,0,.48) !important;
    color: var(--dkc-text) !important;
    border-radius: 10px !important;
}

.dk-product-studio .digikrom-loader {
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--dkc-accent), transparent 82%), transparent 38%),
        rgba(0,0,0,.82) !important;
    color: var(--dkc-text) !important;
}

.dk-product-studio .digikrom-spinner {
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 82%) !important;
    border-top-color: var(--dkc-accent) !important;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--dkc-accent), transparent 35%));
}

.dk-product-studio .digikrom-order-modal {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dk-product-studio .digikrom-order-modal > div,
.dk-product-studio .digikrom-order-box,
.dk-product-studio .modal-content {
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 62%) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(0,0,0,.82) !important;
    color: var(--dkc-text) !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,.56),
        0 0 calc(42px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 80%);
}

.dk-product-studio .dkc-studio-branding {
    position: relative;
    z-index: 2;
    padding: 14px 22px 18px;
    text-align: right;
    color: var(--dkc-muted);
    font-size: 13px;
    letter-spacing: .03em;
    background: rgba(0,0,0,.72);
    border-top: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%);
}

.dk-product-studio .dkc-studio-branding::after {
    content: '';
    display: inline-block;
    width: 72px;
    height: 1px;
    margin-left: 10px;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--dkc-accent), transparent);
    box-shadow: 0 0 12px var(--dkc-accent);
}

/* Theme presets */
.dkc-theme-cyber_red {
    --dkc-accent: #ff003c;
    --dkc-accent-2: #ff6a00;
    --dkc-bg: #070507;
    --dkc-grid: rgba(255, 0, 60, .22);
}

.dkc-theme-clean_premium {
    --dkc-accent: #f2f2f2;
    --dkc-accent-2: #8d8d8d;
    --dkc-bg: #080808;
    --dkc-surface: rgba(245,245,245,.08);
    --dkc-grid: rgba(255,255,255,.12);
}

.dkc-theme-neon_club {
    --dkc-accent: #00eaff;
    --dkc-accent-2: #ff2fff;
    --dkc-bg: #04020b;
    --dkc-grid: rgba(0,234,255,.20);
}

.dkc-theme-tactical {
    --dkc-accent: #58ff8a;
    --dkc-accent-2: #8ba56b;
    --dkc-bg: #030704;
    --dkc-grid: rgba(88,255,138,.16);
}

.dkc-theme-gold_luxury {
    --dkc-accent: #ffd36a;
    --dkc-accent-2: #a46b22;
    --dkc-bg: #080604;
    --dkc-grid: rgba(255,211,106,.16);
}

.dkc-theme-horror_shadow {
    --dkc-accent: #d40022;
    --dkc-accent-2: #4b000c;
    --dkc-bg: #030101;
    --dkc-grid: rgba(212,0,34,.14);
}

.dkc-theme-anime_pop {
    --dkc-accent: #00d8ff;
    --dkc-accent-2: #ff5aa8;
    --dkc-bg: #070715;
    --dkc-grid: rgba(0,216,255,.16);
}

.dkc-theme-clean_premium .digikrom-parts-nav button.active,
.dkc-theme-clean_premium .digikrom-part-btn.active,
.dkc-theme-gold_luxury .digikrom-parts-nav button.active,
.dkc-theme-gold_luxury .digikrom-part-btn.active {
    color: #111 !important;
}

.dkc-theme-horror_shadow::before {
    opacity: calc(.15 + var(--dkc-panel-strength) * .12);
    background:
        radial-gradient(circle at 50% 0%, rgba(212,0,34,.16), transparent 28%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px);
}

.dkc-theme-anime_pop .canvas-container-wrapper {
    background-size: auto, 26px 26px, 26px 26px, auto !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .dk-product-studio .dkc-studio-frame {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .dk-product-studio .digikrom-config-ui,
    .dk-product-studio .digikrom-config-3d {
        min-height: 560px;
    }

    .dk-product-studio .digikrom-config-ui {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%);
    }
}

@media (max-width: 767px) {
    .dk-product-studio {
        border-radius: 16px;
    }

    .dk-product-studio .digikrom-config-ui,
    .dk-product-studio .digikrom-config-3d {
        min-height: 460px;
    }

    .dk-product-studio .digikrom-parts-nav {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .dk-product-studio .digikrom-parts-nav button,
    .dk-product-studio .digikrom-part-btn {
        flex: 0 0 auto;
        min-width: 128px;
        font-size: 11px !important;
    }

    .dk-product-studio .dkc-studio-branding {
        text-align: center;
        font-size: 12px;
    }
}


/* ==========================================================================
   DIGIKROM Configurator v21.6.1
   Layout Recovery Hotfix
   --------------------------------------------------------------------------
   v21.6.0 introduced a premium grid frame, but the configurator engine already
   depends on its own two-column geometry. This hotfix keeps theme variables and
   visual presets, but restores the original layout behavior from v21.5.0.
   ========================================================================== */

/* Remove the experimental frame as a layout authority if any cached markup exists. */
.dk-product-studio .dkc-studio-frame {
    display: contents !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    gap: 0 !important;
    background: transparent !important;
}

/* Restore the engine-owned two-column structure. */
.dk-product-studio {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 720px;
}

/* Editor and 3D preview must remain siblings controlled by the original engine/CSS. */
.dk-product-studio > .digikrom-config-ui,
.dk-product-studio .dkc-studio-frame > .digikrom-config-ui {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    min-width: 420px !important;
    min-height: 720px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dk-product-studio > .digikrom-config-3d,
.dk-product-studio .dkc-studio-frame > .digikrom-config-3d {
    flex: 1 1 60% !important;
    width: 60% !important;
    max-width: none !important;
    min-width: 420px !important;
    min-height: 720px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Do not let branding become a third column. */
.dk-product-studio > .dkc-studio-branding {
    position: absolute !important;
    right: 18px !important;
    bottom: 14px !important;
    z-index: 20 !important;
    width: auto !important;
    max-width: min(420px, 45%) !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
        rgba(0,0,0,.46) !important;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%) !important;
    color: var(--dkc-muted) !important;
    text-align: right !important;
    pointer-events: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Critical: the editor canvas wrapper must not be pushed into a tiny strip. */
.dk-product-studio .canvas-container-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Keep Fabric's internal canvas geometry intact. */
.dk-product-studio .canvas-container,
.dk-product-studio .upper-canvas,
.dk-product-studio .lower-canvas {
    max-width: none !important;
}

/* Controls must remain below the editor area, not in a detached premium column. */
.dk-product-studio .digikrom-controls {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* The 3D canvas must fill only its own column. */
.dk-product-studio .digikrom-config-3d canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Softer visual skin: variables stay, layout no longer gets overwritten. */
.dk-product-studio .digikrom-config-ui {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--dkc-accent), transparent 92%), transparent 32%),
        rgba(0,0,0, calc(.18 + var(--dkc-panel-strength) * .18)) !important;
    border-right: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 78%) !important;
}

.dk-product-studio .digikrom-config-3d {
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--dkc-accent), transparent 90%), transparent 32%),
        rgba(255,255,255,.035) !important;
}

/* Avoid over-styling unknown internal buttons into broken dimensions. */
.dk-product-studio .digikrom-controls button {
    min-height: initial;
}

/* Responsive: stack only at tablet/mobile widths. */
@media (max-width: 1024px) {
    .dk-product-studio {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .dk-product-studio > .digikrom-config-ui,
    .dk-product-studio .dkc-studio-frame > .digikrom-config-ui,
    .dk-product-studio > .digikrom-config-3d,
    .dk-product-studio .dkc-studio-frame > .digikrom-config-3d {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 560px !important;
    }

    .dk-product-studio > .dkc-studio-branding {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .dk-product-studio > .digikrom-config-ui,
    .dk-product-studio .dkc-studio-frame > .digikrom-config-ui,
    .dk-product-studio > .digikrom-config-3d,
    .dk-product-studio .dkc-studio-frame > .digikrom-config-3d {
        min-height: 460px !important;
    }
}


/* ========================================================================
   DIGIKROM Configurator v21.6.2
   Studio Preset Polish + UI fit fixes
   - fixes top part tabs overflow
   - styles color/CMYK panel for dark skins
   - gives 3D scene a theme-aware background
   - separates Neon Club from Anime Pop visually
   ======================================================================== */

.dk-product-studio {
    --dkc-3d-backdrop-1: color-mix(in srgb, var(--dkc-accent), transparent 88%);
    --dkc-3d-backdrop-2: color-mix(in srgb, var(--dkc-accent-2), transparent 90%);
    --dkc-3d-horizon: color-mix(in srgb, var(--dkc-bg), white 12%);
    --dkc-3d-floor: color-mix(in srgb, var(--dkc-bg), white 20%);
}

/* 1) Top tabs must fit inside the frame cleanly */
.dk-product-studio .digikrom-parts-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.dk-product-studio .digikrom-parts-nav button,
.dk-product-studio .digikrom-part-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.15 !important;
    padding: 10px 12px !important;
}

/* 2) Bottom color box must stay readable in premium dark skins */
.dk-product-studio .digikrom-color-container {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        rgba(0,0,0,.52) !important;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 72%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.dk-product-studio .digikrom-color-container span,
.dk-product-studio .digikrom-color-container label,
.dk-product-studio .digikrom-color-container [style*="font-size:11px"],
.dk-product-studio .digikrom-color-container [style*="font-size:9px"] {
    color: var(--dkc-text) !important;
}

.dk-product-studio .digikrom-color-container input[type="number"] {
    background: rgba(255,255,255,.92) !important;
    color: #0d1117 !important;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 55%) !important;
    border-radius: 8px !important;
}

.dk-product-studio .digikrom-color-container > div + div {
    border-top-color: color-mix(in srgb, var(--dkc-accent), transparent 72%) !important;
}

/* 3) Theme-aware 3D scene background */
.dk-product-studio .digikrom-config-3d {
    position: relative !important;
    background:
        radial-gradient(circle at 50% 16%, var(--dkc-3d-backdrop-1), transparent 36%),
        radial-gradient(circle at 18% 82%, var(--dkc-3d-backdrop-2), transparent 30%),
        linear-gradient(180deg, var(--dkc-3d-horizon) 0%, color-mix(in srgb, var(--dkc-bg), white 6%) 42%, var(--dkc-3d-floor) 100%) !important;
}

.dk-product-studio .digikrom-config-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--dkc-accent), transparent 93%), transparent 30%),
        linear-gradient(180deg, transparent 0 64%, rgba(255,255,255,.04) 100%);
    opacity: .95;
}

.dk-product-studio .digikrom-config-3d::after {
    content: '';
    position: absolute;
    inset: auto 6% 4% 6%;
    height: 28%;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--dkc-accent), transparent 88%) 0%, transparent 68%);
    filter: blur(28px);
    opacity: .75;
}

/* Preset separation */
.dkc-theme-cyber_red {
    --dkc-3d-backdrop-1: rgba(255, 0, 60, .20);
    --dkc-3d-backdrop-2: rgba(255, 106, 0, .12);
    --dkc-3d-horizon: #161012;
    --dkc-3d-floor: #262225;
}

.dkc-theme-clean_premium {
    --dkc-3d-backdrop-1: rgba(255,255,255,.12);
    --dkc-3d-backdrop-2: rgba(160,160,160,.09);
    --dkc-3d-horizon: #f0f0f2;
    --dkc-3d-floor: #dedee2;
}

.dkc-theme-neon_club {
    --dkc-accent: #00eaff;
    --dkc-accent-2: #9d35ff;
    --dkc-bg: #04020b;
    --dkc-grid: rgba(0,234,255,.20);
    --dkc-3d-backdrop-1: rgba(0, 234, 255, .24);
    --dkc-3d-backdrop-2: rgba(157, 53, 255, .22);
    --dkc-3d-horizon: #110b1d;
    --dkc-3d-floor: #1f1830;
}

.dkc-theme-neon_club .digikrom-config-3d::before {
    background:
        radial-gradient(circle at 50% 22%, rgba(0,234,255,.16), transparent 24%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, transparent 0 62%, rgba(157,53,255,.10) 100%);
}

.dkc-theme-anime_pop {
    --dkc-accent: #ff58b6;
    --dkc-accent-2: #51e8ff;
    --dkc-bg: #120b1f;
    --dkc-grid: rgba(255,88,182,.15);
    --dkc-3d-backdrop-1: rgba(255, 88, 182, .24);
    --dkc-3d-backdrop-2: rgba(81, 232, 255, .22);
    --dkc-3d-horizon: #271737;
    --dkc-3d-floor: #3a2349;
}

.dkc-theme-anime_pop .digikrom-config-3d::before {
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.07) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 26%, rgba(255,255,255,.05) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 18%, rgba(255,88,182,.18), transparent 24%),
        linear-gradient(180deg, transparent 0 60%, rgba(81,232,255,.10) 100%);
    background-size: 18px 18px, 24px 24px, auto, auto;
}

/* Also distinguish the editor board slightly for Anime Pop */
.dkc-theme-anime_pop .canvas-container-wrapper {
    background-size: auto, 28px 28px, 28px 28px, auto !important;
    box-shadow:
        inset 0 0 70px rgba(255,88,182,.06),
        0 0 calc(22px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 90%) !important;
}

@media (max-width: 1024px) {
    .dk-product-studio .digikrom-parts-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ========================================================================
   DIGIKROM Configurator v21.6.3
   Preview Transparency + Stable Controls
   ======================================================================== */

.dk-product-studio {
    --dkc-3d-bg-opacity: 1;
}

/* Keep preview background behind the model, never above it */
.dk-product-studio .digikrom-config-3d {
    position: relative !important;
    isolation: isolate;
}

.dk-product-studio .digikrom-config-3d canvas {
    position: relative;
    z-index: 2 !important;
    background: transparent !important;
}

.dk-product-studio .digikrom-config-3d::before,
.dk-product-studio .digikrom-config-3d::after {
    pointer-events: none;
    z-index: 0 !important;
}

/* Elementor-driven mode: let the right column inherit the section background */
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d {
    background: transparent !important;
}

.dk-product-studio.dkc-preview-transparent .digikrom-config-3d::before,
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d::after {
    display: none !important;
}

/* In preset mode keep the scene visible, but only under the model */
.dk-product-studio.dkc-preview-preset .digikrom-config-3d::before {
    opacity: var(--dkc-3d-bg-opacity) !important;
}

.dk-product-studio.dkc-preview-preset .digikrom-config-3d::after {
    opacity: calc(var(--dkc-3d-bg-opacity) * .75) !important;
}

/* Stable controls row: sliders stay visible and no longer cause layout jumps */
.dk-product-studio .digikrom-context-tools {
    display: flex !important;
    width: 100%;
    min-height: 52px;
}

.dk-product-studio .digikrom-text-tools {
    display: flex;
}

.dk-product-studio .digikrom-transform-tools,
.dk-product-studio .digikrom-text-tools {
    transition: opacity .18s ease;
}

.dk-product-studio .dkc-is-disabled {
    opacity: .42;
}

.dk-product-studio .digikrom-context-tools input[disabled],
.dk-product-studio .digikrom-context-tools select[disabled] {
    cursor: not-allowed;
}


/* ========================================================================
   DIGIKROM Configurator v21.6.4
   True Elementor Background Mode
   ======================================================================== */

/*
 * In v21.6.3 the WebGL scene became transparent, but the main wrapper still
 * painted its own background/pseudo layers across the entire configurator.
 * This mode makes the right 3D column truly transparent, so Elementor's
 * section/container background can show through.
 */

.dk-product-studio.dkc-preview-transparent {
    background: transparent !important;
}

/* Stop global wrapper overlays from covering the right-side Elementor background. */
.dk-product-studio.dkc-preview-transparent::before,
.dk-product-studio.dkc-preview-transparent::after {
    display: none !important;
}

/* Keep the editor side premium even when the right side is transparent. */
.dk-product-studio.dkc-preview-transparent > .digikrom-config-ui,
.dk-product-studio.dkc-preview-transparent .dkc-studio-frame > .digikrom-config-ui {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--dkc-accent), transparent 90%), transparent 32%),
        linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.90)),
        rgba(0,0,0,.84) !important;
    box-shadow:
        inset -18px 0 46px rgba(0,0,0,.35),
        0 0 calc(18px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 88%);
}

/* True transparent right side. */
.dk-product-studio.dkc-preview-transparent > .digikrom-config-3d,
.dk-product-studio.dkc-preview-transparent .dkc-studio-frame > .digikrom-config-3d {
    background: transparent !important;
    box-shadow: none !important;
}

/* Make sure no scene pseudo glow remains in transparent mode. */
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d::before,
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d::after {
    content: none !important;
    display: none !important;
}

/* Canvas must not paint any fallback background. */
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d canvas {
    background: transparent !important;
}

/* Border remains as a subtle studio frame, but not as a filled panel. */
.dk-product-studio.dkc-preview-transparent {
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 72%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 0 calc(16px * var(--dkc-glow-power)) color-mix(in srgb, var(--dkc-accent), transparent 88%) !important;
}

/* Branding overlay should remain readable on arbitrary Elementor backgrounds. */
.dk-product-studio.dkc-preview-transparent > .dkc-studio-branding {
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
        rgba(0,0,0,.56) !important;
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 64%) !important;
}

/*
 * Optional safety: if a theme/page-builder puts a background on nested Elementor
 * wrappers inside the widget, do not let our 3D column inherit a white panel.
 */
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d,
.dk-product-studio.dkc-preview-transparent .digikrom-config-3d *:not(canvas) {
    background-color: transparent;
}


/* ========================================================================
   DIGIKROM Configurator v21.7.0
   Drop Studio Flow / premium order finalization
   ======================================================================== */

.dk-product-studio .dkc-drop-modal {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background:
        radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--dkc-accent), transparent 82%), transparent 38%),
        rgba(0,0,0,.76) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dkc-drop-box {
    width: min(920px, 96%);
    max-height: 92%;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 56%);
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.028)),
        rgba(7,7,10,.94);
    color: rgba(255,255,255,.92);
    box-shadow:
        0 34px 110px rgba(0,0,0,.66),
        0 0 48px color-mix(in srgb, var(--dkc-accent), transparent 76%);
}

.dkc-drop-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.dkc-drop-steps span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: rgba(255,255,255,.46);
    background: rgba(0,0,0,.32);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dkc-drop-steps span.is-active {
    color: #050505;
    background: var(--dkc-accent);
}

.dkc-drop-steps span.is-done {
    color: var(--dkc-accent);
    background: rgba(0,0,0,.46);
}

.dkc-drop-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 30px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--dkc-accent), transparent 84%), transparent 42%),
        rgba(255,255,255,.025);
}

.dkc-drop-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--dkc-accent);
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dkc-drop-header h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1;
    letter-spacing: -.04em;
}

.dkc-drop-header p {
    max-width: 680px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.55;
}

.dkc-drop-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.dkc-drop-body {
    min-height: 320px;
    overflow: auto;
    padding: 26px 30px;
}

.dkc-drop-step,
.dkc-drop-success {
    display: none;
}

.dkc-drop-step.is-active,
.dkc-drop-success.is-active {
    display: block;
}

.dkc-drop-step h4,
.dkc-drop-success h4 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 24px;
    letter-spacing: -.02em;
}

.dkc-drop-step p,
.dkc-drop-success p {
    color: rgba(255,255,255,.68);
    line-height: 1.6;
}

.dkc-drop-preview-wrap {
    display: grid;
    place-items: center;
    min-height: 180px;
    margin: 16px 0;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
}

.dkc-drop-preview-wrap img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
}

.dkc-drop-step label {
    display: grid;
    gap: 7px;
    margin: 0 0 14px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dkc-drop-step input,
.dkc-drop-step textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 72%);
    border-radius: 14px;
    background: rgba(0,0,0,.42);
    color: #fff;
    outline: none;
    box-sizing: border-box;
}

.dkc-drop-step textarea {
    min-height: 100px;
    resize: vertical;
}

.dkc-drop-step input:focus,
.dkc-drop-step textarea:focus {
    border-color: var(--dkc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dkc-accent), transparent 82%);
}

.dkc-drop-summary-card {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
        rgba(0,0,0,.30);
}

.dkc-drop-summary-card span {
    color: rgba(255,255,255,.44);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.dkc-drop-summary-card strong {
    color: #fff;
    font-size: 15px;
}

.dkc-drop-status {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 16px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
}

.dkc-drop-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 30px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.32);
}

.dkc-drop-footer button {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 58%);
    background: rgba(0,0,0,.34);
    color: var(--dkc-accent);
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.dkc-drop-footer .dkc-drop-next,
.dkc-drop-footer .dkc-drop-submit,
.dkc-drop-footer .dkc-drop-close-final {
    background: var(--dkc-accent);
    color: #050505;
    border-color: var(--dkc-accent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--dkc-accent), transparent 64%);
}

.dkc-drop-footer button:disabled {
    opacity: .58;
    cursor: wait;
}

.dkc-success-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: 0 0 18px;
    border-radius: 999px;
    color: #050505;
    background: var(--dkc-accent);
    font-size: 38px;
    font-weight: 1000;
    box-shadow: 0 0 34px color-mix(in srgb, var(--dkc-accent), transparent 56%);
}

@media (max-width: 720px) {
    .dkc-drop-box {
        border-radius: 20px;
    }

    .dkc-drop-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .dkc-drop-header {
        padding: 22px 20px 18px;
    }

    .dkc-drop-body {
        padding: 22px 20px;
    }

    .dkc-drop-footer {
        padding: 16px 20px 20px;
        flex-direction: column;
    }

    .dkc-drop-footer button {
        width: 100%;
    }
}


/* ========================================================================
   DIGIKROM Configurator v21.7.1
   Drop Modal Readability Hotfix
   ------------------------------------------------------------------------
   Fixes conflicts with old modal/button styles that compressed the v21.7.0
   step flow into unreadable vertical columns.
   ======================================================================== */

.dk-product-studio .digikrom-order-modal.dkc-drop-modal {
    position: absolute !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.dk-product-studio .digikrom-order-modal.dkc-drop-modal[style*="flex"],
.dk-product-studio .digikrom-order-modal.dkc-drop-modal[style*="display: flex"] {
    display: flex !important;
}

/* The modal box must be a readable wide card, not a narrow inherited column. */
.dk-product-studio .dkc-drop-box {
    width: min(960px, calc(100% - 44px)) !important;
    max-width: 960px !important;
    min-width: min(720px, calc(100% - 44px)) !important;
    height: auto !important;
    max-height: calc(100% - 44px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(260px, 1fr) auto !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 28px !important;
}

/* Prevent any global button rule from making steps/buttons tall vertical pills. */
.dk-product-studio .dkc-drop-box *,
.dk-product-studio .dkc-drop-box *::before,
.dk-product-studio .dkc-drop-box *::after {
    box-sizing: border-box !important;
}

.dk-product-studio .dkc-drop-steps {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap: 1px !important;
    min-height: 46px !important;
}

.dk-product-studio .dkc-drop-steps span {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

.dk-product-studio .dkc-drop-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 0 !important;
}

.dk-product-studio .dkc-drop-header > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.dk-product-studio .dkc-drop-header h3,
.dk-product-studio .dkc-drop-header p,
.dk-product-studio .dkc-drop-kicker {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

.dk-product-studio .dkc-drop-close {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}

.dk-product-studio .dkc-drop-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: auto !important;
}

.dk-product-studio .dkc-drop-step,
.dk-product-studio .dkc-drop-success {
    width: 100% !important;
    max-width: 100% !important;
}

.dk-product-studio .dkc-drop-step.is-active,
.dk-product-studio .dkc-drop-success.is-active {
    display: block !important;
}

.dk-product-studio .dkc-drop-step h4,
.dk-product-studio .dkc-drop-step p,
.dk-product-studio .dkc-drop-success h4,
.dk-product-studio .dkc-drop-success p {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-align: left !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Forms: force normal readable rows. */
.dk-product-studio .dkc-drop-step label {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
}

.dk-product-studio .dkc-drop-step input,
.dk-product-studio .dkc-drop-step textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-align: left !important;
    line-height: 1.35 !important;
}

.dk-product-studio .dkc-drop-summary-card {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
}

.dk-product-studio .dkc-drop-summary-card span,
.dk-product-studio .dkc-drop-summary-card strong {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* Footer buttons must be normal horizontal controls. */
.dk-product-studio .dkc-drop-footer {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-height: 76px !important;
}

.dk-product-studio .dkc-drop-footer button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Make preview compact and safe. */
.dk-product-studio .dkc-drop-preview-wrap {
    min-height: 140px !important;
    max-height: 240px !important;
}

.dk-product-studio .dkc-drop-preview-wrap img {
    max-height: 200px !important;
}

/* Desktop inside shorter configurators: reduce vertical pressure. */
@media (min-width: 721px) {
    .dk-product-studio .dkc-drop-body {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

/* Tablet/mobile modal safety. */
@media (max-width: 720px) {
    .dk-product-studio .digikrom-order-modal.dkc-drop-modal {
        padding: 12px !important;
    }

    .dk-product-studio .dkc-drop-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 20px !important;
    }

    .dk-product-studio .dkc-drop-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
    }

    .dk-product-studio .dkc-drop-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: auto !important;
    }

    .dk-product-studio .dkc-drop-footer button {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ========================================================================
   DIGIKROM Configurator v21.7.2
   Drop Modal Actions Hotfix
   ======================================================================== */

.dk-product-studio .dkc-drop-header {
    min-height: 96px !important;
    display: flex !important;
    align-items: flex-start !important;
}

.dk-product-studio .dkc-drop-header > div,
.dk-product-studio .dkc-drop-kicker,
.dk-product-studio .dkc-drop-header h3,
.dk-product-studio .dkc-drop-header p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
}

.dk-product-studio .dkc-drop-kicker:empty::before {
    content: 'DK PRODUCT STUDIO';
}

.dk-product-studio .dkc-drop-header h3:empty::before {
    content: 'DK Limited Drop';
}

.dk-product-studio .dkc-drop-header p:empty::before {
    content: 'Finalizacja projektu personalizowanego produktu.';
}

.dk-product-studio .dkc-drop-close {
    position: relative !important;
    z-index: 40 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.dk-product-studio .dkc-drop-step {
    pointer-events: none;
}

.dk-product-studio .dkc-drop-step.is-active {
    pointer-events: auto;
}

.dk-product-studio .dkc-drop-footer {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

.dk-product-studio .dkc-drop-footer button {
    position: relative !important;
    z-index: 51 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.dk-product-studio .dkc-drop-close-final {
    display: inline-flex !important;
}

.dk-product-studio .dkc-drop-body {
    scrollbar-gutter: stable;
}


/* ========================================================================
   DIGIKROM Configurator v21.7.3
   Drop Summary Data Hotfix
   ======================================================================== */

.dk-product-studio .dkc-drop-summary-card strong:empty::before {
    content: '—';
    color: rgba(255,255,255,.46);
}

.dk-product-studio .dkc-drop-summary-card strong {
    min-height: 20px;
    display: block;
}


/* ========================================================================
   DIGIKROM Configurator v21.9.0
   Front Premium Polish
   ======================================================================== */

.dk-product-studio .digikrom-controls {
    display: grid !important;
    grid-template-columns: minmax(112px, 150px) 1fr !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 118px !important;
    padding: 16px 20px !important;
}

.dk-product-studio .digikrom-controls .digikrom-color-container {
    justify-self: start !important;
}

.dk-product-studio .digikrom-controls > div:not(.digikrom-color-container):not(.digikrom-context-tools),
.dk-product-studio .dkc-action-bar-v2190 > div:not(.digikrom-color-container):not(.digikrom-context-tools) {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.dk-product-studio .digikrom-controls .dkc-action-btn,
.dk-product-studio .digikrom-controls button.dkc-action-btn {
    min-width: 108px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 58%) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
        rgba(0,0,0,.42) !important;
    color: var(--dkc-accent) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 0 16px color-mix(in srgb, var(--dkc-accent), transparent 90%);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease !important;
}

.dk-product-studio .digikrom-controls .dkc-action-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 28%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 0 26px color-mix(in srgb, var(--dkc-accent), transparent 72%);
}

.dk-product-studio .digikrom-controls .dkc-action-photo,
.dk-product-studio .digikrom-controls .dkc-action-text {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--dkc-accent), #ffffff 7%), color-mix(in srgb, var(--dkc-accent), transparent 12%)) !important;
    color: #050505 !important;
    border-color: color-mix(in srgb, var(--dkc-accent), transparent 12%) !important;
}

.dk-product-studio .digikrom-controls .dkc-action-undo {
    color: rgba(255,255,255,.78) !important;
    border-color: rgba(255,255,255,.16) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
        rgba(20,23,28,.72) !important;
}

.dk-product-studio .digikrom-controls .dkc-action-delete {
    color: #fff !important;
    border-color: rgba(255, 45, 86, .62) !important;
    background:
        linear-gradient(135deg, rgba(255, 45, 86, .92), rgba(190, 0, 42, .86)) !important;
    box-shadow: 0 0 22px rgba(255,45,86,.24) !important;
}

.dk-product-studio .digikrom-controls .dkc-action-order {
    min-width: 148px !important;
    color: #050505 !important;
    border-color: #20db65 !important;
    background:
        linear-gradient(135deg, #34ef7b, #18b94d) !important;
    box-shadow: 0 0 26px rgba(32,219,101,.30) !important;
}

.dk-product-studio .digikrom-context-tools {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(235,250,255,.90) !important;
    border: 1px solid color-mix(in srgb, var(--dkc-accent), transparent 82%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.40);
}

.dk-product-studio .digikrom-context-tools input[type="range"] {
    accent-color: var(--dkc-accent);
}

.dk-product-studio .digikrom-text-tools select {
    min-width: 132px !important;
    border-radius: 9px !important;
}

/* The 3D preview should show only the clean fabric texture.
   Selection handles remain in 2D because Fabric upperCanvas stays visible only there. */
.dk-product-studio .digikrom-config-3d .upper-canvas,
.dk-product-studio .digikrom-config-3d .canvas-container,
.dk-product-studio .digikrom-config-3d [class*="canvas-container"] {
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    .dk-product-studio .digikrom-controls {
        grid-template-columns: 1fr !important;
    }

    .dk-product-studio .digikrom-controls .digikrom-color-container {
        justify-self: center !important;
    }

    .dk-product-studio .digikrom-controls > div:not(.digikrom-color-container):not(.digikrom-context-tools),
    .dk-product-studio .dkc-action-bar-v2190 > div:not(.digikrom-color-container):not(.digikrom-context-tools) {
        justify-content: center !important;
    }
}

@media (max-width: 640px) {
    .dk-product-studio .digikrom-controls .dkc-action-btn,
    .dk-product-studio .digikrom-controls button.dkc-action-btn {
        min-width: calc(50% - 8px) !important;
        flex: 1 1 calc(50% - 8px) !important;
    }

    .dk-product-studio .digikrom-controls .dkc-action-order {
        flex-basis: 100% !important;
        min-width: 100% !important;
    }
}


/* ========================================================================
   DIGIKROM Configurator v21.9.1
   Base/Plisa Sync Hotfix for models without separate plisa/neck material
   ======================================================================== */

.dk-product-studio .dkc-sync-neck-to-base .digikrom-color-container {
    position: relative;
}

.dk-product-studio .dkc-sync-neck-to-base .digikrom-color-container::after {
    content: 'SYNC';
    position: absolute;
    right: 7px;
    top: 7px;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .12em;
    color: var(--dkc-accent);
    opacity: .72;
    pointer-events: none;
}

.dk-product-studio .dkc-sync-neck-to-base .digikrom-color-container input[type="number"]:nth-of-type(n+5),
.dk-product-studio .dkc-sync-neck-to-base .digikrom-color-container input[type="color"]:nth-of-type(n+2) {
    opacity: .76;
}