/* =========================================================================
   BRICKONAS Creator — single-screen editor
   =========================================================================
   Deliberately NOT the layout of the tool we took the idea from. Theirs puts a
   horizontal tab strip on top of the control panel and floats the zoom in a pill
   at the bottom centre. Ours uses a vertical tool rail on the far left (the
   pattern people know from drawing apps), keeps the header asymmetric — identity
   left, size/price/action right — and docks the canvas controls into a bar at
   the top of the stage. What we did keep is the *principle*: the mosaic never
   leaves the screen, and the price is always visible.

   The BRICKONAS signature is the stud: active states carry one, cards are shaped
   like plates, and the stage sits on a stud grid.

   Scoped under body.bk-creator so the classic wizard is untouched.
   ========================================================================= */

body.bk-creator {
    --c-bg:       #F2F6F1;
    --c-panel:    #FFFFFF;
    --c-line:     #E3EAE2;
    --c-line-2:   #D3DED2;
    --c-ink:      var(--bk-charcoal, #2A352B);
    --c-ink-soft: var(--bk-dark-gray, #5A6E5C);
    --c-accent:   var(--bk-green-primary, #2E7D32);
    --c-accent-d: var(--bk-green-dark, #1B5E20);
    --c-gold:     #F2B705;
    --c-rail:     78px;
    --c-panelw:   clamp(360px, 28vw, 460px);
    --c-head:     66px;
    margin: 0; background: var(--c-bg); overflow: hidden;
}
/* #loading-overlay is the app's UNIVERSAL busy indicator -- every AI operation
   and every heavy compute raises it. Hiding it along with the old wizard meant
   that inside this editor an AI run (model download, background removal, a chat
   edit) showed nothing at all for several seconds. It stays. */
body.bk-creator > *:not(.bk-cr-root):not(.bk-cr-attic):not(#loading-overlay) { display: none !important; }
/* ...but ONLY for the AI runs, which have no substitute here. For mosaic work
   and the PDF this editor draws its own wait on the picture, and letting the
   full-screen one through as well produced a white flash on every size change:
   a heavy op raises it with `immediate`, i.e. instantly at full opacity, and it
   is a viewport-sized pane of rgba(244,249,244,.66) with a backdrop blur. */
body.bk-creator #loading-overlay:not(.bk-ai-raised) { display: none !important; }
.bk-cr-attic { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.bk-cr-root {
    position: fixed; inset: 0;
    display: grid; grid-template-rows: var(--c-head) 1fr;
    font-family: var(--bk-font-body, 'Nunito', system-ui, sans-serif);
    color: var(--c-ink);
}

/* ---------------------------------------------------------------- header */
/* This is the ONLY header -- the shop overlay no longer draws one of its own.
   It was reported as cramped, and it was: two 50 px strips stacked, each with
   its content pressed against both edges. One 66 px bar with 13 px of air above
   and below the controls instead. */
.bk-cr-head {
    display: flex; align-items: center; gap: 12px;
    padding: 0 18px 0 10px;
    background: var(--c-panel);
    border-bottom: 1px solid var(--c-line);
}
.bk-cr-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    background: none; border: 0; border-radius: 10px;
    cursor: pointer; font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--c-ink-soft);
}
.bk-cr-back:hover { background: var(--c-bg); color: var(--c-ink); }
.bk-cr-wordmark b { font-weight: 600; }
.bk-cr-wordmark {
    display: flex; align-items: center; gap: 8px; margin-right: 6px;
    font-family: var(--bk-font-heading, 'Fredoka', sans-serif);
    font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.bk-cr-wordmark::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-accent); flex: 0 0 9px;
}

/* Chips sit on the right, next to the action — not centred like the reference. */
.bk-cr-meta { margin-left: auto; display: flex; align-items: stretch; gap: 8px; }
.bk-cr-chip {
    display: grid; align-content: center; gap: 2px;
    padding: 7px 14px; border-radius: 10px;
    background: var(--c-bg); border: 1px solid var(--c-line);
    line-height: 1.15;
}
.bk-cr-chip u { text-decoration: none; font-size: .63rem; font-weight: 700; letter-spacing: .06em;
                text-transform: uppercase; color: var(--c-ink-soft); }
.bk-cr-chip b { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bk-cr-chip--price { background: #EAF4EA; border-color: #CBE3CC; }
.bk-cr-chip--price b { color: var(--c-accent-d); }

.bk-cr-finish {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--c-accent); color: #fff; border: 0;
    border-radius: 11px; padding: 11px 20px; cursor: pointer;
    font: inherit; font-weight: 800;
    /* No bevel: the shop's own CTA (.bk-size-cta on page 264) is flat. */
    transition: background .18s ease;
}
.bk-cr-finish:hover { background: var(--c-accent-d); }

/* ------------------------------------------------------------------ body */
.bk-cr-main {
    display: grid; min-height: 0;
    grid-template-columns: var(--c-rail) var(--c-panelw) 7px 1fr;
    grid-template-areas: "rail side grip stage";
}
.bk-cr-rail { grid-area: rail; }
.bk-cr-side { grid-area: side; }
.bk-cr-grip { grid-area: grip; }
.bk-cr-stage { grid-area: stage; }

/* ------------------------------------------------------------ drag grip */
.bk-cr-grip {
    position: relative; cursor: col-resize; background: var(--c-line);
    border: 0; padding: 0; touch-action: none;
}
.bk-cr-grip::before {
    content: ""; position: absolute; inset: 0 -4px; /* a 15 px hit area on a 7 px line */
}
.bk-cr-grip::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 34px; border-radius: 2px; background: var(--c-line-2);
}
.bk-cr-grip:hover, .bk-cr-grip:focus-visible { background: #CBE3CC; outline: none; }
.bk-cr-grip:focus-visible::after { background: var(--c-accent); height: 54px; }
body.bk-cr-dragging { cursor: col-resize; user-select: none; }
body.bk-cr-dragging .bk-cr-view { pointer-events: none; }

/* The sheet handle is a phone affordance; on a desktop the grip does the job. */
.bk-cr-grab { display: none; }

/* ------------------------------------------------------- vertical rail */
.bk-cr-rail {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 8px; overflow-y: auto;
    background: var(--c-panel); border-right: 1px solid var(--c-line);
    scrollbar-width: none;
}
.bk-cr-rail::-webkit-scrollbar { display: none; }
.bk-cr-tab {
    position: relative;
    display: grid; justify-items: center; gap: 4px;
    padding: 9px 2px 8px; border: 0; border-radius: 12px;
    background: none; cursor: pointer; font: inherit;
    font-size: .66rem; font-weight: 700; color: var(--c-ink-soft);
    transition: background .16s ease, color .16s ease;
}
.bk-cr-tab svg { width: 21px; height: 21px; stroke-width: 1.7; }
.bk-cr-tab:hover { background: var(--c-bg); color: var(--c-ink); }
.bk-cr-tab[aria-selected="true"] { background: var(--tab-soft, #EAF4EA); color: var(--tab-accent, var(--c-accent)); }
/* the stud: our marker for "you are here" */
.bk-cr-tab[aria-selected="true"]::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tab-accent, var(--c-accent));
}

/* ----------------------------------------------------------- panel body */
.bk-cr-side {
    background: var(--c-panel); border-right: 1px solid var(--c-line);
    display: grid; grid-template-rows: 1fr auto; min-height: 0; overflow: hidden;
}
.bk-cr-panels { padding: 16px 18px 34px; overflow-y: auto; min-height: 0; }

/* Price and "Bestellen" stay in view while the size list scrolls above them. */
.bk-cr-foot { border-top: 1px solid var(--c-line); background: #FAFCFA; max-height: min(46vh, 430px); overflow-y: auto; }
.bk-cr-foot:empty { display: none; }
.bk-cr-panel[hidden] { display: none; }

.bk-cr-ptitle {
    display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
    font-family: var(--bk-font-heading, 'Fredoka', sans-serif);
    font-size: 1.16rem; font-weight: 600;
}
.bk-cr-ptitle::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--tab-accent, var(--c-accent)); flex: 0 0 9px;
}
.bk-cr-psub { margin: 0 0 15px; font-size: .79rem; line-height: 1.45; color: var(--c-ink-soft); }
.bk-cr-hint { margin: 12px 0 0; font-size: .79rem; line-height: 1.5; color: var(--c-ink-soft); }
.bk-cr-undo {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    background: none; border: 1px solid var(--c-line); cursor: pointer;
    font: inherit; font-size: .73rem; font-weight: 700; color: var(--c-ink-soft);
    padding: 6px 8px; border-radius: 8px; white-space: nowrap;
}
.bk-cr-undo:hover { border-color: var(--c-line-2); color: var(--c-ink); background: var(--c-bg); }

/* --------------------------------------------------- format + sizes */
.bk-cr-shapes { display: flex; gap: 6px; margin-bottom: 14px; }
.bk-cr-shape {
    flex: 1; display: grid; justify-items: center; gap: 4px;
    padding: 8px 3px; border: 1.5px solid var(--c-line); border-radius: 10px;
    background: var(--c-panel); cursor: pointer; font: inherit;
    font-size: .72rem; font-weight: 700; color: var(--c-ink-soft);
}
.bk-cr-shape svg { width: 17px; height: 17px; }
.bk-cr-shape[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent-d); background: #EAF4EA; }

/* Size cards read as plates: proportional preview, stacked facts, price last. */
/* iOS Safari paints the text of a <button> without its own colour system blue (desktop
   Chrome: black) -- the size list's "25,6 × 25,6 cm" came out blue on iPhones. */
.bk-cr-size-card, .bk-style-tile, .mosaic-example-card { color: var(--c-ink, #2A352B); }
.bk-cr-sizes { display: grid; gap: 8px; }
.bk-cr-size-card {
    display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 13px;
    text-align: left; background: var(--c-panel);
    border: 1.5px solid var(--c-line); border-radius: 11px;
    padding: 9px 11px; cursor: pointer; font: inherit;
    transition: border-color .16s ease, background .16s ease;
}
.bk-cr-size-card:hover { border-color: var(--c-line-2); background: #FAFCFA; }
.bk-cr-size-card[aria-pressed="true"] { border-color: var(--c-accent); background: #EAF4EA; }
/* The icon is the plate layout, drawn as a grid: the gap lets the container
   colour show through as the seams between plates, so it stays crisp at any
   size and matches the "n Platten" next to it. */
.bk-cr-prop { display: grid; place-items: center; height: 38px; }
.bk-cr-plate {
    display: grid; gap: 1px; padding: 1px; border-radius: 3px;
    background: #A9C3AB; overflow: hidden;
}
.bk-cr-plate i { display: block; background: #E4EDE4; border-radius: .5px; }
.bk-cr-size-card[aria-pressed="true"] .bk-cr-plate { background: var(--c-accent); }
.bk-cr-size-card[aria-pressed="true"] .bk-cr-plate i { background: #CFE5D0; }
.bk-cr-size-txt { display: block; min-width: 0; }
.bk-cr-size-top { display: flex; align-items: baseline; gap: 10px; }
.bk-cr-size-cm { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.bk-cr-size-sub { display: block; font-size: .76rem; line-height: 1.35; color: var(--c-ink-soft); margin-top: 3px; }
.bk-cr-size-price { margin-left: auto; font-weight: 800; color: var(--c-accent-d); font-size: .95rem; white-space: nowrap; }

/* ------------------------------------------------------------- sliders */
.bk-cr-field { margin-bottom: 15px; }
.bk-cr-flabel { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .83rem; font-weight: 700; }
.bk-cr-fval { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-ink-soft); font-weight: 800; font-size: .8rem; }
.bk-cr-row { display: grid; grid-template-columns: 30px 1fr 30px; gap: 7px; align-items: center; }
.bk-cr-step {
    width: 30px; height: 30px; border-radius: 9px;
    border: 1.5px solid var(--c-line); background: var(--c-panel);
    cursor: pointer; font-size: 1rem; font-weight: 800; line-height: 1; color: var(--c-ink-soft);
}
.bk-cr-step:hover { border-color: var(--tab-accent, var(--c-accent)); color: var(--tab-accent, var(--c-accent)); }
.bk-cr-root input[type="range"] { width: 100%; accent-color: var(--tab-accent, var(--c-accent)); }

/* ------------------------------------------------------ colour swatches */
.bk-cr-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bk-cr-sw {
    position: relative; aspect-ratio: 1; border-radius: 8px; cursor: pointer;
    border: 1.5px solid rgba(0,0,0,.14); padding: 0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.09);
}
.bk-cr-sw::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 34%; height: 34%; border-radius: 50%;
    background: rgba(255,255,255,.32); box-shadow: inset 0 1px 1px rgba(0,0,0,.16);
}
.bk-cr-sw[aria-pressed="true"] { outline: 2.5px solid var(--tab-accent, var(--c-accent)); outline-offset: 1.5px; }
.bk-cr-swcount { font-size: .72rem; color: var(--c-ink-soft); margin-top: 9px; }

/* ---------------------------------------------------------- tool grid */
.bk-cr-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 15px; }
.bk-cr-tool {
    display: grid; justify-items: center; gap: 5px;
    padding: 10px 3px; border: 1.5px solid var(--c-line); border-radius: 10px;
    background: var(--c-panel); cursor: pointer; font: inherit;
    font-size: .7rem; font-weight: 700; color: var(--c-ink-soft);
}
.bk-cr-tool svg { width: 18px; height: 18px; }
.bk-cr-tool[aria-pressed="true"] { border-color: var(--tab-accent); color: var(--tab-accent); background: #FDF6E6; }

/* ------------------------------------------------------------- stage */
.bk-cr-stage {
    position: relative; min-height: 0; display: grid;
    grid-template-rows: auto 1fr;
    background:
        radial-gradient(circle, #DCE6DB 1.15px, transparent 1.15px) 0 0 / 17px 17px,
        var(--c-bg);
    overflow: hidden;
}
/* Canvas controls dock into a bar at the TOP of the stage, not a floating pill. */
.bk-cr-stagebar {
    /* A toolbar never wraps: squeezed, "100 %" broke across two lines and
       "Neu berechnen" turned the bar two rows tall. It scrolls sideways
       instead -- at every width, not just on narrow phones. */
    display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    padding: 8px 14px;
    background: rgba(255,255,255,.82);
    border-bottom: 1px solid var(--c-line);
    backdrop-filter: blur(5px);
    font-size: .78rem; font-weight: 700; color: var(--c-ink-soft);
}
.bk-cr-stagebar::-webkit-scrollbar { display: none; }
.bk-cr-stagebar > * { flex: 0 0 auto; white-space: nowrap; }
.bk-cr-stagebar input[type="range"] { width: 130px; }
.bk-cr-stagebar button {
    background: var(--c-panel); border: 1px solid var(--c-line); color: var(--c-ink-soft);
    border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 700;
}
.bk-cr-stagebar button:hover { border-color: var(--c-line-2); color: var(--c-ink); }
.bk-cr-stagebar .bk-cr-spacer { margin-left: auto; }
.bk-cr-view { overflow: auto; display: grid; place-items: center; padding: 22px; min-height: 0; }
.bk-cr-view canvas, .bk-cr-view img { border-radius: 8px; background: #fff; }
/* Fit the (large) display canvas to the stage; zoom takes it beyond 100 %. */
/* max-height:100% would resolve against an auto-height parent and do nothing,
   so cap against the viewport minus header, stage bar and padding. */
.bk-cr-view canvas[id$="-upscaled"] {
    max-width: 100%;
    max-height: max(260px, calc(100vh - 190px));
    width: auto; height: auto;
}
.bk-cr-view .mosaic-canvas-area { max-width: 100%; margin-bottom: 0 !important; }
/* Each area carries a small working canvas next to the displayed one. */
.bk-cr-view canvas:not([id$="-upscaled"]) { display: none !important; }
.bk-cr-view .mosaic-canvas-area { box-shadow: 0 8px 30px rgba(26,42,27,.14); border-radius: 10px; }

.bk-cr-busy {
    display: none; align-items: center; gap: 8px;
    color: var(--c-accent-d); font-weight: 800; font-size: .78rem;
}
.bk-cr-busy.on { display: inline-flex; }
.bk-cr-busy::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%;
    border: 2.5px solid #CBE3CC; border-top-color: var(--c-accent);
    animation: bkspin .8s linear infinite;
}
@keyframes bkspin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------- responsive */
/* ====================================================== touch sizing =======
   Finger sizes depend on the INPUT, not on the layout: these apply on a phone
   in either orientation, including the landscape case below that keeps the
   side-by-side arrangement. Apple and Google both put the minimum target at
   44-48 px. */
@media (max-width: 940px) {
    /* The way out must not be the smallest thing on screen. */
    .bk-cr-back { width: 44px; height: 44px; flex: 0 0 44px; }

    /* The stage bar's buttons measured 30-33 px high. */
    .bk-cr-stagebar button { min-height: 44px; padding: 8px 14px; }
    .bk-cr-undo, body.bk-creator .bk-ai-reset { min-height: 44px !important; }

    .bk-cr-tab { min-height: 54px; font-size: .72rem; }
    .bk-cr-tab svg { width: 23px; height: 23px; }
    .bk-cr-shape { min-height: 52px; font-size: .8rem; }
    .bk-cr-sw { min-height: 44px; }
    .bk-cr-step { width: 44px; height: 44px; }
    .bk-cr-row { grid-template-columns: 44px 1fr 44px; }
    .bk-cr-root input[type="range"] { height: 40px; }
    .bk-cr-psub, .bk-cr-hint, .bk-cr-note { font-size: .88rem; }
    .bk-cr-panels { padding: 14px 16px 22px; }
    .bk-cr-finish { padding: 11px 15px; }
    .bk-cr-wordmark small { display: none; }
}

/* ------------------------------------------------------------ phone layout
   The picture is the default state and gets the whole screen. A tool opens a
   sheet only as tall as its content needs; it is dismissed explicitly, and the
   order card gets a sheet of its own instead of sitting under the controls for
   ever. The tool bar lives at the BOTTOM, in thumb reach.

   The version before this kept the panel permanently open at 44vh and the order
   footer inside it: 221 px of a 614 px sheet went to a price the customer only
   needs at the end, and the mosaic never got more than a third of the screen. */
/* The stacked layout needs HEIGHT, not just a narrow screen. A phone held
   sideways (measured 844x390) left the picture 110 px and the sheet 140 px --
   neither usable. Below 560 px of height the side-by-side arrangement is the
   right one: such a screen is short but wide. */
@media (max-width: 940px) and (min-height: 560px) {
    body.bk-creator { --c-rail: auto; --c-panelw: 100% !important; }
    .bk-cr-main {
        grid-template-columns: 1fr;
        /* minmax(0, 1fr), not 1fr: a plain fr track keeps an automatic minimum
           the size of its content, so the picture would refuse to shrink and
           the sheet could never open. */
        grid-template-rows: minmax(0, 1fr) auto auto;
        grid-template-areas: "stage" "side" "rail";
    }
    .bk-cr-grip { display: none; }

    .bk-cr-stage { min-height: 0; overflow: hidden; }
    .bk-cr-view { min-height: 0; padding: 10px; }
    .bk-cr-view canvas[id$="-upscaled"] { max-height: 100%; object-fit: contain; }

    /* ---- the sheet: closed by default, as tall as it needs when open ---- */
    .bk-cr-side {
        height: 0; overflow: hidden; border-right: 0; border-top: 0;
        /* the MIDDLE row takes the slack: with three auto rows a grid stretches
           them all, which pulled the sheet header apart in full-height mode */
        grid-template-rows: auto 1fr auto;
    }
    body.bk-cr-sheet .bk-cr-side,
    body.bk-cr-order .bk-cr-side {
        height: auto;
        /* 250 px of reserve left only 110 px of picture on a 640 px phone;
           290 px keeps 150 px there and changes nothing on a tall device,
           where the 62vh cap is the binding one anyway. */
        max-height: min(62vh, calc(100vh - 290px));
        max-height: min(62vh, calc(100dvh - 290px));
        border-top: 1px solid var(--c-line);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 26px rgba(26,42,27,.13);
    }
    body.bk-cr-order .bk-cr-panels { display: none; }
    .bk-cr-foot { display: none; max-height: none; }
    body.bk-cr-order .bk-cr-foot { display: block; }

    .bk-cr-grab {
        display: none; position: relative; align-items: center; justify-content: flex-end;
        /* room on the left for the height toggle, which is absolutely placed
           there -- without it the arrow sat on top of the panel title */
        width: 100%; min-height: 48px; padding: 12px 16px 8px 58px;
        background: none; border: 0; border-bottom: 1px solid var(--c-line);
        cursor: pointer; font: inherit; font-size: .88rem; font-weight: 800;
        color: var(--c-accent-d);
    }
    body.bk-cr-sheet .bk-cr-grab, body.bk-cr-order .bk-cr-grab { display: flex; }

    /* Full height: the picture steps aside entirely and the tool gets the
       screen. The rail stays, so the customer can still switch tools and get
       back. */
    body.bk-cr-full .bk-cr-main { grid-template-rows: 0 1fr auto; }
    body.bk-cr-full .bk-cr-side { height: auto !important; max-height: none !important; }
    body.bk-cr-full .bk-cr-stage { display: none; }

    .bk-cr-grow2 {
        position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
        display: grid; place-items: center; width: 44px; height: 44px;
        background: none; border: 0; border-radius: 10px; cursor: pointer;
        color: var(--c-ink-soft); font-size: 1rem; line-height: 1;
    }
    .bk-cr-grow2:hover { background: var(--c-bg); }
    .bk-cr-grab { position: relative; }
    .bk-cr-grab i {
        position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 42px; height: 4px; border-radius: 2px; background: var(--c-line-2);
    }
    .bk-cr-grab span::after { content: " \2713"; }
    .bk-cr-grabtitle {
        margin-right: auto;
        font-family: var(--bk-font-heading, 'Fredoka', sans-serif);
        font-size: 1.05rem; font-weight: 600; color: var(--c-ink);
    }
    /* the sheet header says it now */
    body.bk-cr-sheet .bk-cr-panel:not([hidden]) > .bk-cr-ptitle { display: none; }

    /* The busy state already sits ON the picture; in the bar it only got cut
       off at the right edge. */
    .bk-cr-stagebar .bk-cr-busy { display: none !important; }

    /* ---- sizes as a swipe strip, not a tall list ---- */
    .bk-cr-sizes {
        display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 8px;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .bk-cr-sizes::-webkit-scrollbar { display: none; }
    .bk-cr-size-card {
        /* 258 px left the longest pair ("115,2 x 153,6 cm" + "691,00 EUR")
           with the whole 10 px gap eaten: 110 + 61 + 10 against 176 px of
           text width. Wider card, wider gap. */
        flex: 0 0 286px; scroll-snap-align: start;
        grid-template-columns: 42px 1fr; padding: 11px 13px; min-height: 62px;
    }
    .bk-cr-size-top { gap: 16px; }
    /* Nothing here may wrap -- at 224 px the price dropped onto its own line
       and the plate/stud line onto a third, and the strip lost its rhythm. */
    .bk-cr-size-top { flex-wrap: nowrap; }
    .bk-cr-size-cm, .bk-cr-size-price { font-size: .92rem; }
    .bk-cr-size-sub { font-size: .74rem; white-space: nowrap; }

    /* ---- tool bar at the bottom, in thumb reach ---- */
    .bk-cr-rail {
        flex-direction: row; overflow-x: auto; gap: 2px;
        border-right: 0; border-top: 1px solid var(--c-line);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .bk-cr-tab { flex: 1 0 auto; min-width: 62px; min-height: 54px; font-size: .72rem; }
    .bk-cr-tab svg { width: 23px; height: 23px; }
    .bk-cr-tab[aria-selected="true"]::after { bottom: 1px; }

    /* ---- readable and tappable: nothing under 14 px, no target under 48 px ---- */
    .bk-cr-panels { padding: 14px 16px 22px; }
    .bk-cr-psub, .bk-cr-hint, .bk-cr-note { font-size: .88rem; }
    .bk-cr-shape { min-height: 52px; font-size: .8rem; }
    .bk-cr-sw { min-height: 44px; }
    .bk-cr-step { width: 40px; height: 40px; }
    .bk-cr-row { grid-template-columns: 40px 1fr 40px; }
    .bk-cr-root input[type="range"] { height: 34px; }
    .bk-cr-undo { min-height: 40px; font-size: .82rem; }
    /* the sheet is content-sized, so here the log keeps a sensible fixed window */
    body.bk-creator .bk-cr-panel[data-tab="ai"] { min-height: 0; }
    body.bk-creator .bk-ai-chat-log { min-height: 150px; max-height: clamp(180px, 30vh, 300px); }

    .bk-cr-wordmark small { display: none; }
    .bk-cr-finish { padding: 11px 15px; }
}

/* ------------------------------------------------------- phone, sideways ---
   Short and wide: the side-by-side layout applies (see above), but it still has
   to give the picture room. The header and the rail shrink, and the column is
   capped by viewport WIDTH so a 667 px screen does not hand 360 px to the
   controls. */
@media (max-width: 940px) and (max-height: 559px) {
    body.bk-creator {
        --c-head: 54px;
        --c-rail: 66px;
        --c-panelw: clamp(260px, 40vw, 380px);
    }
    .bk-cr-tab { min-height: 46px; padding: 6px 2px 5px; }
    .bk-cr-tab svg { width: 20px; height: 20px; }
    .bk-cr-stagebar { padding: 5px 10px; }
    .bk-cr-stagebar button { min-height: 38px; }
    .bk-cr-panels { padding: 12px 14px 18px; }
    /* the order footer would eat a short panel; its notice can go */
    .bk-cr-foot .mosaic-order-hint { display: none; }
}

/* Narrow phones: measured at 390 px, the header wrapped "Mosaik-Editor" onto
   two lines, broke "199,00 EUR" mid-value and pushed "Fertig" off the right
   edge, while the stage bar ran past it entirely. Both bars are now single
   rows that never wrap; the stage bar scrolls sideways instead. */
@media (max-width: 620px) {
    .bk-cr-head { gap: 8px; padding: 0 8px; }
    .bk-cr-wordmark { font-size: .98rem; margin-right: 0; }
    .bk-cr-wordmark b { display: none; }
    .bk-cr-back { padding: 10px 12px; }
    .bk-cr-meta { margin-left: auto; }
    .bk-cr-chip { flex: 0 0 auto; padding: 5px 10px; }
    .bk-cr-chip b { white-space: nowrap; font-size: .9rem; }
    .bk-cr-finish { flex: 0 0 auto; padding: 11px 15px; font-size: .92rem; }

    .bk-cr-stagebar { gap: 9px; padding: 7px 12px; }
    .bk-cr-stagebar input[type="range"] { width: 96px; }
    .bk-cr-stagebar .bk-cr-spacer { margin-left: 0; }

    .bk-cr-chip:not(.bk-cr-chip--price) { display: none; }

    /* The order footer took 380 of the sheet's 614 px, leaving 230 px for the
       controls the customer actually came for. The stud/piece chips repeat what
       the size list and the header chip already say, so on a phone the footer is
       one row: price, then the button. */
    .bk-cr-foot .mosaic-product-card { padding: 12px 16px 16px; }
    /* the order sheet has the room, so the full card is shown there */
    .bk-cr-foot .mosaic-product-meta { display: flex; margin: 0 0 10px; }
    .bk-cr-foot .mosaic-order-hint { font-size: .76rem !important; }
    .bk-cr-foot .mosaic-add-to-cart-btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
    .bk-cr-foot .mosaic-product-price { font-size: 1.25rem; }
    .bk-cr-foot .mosaic-order-hint { margin-top: 8px; font-size: .7rem; line-height: 1.35; }
}

/* --------------------------------------------------- busy overlay -------
   Everything recomputes automatically, so the only thing the customer needs
   is reassurance that the roughly two-second wait is work, not a freeze. The
   message sits ON the picture, where the change is expected. */
.bk-cr-view { position: relative; }
/* The mosaic canvas carries the paintbrush handlers, and they were live on
   every tab: on a touch screen that meant a swipe painted studs instead of
   scrolling the picture. Only the Malen tab hands the canvas its events back;
   everywhere else the gesture reaches the scroll container underneath. */
body.bk-creator .bk-cr-view canvas[id$="-upscaled"] { pointer-events: none; }
body.bk-creator.bk-cr-paint .bk-cr-view canvas[id$="-upscaled"] { pointer-events: auto; }
.bk-cr-view { -webkit-overflow-scrolling: touch; }
.bk-cr-view.is-stale canvas[id$="-upscaled"] { filter: grayscale(.55) opacity(.42); }
.bk-cr-stale {
    position: absolute; inset: 0; display: grid; place-items: center;
    pointer-events: none; padding: 20px;
}
.bk-cr-stale[hidden] { display: none; }
/* the PDF wait sits above the recompute wait -- it is the longer of the two */
.bk-cr-stale--pdf { z-index: 3; }
.bk-cr-bar {
    height: 7px; margin: 13px 0 0; border-radius: 4px;
    background: #E3EAE2; overflow: hidden;
}
.bk-cr-bar i {
    display: block; height: 100%; width: 0;
    background: var(--c-accent); border-radius: 4px;
    transition: width .25s ease;
}
.bk-cr-pdf-warn { margin: 9px 0 0; font-size: .74rem; color: var(--c-ink-soft); }
.bk-cr-stale-card {
    pointer-events: auto; text-align: center; max-width: 330px;
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: 14px; padding: 20px 22px;
    box-shadow: 0 12px 34px rgba(26,42,27,.18);
}
/* The PDF card's text changes ~1300 times per order ("Platte 11 von 36 · Detail 8/9 · 31 %").
   Sized by its content, the card got a few px wider or narrower on every update and
   visibly flickered. Fixed width, digits of equal width, room for two lines. */
.bk-cr-stale--pdf .bk-cr-stale-card { width: min(330px, 100%); box-sizing: border-box; }
.bk-cr-stale--pdf #bk-cr-pdf-sub { font-variant-numeric: tabular-nums; min-height: 3em; }
/* two fixed lines (see index.js). Bootstrap makes this border-box, so the minimum
   includes padding (11 + 14) and border (2): 2 lines x 1.45 = 2.9em. */
body.bk-creator #mosaic-order-status.bk-sending {
    font-variant-numeric: tabular-nums; white-space: pre-line;
    min-height: calc(2.9em + 27px);
}
.bk-cr-stale-card b { display: block; font-family: var(--bk-font-heading,'Fredoka',sans-serif);
    font-size: 1.04rem; font-weight: 600; margin-bottom: 5px; }
.bk-cr-stale-card p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--c-ink-soft); }
.bk-cr-spinner {
    display: block; width: 28px; height: 28px; margin: 0 auto 12px;
    border-radius: 50%; border: 3px solid #CBE3CC; border-top-color: var(--c-accent);
    animation: bkspin .8s linear infinite;
}
.bk-cr-stale-go {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-accent); color: #fff; border: 0;
    border-radius: 11px; padding: 11px 20px; cursor: pointer;
    font: inherit; font-weight: 800; box-shadow: 0 2px 0 var(--c-accent-d);
}
.bk-cr-stale-go:hover { background: #35913A; }
.bk-cr-stale-go:active { transform: translateY(2px); box-shadow: none; }

/* --------------------------------------------------------- crop tools --- */
.bk-cr-cropbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.bk-cr-cropbtn {
    display: grid; justify-items: center; gap: 5px;
    padding: 10px 4px; border: 1.5px solid var(--c-line); border-radius: 10px;
    background: var(--c-panel); cursor: pointer; font: inherit;
    font-size: .74rem; font-weight: 700; color: var(--c-ink-soft);
}
.bk-cr-cropbtn:hover { border-color: var(--c-accent); color: var(--c-accent-d); }
.bk-cr-cropbtn svg { width: 17px; height: 17px; }
.bk-cr-primary {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--c-accent); color: #fff; border: 0; border-radius: 11px;
    padding: 12px 18px; cursor: pointer; font: inherit; font-weight: 800;
    box-shadow: 0 2px 0 var(--c-accent-d);
}
.bk-cr-primary:hover { background: #35913A; }
.bk-cr-primary:active { transform: translateY(2px); box-shadow: none; }
.bk-cr-note {
    margin: 0 0 10px; padding: 8px 11px; border-radius: 10px;
    background: #EAF4EA; border: 1px solid #CBE3CC;
    font-size: .77rem; line-height: 1.45; color: #23561F;
}

/* ------------------------------------------------- embedded in the shop ---
   On brickonas.info the configurator lives in an iframe whose height the parent
   page derives from the CONTENT height. A position:fixed editor has virtually no
   content height, so the iframe would collapse to its 600 px minimum and squash
   the editor. Inside the frame (the app sets html.bk-embedded itself) lay the
   editor out normally with a definite height instead. */
html.bk-embedded body.bk-creator { overflow: visible; }
html.bk-embedded body.bk-creator .bk-cr-root {
    position: static;
    /* 100vh inside a frame is the frame's own height: full window when the shop
       opens it full-screen, a sensible block when it is inline. */
    height: 100vh;
    min-height: 620px;
}
html.bk-embedded body.bk-creator .bk-cr-view canvas[id$="-upscaled"] {
    max-height: max(240px, calc(100vh - 190px));
}


/* =========================================================== embedded mode
   Inside the shop overlay the page already carries a bar saying
   "Mosaik-Konfigurator - BRICKONAS BrickPic" with the close button. Repeating
   the same identity here produced two stacked headers and cost ~110 px of the
   height the editor exists to gain, so in the overlay this bar keeps only the
   facts and the action. */
/* The shop overlay draws no bar of its own any more, so the identity and the
   way out live here -- one header, not two stacked. */

/* ===================================================== order card in footer
   The shop's own card is reused as-is; inside the editor its marketing title
   and paragraph are redundant (the customer is already configuring) and only
   pushed price and button out of sight. */
.bk-cr-foot .mosaic-product-card {
    margin: 0; padding: 13px 18px 15px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
}
.bk-cr-foot .mosaic-product-title,
.bk-cr-foot .mosaic-product-desc { display: none; }
/* The stud count is already a header chip, and this footer sits under every
   panel: 34 px of duplication plus a four-line notice were squeezing the panels
   above it -- the AI text field ended up 93 px below the fold. */
.bk-cr-foot .mosaic-product-meta { display: none; }
.bk-cr-foot .mosaic-order-hint { font-size: .7rem !important; line-height: 1.35 !important; }
.bk-cr-foot .mosaic-product-price-row { display: flex; align-items: center; gap: 12px; margin: 0; }
.bk-cr-foot .mosaic-product-price { font-size: 1.4rem; font-weight: 800; color: var(--c-accent-d); }
.bk-cr-foot .mosaic-add-to-cart-btn { margin-left: auto; flex: 0 0 auto; }
/* A blocked order button that still looks ready to click is a trap. */
.bk-cr-foot .mosaic-add-to-cart-btn:disabled {
    opacity: .45; cursor: not-allowed; filter: grayscale(.35);
}
.bk-cr-foot .mosaic-order-hint { margin-top: 10px; font-size: .72rem; line-height: 1.4; }
.bk-cr-foot .mosaic-frame-addon { margin-top: 11px; }

/* One short pulse after "Fertig", so the eye is taken to the button. */
@keyframes bk-cr-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,125,50,.55); } 50% { box-shadow: 0 0 0 8px rgba(46,125,50,0); } }
.bk-cr-pulse { animation: bk-cr-pulse 700ms ease-out 2; }


/* ============================================================ KI panel =====
   The app ships this block with its own card, its own violet/amber palette and
   a dashed collapsible -- inside the editor it read as a different product.
   Everything below re-dresses those exact nodes in the panel's own language:
   the tab's accent colour, the same card and button shapes as Grösse and Malen,
   and no colour that is not already in the shop. */
.bk-cr-glabel {
    margin: 14px 0 7px; font-size: .72rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-soft);
}
.bk-cr-glabel:first-of-type { margin-top: 4px; }
/* label left, the action that belongs to the group right */
.bk-cr-grow { display: flex; align-items: center; gap: 10px; }
.bk-cr-grow .bk-cr-glabel { margin: 14px 0 7px; }
.bk-cr-grow > :last-child { margin-left: auto; }

/* The AI panel is a column that fills the side panel, so the conversation
   claims whatever height is left instead of hugging a single greeting. */
body.bk-creator .bk-cr-panel[data-tab="ai"] { display: flex; flex-direction: column; min-height: 100%; }
/* A sticky bottom sticks to the scrollport's PADDING edge, so the panel's
   bottom padding left a band in which the conversation was still visible
   underneath the input bar. On this tab the bar is the bottom. */
body.bk-creator .bk-cr-panels:has(.bk-cr-panel[data-tab="ai"]:not([hidden])) { padding-bottom: 0; }
body.bk-creator .bk-ai-tools { flex: 1 1 auto; min-height: 0; }
body.bk-creator .bk-ai-chat { flex: 1 1 auto; min-height: 0; }
body.bk-creator .bk-ai-chat-log { flex: 1 1 auto; }

body.bk-creator .bk-ai-tools {
    display: flex !important; flex-direction: column;
    /* The app sets overflow:hidden here. Any ancestor with a non-visible
       overflow becomes the sticky container, so the input field stuck to the
       bottom of THIS box -- which is off-screen -- instead of to the panel. */
    overflow: visible !important;
    background: none !important; border: 0 !important;
    border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    box-shadow: none !important;
}
body.bk-creator .bk-ai-tools::before { display: none !important; }

body.bk-creator .bk-ai-actions { display: grid; gap: 8px; }
body.bk-creator .bk-ai-btn {
    display: flex; align-items: center; gap: 11px; width: 100%;
    text-align: left; cursor: pointer; font: inherit;
    padding: 11px 13px; min-height: 60px;
    border: 1.5px solid var(--c-line) !important; border-radius: 12px !important;
    background: var(--c-panel) !important; color: var(--c-ink) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease;
}
body.bk-creator .bk-ai-btn:hover { border-color: var(--tab-accent, var(--c-accent)) !important; background: #FAFCFA !important; }
body.bk-creator .bk-ai-btn-primary {
    border-color: transparent !important;
    background: var(--tab-accent, var(--c-accent)) !important; color: #fff !important;
}
body.bk-creator .bk-ai-btn-primary:hover { filter: brightness(.93); background: var(--tab-accent, var(--c-accent)) !important; }
body.bk-creator .bk-ai-btn-ico {
    display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
    border-radius: 10px; background: var(--tab-soft, #EAF4EA) !important;
    color: var(--tab-accent, var(--c-accent)) !important;
}
body.bk-creator .bk-ai-btn-primary .bk-ai-btn-ico {
    background: rgba(255,255,255,.22) !important; color: #fff !important;
}
body.bk-creator .bk-ai-btn-tx { display: grid; gap: 1px; min-width: 0; }
body.bk-creator .bk-ai-btn-tx > span { font-weight: 800; font-size: .92rem; }
body.bk-creator .bk-ai-btn-tx small { font-size: .76rem; opacity: .78; font-weight: 600; }

body.bk-creator .bk-ai-reset {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; padding: 6px 10px; min-height: 32px;
    background: none !important; border: 1px solid var(--c-line) !important;
    border-radius: 8px !important; cursor: pointer; font: inherit;
    font-size: .78rem; font-weight: 700; color: var(--c-ink-soft) !important;
}
body.bk-creator .bk-ai-reset:hover { border-color: var(--c-line-2) !important; color: var(--c-ink) !important; background: var(--c-bg) !important; }
body.bk-creator .bk-ai-reset svg { width: 14px; height: 14px; }

body.bk-creator .bk-ai-status { margin: 9px 0 0; font-size: .78rem; color: var(--c-ink-soft); }
body.bk-creator .bk-ai-swatches { margin-top: 12px; }
body.bk-creator .bk-ai-swatch-label { font-size: .78rem; font-weight: 700; color: var(--c-ink-soft); }

/* free-text field: one bordered box, always open */
/* A real chat area, not a three-line strip. The conversation reads in the
   normal order again -- log above, field below -- and the field is stuck to the
   bottom of the panel viewport while the box extends past it, so it can never
   scroll out of reach the way it did when it simply sat at the end. */
body.bk-creator .bk-ai-chat {
    display: flex; flex-direction: column; gap: 9px;
    margin: 0 0 4px; padding: 9px;
    background: var(--c-bg) !important; border: 1px solid var(--c-line) !important;
    border-radius: 12px !important;
}
body.bk-creator .bk-ai-chat-log {
    /* Grows with the conversation up to a real window; the sticky field below
       means height here costs nothing. */
    min-height: 168px;
    overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
    margin: 0; font-size: .82rem; line-height: 1.45;
}
body.bk-creator .bk-ai-msg { max-width: 92%; }
body.bk-creator .bk-ai-msg.bot { background: #EAF4EA !important; color: var(--c-ink) !important; }
body.bk-creator .bk-ai-msg.user { background: var(--c-accent) !important; color: #fff !important; }
body.bk-creator .bk-ai-chat-log:empty { display: none; }
body.bk-creator .bk-ai-chat-form {
    display: flex; gap: 7px;
    position: sticky; bottom: 0; z-index: 1;
    /* Negative side margins so the bar's background covers the box's padding
       gutters -- otherwise the conversation scrolls visibly past its edges. */
    margin: 0 -9px -9px; padding: 9px;
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    border-radius: 0 0 11px 11px;
}
body.bk-creator .bk-ai-chat-input {
    flex: 1 1 auto; min-width: 0; min-height: 46px;
    padding: 11px 13px; font: inherit; font-size: .9rem;
    background: var(--c-panel) !important; color: var(--c-ink) !important;
    border: 1.5px solid var(--c-line) !important; border-radius: 9px !important;
}
body.bk-creator .bk-ai-chat-input:focus {
    outline: none; border-color: var(--tab-accent, var(--c-accent)) !important;
}
body.bk-creator .bk-ai-chat-send {
    flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center;
    border: 0 !important; border-radius: 9px !important; cursor: pointer;
    background: var(--tab-accent, var(--c-accent)) !important; color: #fff !important;
}
body.bk-creator .bk-ai-chat-send:hover { filter: brightness(.93); }


/* ========================================================== Stil presets ===
   The app renders these tiles with a live preview canvas; only their dress
   changes here so they read as part of the panel. Five fixed columns were far
   too tight in a 360 px panel, so the grid fills instead. */
body.bk-creator #bk-style-picker { display: block; margin: 0 0 4px; }
body.bk-creator .bk-style-picker-label { display: none; }
body.bk-creator .bk-style-picker-grid {
    display: grid !important;
    /* Three fixed columns: five tiles then read as 3 + 2. Letting them fill
       gave 4 + 1, and five columns in a 360 px panel left a 47 px preview --
       too small to tell Vintage from Warm, which is the tile's whole job. */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
body.bk-creator .bk-style-tile {
    border: 1.5px solid var(--c-line) !important; border-radius: 11px !important;
    background: var(--c-panel) !important; padding: 5px 5px 7px; overflow: hidden;
    display: grid; gap: 2px; cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
body.bk-creator .bk-style-tile:hover { border-color: var(--c-line-2) !important; background: #FAFCFA !important; }
body.bk-creator .bk-style-tile.active {
    border-color: var(--c-accent) !important; background: #EAF4EA !important;
}
body.bk-creator .bk-style-tile-preview {
    width: 100%; aspect-ratio: var(--bk-tile-ar, 1); display: block; border-radius: 8px;
    margin-bottom: 5px; background: var(--c-bg); object-fit: cover;
}
body.bk-creator .bk-style-tile-label {
    /* the app paints a white band here, which cut a stripe through the tinted
       background of the selected tile */
    background: none !important; padding: 0 !important;
    font-size: .76rem; font-weight: 700; text-align: center; color: var(--c-ink);
    line-height: 1.2;
}
body.bk-creator .bk-style-tile.active .bk-style-tile-label { color: var(--c-accent-d); }
/* A style is a palette, so its size is the tile's most useful fact. */
body.bk-creator .bk-cr-tilecount {
    display: block; text-align: center; font-size: .68rem; font-weight: 600;
    color: var(--c-ink-soft); line-height: 1.2;
}
body.bk-creator .bk-style-tile.active .bk-cr-tilecount { color: var(--c-accent-d); opacity: 1; }


/* iOS Safari ZOOMS the page in when a focused field is under 16 px, and never
   zooms back out. The chat field measured 14,4 px -- exactly that trap. This
   sits at the end of the file on purpose: the KI block above sets .9rem with
   the same specificity, so it has to come later to win. */
@media (max-width: 940px) {
    body.bk-creator .bk-ai-chat-input { font-size: 16px; }
}


/* Six tabs at a 62 px minimum need 372 px, so on a 360 px phone the last one
   ("Malen") was cut off at the edge with nothing to suggest it scrolls. A tab
   bar has to show all its tabs: below 430 px they share the width equally.
   Height-gated, because in the sideways layout the rail is a COLUMN and
   flex: 1 there would stretch the tabs vertically instead. */
@media (max-width: 430px) and (min-height: 560px) {
    .bk-cr-rail { overflow-x: hidden; gap: 0; padding-left: 3px; padding-right: 3px; }
    .bk-cr-tab { flex: 1 1 0; min-width: 0; font-size: .66rem; }
    .bk-cr-tab span {
        display: block; width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}


/* ------------------------------------------- close, on the upload card ----
   Sits on the white card rather than in the window corner: on the upload
   screen that corner is far from everything the customer is looking at. */
html.bk-embedded #image-input-card { position: relative; }
.bk-cr-cardclose {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    background: #F2F6F1; color: #2A352B;
    border: 1px solid #DCE7DB; border-radius: 10px;
    font-family: var(--bk-font-body, "Nunito", sans-serif);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.bk-cr-cardclose:hover { background: #E7EFE6; border-color: #C7DCC6; }
@media (max-width: 940px) {
    .bk-cr-cardclose { width: 44px; height: 44px; top: 10px; right: 10px; }
}


/* ------------------------------------------------ cover while the editor mounts */
html.bk-cr-booting::before,
html.bk-cr-booting::after { position: fixed; z-index: 2147483000; }
html.bk-cr-booting::before {
    content: ""; inset: 0; background: #F2F6F1;
}
html.bk-cr-booting::after {
    content: ""; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%; border: 3px solid #CBE3CC; border-top-color: #2E7D32;
    animation: bkspin .8s linear infinite;
}

/* ------------------------------------------------ "Neues Bild" in the stage bar */
.bk-cr-stagebar .bk-cr-newimage {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-accent-d); border-color: #CBE3CC; background: #EAF4EA; font-weight: 800;
}
.bk-cr-stagebar .bk-cr-newimage svg { width: 15px; height: 15px; }
.bk-cr-stagebar .bk-cr-newimage:hover { background: #DCEBDC; color: var(--c-accent-d); }

/* ------------------------------------------------ reset buttons */
.bk-cr-reset svg { width: 14px; height: 14px; }
.bk-cr-reset:disabled { opacity: .45; cursor: default; }
.bk-cr-reset:disabled:hover { background: none; border-color: var(--c-line); color: var(--c-ink-soft); }

/* ------------------------------------------------ Steine: say what a click does */
.bk-cr-instr {
    margin: 0 0 12px; font-size: .9rem; line-height: 1.45; color: var(--c-ink);
}
.bk-cr-instr b { font-weight: 800; }
/* on a mouse, show the consequence before the click */
@media (hover: hover) {
    .bk-cr-sw:hover::before, .bk-cr-sw:focus-visible::before {
        content: "\00d7"; position: absolute; inset: 0; z-index: 1;
        display: grid; place-items: center;
        background: rgba(20, 30, 20, .45); border-radius: inherit;
        color: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1;
    }
}
.bk-cr-swcount { font-size: .8rem; }


/* ============================================================ stage bar =====
   Desktop: Neues Bild | Zoom [slider] 100 % [Zurücksetzen] ...... [Neu berechnen]
   Phone:   Neues Bild ............ [- 100 % +] [refresh]  -- nothing scrolls away */
.bk-cr-zgroup { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.bk-cr-stagebar .bk-cr-zbtn { display: none; }
/* on a mouse the percentage reads as a value, but still resets on click */
.bk-cr-stagebar .bk-cr-zval {
    background: none; border: 0; padding: 0 2px; min-height: 0;
    min-width: 3.4em; text-align: right; font: inherit; font-weight: 700;
    color: var(--c-ink-soft); cursor: pointer;
}
.bk-cr-stagebar .bk-cr-zval:hover { color: var(--c-ink); }
.bk-cr-stagebar #bk-cr-recalc { display: inline-flex; align-items: center; gap: 6px; }
.bk-cr-stagebar #bk-cr-recalc svg { width: 15px; height: 15px; }

@media (max-width: 680px) {
    .bk-cr-stagebar {
        overflow-x: visible; justify-content: space-between;
        gap: 8px; padding: 8px 10px;
    }
    .bk-cr-stagebar .bk-cr-zlabel,
    .bk-cr-stagebar input[type="range"],
    .bk-cr-stagebar #bk-cr-zoom-reset,
    .bk-cr-stagebar .bk-cr-spacer { display: none; }

    /* - 100 % + as one joined control */
    .bk-cr-zgroup {
        gap: 0; border: 1px solid var(--c-line); border-radius: 10px;
        background: var(--c-panel); overflow: hidden; margin-left: auto;
    }
    .bk-cr-stagebar .bk-cr-zbtn {
        display: grid; place-items: center;
        width: 44px; height: 44px; min-height: 44px; padding: 0;
        border: 0; border-radius: 0; background: none;
        font-size: 1.25rem; font-weight: 700; color: var(--c-ink);
    }
    .bk-cr-stagebar .bk-cr-zval {
        min-width: 58px; min-height: 44px; padding: 0 4px; text-align: center;
        border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line);
        font-size: .88rem; color: var(--c-ink);
    }

    /* recompute is automatic, so this is a safety action: icon only */
    .bk-cr-stagebar #bk-cr-recalc {
        width: 44px; height: 44px; min-height: 44px; padding: 0;
        justify-content: center; flex: 0 0 44px;
    }
    .bk-cr-stagebar #bk-cr-recalc span { display: none; }
    .bk-cr-stagebar #bk-cr-recalc svg { width: 19px; height: 19px; }

    .bk-cr-stagebar .bk-cr-newimage { padding: 8px 12px; }
}
/* the smallest phones: the label shortens rather than anything scrolling */
@media (max-width: 360px) {
    .bk-cr-stagebar { gap: 6px; padding: 8px; }
    .bk-cr-stagebar .bk-cr-newimage { padding: 8px 10px; gap: 5px; }
    .bk-cr-stagebar .bk-cr-zval { min-width: 50px; }
}


/* ============================================================ go to cart =====
   One button or the other, decided purely by the app's own `bk-added` class on
   its order button -- so changing the design afterwards (which resets that
   class) brings "Bestellen" back without any state of our own. */
.bk-cr-gocart { display: none; }
body.bk-creator #order-mosaic-button.bk-added { display: none !important; }
body.bk-creator #order-mosaic-button.bk-added + .bk-cr-gocart {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 12px 22px; margin-left: auto;
    background: var(--c-accent); color: #fff; border: 0; border-radius: 10px;
    font-family: var(--bk-font-body, "Nunito", sans-serif);
    font-size: 1rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 6px 16px rgba(46, 125, 50, .25);
    transition: background .18s ease;
}
body.bk-creator #order-mosaic-button.bk-added + .bk-cr-gocart:hover { background: var(--c-accent-d); }
.bk-cr-gocart svg { width: 19px; height: 19px; }

/* the header's primary action, once it means "go to cart" */
.bk-cr-finish.is-cart { gap: 8px; }
.bk-cr-finish svg { width: 18px; height: 18px; }

@media (max-width: 940px) {
    /* same footprint as the "Bestellen" button it replaces */
    body.bk-creator .bk-cr-foot #order-mosaic-button.bk-added + .bk-cr-gocart {
        width: 100%; align-self: stretch; margin-left: 0; min-height: 52px;
    }
}
/* narrow phones: the header has room for "Warenkorb", not for "Zum ... ->" */
@media (max-width: 620px) {
    .bk-cr-finish .bk-cr-fin-long { display: none; }
}