/* ─────────────────────────────────────────
   Custom-Tattoo-Studio (full-screen dialog)
   Desktop: tools | stage | order, sizes on top, summary bar at the bottom.
   Phone:   stage, tools, order stacked; the bar stays at the bottom.
   ───────────────────────────────────────── */

.nks {
    --nks-ink: #1a2038;
    --nks-muted: #5d6478;
    --nks-line: #dfe2ea;
    --nks-paper: #f4f5f8;
    --nks-sheet: #ffffff;
    --nks-accent: #2b4597;
    --nks-accent-soft: #e6ebf7;
    --nks-danger: #b3261e;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);   /* never wider than the screen, whatever the content */
    background: var(--nks-paper);
    color: var(--nks-ink);
    font-size: 15px;
    line-height: 1.45;
}
.nks[hidden] { display: none !important; }
html.nks-lock, html.nks-lock body { overflow: hidden !important; }
.nks *, .nks *::before, .nks *::after { box-sizing: border-box; }
.nks > * { min-width: 0; }

/* Header */
.nks-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    background: var(--nks-sheet);
    border-bottom: 1px solid var(--nks-line);
}
.nks-title { margin: 0; font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.nks-sizes { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding: 2px; }
.nks-size {
    display: flex; flex-direction: column; align-items: center;
    min-width: 84px; padding: 6px 12px;
    border: 1.5px solid var(--nks-line); border-radius: 8px;
    background: var(--nks-sheet); color: var(--nks-ink); cursor: pointer; line-height: 1.2;
}
.nks-size-name { font-weight: 600; }
.nks-size-cm { font-size: 0.8em; color: var(--nks-muted); font-variant-numeric: tabular-nums; }
.nks-size[aria-checked="true"] { border-color: var(--nks-accent); background: var(--nks-accent-soft); }
.nks-close {
    width: 40px; height: 40px; flex: none;
    border: 0; border-radius: 50%; background: transparent; color: var(--nks-ink);
    font-size: 28px; line-height: 1; cursor: pointer;
}
.nks-close:hover { background: var(--nks-paper); }

/* Main area */
.nks-main {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 330px;
    grid-template-areas: "tools stage order";
    min-height: 0;
}
.nks-tools, .nks-order { padding: 20px 16px; overflow-y: auto; background: var(--nks-sheet); }
.nks-tools { grid-area: tools; border-right: 1px solid var(--nks-line); }
.nks-order { grid-area: order; border-left: 1px solid var(--nks-line); }
.nks-stage { grid-area: stage; display: flex; flex-direction: column; min-height: 0; padding: 16px; }

.nks-canvas-wrap {
    position: relative; flex: 1; min-height: 0;
    display: grid; place-items: center;
}
.nks-canvas-wrap .canvas-container {
    outline: 2px dashed var(--nks-accent);
    outline-offset: 0;
    box-shadow: 0 6px 24px rgba(26, 32, 56, 0.12);
}
.nks-empty, .nks-filecard, .nks-resume {
    position: absolute; inset: 0; margin: auto;
    width: min(320px, 80%); height: fit-content;
    text-align: center; color: var(--nks-muted); pointer-events: none;
}
.nks-empty p, .nks-filecard p, .nks-resume p { margin: 0 0 6px; }
.nks-filecard, .nks-resume { pointer-events: auto; background: var(--nks-sheet); border: 1px solid var(--nks-line); border-radius: 10px; padding: 18px; }
.nks-resume { z-index: 2; color: inherit; }
.nks-resume-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.nks-empty[hidden], .nks-filecard[hidden], .nks-resume[hidden] { display: none; }
.nks-dim { margin: 10px 0 0; text-align: center; color: var(--nks-muted); font-variant-numeric: tabular-nums; }

/* Buttons */
.nks-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 14px; border-radius: 8px;
    border: 1.5px solid var(--nks-line); background: var(--nks-sheet); color: var(--nks-ink);
    font: inherit; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none;
    margin: 0; min-height: 0; text-transform: none; letter-spacing: normal;   /* theme button styles */
}
.nks-btn:hover { border-color: var(--nks-accent); }
.nks-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nks-btn svg { width: 18px; height: 18px; fill: currentColor; }
.nks-btn--tool { width: 100%; height: 42px; justify-content: flex-start; white-space: nowrap; }
.nks-btn--tool::before, .nks-btn--tool::after { display: none; }   /* theme button decorations */
.nks-btn--primary { background: var(--nks-accent); border-color: var(--nks-accent); color: #fff; padding: 12px 22px; }
.nks-btn--primary:hover { filter: brightness(1.1); }
.nks-btn--ghost { background: transparent; }
.nks-btn--danger { color: var(--nks-danger); background: transparent; }
.nks-btn--sq { width: 40px; padding: 8px 0; }
.nks-btn--sq[aria-pressed="true"] { background: var(--nks-accent-soft); border-color: var(--nks-accent); }
.nks :focus-visible { outline: 2px solid var(--nks-accent); outline-offset: 2px; }

/* Tools */
.nks-tool-row { display: flex; flex-direction: column; gap: 8px; }
.nks-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nks-upload-status { min-height: 1.4em; margin: 8px 0 0; font-size: 0.88em; color: var(--nks-muted); overflow-wrap: anywhere; }
.nks-upload-status.is-error { color: var(--nks-danger); }
.nks-props { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--nks-line); display: grid; gap: 12px; }
.nks-props[hidden], .nks-props-text[hidden] { display: none; }
.nks-props-text { display: grid; gap: 6px; }
.nks-props label { font-size: 0.85em; font-weight: 600; color: var(--nks-muted); }
.nks-props input[type="text"], .nks-props select {
    width: 100%; padding: 8px 10px; border: 1.5px solid var(--nks-line); border-radius: 8px;
    background: var(--nks-sheet); color: var(--nks-ink); font: inherit;
}
.nks-props input[type="range"] { width: 100%; accent-color: var(--nks-accent); }
.nks-size-out { font-variant-numeric: tabular-nums; color: var(--nks-ink); }
.nks-toggles { display: flex; gap: 6px; margin-top: 4px; }
.nks-prop-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nks-prop-actions [hidden] { display: none; }
.nks-tip { margin: 18px 0 0; font-size: 0.85em; color: var(--nks-muted); }
.nks-upload-hint { margin: 8px 0 0; font-size: 0.8em; color: var(--nks-muted); }
.nks-props-angle { display: grid; gap: 6px; }
.nks-angle-row { display: flex; align-items: center; gap: 8px; }
.nks-angle-row input[type="range"] { flex: 1; min-width: 0; }
.nks-rot90 svg { width: 18px; height: 18px; fill: currentColor; }
.nks-angle-hint { margin: 0; font-size: 0.8em; color: var(--nks-muted); }

/* AI drafts */
.nks-btn--accent { width: 100%; background: var(--nks-accent); border-color: var(--nks-accent); color: #fff; }
.nks-btn--accent:hover { filter: brightness(1.1); }
.nks-ai-toggle[aria-expanded="true"] { border-color: var(--nks-accent); background: var(--nks-accent-soft); }
.nks-ai { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--nks-line); display: grid; gap: 10px; }
.nks-ai[hidden] { display: none; }
.nks-ai label, .nks-ai-label { font-size: 0.85em; font-weight: 600; color: var(--nks-muted); }
.nks-ai textarea {
    width: 100%; padding: 8px 10px; border: 1.5px solid var(--nks-line); border-radius: 8px;
    background: var(--nks-sheet); color: var(--nks-ink); font: inherit; resize: vertical;
}
.nks-ai-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.nks-chip {
    padding: 5px 10px; border: 1.5px solid var(--nks-line); border-radius: 999px;
    background: var(--nks-sheet); color: var(--nks-ink); font: inherit; font-size: 0.85em; cursor: pointer;
}
.nks-chip[aria-checked="true"] { border-color: var(--nks-accent); background: var(--nks-accent-soft); }
.nks-ai-status { margin: 0; min-height: 1.4em; font-size: 0.86em; color: var(--nks-muted); }
.nks-ai-status.is-error { color: var(--nks-danger); }
.nks-ai-status a { color: var(--nks-accent); }
.nks-ai-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nks-ai-results:empty { display: none; }
.nks-ai-result {
    position: relative; display: grid; padding: 6px; aspect-ratio: 1;
    border: 1.5px solid var(--nks-line); border-radius: 8px; background: #fff; cursor: pointer;
}
.nks-ai-result img { width: 100%; height: 100%; object-fit: contain; }
.nks-ai-result span {
    position: absolute; inset: auto 6px 6px; padding: 3px 0; border-radius: 6px;
    background: var(--nks-accent); color: #fff; font-size: 0.8em; font-weight: 600; text-align: center;
    opacity: 0;
}
.nks-ai-result:hover, .nks-ai-result:focus-visible { border-color: var(--nks-accent); }
.nks-ai-result:hover span, .nks-ai-result:focus-visible span { opacity: 1; }
.nks-ai-insp summary { cursor: pointer; font-size: 0.88em; font-weight: 600; }
.nks-ai-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; font-size: 0.85em; color: var(--nks-muted); }
.nks-ai-idea { padding: 3px; aspect-ratio: 1; border: 1px solid var(--nks-line); border-radius: 6px; background: #fff; cursor: pointer; }
.nks-ai-idea:hover { border-color: var(--nks-accent); }
.nks-ai-idea img { width: 100%; height: 100%; object-fit: contain; }
@media (hover: none) { .nks-ai-result span { opacity: 1; } }

/* Order */
.nks-h { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; }
.nks-h:not(:first-child) { margin-top: 22px; }
.nks-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.nks-tier, .nks-intent {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 12px; border: 1.5px solid var(--nks-line); border-radius: 8px;
    background: var(--nks-sheet); color: var(--nks-ink); font: inherit; text-align: left; cursor: pointer;
}
.nks-tier[aria-checked="true"], .nks-intent[aria-checked="true"] { border-color: var(--nks-accent); background: var(--nks-accent-soft); }
.nks-tier-qty { font-weight: 700; }
.nks-tier-each { font-size: 0.82em; color: var(--nks-muted); font-variant-numeric: tabular-nums; }
.nks-tier-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.nks-intents { display: grid; gap: 8px; }
/* Noch keine Verwendung gewählt und auf „In den Warenkorb“ getippt */
.nks-intents.is-missing .nks-intent { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b inset; }
.nks-intent-head { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.nks-intent-title { font-weight: 700; }
.nks-intent-extra { font-size: 0.85em; color: var(--nks-muted); white-space: nowrap; }
.nks-intent-desc { font-size: 0.86em; color: var(--nks-muted); }
.nks-intent-desc a { color: var(--nks-accent); }
.nks-account-hint { margin: 10px 0 0; font-size: 0.86em; padding: 8px 10px; border-radius: 8px; background: #fbefdc; color: #6b3d00; }
.nks-account-hint[hidden] { display: none; }

/* Summary bar */
.nks-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--nks-sheet); border-top: 1px solid var(--nks-line);
}
.nks-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; flex: 1; min-width: 0; }
.nks-sum-line { color: var(--nks-muted); }
.nks-sum-total { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.nks-sum-note { font-size: 0.82em; color: var(--nks-muted); }
.nks-msg { margin: 0; color: var(--nks-danger); font-weight: 600; }
.nks-msg:empty { display: none; }

/* Phone / tablet: one scrolling column */
@media (max-width: 899px) {
    .nks { grid-template-rows: auto minmax(0, 1fr) auto; }
    .nks-head { flex-wrap: wrap; gap: 8px; }
    .nks-title { flex: 1; }
    .nks-sizes { order: 3; flex-basis: 100%; }
    .nks-size { flex: 1 1 0; min-width: 0; padding: 6px 2px; }
    .nks-size-cm { font-size: 0.72em; white-space: nowrap; }
    .nks-main { display: block; overflow-y: auto; }
    .nks-stage { padding: 12px; }
    .nks-canvas-wrap { min-height: 36vh; }
    .nks-tools, .nks-order { border: 0; border-top: 1px solid var(--nks-line); overflow: visible; }
    .nks-tool-row { flex-direction: row; flex-wrap: wrap; }
    .nks-btn--tool { flex: 1 1 40%; justify-content: center; }
    .nks-ai-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nks-ai-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nks-btn--primary { flex: 1 1 100%; }
}

/* Launcher card in the product summary */
.ninkd-studio-launch { margin: 16px 0; display: grid; gap: 10px; justify-items: start; }
.ninkd-studio-launch__price { margin: 0; font-size: 1.15em; }
.ninkd-studio-launch__hint { margin: 0; font-size: 0.9em; opacity: 0.75; }
.ninkd-studio-launch .ninkd-studio-open {
    font-size: 1.05em; font-weight: 600; padding: 0.85em 1.8em;
    border: 0; border-radius: 999px; background: #2b2b2b; color: #fff; cursor: pointer;
}
.ninkd-studio-launch .ninkd-studio-open:hover { background: #000; }

@media (prefers-reduced-motion: no-preference) {
    .nks-size, .nks-tier, .nks-intent, .nks-btn { transition: border-color 0.15s, background-color 0.15s; }
}