.step2-only {
    display: none;
}



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

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

body[data-step="2"] #btn-import-pdf.step1-only,
body:not([data-step="1"]) #btn-import-pdf.step1-only {
    display: inline-flex !important;
    opacity: 0.35;
    cursor: not-allowed;
}

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;
}

body[data-step="2"] #btn-import-pdf[aria-disabled="true"] {
    pointer-events: auto;
}
/* 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;
 }

html:not([data-share-button-visible="1"]) #btn-share {
        display: none !important;
}

html[data-share-button-visible="1"] #btn-share {
        display: inline-flex !important;
}

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

html[data-view-only="1"] #cost-panel,
html[data-view-only="1"] .cost-panel,
html[data-view-only="1"] #mobile-outputs-panel-body .cost-panel,
html[data-view-only="1"] #mobile-project-panel-body .cost-panel,
html[data-share="1"] #cost-panel,
html[data-share="1"] .cost-panel,
html[data-share="1"] #mobile-outputs-panel-body .cost-panel,
html[data-share="1"] #mobile-project-panel-body .cost-panel,
html[data-view-only="1"] body[data-step="1"] .space-container .project-middle > #cost-panel,
html[data-view-only="1"] body[data-step="2"] .space-container .project-middle > #cost-panel,
html[data-share="1"] body[data-step="1"] .space-container .project-middle > #cost-panel,
html[data-share="1"] body[data-step="2"] .space-container .project-middle > #cost-panel,
html[data-view-only="1"] body[data-step="1"] #mobile-outputs-panel-body .project-container > #cost-panel,
html[data-view-only="1"] body[data-step="2"] #mobile-outputs-panel-body .project-container > #cost-panel,
html[data-share="1"] body[data-step="1"] #mobile-outputs-panel-body .project-container > #cost-panel,
html[data-share="1"] body[data-step="2"] #mobile-outputs-panel-body .project-container > #cost-panel {
    display: none !important;
}

html[data-view-only="1"] #ak-mode,
html[data-view-only="1"] #units-switch,
html[data-view-only="1"] #btn-import-pdf,
html[data-view-only="1"] #edit-reference-toggle-btn,
html[data-view-only="1"] #btn-direction,
html[data-view-only="1"] [data-preview-locked="1"] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

html[data-view-only="1"] #pdf-reference-toggle-btn,
html[data-view-only="1"] #floating-panel-hide,
html[data-view-only="1"] #floating-panel-move,
html[data-view-only="1"] #step-pill-1,
html[data-view-only="1"] #step-pill-2,
html[data-view-only="1"] #info-mode-btn,
html[data-view-only="1"] #label-mode-btn,
html[data-view-only="1"] #centerline-mode-btn,
html[data-view-only="1"] #loss-mode-btn,
html[data-view-only="1"] #detail-mode-btn {
    pointer-events: auto !important;
}

html[data-view-only="1"] .project-container--nav .project-container__top-control,
html[data-view-only="1"] #mobile-open-projects-btn,
html[data-share="1"] #mobile-open-projects-btn,
html[data-view-only="1"] #btn-projects,
html[data-view-only="1"] #btn-export,
html[data-view-only="1"] #btn-share,
html[data-view-only="1"] #offset-mode-btn,
html[data-view-only="1"] .space-container > .floor-head .floor-head__actions,
html[data-view-only="1"] .project-container--nav .project-container__top-control .floor-head__actions,
html[data-view-only="1"] .project-container--nav .project-spaces-overview__actions,
html[data-view-only="1"] .project-container--nav .project-spaces-overview__chevron,
html[data-view-only="1"] .edit-icon {
    display: none !important;
}

html[data-view-only="1"] .project-container.project-container--nav {
    pointer-events: none !important;
    user-select: none !important;
}

html[data-view-only="1"] #btn-account,
html[data-share="1"] #btn-account,
html[data-view-only="1"] #account-overlay,
html[data-view-only="1"] #account-wrap,
html[data-view-only="1"] #plans-wrap,
html[data-view-only="1"] #subscription-wrap,
html[data-share="1"] #account-overlay,
html[data-share="1"] #account-wrap,
html[data-share="1"] #plans-wrap,
html[data-share="1"] #subscription-wrap {
    display: none !important;
}

.pop-container--previewlabel,
.pop-container--startlayout {
    display: none !important;
}

.pop-container--previewlabel {
    height: var(--ak-height-toolbar) !important;
    min-height: var(--ak-height-toolbar) !important;
}

html[data-view-only="1"] .pop-container--account,
html[data-share="1"] .pop-container--account {
    display: none !important;
}

html[data-preview-live-layout="1"] .pop-container--previewlabel {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-view-only="1"] .pop-container--startlayout,
html[data-share="1"] .pop-container--startlayout {
    display: block !important;
}

html[data-preview-live-layout="1"] .pop-container--previewlabel {
    background: var(--ak-ctastart) !important;
    background-color: var(--ak-ctastart) !important;
}

#btn-preview-label,
#btn-start-layout,
#mobile-open-preview-mode {
    display: none !important;
}

html[data-preview-live-layout="1"] #btn-preview-label,
html[data-view-only="1"] #btn-start-layout,
html[data-share="1"] #btn-start-layout {
    display: inline-flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html[data-view-only="1"] #mobile-open-preview-mode,
html[data-share="1"] #mobile-open-preview-mode {
    display: inline-flex !important;
}

html[data-preview-live-layout="1"] #btn-preview-label {
    pointer-events: none !important;
    cursor: default !important;
}

html[data-view-only="1"] .project-container--nav .project-spaces-overview__item.is-active {
    background: transparent !important;
}

html[data-view-only="1"] .project-container--nav .project-spaces-overview__item.is-active .project-spaces-overview__name {
    color: var(--ak-share) !important;
}

html[data-view-only="1"] :is(
    .toolbar,
    .floating-panel,
    .detail-panel,
    .angle-panel,
    .project-container,
    .space-container,
    .account-container,
    .lang-switch__btn,
    .lang-switch__panel,
    .pop-container,
    .mproj-btn
),
html[data-share="1"] :is(
    .toolbar,
    .floating-panel,
    .detail-panel,
    .angle-panel,
    .project-container,
    .space-container,
    .account-container,
    .lang-switch__btn,
    .lang-switch__panel,
    .pop-container,
    .mproj-btn
) {
    border-color: var(--ak-ctastartborder) !important;
}

html[data-view-only="1"] #planks-panel .icon_inputfield--price,
html[data-view-only="1"] #tiles-panel .icon_inputfield--price,
html[data-view-only="1"] #tile-adhesive-price-row,
html[data-view-only="1"] #planks-panel .floating-row--area-box-output,
html[data-view-only="1"] #tiles-panel .floating-row--area-box-output,
html[data-view-only="1"] #tile-adhesive-bags-wrap,
html[data-view-only="1"] #adhesive-price-block {
    display: none !important;
}

html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) .ii-icon,
html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) .ii-minus,
html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) .ii-plus {
    display: none !important;
}

html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) input,
html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) select,
html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) textarea,
html[data-view-only="1"] :is(
    #pattern-panel,
    #tilespattern-panel,
    #underlay-panel,
    #plinths-panel,
    #tiles-plinths-panel,
    #planks-panel,
    #tiles-panel,
    #tilesbase-panel,
    #openings-panel,
    #reference-wrap-body,
    #angle-wrap,
    #off-wrap,
    #edge-wrap,
    #points-wrap,
    #hole-wrap,
    #freestart-wrap
) button:not(.panel-hide-icon) {
    pointer-events: none !important;
}

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 {
    display: none;
}

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

body[data-step="2"] .space-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) {

    .account-actions__items .pop-container--previewlabel,
    .account-actions__items #btn-preview-label,
    html[data-view-only="1"] .account-actions__items .pop-container--startlayout,
    html[data-share="1"] .account-actions__items .pop-container--startlayout {
        display: none !important;
    }

    .account-actions__items .pop-container--previewlabel {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    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="1"][data-mode="tiles"] svg #step2-tiles-root,
body[data-step="1"][data-mode="planks"] svg #step2-planks-root {
    display: inline !important;
    pointer-events: none;
}

body[data-step="1"][data-mode="tiles"] svg #tiles-texture-layer,
body[data-step="1"][data-mode="tiles"] svg #tiles-loss-layer,
body[data-step="1"][data-mode="tiles"] svg #tiles-plinths-layer,
body[data-step="1"][data-mode="tiles"] svg #tiles-openings-overlay,
body[data-step="1"][data-mode="tiles"] svg #tiles-ui-layer,
body[data-step="1"][data-mode="planks"] svg #planks-texture-layer,
body[data-step="1"][data-mode="planks"] svg #planks-loss-layer,
body[data-step="1"][data-mode="planks"] svg #underlay-loss-layer,
body[data-step="1"][data-mode="planks"] svg #planks-plinths-layer,
body[data-step="1"][data-mode="planks"] svg #planks-openings-overlay,
body[data-step="1"][data-mode="planks"] svg #planks-underlay-layer,
body[data-step="1"][data-mode="planks"] svg #planks-ui-layer,
body[data-step="1"][data-mode="planks"] svg #free-ui-starter,
body[data-step="1"] svg #centerline-layer {
    display: none !important;
    pointer-events: none !important;
}

body[data-step="1"][data-mode="tiles"] svg #tiles-boards-layer,
body[data-step="1"][data-mode="planks"] svg #planks-boards-layer {
    display: inline !important;
    pointer-events: none !important;
}

body[data-step="1"] svg #tiles-boards-layer .board {
    stroke: #ffffff95 !important;
    stroke-width:  1px !important;
}

body[data-step="1"] svg #planks-boards-layer .board {
    stroke: #f1f1f19e !important;
    stroke-width:  1px !important;
}


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; }