/* Header and footer share one floating frame at each viewport size. */
:root {
    --workspace-bar-paper: rgba(255, 255, 255, .97);
    --workspace-bar-border: 1px solid #dfe6e0;
    --workspace-bar-radius: 16px;
    --workspace-bar-shadow: 0 8px 40px #20372b1c;
    --workspace-bar-backdrop: none;
}

/* The mobile canvas is the workspace. Only its tools float above it. */
.wb-panel, .wb-dock, #wb-error, .wb-picture-icon { display: none; }
.wb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
    :root {
        --workspace-bar-border: 1px solid rgba(255, 255, 255, .8);
        --workspace-bar-radius: 22px;
        --workspace-bar-shadow: 0 8px 30px rgba(26, 35, 42, .13), 0 1px 3px rgba(26, 35, 42, .06);
        --workspace-bar-backdrop: blur(18px);
    }
    .footer-wrap:has(.wb-mobile) {
        padding: 0;
        background: transparent;
        pointer-events: none;
    }
    .footer-bar.wb-mobile {
        --wb-ink: #23262c;
        --wb-muted: #717781;
        --wb-line: rgba(36, 43, 52, .10);
        --wb-paper: var(--workspace-bar-paper);
        position: relative;
        width: min(420px, calc(100% - 24px));
        margin: 0 auto calc(12px + env(safe-area-inset-bottom));
        padding: 0;
        max-height: none;
        gap: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
        pointer-events: none;
    }
    .wb-mobile > .footer-edit-context,
    .wb-mobile > .placement-draft-caption,
    .wb-mobile > .footer-row-design { display: none; }
    .wb-mobile > .footer-row-cubes { width: 100%; }
    .wb-mobile .wb-dock {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 2px;
        height: 66px;
        padding: 6px;
        box-sizing: border-box;
        border-radius: var(--workspace-bar-radius);
        border: var(--workspace-bar-border);
        background: var(--wb-paper);
        backdrop-filter: var(--workspace-bar-backdrop);
        -webkit-backdrop-filter: var(--workspace-bar-backdrop);
        box-shadow: var(--workspace-bar-shadow);
        pointer-events: auto;
    }
    .wb-mobile button { touch-action: manipulation; }
    .wb-mobile .wb-object {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
        min-height: 52px;
        border: 0;
        padding: 0 7px;
        border-radius: 15px;
        color: var(--wb-ink);
        background: transparent;
        text-align: left;
        font: inherit;
        cursor: pointer;
    }
    .wb-object-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .wb-object-copy strong { font-size: 13px; font-weight: 650; white-space: nowrap; }
    #wb-count { font-size: 11px; font-weight: 600; color: var(--wb-muted); font-variant-numeric: tabular-nums; }
    .wb-icon { width: 22px; height: 22px; flex-shrink: 0; }
    .wb-cube { position: relative; }
    .wb-cube .wb-edit-mark { position: absolute; right: -7px; bottom: -2px; width: 12px; height: 12px; color: var(--wb-muted); background: var(--wb-paper); border-radius: 3px; }
    .wb-cube { --cube-color: #4caf50; width: 30px; height: 34px; flex: 0 0 30px; display: grid; place-items: center; }
    .wb-cube i {
        display: block;
        width: 23px;
        height: 25px;
        background: var(--cube-color);
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
        position: relative;
    }
    .wb-cube i::before, .wb-cube i::after { content: ''; position: absolute; inset: 0; }
    .wb-cube i::before { background: #fff4; clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%); }
    .wb-cube i::after { background: #0002; clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); }
    .wb-mobile #wb-payment {
        display: grid;
        place-items: center;
        width: 54px;
        min-width: 54px;
        height: 48px;
        font: inherit;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background: none;
        color: #365943;
        cursor: pointer;
    }
    #wb-payment[data-method='bitcoin'] [data-payment-symbol='fiat'],
    #wb-payment:not([data-method='bitcoin']) [data-payment-symbol='bitcoin'] { display: none; }
    .wb-mobile .wb-object[aria-expanded='true'] { background: #edf0ed; color: var(--wb-ink); }
    .wb-mobile #wb-buy { flex: 0 0 auto; }
    .wb-mobile .btn-buy {
        height: 52px;
        min-width: 94px;
        border-radius: 16px;
        background: var(--wb-ink);
        border: 0;
        padding: 7px 16px;
        flex-direction: column;
        gap: 4px;
        box-shadow: none;
    }
    .wb-mobile .btn-buy .buy-total { font-size: 16px; font-weight: 650; line-height: 1.15; background: none; padding: 0; }
    .wb-mobile .btn-buy .btn-text { font-size: 11px; font-weight: 500; line-height: 1.2; }
    .wb-mobile .wb-panel:not([hidden]) {
        display: flex;
        position: absolute;
        bottom: calc(100% + var(--footer-tray-offset) + 12px);
        left: 0;
        right: 0;
        flex-direction: column;
        max-height: min(66dvh, calc(100dvh - 154px - var(--footer-tray-offset)));
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        border: 1px solid white;
        border-radius: 24px;
        padding: 18px 16px 12px;
        background: var(--wb-paper);
        box-shadow: 0 14px 45px #18242c26;
        pointer-events: auto;
        color: var(--wb-ink);
    }
    .wb-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 16px; flex-shrink: 0; }
    #wb-title { margin: 0; font-size: 15px; font-weight: 650; }
    .wb-tabs { grid-column: 1 / -1; grid-row: 2; }
    .wb-close { grid-column: 2; grid-row: 1; }

    .wb-mobile .wb-close {
        width: auto; min-width: 52px; height: 36px;
        padding: 0 12px; border: 0; border-radius: 10px; background: #edf0ed;
        color: var(--wb-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .wb-tabs { display: flex; gap: 4px; flex-shrink: 0; padding: 4px; border-radius: 14px; background: #f2f3f0; }
    .wb-tabs button {
        display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; border-radius: 12px;
        background: transparent; font: inherit; font-size: 12px; color: var(--wb-muted); cursor: pointer;
    }
    .wb-tabs button[aria-pressed='true'] { color: var(--wb-ink); background: white; box-shadow: 0 1px 4px #23262c12; }
    .wb-body { flex: 1 1 auto; min-height: 48px; overflow-y: auto; }
    .wb-body [hidden] { display: none; }
    .wb-body p { font-size: 12px; line-height: 1.7; color: var(--wb-muted); margin: 0 0 12px; }
    .wb-mobile .design-controls { display: flex; flex-direction: row; align-items: flex-start; overflow: visible; gap: 14px; }
    .wb-mobile .color-sec { padding: 0; flex: 0 0 54px; flex-direction: column; gap: 10px; }
    .wb-mobile .color-wrap { display: flex; flex-direction: column; align-items: center; width: auto; }

    .wb-mobile .color-trigger { width: 44px; height: 44px; border-radius: 50%; border: 4px solid white; box-shadow: 0 0 0 1px var(--wb-line); }
    .wb-mobile .face-sec { flex: 1; flex-direction: column; align-items: stretch; gap: 8px; }
    .wb-mobile .face-sec, .wb-mobile .face-group { width: 100%; min-width: 0; }
    .wb-mobile .face-group { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); grid-template-rows: repeat(3, 50px); gap: 3px; justify-content: center; }
    .wb-mobile .face-btn {
        display: flex; align-items: center; justify-content: center;
        width: 100%; min-width: 44px; height: 50px; padding: 0;
        background: #f2f3f0; border: 1px solid var(--wb-line); border-radius: 8px;
        color: #757b80;
    }
    .wb-mobile .face-btn[data-face='top'] { grid-area: 1 / 2; }
    .wb-mobile .face-btn[data-face='left'] { grid-area: 2 / 1; }
    .wb-mobile .face-btn[data-face='front'] { grid-area: 2 / 2; }
    .wb-mobile .face-btn[data-face='right'] { grid-area: 2 / 3; }
    .wb-mobile .face-btn[data-face='back'] { grid-area: 2 / 4; }
    .wb-mobile .face-btn[data-face='bottom'] { grid-area: 3 / 2; }
    .wb-mobile .face-btn .face-icon { display: none; }
    .wb-mobile .face-btn .wb-picture-icon { display: block; width: 20px; height: 20px; opacity: .55; }
    .wb-mobile .face-btn.has-image { border-color: #899787; }
    .wb-mobile .face-btn.has-image .wb-picture-icon { display: none; }
    .wb-mobile .face-btn.has-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
    .wb-mobile .face-btn:hover, .wb-mobile .face-btn:focus-visible { border-color: #7f957f; background: #e7ede7; }
    .wb-mobile .cp-section-title { display: block; font-size: 12px; }
    .wb-mobile .footer-link-toggle { display: none; }
    .wb-mobile #footer-link-panel { display: block; }
    .wb-mobile .link-group { grid-template-columns: 1fr; gap: 8px; }
    .wb-mobile .link-input { border-radius: 10px; background: #f2f3f0; border: 1px solid var(--wb-line); }
    .wb-mobile .pay-group { display: flex; gap: 12px; }
    .wb-mobile .pay-btn { width: 52px; height: 52px; }
    .wb-mobile #wb-purchase-note { display: block; }
    .wb-mobile .placement-draft-note { display: block; font-size: 11px; color: var(--wb-muted); margin-top: 16px; line-height: 1.7; }
    .wb-mobile .king-challenge-hint { font-size: 11px; margin-top: 8px; }
    .wb-selection { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--wb-line); margin-top: 16px; padding-top: 8px; flex-shrink: 0; }
    .wb-selection button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 12px; color: var(--wb-ink); cursor: pointer; }
    .wb-selection button:disabled { opacity: .25; cursor: default; }
    #wb-position { font-size: 11px; white-space: nowrap; color: var(--wb-muted); font-variant-numeric: tabular-nums; }
    .wb-selection #wb-price { margin-left: auto; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
    .wb-selection #wb-remove { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #a75f52; font-size: 10px; }
    #wb-remove .wb-icon { width: 18px; height: 18px; }
    .wb-save-indicator { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 18px; padding-top: 8px; font-size: 11px; flex-shrink: 0; color: #6f8374; }
    .wb-save-indicator .wb-saved-icon { width: 17px; height: 17px; }
    .wb-save-indicator:not([data-state='saved']) .wb-saved-icon { display: none; }
    .wb-save-indicator[data-state='saving']::after { content: ''; width: 12px; height: 12px; border: 1.5px solid #dfe5df; border-top-color: #6f8374; border-radius: 50%; animation: wb-saving 1s linear infinite; }
    .wb-save-indicator[data-state='error']::after { content: '!'; color: #a75f52; font-size: 13px; }
    @keyframes wb-saving { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .wb-save-indicator[data-state='saving']::after { animation: none; } }
    .wb-mobile #wb-error:not([hidden]) { display: block; pointer-events: auto; margin-top: 8px; padding: 10px; border-radius: 12px; background: #fff4ee; color: #963c26; font-size: 12px; }
    .wb-mobile button:focus-visible { outline: 2px solid #6c826d; outline-offset: 2px; }
    @media (max-width: 360px) {
        .wb-mobile .wb-object { gap: 6px; padding-left: 2px; }
        .wb-mobile .btn-buy { min-width: 82px; padding: 6px 8px; }
        .wb-mobile .wb-cube { display: none; }
        .wb-tabs .wb-icon { width: 18px; height: 18px; }
        .wb-mobile .wb-panel:not([hidden]) { padding: 14px 10px 10px; }
        .wb-selection button { padding: 0 5px; }
    }
}

/* Visible labels keep editing controls understandable without a tooltip. */
.footer-control-label { font-size: 12px; font-weight: 600; line-height: 1.5; color: #49544d; }
.footer-link-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 11px; color: #626879; }
.footer-edit-context { font-size: 12px; font-weight: 600; color: #365943; padding: 2px 6px 7px; }
.footer-bar .face-label { font-size: 10px; line-height: 1.3; position: relative; z-index: 1; }
.footer-bar .face-btn.has-image .face-label { position: absolute; bottom: 2px; background: #fffffff0; color: #25322a; padding: 2px 4px; border-radius: 4px; }
.footer-bar .face-btn.has-image img { position: absolute; inset: 0; }
.footer-bar button:focus-visible, .footer-bar input:focus-visible { outline: 2px solid #36734d; outline-offset: 3px; }
.wb-mobile .pay-sec { flex-direction: column; align-items: stretch; gap: 8px; }
.wb-mobile .link-group { margin-top: 10px; }

/* Desktop keeps its controls in one row beneath the draft tray. */
@media (min-width: 601px) and (min-height: 501px), (min-width: 601px) and (orientation: portrait) {
    .footer-wrap { padding: 0 16px 12px; }
    .footer-bar { max-width: 1180px; margin: 0 auto; padding: 2px 12px; gap: 2px; border: var(--workspace-bar-border); border-radius: var(--workspace-bar-radius); background: var(--workspace-bar-paper); box-shadow: var(--workspace-bar-shadow); }
    .footer-bar .placement-draft-caption,
    .footer-bar .footer-edit-context,
    .footer-bar .footer-control-label,
    .footer-bar .footer-link-field > span,
    .footer-bar .face-label,
    .footer-bar .king-challenge-hint {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .footer-row-design { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
    .footer-bar .sec { padding: 0; gap: 0; align-items: center; }
    .footer-bar .design-controls { display: flex; gap: 12px; align-items: center; }
    .footer-bar .face-group { gap: 4px; padding: 0; background: none; }
    .footer-bar .face-btn { width: 34px; height: 36px; border: 1px solid #dce4dd; background: #f6f8f5; border-radius: 8px; }
    .footer-bar .color-trigger { width: 36px; height: 36px; border-radius: 9px; }
    .footer-bar .sep { display: none; }
    .footer-bar .link-sec { display: flex; flex: 1; min-width: 0; }
    .footer-bar .link-group { width: 100%; gap: 6px; }
    .footer-link-field { flex: 1; }
    .footer-bar .link-input, .footer-bar .link-input:focus { width: 100%; height: 36px; box-sizing: border-box; border-radius: 8px; font-size: 12px; }
    .footer-bar .purchase-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
    .footer-bar .purchase-actions .spacer { display: none; }
    .footer-bar .pay-group { gap: 4px; }
    .footer-bar .btn-buy { height: 40px; min-height: 40px; gap: 10px; padding: 0 14px; border-radius: 10px; background: #243e2e; box-shadow: none; }
    .footer-bar .btn-buy .buy-total { background: none; padding: 0; font-size: 14px; }
    .footer-bar .btn-buy::after { content: none; }
    .footer-bar .btn-buy:has(.btn-spinner:not(.u-hidden))::after { display: none; }
    .footer-bar .cube-strip { gap: 12px; }
    .footer-bar .strip-cube { --strip-cube-size: 30px; }
    .footer-bar .sc-price { font-size: 11px; }
    .footer-bar #wb-error:not([hidden]) { display: block; font-size: 12px; color: #963c26; padding: 6px; }
}

/* Native hidden also applies after controls move into the mobile panel. */
.footer-bar [hidden] { display: none !important; }
.footer-bar:has(.footer-row-cubes[hidden]) { --footer-tray-offset: 0px; }

/* The selected card exposes separate selection, price and removal actions. */
.footer-bar .cube-strip { align-items: center; height: 100%; box-sizing: border-box; padding: 4px 6px; }
.footer-bar .strip-cube { cursor: default; }
.footer-bar .strip-cube.active { --strip-cube-size: 40px; transform: none; flex-direction: row; gap: 8px; }
.footer-bar .sc-face { padding: 0; flex-shrink: 0; cursor: pointer; }
.sc-price-btn { height: 36px; border: 1px solid #dce4dd; border-radius: 8px; background: #f6f8f5; color: #365943; cursor: pointer; font: inherit; }
.sc-price-btn { padding: 0 8px; font-size: 12px; white-space: nowrap; }
.sc-thumbnail { position: relative; flex-shrink: 0; width: var(--strip-cube-size); height: var(--strip-cube-size); }
.sc-remove { position: absolute; right: -7px; top: -6px; z-index: 3; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid white; border-radius: 50%; color: white; background: #ba493d; font: 16px/1 Arial, sans-serif; cursor: pointer; }
.sc-remove:hover, .sc-remove:focus-visible { background: #923127; }

#footer-discard-all { flex-shrink: 0; border: 0; padding: 8px 4px; background: none; color: #79514b; font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }
.wb-mobile #footer-discard-all { min-height: 44px; margin-top: 8px; font-size: 13px; }

#link-chip { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 1px solid #dce4dd; border-radius: 8px; background: #f6f8f5; color: #365943; cursor: pointer; }
#link-chip-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#link-popover { inset: auto 0 128px; margin: 0 auto; width: min(360px, calc(100vw - 56px)); padding: 16px; border: 1px solid #dce4dd; border-radius: 14px; background: white; box-shadow: 0 8px 30px #243e2e33; }
#link-popover .footer-control-label, #link-popover .footer-link-field > span { position: static; width: auto; height: auto; padding: 0; margin: 0; clip-path: none; white-space: normal; overflow: visible; }
#link-popover .link-group { margin-top: 12px; }
.wb-mobile #link-chip { display: none; }

.footer-bar .btn-buy .btn-text { line-height: 1.2; }
.footer-bar .btn-buy[data-region-unavailable="true"] { max-width: 260px; white-space: normal; cursor: not-allowed; transition: none; }
.footer-bar .btn-buy[data-region-unavailable="true"] .btn-text { font-size: 11px; line-height: 13px; }
.footer-bar .btn-buy[data-region-unavailable="true"] .buy-total,
.footer-bar .btn-buy[data-region-unavailable="true"]::after { display: none; }
.wb-mobile .btn-buy[data-region-unavailable="true"] { width: min(140px, 36vw); padding: 3px 6px; }
.wb-mobile .btn-buy[data-region-unavailable="true"] .btn-text { font-size: 10px; line-height: 11px; }

/* Colored palette, icon link and a plain purchase label. */
.palette-icon, .link-icon { width: 24px; height: 24px; flex-shrink: 0; }
.footer-bar .color-trigger { --selected-color: #4caf50; display: grid; place-items: center; background: #fffdf8; border: 1px solid #dce4dd; border-bottom: 4px solid var(--selected-color); }
.footer-bar .color-trigger::after { content: none; }
.wb-cube .palette-icon { width: 30px; height: 30px; }
.wb-tabs .palette-icon, .wb-tabs .link-icon { width: 22px; height: 22px; }
.wb-tabs [data-wb-tab="link"] > span { display: none; }
#buyTotal { flex-shrink: 0; color: #365943; font-size: 14px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-mobile #wb-buy { display: flex; align-items: center; gap: 8px; }
.wb-mobile #buyTotal { font-size: 12px; }
.wb-mobile .btn-buy { min-width: 62px; height: 44px; padding: 0 12px; flex-direction: row; }
.wb-mobile .btn-buy .btn-text { font-size: 13px; font-weight: 650; }
.purchase-actions:has([data-region-unavailable="true"]) > #buyTotal,
#wb-buy:has([data-region-unavailable="true"]) > #buyTotal { display: none; }