/* Casetify opens the customizer as a full-viewport overlay, not embedded in
   the normal page layout — that's also the only way FPD's own "large" UI
   layout gets enough room to size its canvas correctly. */
.csw-wrapper {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 20%);
    grid-template-areas:
        "preview infobar"
        "preview panel";
    grid-template-rows: auto 1fr;
    background: #f2f2f2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #111;
    overflow-y: auto;
}

/* Woodmart/WooCommerce apply text-transform:uppercase and letter-spacing to
   every <button> globally — reset it inside our wizard so labels render in
   normal case like Casetify's, not ALL CAPS. */
.csw-wrapper button {
    text-transform: none;
    letter-spacing: normal;
}

.csw-wrapper :where(button) {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}

.csw-info-bar { grid-area: infobar; }
.csw-preview { grid-area: preview; }
.csw-panel { grid-area: panel; }

/* Desktop: this wrapper is invisible to the grid — .csw-preview and
   .csw-panel act as if they were direct children of .csw-wrapper. Mobile
   turns it into the positioning context for the animated bottom sheet. */
.csw-body {
    display: contents;
}

/* --- mobile compact step navigator ("‹ 02 Case Color   03 Photo") ---
   Hidden on desktop; on mobile it replaces the stacked accordion headers so
   the preview keeps most of the screen and only one step body shows. */
.csw-mobile-nav {
    display: none;
}

.csw-close {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csw-preview {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: #f2f2f2;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.csw-preview .fpd-container {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    aspect-ratio: 580 / 1070;
}

.csw-preview .fpd-product-designer-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No "card" — the case should float directly on the flat backdrop, same as
   Casetify, instead of sitting inside its own white box. */
.csw-preview .fpd-container,
.csw-preview fpd-main-wrapper,
.csw-preview .fpd-product-stage,
.csw-preview .fpd-view-stage {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.csw-panel {
    display: flex;
    flex-direction: column;
    padding: 16px 20px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 0;
    background: #fff;
    margin: 14px 20px 20px;
    border-radius: 16px;
}

/* --- Clear / Shuffle: floating over the preview, bottom-left --- */
.csw-preview-actions {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    gap: 10px;
    z-index: 1;
}

.csw-clear-btn,
.csw-shuffle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff !important;
    color: #111 !important;
    border: none;
    border-radius: 20px !important;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.csw-clear-btn:hover,
.csw-shuffle-btn:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

/* --- footer page navigator ("‹  02/03  [icon]") --- */
.csw-footer-nav {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.csw-footer-prev-btn {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    font-size: 18px;
    line-height: 1;
    color: #111 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csw-footer-prev-btn:disabled {
    color: #ccc;
    cursor: default;
}

.csw-footer-position {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.02em;
}

.csw-footer-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: none;
    background: #111 !important;
    color: #fff !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csw-footer-action-btn:hover {
    background: #000;
}

.csw-footer-action-btn:disabled {
    background: #ddd !important;
    color: #fff !important;
    cursor: default;
}

/* FPD's own native "Customize" trigger (a Woodmart/WPBakery template element,
   #fpd-start-customizing-button — not wired through any woocommerce_* action
   hook, so remove_action() on those never touches it) would otherwise show
   up as a second, differently-styled button alongside ours. */
#fpd-start-customizing-button {
    display: none !important;
}

/* --- "Customize" trigger button injected into the normal product page --- */
.csw-customize-btn-wrap {
    margin: 18px 0;
}

.csw-customize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111 !important;
    color: #fff !important;
    border: none;
    border-radius: 24px !important;
    padding: 14px 30px !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: none !important;
    cursor: pointer;
}

.csw-customize-btn:hover {
    background: #000 !important;
    color: #fff !important;
}

/* --- sticky info bar --- */
.csw-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4472e;
    color: #fff;
    padding: 14px 16px 14px 20px;
    margin: 20px 20px 0;
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(244, 71, 46, 0.25);
}

.csw-info-text {
    flex: 1 1 auto;
    min-width: 0;
}

.csw-device-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
}

.csw-device-sub {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
}

.csw-device-price {
    font-size: 10.5px;
    opacity: 0.85;
    line-height: 1.4;
    margin-top: 1px;
}

.csw-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #111 !important;
    color: #fff !important;
    border: none;
    border-radius: 20px !important;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.csw-add-btn:hover {
    background: #000;
}

.csw-icon {
    flex: 0 0 auto;
    display: block;
}

/* --- steps accordion --- */
.csw-steps {
    border-top: 1px solid #ececec;
    margin-top: 20px;
}

.csw-step {
    border-bottom: 1px solid #ececec;
}

.csw-step-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none !important;
    border: none;
    padding: 18px 2px;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    color: #111;
    transition: font-weight 0.1s ease;
}

.csw-step-header:hover {
    color: #000;
}

.csw-step.is-open .csw-step-header {
    font-weight: 700;
}

.csw-step-num {
    font-weight: inherit;
    color: inherit;
}

.csw-step-title {
    flex: 1 1 auto;
    font-weight: inherit;
}

.csw-step-toggle {
    width: 11px;
    height: 11px;
    position: relative;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.csw-step-toggle::before,
.csw-step-toggle::after {
    content: "";
    position: absolute;
    background: #111;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.csw-step-toggle::before {
    width: 11px;
    height: 1.5px;
}

.csw-step-toggle::after {
    width: 1.5px;
    height: 11px;
}

.csw-step.is-open .csw-step-toggle {
    transform: rotate(45deg);
}

.csw-step-body {
    display: none;
    padding: 2px 2px 24px;
}

.csw-step.is-open .csw-step-body {
    display: block;
}

/* --- device type picker: grid of product-category icons, Casetify-style --- */
.csw-devicetype-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 18px;
    column-gap: 8px;
}

.csw-devicetype-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    cursor: pointer;
}

.csw-devicetype-thumb {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    border: 1.5px solid transparent;
    color: #888;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.csw-devicetype-option.is-selected .csw-devicetype-thumb {
    border-color: #111;
    color: #111;
}

.csw-devicetype-label {
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    color: #888;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.csw-devicetype-option.is-selected .csw-devicetype-label {
    color: #111;
    font-weight: 600;
}

/* --- case type picker: grid of case-model thumbnails, Casetify-style --- */
.csw-casetype-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 18px;
    column-gap: 8px;
}

.csw-casetype-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0;
    cursor: pointer;
}

.csw-casetype-thumb {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    border: 1.5px solid transparent;
    color: #888;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.csw-casetype-option.is-selected .csw-casetype-thumb {
    border-color: #111;
    color: #111;
}

.csw-casetype-label {
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    color: #888;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.csw-casetype-price {
    font-size: 9.5px;
    color: #aaa;
}

.csw-casetype-option.is-selected .csw-casetype-label {
    color: #111;
    font-weight: 600;
}

.csw-casetype-option.is-selected .csw-casetype-price {
    color: #888;
}

/* --- design mode picker (step 1): circular icon buttons, Casetify-style --- */
.csw-design-options {
    display: flex;
    gap: 22px;
}

.csw-design-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    cursor: pointer;
}

.csw-design-thumb {
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    border: 1.5px solid #e2e2e2;
    color: #888;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.csw-design-option.is-selected .csw-design-thumb {
    border: 2px solid #111;
    color: #111;
}

.csw-design-label {
    font-size: 11px;
    color: #888;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.csw-design-option.is-selected .csw-design-label {
    color: #111;
    font-weight: 600;
}

/* --- device model: brand/model dropdown pair + picker overlay --- */
.csw-model-select-row {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #ddd;
    border-radius: 24px;
    overflow: hidden;
}

.csw-model-trigger {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 11px 14px;
    cursor: pointer;
}

.csw-model-trigger:first-child {
    border-right: 1.5px solid #ddd !important;
}

.csw-model-trigger-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.csw-model-trigger .csw-icon {
    flex: 0 0 auto;
    color: #888;
}

.csw-model-picker {
    display: none;
}

.csw-model-field.is-picker-open .csw-model-select-row {
    display: none;
}

.csw-model-field.is-picker-open .csw-model-picker {
    display: block;
}

.csw-model-picker-title {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 2px 0 14px;
}

.csw-brand-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.csw-brand-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 4px;
    border: 1.5px solid #ddd !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #888 !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csw-brand-tab.is-selected {
    border-color: #111 !important;
    color: #111 !important;
}

.csw-model-list-wrap {
    max-height: 260px;
    overflow-y: auto;
}

.csw-model-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.csw-model-list[hidden] {
    display: none;
}

.csw-model-row {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.csw-model-row.is-selected {
    border: 2px solid #111 !important;
    font-weight: 700;
}

/* While the model picker is open, it takes over the whole panel — like
   Casetify's real picker — instead of just expanding in place between the
   other (still-visible) accordion steps. */
.csw-wrapper.is-model-picker-open .csw-mobile-nav {
    display: none;
}

.csw-wrapper.is-model-picker-open .csw-steps > .csw-step {
    display: none;
}

.csw-wrapper.is-model-picker-open .csw-steps > .csw-step[data-step="model"] {
    display: block;
}

.csw-wrapper.is-model-picker-open .csw-steps > .csw-step[data-step="model"] .csw-step-header {
    display: none;
}

/* --- color swatches --- */
.csw-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.csw-swatch {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.csw-swatch-dot {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease;
}

.csw-swatch.is-selected .csw-swatch-dot {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 2px #fff, 0 0 0 3.5px #111;
}

.csw-swatch-caption {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 600;
    color: #111;
}

/* --- font style picker --- */
.csw-font-caption {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin: 0 0 16px;
}

.csw-font-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 18px;
    column-gap: 8px;
}

.csw-font-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    cursor: pointer;
}

.csw-font-thumb {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    border: 1.5px solid transparent;
    color: #111;
    font-size: 13px;
    transition: border-color 0.15s ease;
}

.csw-font-thumb-none {
    color: #888;
}

.csw-font-option.is-selected .csw-font-thumb {
    border-color: #111;
}

.csw-font-label {
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    color: #888;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.csw-font-option.is-selected .csw-font-label {
    color: #111;
    font-weight: 600;
}

/* --- personalize: free-text input --- */
.csw-personalize-field {
    display: flex;
    align-items: center;
    border: 1.5px solid #ddd !important;
    border-radius: 24px !important;
    padding: 4px 6px 4px 18px;
    box-sizing: border-box;
}

.csw-personalize-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 14px;
    padding: 10px 0;
    outline: none;
    color: #111;
}

.csw-personalize-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: #999;
    padding: 0 10px;
}

/* --- font color picker --- */
.csw-fontcolor-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.csw-fontcolor-swatch {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: block !important;
    position: relative;
    cursor: pointer;
}

.csw-fontcolor-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--fontcolor);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.csw-fontcolor-dot-rainbow {
    background: conic-gradient(red, #ff0, lime, cyan, blue, magenta, red);
}

.csw-fontcolor-swatch.is-selected .csw-fontcolor-dot {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px #fff, 0 0 0 3.5px #111;
}

/* --- text layout picker --- */
.csw-layout-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 18px;
    column-gap: 8px;
}

.csw-layout-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    cursor: pointer;
}

.csw-layout-thumb {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #f6f6f6;
    border: 1.5px solid transparent;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease;
}

.csw-layout-glyph {
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
}

.csw-layout-glyph-large {
    font-size: 18px;
}

.csw-layout-glyph-small {
    font-size: 11px;
}

.csw-layout-option.is-selected .csw-layout-thumb {
    border-color: #111;
}

.csw-layout-label {
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    color: #888;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.csw-layout-option.is-selected .csw-layout-label {
    color: #111;
    font-weight: 600;
}

.csw-fontcolor-custom-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none !important;
    background: none !important;
    cursor: pointer;
    opacity: 0;
}

/* --- FPD's own Photo/upload module (inside the Photo step): its default
   dropzone/tabs/QR-code chrome is replaced entirely by our own "Add Photos"
   button (see .csw-photo-upload below) — hide FPD's UI, keep the file input
   and thumbnail grid working underneath. --- */
.csw-panel .fpd-module-tabs,
.csw-panel .fpd-upload-image,
.csw-panel [data-context="qr-code"] {
    display: none;
}

.csw-panel .fpd-sc-module-wrapper {
    height: auto !important;
    min-height: 0 !important;
}

.csw-photo-upload {
    text-align: center;
    padding: 4px 4px 20px;
}

.csw-photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111 !important;
    color: #fff !important;
    border-radius: 24px !important;
    padding: 12px 26px !important;
    font-size: 13px;
    font-weight: 700;
}

.csw-photo-upload-caption {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.csw-photo-upload-legal {
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: #999;
}

/* --- Edit Photo step: our own Scale/Rotate/Opacity/Flip/Remove controls,
   driving the fabric.js object directly instead of FPD's native
   fpd-element-toolbar (which we hide entirely below — its own Scale
   slider had no lower bound tied to our print-area "cover" fit, so it
   would reset a freshly-uploaded photo's scale back to 1 and jump/stick
   at the wrong zoom level). --- */
.csw-edit-photo-empty {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 10px 0;
}

.csw-edit-photo-slot {
    min-height: 90px;
    transition: min-height 0.15s ease;
}

.csw-transform-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.csw-transform-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.csw-transform-label {
    flex: 0 0 60px;
    font-size: 12px;
    font-weight: 600;
    color: #111;
}

.csw-transform-row input[type="range"] {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #e5e5e5 !important;
    outline: none;
}

.csw-transform-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #111 !important;
    cursor: pointer;
    border: none;
}

.csw-transform-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #111 !important;
    cursor: pointer;
    border: none;
}

.csw-transform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.csw-transform-flip-h,
.csw-transform-flip-v,
.csw-transform-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f3f3 !important;
    color: #111 !important;
    border: none;
    border-radius: 16px !important;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.csw-transform-flip-h:hover,
.csw-transform-flip-v:hover,
.csw-transform-remove:hover {
    background: #ebebeb !important;
}

.csw-transform-remove {
    color: #c0392b !important;
}

/* FPD's own native per-element toolbar (Transform/Position/Reset/Remove)
   is fully replaced by the panel above — hide it everywhere so it never
   floats over the canvas as a second, redundant control surface. */
fpd-element-toolbar {
    display: none !important;
}

/* --- FPD's own default chrome: hidden. Everything is driven by our
   accordion steps instead (device model / case color / photo). --- */
.csw-preview fpd-actions-bar,
.csw-preview fpd-main-bar,
.csw-preview fpd-views-grid,
.csw-preview fpd-views-nav,
.csw-preview .fpd-loader-wrapper {
    display: none !important;
}

.csw-preview fpd-main-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
}

.csw-preview .fpd-container {
    padding: 0 !important;
}

/* Mobile overrides — must stay LAST in the file so they win the cascade
   over the desktop rules above (equal specificity, source order decides). */
@media (max-width: 782px) {
    .csw-wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .csw-info-bar {
        padding: 12px 16px;
        margin: 12px 12px 0;
        flex-wrap: wrap;
        flex: 0 0 auto;
    }

    /* The positioning context for the animated bottom sheet: preview fills
       it, panel is pinned to its bottom edge, both driven by the same
       --csw-panel-h custom property so they move in lockstep. */
    .csw-body {
        display: block;
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        --csw-panel-h: 220px;
    }

    .csw-preview {
        position: absolute;
        inset: 0;
        bottom: var(--csw-panel-h);
        padding: 12px 12px 4px;
        transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .csw-preview .fpd-container {
        max-height: 100%;
    }

    /* Compact, height-animated bottom sheet: Clear sits right above it,
       then the step navigator, then only the current step's content. */
    .csw-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--csw-panel-h);
        padding: 0;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }

    /* A drill-down picker (device model) needs to cover most of the phone,
       not shrink it — resizing the FPD canvas that small makes it crop
       instead of scale. So the preview stays at its normal full size and
       the (now much taller) panel simply overlaps on top of it. */
    .csw-wrapper.is-model-picker-open .csw-preview {
        bottom: 0;
    }

    /* The desktop "‹ 02/03 [icon]" footer is redundant with the mobile step
       navigator above the steps, so it's hidden here. */
    .csw-footer-nav {
        display: none;
    }

    .csw-preview-actions {
        left: 12px;
        bottom: 12px;
    }

    .csw-mobile-nav {
        order: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        flex: 0 0 auto;
    }

    .csw-mobile-prev-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        color: #999;
        font-size: 14px;
        cursor: pointer;
        padding: 0;
    }

    .csw-mobile-prev-btn:disabled {
        visibility: hidden;
    }

    .csw-mobile-prev-arrow {
        font-size: 18px;
    }

    .csw-mobile-current-label {
        font-weight: 700;
        font-size: 15px;
        flex: 1 1 auto;
    }

    .csw-mobile-next-btn {
        background: #111 !important;
        color: #fff !important;
        border: none;
        border-radius: 50% !important;
        width: 28px;
        height: 28px;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .csw-mobile-next-btn:disabled {
        visibility: hidden;
    }

    .csw-steps {
        order: 3;
        border-top: none;
        overflow-y: auto;
        flex: 1 1 auto;
    }

    /* All the per-step numbered headers are replaced by the one shared
       mobile navigator above — only the open step's body shows. */
    .csw-step-header {
        display: none !important;
    }

    .csw-step {
        border-bottom: none;
        display: none !important;
    }

    .csw-step.is-open {
        display: block !important;
    }

    .csw-step-body {
        padding: 14px 20px 24px;
    }
}