.step2-only {
    display: none;
}

body[data-step="2"] .step2-only {
    display: revert;
}

body[data-step="2"] .step1-only {
    display: none;
}

body[data-step="2"] #shape-editor {
    pointer-events: auto;
}

body[data-step="2"] #editor-wrap {
    pointer-events: auto;
}

body[data-mode="planks"] #btn-tiles,
body[data-mode="planks"] #btn-tiles-m,
body[data-mode="planks"] #btn-tiles-pattern,
body[data-mode="planks"] #btn-tiles-tilesbase,
body[data-mode="planks"] #btn-tiles-plinths,
body[data-mode="planks"] #btn-tiles-pattern-m,
body[data-mode="planks"] #btn-tiles-tilesbase-m,
body[data-mode="planks"] #btn-tiles-plinths-m,
body[data-mode="planks"] #tilespacing-row {
    display: none !important;
}

body[data-mode="tiles"] #btn-planks,
body[data-mode="tiles"] #btn-pattern,
body[data-mode="tiles"] #btn-underlay,
body[data-mode="tiles"] #btn-plinths,
body[data-mode="tiles"] #btn-planks-m,
body[data-mode="tiles"] #btn-pattern-m,
body[data-mode="tiles"] #btn-underlay-m,
body[data-mode="tiles"] #btn-plinths-m {
    display: none !important;
}

body[data-mode="tiles"] #plank-stylepicker {
    display: none !important;
}


#floating-panel {
  display: none;
}
#floating-panel {
  will-change: transform;
}

body:not([data-step="1"]) .step1-only {
    display: none !important;
}
/* Export button - visible but disabled in step 1 */
 /* Export button - visible but disabled in step 1 */
 #btn-share,
 #btn-export {
   display: inline-flex;
   opacity: 0.35;
   position: relative;
 }

  body[data-step="2"] #btn-share,
 body[data-step="2"] #btn-export {
   opacity: 1;
   cursor: pointer;
   pointer-events: auto;
 }

body[data-step="2"] #btn-planks.pill-control.pill-button {
    --pill-leading-src: url("/icons/edit_planks.svg");
}

body[data-step="2"] #btn-pattern.pill-control.pill-button {
    --pill-leading-src: url("/icons/edit_pattern.svg");
}

body[data-step="2"] #btn-underlay.pill-control.pill-button {
    --pill-leading-src: url("/icons/underlay.svg");
}

body[data-step="2"] #btn-plinths.pill-control.pill-button {
    --pill-leading-src: url("/icons/plinths.svg");
}

body[data-step="2"] #btn-tiles.pill-control.pill-button {
    --pill-leading-src: url("/icons/edit_tiles.svg");
}

body[data-step="2"] #btn-tiles-pattern.pill-control.pill-button {
    --pill-leading-src: url("/icons/edit_tilespattern.svg");
}

body[data-step="2"] #btn-tiles-tilesbase.pill-control.pill-button {
    --pill-leading-src: url("/icons/tiles_grout.svg");
}

body[data-step="2"] #btn-tiles-plinths.pill-control.pill-button {
    --pill-leading-src: url("/icons/plinths.svg");
}

body[data-step="2"] .icon-btn[data-icon="direction"] {
    --icon-src: url("/icons/direction.svg");
}

body[data-step="2"] .icon-btn[data-icon="offsetplayer"] {
    --icon-src: url("/icons/offsetpattern.svg");
}


/* Step 1 = Step 2 controls MUST NOT render */

body[data-step="1"] #btn-direction,
body[data-step="1"] #btn-planks,
body[data-step="1"] #btn-pattern,
body[data-step="1"] #btn-underlay,
body[data-step="1"] #btn-plinths,
body[data-step="1"] #btn-tiles,
body[data-step="1"] #btn-tiles-pattern,
body[data-step="1"] #btn-tiles-tilesbase,
body[data-step="1"] #btn-tiles-plinths,
body[data-step="1"] #pieces-wrap,
body[data-step="1"] #packs-wrap,
body[data-step="1"] #surplus-wrap {
    display: none;
}

/* Step2-only rows */
body[data-step="1"] .project-container .output-block.step2-only {
    display: none !important;
}

body[data-step="2"] .project-container .output-block.step2-only {
    display: flex !important;
}


/* mobile: show ONLY in step 2 */
@media (max-width: 820px) {
    body[data-step="2"] .step2-mobile-only {
        display: inline-flex !important;
    }
}

/* desktop: show ONLY in step 2 */
@media (min-width: 821px) {
    body[data-step="2"] .step2-desktop-only {
        display: inline-flex !important;
    }
}

body[data-step="2"] #editor-tools-topright .step2-only {
    display: inline-flex !important;
}


@media (max-width: 820px) {

    body[data-step="2"] .step2-mobile-only {
        display: inline-flex !important;
    }

    body[data-step="1"] .mproj-btn {
        pointer-events: none;
    }

    body[data-step="1"] .mobile-project-toggle {
        pointer-events: none;
    }


    /* Step 1: no icon, no dropdown arrow */
    body[data-step="1"] .mobile-project-toggle::before,
    body[data-step="1"] .mobile-project-toggle::after {
        content: none !important;
        display: none !important;
    }

    /* Step 2: no icon, BUT show the dropdown arrow */
    body[data-step="2"] .mobile-project-toggle {
        position: relative;
        padding-right: calc(var(--s12-p-) + var(--s18-p-) + var(--s10-p-)) !important;
        /* reserve space for arrow */
    }

    body[data-step="2"] .mobile-project-toggle::before {
        content: none !important;
        display: none !important;
    }

    body[data-step="2"] .mobile-project-toggle::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        right: var(--s12-p-);
        top: 50%;
        transform: translateY(-50%);
        width: var(--s18-p-);
        height: var(--s18-p-);
        background-color: var(--ak-icon-default);
        mask: url("/icons/arrowdown.svg") center/contain no-repeat;
        -webkit-mask: url("/icons/arrowdown.svg") center/contain no-repeat;
        pointer-events: none;
    }

}

body[data-step="2"] svg .step2-only {
    display: inline;
}


body[data-step="2"] #centerline-mode-btn.step2-only {
    display: none !important;
}


#centerline-layer {
    display: none;
    pointer-events: none;
}

/* show only when (step2 + supported pattern) AND (user enabled) */
html[data-centerline="visible"] body[data-step="2"][data-mode="planks"][data-patternmode="herringbone"] #centerline-layer,
html[data-centerline="visible"] body[data-step="2"][data-mode="planks"][data-patternmode="herringbone2"] #centerline-layer,
html[data-centerline="visible"] body[data-step="2"][data-mode="tiles"][data-patternmode="herringbone"] #centerline-layer,
html[data-centerline="visible"] body[data-step="2"][data-mode="tiles"][data-patternmode="herringbone2"] #centerline-layer {
    display: inline;
    pointer-events: none;
}


body[data-step="2"][data-mode="planks"][data-patternmode="herringbone"] #centerline-mode-btn.step2-only,
body[data-step="2"][data-mode="planks"][data-patternmode="herringbone2"] #centerline-mode-btn.step2-only,
body[data-step="2"][data-mode="tiles"][data-patternmode="herringbone"] #centerline-mode-btn.step2-only,
body[data-step="2"][data-mode="tiles"][data-patternmode="herringbone2"] #centerline-mode-btn.step2-only {
    display: unset !important;
}


body[data-mode="tiles"] .output-block--underlay { display: none !important; }