.sd-dc{--border:#ddd8cf;--soft:#f7f5f1;--text:#242424;width:100%;max-width:none;margin:0;color:var(--text)}

/* Shared informational note styling: Corner/Bi-fold, Design Panel and Hinge Options */
.sd-info-note{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f8f7f4;
    color:#666;
    font-size:13px;
    line-height:1.5;
    text-align:left;
}
.sd-info-note strong{
    color:var(--text);
    font-weight:650;
}
@media(max-width:620px){
    .sd-info-note{
        font-size:12px;
        padding:9px 10px;
    }
}

/* v4.8.154: Oven Frame material rules are a high-visibility manufacturing notice. */
.sd-oven-frame-rules-note{
    background:#b42318;
    border-color:#b42318;
    color:#fff;
}
.sd-oven-frame-rules-note strong{
    color:#fff;
}

/* v4.8.125: lightweight guidance below Material/Finish and Polytec Colours headings. */
.sd-section-description{
    margin:-6px 0 12px;
    color:#666;
    font-size:13px;
    line-height:1.45;
    text-align:left;
}
@media(max-width:620px){
    .sd-section-description{
        margin-top:-4px;
        font-size:12px;
    }
}
.sd-dc *{box-sizing:border-box}.sd-dc-form{width:100%;max-width:100%}.sd-dc-layout{display:grid;grid-template-columns:minmax(0,2.256fr) minmax(0,1fr);gap:24px;align-items:start}.sd-dc-form section,.sd-preview-wrap{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;margin:0 0 18px}.sd-dc h3{margin:0 0 16px;font-size:20px}.sd-dc h4{margin:0 0 10px;font-size:15px}.sd-grid{display:grid;gap:14px}.sd-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sd-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sd-dc label,.sd-label{display:block;font-size:13px;font-weight:650}.sd-dc input,.sd-dc select{width:100%;min-height:44px;margin-top:6px;padding:8px 10px;border:1px solid #cfcac2;border-radius:7px;background:#fff;font:inherit}.sd-field{margin-top:17px}.sd-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}.sd-choice-grid{display:flex;flex-wrap:wrap;align-items:flex-start}.sd-buttons button,.sd-image-options button{border:1px solid #cfcac2;background:#fff;border-radius:8px;padding:10px 14px;cursor:pointer;color:inherit;font:inherit}.sd-choice-grid button{flex:0 0 auto;width:auto;min-width:0;white-space:normal}.sd-buttons button.is-active,.sd-image-options button.is-active{border-color:#222;box-shadow:0 0 0 1px #222;background:#faf9f7}.sd-dimensions-row{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:12px;margin-top:17px;align-items:end}.sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"])){grid-template-columns:repeat(3,minmax(90px,1fr))}.sd-image-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px;margin-top:8px}.sd-image-options button{padding:8px;text-align:center;min-width:0}.sd-image-placeholder{display:grid;place-items:center;aspect-ratio:1;background:var(--soft);border:1px dashed #c9c2b8;border-radius:6px;margin-bottom:8px;color:#888;font-size:12px;overflow:hidden}.sd-image-placeholder>.sd-image-fallback{pointer-events:none}.sd-image-options b{display:block;font-size:12px;line-height:1.25;overflow-wrap:anywhere}.sd-sub-options{display:none;margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:10px;background:#fcfbf9}.sd-image-options-small{grid-template-columns:repeat(auto-fit,minmax(115px,1fr))}.sd-colour-options{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));max-height:560px;overflow:auto;padding-right:4px}.sd-colour-options .sd-image-placeholder{aspect-ratio:1}.sd-empty-note{margin:0;font-size:13px;color:#777}.sd-conditional{display:none}.sd-qty-price{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:end}.sd-price{background:var(--soft);border-radius:10px;padding:14px 18px}.sd-price span,.sd-price small{display:block}.sd-price strong{display:block;font-size:30px;line-height:1.2}.sd-breakdown{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:12px;color:#666}.sd-preview-wrap{position:sticky;top:20px;text-align:center}.sd-preview-wrap canvas{display:block;width:100%;height:auto;background:#fafafa;border:1px solid var(--border);border-radius:10px}.sd-preview-wrap p{font-size:12px;color:#777}.sd-field small{display:block;margin-top:7px;color:#777}
@media(max-width:1100px){.sd-dc-form{width:100%}.sd-dc-layout{grid-template-columns:minmax(0,1fr)}.sd-preview-wrap{position:static}.sd-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.sd-grid-2,.sd-grid-3,.sd-grid-5{grid-template-columns:1fr}.sd-qty-price{grid-template-columns:1fr}.sd-dc-form section,.sd-preview-wrap{padding:15px}.sd-choice-grid{display:flex;flex-wrap:wrap}.sd-dimensions-row,.sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"])){display:flex;gap:8px;align-items:flex-end}.sd-dimensions-row>label{flex:1 1 0;min-width:0;font-size:11px}.sd-dimensions-row input,.sd-dimensions-row select{min-width:0;padding-left:7px;padding-right:7px}.sd-image-options{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-colour-options{grid-template-columns:repeat(3,minmax(0,1fr));max-height:470px}.sd-colour-options button{padding:5px}.sd-colour-options b{font-size:10px}}

.sd-cart-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}.sd-cart-actions .button{min-height:46px;padding:10px 24px}.sd-cart-actions [data-cart-message]{font-size:13px}.sd-cart-actions .is-error{color:#b42318}.sd-cart-actions .is-success{color:#067647}

/* Image-ready profile and colour cards */
.sd-image-placeholder img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.sd-profile-families .sd-image-placeholder img,.sd-image-options-small .sd-image-placeholder img,.sd-dc-form section[data-show="painted"]>.sd-image-options .sd-image-placeholder img,.sd-dc-form section[data-show="laminated"]>.sd-image-options .sd-image-placeholder img{object-fit:contain;background:#fff}
.sd-colour-options .sd-image-placeholder img{object-fit:cover}
.sd-image-fallback{display:none;width:100%;height:100%;place-items:center;color:#888;font-size:12px}

/* Keep Qty and the full price display on one line. */
.sd-qty-price{display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;gap:14px!important;align-items:stretch!important}
.sd-qty-price>label{min-width:0}
.sd-price{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:nowrap!important;min-width:0;padding:14px 18px;background:var(--soft);border-radius:10px}
.sd-price>span{display:inline!important;flex:0 0 auto;white-space:nowrap;font-weight:600}
.sd-price>strong{display:inline!important;flex:0 0 auto;margin:0;font-size:30px;line-height:1.1;white-space:nowrap}
.sd-price>strong .woocommerce-Price-amount,.sd-price>strong bdi,.sd-price>strong .woocommerce-Price-currencySymbol{display:inline!important;white-space:nowrap}
.sd-price>small{display:block!important;flex:1 1 auto;min-width:0;margin:0 0 0 auto;font-size:12px;line-height:1.3;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#777}
@media(max-width:620px){.sd-qty-price{grid-template-columns:86px minmax(0,1fr)!important;gap:8px!important}.sd-price{gap:7px!important;padding:12px 10px}.sd-price>strong{font-size:23px}.sd-price>small{font-size:10px}}

/* Door Type starts visible because the default Material Type is Door. */
.sd-default-door-type{display:block}

/* Price panel positioned directly below the door preview. */
.sd-preview-price-panel{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);text-align:left}
.sd-preview-price-panel h3{margin-bottom:12px}
.sd-preview-price-panel .sd-breakdown{justify-content:flex-start}
.sd-preview-price-panel .sd-cart-actions{justify-content:flex-start}

/* v1.3.1: CSV lookup details and integrated handle position */
.sd-csv-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border);text-align:left}
.sd-csv-item{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#f8f7f4}
.sd-csv-item span{display:block;margin-bottom:3px;font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.07em;color:#777}
.sd-csv-item strong{display:block;font-size:12px;line-height:1.35;font-weight:650;overflow-wrap:anywhere}
.sd-price-status{min-height:0;margin:0 0 8px;font-size:12px;color:#777;text-align:left}
.sd-price-status:empty{display:none}
.sd-handle-position-field{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);text-align:left}
.sd-handle-position-field .sd-buttons{margin-top:7px}
.sd-price>small{display:none!important}
@media(max-width:620px){.sd-csv-info{grid-template-columns:1fr}.sd-csv-item{padding:9px 10px}}


/* v1.3.2: Corner/Bi-fold measurement note and aligned dimension fields */
.sd-dimensions-row{align-items:stretch}
.sd-dimensions-row>label{display:flex;flex-direction:column;min-width:0;height:100%}
.sd-dimensions-row>label>.sd-dimension{display:block;margin-top:auto}
@media(max-width:620px){
  .sd-dimensions-row,.sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"])){align-items:stretch}
  .sd-dimensions-row>label{display:flex;flex-direction:column;height:auto}
  .sd-dimensions-row>label>.sd-dimension{margin-top:auto}
}

/* Required custom paint validation */
.sd-dc input.sd-required-error{border-color:#b42318!important;box-shadow:0 0 0 2px rgba(180,35,24,.12)!important;}

/* Hinge preset locking */
.sd-dc .sd-buttons button.is-disabled,
.sd-dc .sd-buttons button:disabled{
    opacity:.42;
    cursor:not-allowed;
    pointer-events:none;
}
.sd-dc .sd-hinge-preset-message{
    display:block;
    margin-top:7px;
    color:#666;
    line-height:1.4;
}
.sd-dc .sd-hinge-preset-message.is-error{
    color:#b42318;
    font-weight:600;
}

/* v2.0.4: Standard hinge positions are calculated automatically. */
.sd-dc .sd-hinge-readonly {
    background: #f3f3f3;
    color: #666;
    cursor: not-allowed;
}

.sd-dc [data-radio] button.is-disabled,
.sd-dc [data-radio] button:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* v2.0.5: Design Panel dimensions and horizontal preview guidance */
.sd-preview-wrap canvas{display:block;width:100%;height:auto;max-width:500px;margin:0 auto}

/* v2.1.1: full configuration renderer */
.sd-preview-meta{margin-top:10px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:#f8f7f4;color:#555;font-size:12px;line-height:1.45;text-align:left}
.sd-preview-wrap canvas{background:#fff;border:1px solid var(--border);border-radius:12px}

/* v2.1.2: streamlined preview and responsive field sizing */
.sd-preview-meta{display:none!important}

/* Prevent preview drawings and measurement labels escaping visually. */
.sd-preview-wrap{
    overflow:hidden;
}
.sd-preview-wrap canvas{
    max-width:100%;
}

@media(max-width:620px){
    /* Keep Height/Width labels readable rather than shrinking them. */
    .sd-dimensions-row>label{
        font-size:13px;
        line-height:1.3;
    }
    .sd-dimensions-row input,
    .sd-dimensions-row select{
        font-size:16px;
    }
}

/* v2.1.5: taller renderer; disclaimer removed from template */
.sd-preview-wrap canvas{max-height:none;}

/* Hinge preset validation below Configuration Preview */
.sd-hinge-validation{margin:12px 0 14px;padding:11px 13px;border:1px solid #d92d20;border-radius:8px;background:#fff1f0;color:#b42318;font-size:13px;font-weight:650;line-height:1.4;text-align:left}
.sd-hinge-validation[hidden]{display:none!important}
.sd-hinge-validation.is-valid{border-color:#12b76a;background:#ecfdf3;color:#067647}

/* Automatic hinge quantity: editable only in Custom placement */
.sd-buttons.sd-auto-lock {
    opacity: .58;
}
.sd-buttons.sd-auto-lock button {
    cursor: not-allowed !important;
}


/* v2.1.15: lighter section styling, unnumbered headings, button styling, and required choices */
.sd-dc-form section,
.sd-preview-wrap{
    background:#F4F5F6;
    border:2px solid #c8ccce;
}
.sd-dc-form section + section{
    margin-top:20px;
}
.sd-buttons button,
.sd-image-options button{
    background:#F4F5F6;
    border:1px solid #8f969a;
}
.sd-buttons button:hover,
.sd-image-options button:hover{
    border-color:#666d71;
}
.sd-buttons button.is-active,
.sd-image-options button.is-active{
    background:#F4F5F6;
    border-color:#f19429;
    box-shadow:0 0 0 2px rgba(241,148,41,.22);
}
.sd-required-choice-error{
    border:2px solid #b42318!important;
    border-radius:10px;
    padding:8px;
    background:#fff1f0;
}
.sd-required-mark{color:#b42318}

/* v2.1.16: compact, touch-friendly mobile configurator */
@media (max-width:620px){
    .sd-dc{
        width:100%;
        padding:0;
    }

    .sd-dc-layout{
        gap:12px;
    }

    .sd-dc-form section,
    .sd-preview-wrap{
        margin-bottom:12px;
        padding:12px;
        border-radius:10px;
    }

    .sd-dc-form section + section{
        margin-top:12px;
    }

    .sd-dc h3{
        margin-bottom:11px;
        font-size:17px;
        line-height:1.25;
    }

    .sd-dc h4{
        margin-bottom:7px;
        font-size:13px;
        line-height:1.3;
    }

    .sd-grid{
        gap:10px;
    }

    .sd-field{
        margin-top:12px;
    }

    /* Give conditionally revealed controls a clear gap from the field above. */
    .sd-sub-options,
    .sd-handle-position-field,
    .sd-info-note{
        margin-top:12px;
    }

    .sd-dc label,
    .sd-label{
        font-size:12px;
        line-height:1.3;
    }

    .sd-dc input,
    .sd-dc select{
        min-height:40px;
        margin-top:5px;
        padding:6px 8px;
        border-radius:6px;
    }

    /* Keep dimension inputs readable and stop iOS/Android browser zoom. */
    .sd-dimensions-row input,
    .sd-dimensions-row select{
        min-height:40px;
        padding:6px 7px;
        font-size:16px;
    }

    .sd-dimensions-row,
    .sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"])){
        gap:6px;
        margin-top:12px;
    }

    .sd-dimensions-row>label{
        font-size:13px;
        line-height:1.25;
    }

    .sd-buttons{
        gap:6px;
        margin-top:6px;
    }

    .sd-buttons button,
    .sd-image-options button{
        min-height:36px;
        padding:7px 10px;
        border-radius:7px;
        font-size:12px;
        line-height:1.2;
    }

    .sd-image-options{
        gap:7px;
        margin-top:7px;
    }

    .sd-image-options button{
        padding:6px;
    }

    .sd-image-placeholder{
        margin-bottom:5px;
        border-radius:5px;
    }

    .sd-image-options b{
        font-size:11px;
        line-height:1.2;
    }

    .sd-colour-options{
        gap:6px;
        max-height:430px;
    }

    .sd-colour-options button{
        min-height:0;
        padding:4px;
    }

    .sd-colour-options b{
        font-size:9px;
        line-height:1.15;
    }

    .sd-csv-info{
        gap:7px;
        margin-top:18px;
        padding-top:14px;
    }

    .sd-csv-item{
        padding:7px 8px;
    }

    .sd-breakdown{
        gap:6px 10px;
        margin-top:9px;
        font-size:11px;
    }

    .sd-preview-price-panel{
        margin-top:12px;
        padding-top:12px;
    }

    .sd-cart-actions{
        gap:9px;
        margin-top:12px;
    }

    .sd-cart-actions .button{
        min-height:40px;
        padding:8px 14px;
        font-size:13px;
    }

    .sd-hinge-validation{
        margin:9px 0 11px;
        padding:9px 10px;
        font-size:12px;
    }
}


/* v2.2.1: all configured option images use true square frames */
.sd-image-placeholder{aspect-ratio:1 / 1!important;width:100%;height:auto}
.sd-image-placeholder img{width:100%;height:100%;display:block}
.sd-image-options-small .sd-image-placeholder img,
.sd-dc-form section[data-show="painted"]>.sd-image-options .sd-image-placeholder img,
.sd-dc-form section[data-show="laminated"]>.sd-image-options .sd-image-placeholder img{object-fit:contain;background:#fff}
.sd-colour-options .sd-image-placeholder img{object-fit:cover}


/* v2.2.2: three-column child image grids and image zoom */
@media (min-width:621px){
    .sd-image-options-small,
    .sd-colour-options{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

.sd-image-placeholder{
    position:relative;
}

.sd-image-placeholder img{
    cursor:pointer;
}

.sd-image-zoom-trigger{
    pointer-events:auto;
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid #555;
    border-radius:50%;
    background:rgba(255,255,255,.96);
    color:#222;
    font-size:16px;
    line-height:1;
      box-shadow:0 2px 8px rgba(0,0,0,.18);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.sd-image-zoom-trigger:hover,
.sd-image-zoom-trigger:focus-visible{
    border-color:#f19429;
    box-shadow:0 0 0 2px rgba(241,148,41,.22),0 2px 8px rgba(0,0,0,.18);
    transform:scale(1.06);
    outline:none;
}

.sd-image-zoom-modal{
    position:fixed;
    top:var(--sd-visible-viewport-top,0px);
    right:auto;
    bottom:auto;
    left:var(--sd-visible-viewport-left,0px);
    width:100vw;
    width:var(--sd-visible-viewport-width,100vw);
    height:100vh;
    height:100dvh;
    height:var(--sd-visible-viewport-height,100dvh);
    box-sizing:border-box;
    z-index:2147483647;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.82);
}

.sd-image-zoom-modal.is-open{
    display:flex;
}

.sd-image-zoom-dialog{
    position:relative;
    width:min(92vw,900px);
    max-height:calc(var(--sd-visible-viewport-height,100dvh) - 48px);
    padding:18px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.sd-image-zoom-dialog img{
    display:block;
    width:100%;
    max-height:calc(var(--sd-visible-viewport-height,100dvh) - 130px);
    object-fit:contain;
    background:#f4f5f6;
    border-radius:8px;
}

.sd-image-zoom-caption{
    margin-top:10px;
    font-size:14px;
    font-weight:650;
    text-align:center;
    color:#333;
}

.sd-image-zoom-note{
    display:none;
    margin:12px auto 0;
    max-width:760px;
    padding:12px 14px;
    border:1px solid var(--border,#ddd);
    border-radius:8px;
    background:#faf9f7;
    color:#333;
    font-size:13px;
    line-height:1.5;
    text-align:left;
}
.sd-image-zoom-note p{margin:0}
.sd-image-zoom-note a{font-weight:650;text-decoration:underline}
.sd-image-zoom-dialog.has-guide-note img{max-height:calc(var(--sd-visible-viewport-height,100dvh) - 205px)}

.sd-image-zoom-close{
    position:absolute;
    top:8px;
    right:8px;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid #777;
    border-radius:50%;
    background:#fff;
    color:#222;
    font-size:25px;
    line-height:34px;
    cursor:pointer;
    z-index:2;
}

body.sd-image-zoom-open{
    overflow:hidden;
}

@media (max-width:620px){
    .sd-image-zoom-modal{padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left))}
    .sd-image-zoom-dialog{padding:12px}
    .sd-image-zoom-trigger{
    pointer-events:auto;
        right:6px;
        bottom:6px;
        width:34px;
        height:34px;
        font-size:17px;
    }
}


/* v2.2.6: safe pricing and image presentation refinements */
.sd-image-placeholder{
    background:#fff!important;
}
.sd-image-zoom-dialog{
    width:min(92vw,760px);
    background:#fff;
}
.sd-image-zoom-dialog img{
    aspect-ratio:1 / 1;
    width:100%;
    height:auto;
    max-height:min(calc(var(--sd-visible-viewport-height,100dvh) - 130px),760px);
    object-fit:contain;
    background:#fff;
}

/* v2.2.7: mirror only CSV size-bracket errors below dimensions */
.sd-size-table-error{
    margin:8px 0 0;
    padding:8px 10px;
    border:1px solid #d92d20;
    border-radius:6px;
    background:#fff1f0;
    color:#b42318;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
}
.sd-size-table-error[hidden]{display:none!important;}
@media (max-width:680px){
    .sd-size-table-error{font-size:12px;padding:7px 9px;}
}

/* v2.2.9 required-field and Add to Cart state */
.sd-dc [data-add-to-cart]:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.15);}
.sd-dc .sd-required-choice-error{outline:2px solid #c62828!important;outline-offset:3px;border-radius:8px;}
.sd-dc .sd-required-error{border-color:#c62828!important;box-shadow:0 0 0 1px #c62828!important;}

/* Flat Pack dimension dropdown indicator */
.sd-dimensions-row .sd-dimension select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    padding-right:38px !important;
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:14px 8px;
}

.sd-dimensions-row .sd-dimension select:hover,
.sd-dimensions-row .sd-dimension select:focus{
    border-color:#f19429;
}

@media(max-width:620px){
    .sd-dimensions-row .sd-dimension select{
        padding-right:28px !important;
        background-position:right 8px center;
        background-size:12px 7px;
    }
}


/* v2.2.23: help text and spacing for conditionally revealed fields */
.sd-revealed-field{
    margin-top:14px;
}
.sd-field-help{
    display:block;
    margin-top:7px;
    color:#666;
    font-size:12px;
    font-weight:400;
    line-height:1.45;
}
@media(max-width:620px){
    .sd-revealed-field{margin-top:12px;}
    .sd-field-help{font-size:11px;line-height:1.4;}
}


/* v2.2.25: Corner/Bi-fold mobile dimension alignment */
@media(max-width:620px){
    .sd-dimensions-row,
    .sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"])){
        display:flex;
        align-items:stretch;
    }
    .sd-dimensions-row>label{
        display:flex;
        flex:1 1 0;
        flex-direction:column;
        justify-content:flex-end;
        min-width:0;
    }
    .sd-dimensions-row>label>.sd-dimension{
        margin-top:6px!important;
    }
}


/* Validation guide above Add to Cart */
.sd-validation-summary{margin:16px 0 4px;padding:12px 14px;border:1px solid #d92d20;border-radius:8px;background:#fff1f0;color:#8f1d18;font-size:13px;line-height:1.45}
.sd-validation-summary[hidden]{display:none!important}
.sd-validation-summary>strong{display:block;margin-bottom:6px;color:#8f1d18}
.sd-validation-summary ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.sd-validation-summary li{margin:0;padding:0}
.sd-validation-summary button{appearance:none;-webkit-appearance:none;width:100%;padding:3px 0;border:0!important;background:transparent!important;color:#b42318!important;text-align:left;font:inherit;font-weight:600;line-height:1.35;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;box-shadow:none!important}
.sd-validation-summary button:hover,.sd-validation-summary button:focus{color:#7a1712!important;outline:none}
@media(max-width:767px){.sd-validation-summary{margin-top:12px;padding:10px 11px;font-size:12px}}


/* v2.2.27: unified light renderer handles and mobile Corner/Bi-fold alignment */
@media(max-width:620px){
    .sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"]))>label{
        display:flex!important;
        flex-direction:column!important;
        justify-content:flex-end!important;
        height:82px!important;
        min-height:82px!important;
        line-height:1.2;
    }
    .sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"]))>label>.sd-dimension{
        display:block!important;
        margin-top:auto!important;
    }
}


/* v2.2.34: mobile sticky configuration preview */
.sd-preview-visual{
    position:relative;
}

@media (max-width:950px){
    /* Let the preview visual and price panel participate separately in the mobile grid. */
    .sd-preview-wrap{
        display:contents;
    }

    .sd-preview-visual{
        order:-1;
        position:sticky;
        top:8px;
        z-index:30;
        margin:0 0 12px;
        padding:10px;
        background:#F4F5F6;
        border:2px solid #c8ccce;
        border-radius:10px;
        text-align:center;
    }

    .sd-preview-visual h3{
        margin:0 0 7px;
        font-size:15px;
        line-height:1.2;
    }

    .sd-preview-visual canvas{
        width:auto;
        max-width:100%;
        height:auto;
        max-height:260px;
        margin:0 auto;
    }

    .sd-preview-price-panel{
        order:1;
        margin:0;
        padding:15px;
        background:#F4F5F6;
        border:2px solid #c8ccce;
        border-radius:10px;
    }
}

@media (max-width:620px){
    .sd-preview-visual{
        top:6px;
        padding:8px;
    }

    .sd-preview-visual canvas{
        max-height:210px;
    }

    .sd-preview-visual .sd-hinge-validation{
        margin:7px 0 0;
        padding:7px 9px;
        font-size:11px;
    }
}

/* v2.2.38: Design Panel uses the normal preview container, while the
   horizontal canvas uses the maximum drawable width inside it. */
@media (max-width: 767px){
    .sd-dc.is-design-panel .sd-preview-visual canvas{
        display:block;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        max-height:none !important;
        margin:0 auto;
    }
}


/* Notes / Special Instructions */
.sd-dc .sd-notes-section textarea{
    width:100%;
    min-height:120px;
    box-sizing:border-box;
    resize:vertical;
    font:inherit;
}
.sd-dc .sd-notes-label{
    display:block;
    margin-bottom:12px;
}

/* v2.2.57: Dimension arithmetic validation */
.sd-dc input.sd-math-error{
  border-color:#b42318!important;
  box-shadow:0 0 0 2px rgba(180,35,24,.12)!important;
}


/* v2.2.80 Configured preview zoom */
.sd-preview-zoom-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:7px 10px;
  border:1px solid #d8d8d8;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  line-height:1;
}
.sd-preview-zoom-button:hover,
.sd-preview-zoom-button:focus{
  border-color:#f19429;
  outline:none;
}
.sd-preview-zoom-lightbox{
  display:none;
  position:fixed;
  top:var(--sd-visible-viewport-top,0px);
  right:auto;
  bottom:auto;
  left:var(--sd-visible-viewport-left,0px);
  width:100vw;
  width:var(--sd-visible-viewport-width,100vw);
  height:100vh;
  height:100dvh;
  height:var(--sd-visible-viewport-height,100dvh);
  box-sizing:border-box;
  z-index:999999;
}
.sd-preview-zoom-lightbox.is-open{
  display:block;
}
.sd-preview-zoom-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.sd-preview-zoom-dialog{
  position:absolute;
  inset:12px 4vw;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 20px 20px;
}
.sd-preview-zoom-image{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.sd-preview-zoom-close{
  position:absolute;
  top:8px;
  right:10px;
  z-index:2;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#222;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
body.sd-preview-zoom-open{
  overflow:hidden;
}


/* v2.2.81 Preview zoom placement */
#sd-door-canvas-wrap,
.sd-door-canvas-wrap,
.sd-preview-canvas-wrap,
[data-preview-wrap]{
  position:relative;
}

.sd-preview-zoom-button{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:8;
  margin:0;
  width:36px;
  height:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  cursor:pointer;
  line-height:1;
}
.sd-preview-zoom-button:hover,
.sd-preview-zoom-button:focus{
  border-color:#f19429;
  background:#fff;
  outline:none;
}
.sd-preview-zoom-button .screen-reader-text{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* v2.3.10 Design Panel portrait/landscape containment */
#sd-door-canvas-wrap,
.sd-door-canvas-wrap,
[data-preview-wrap]{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}

#sd-door-canvas-wrap canvas,
.sd-door-canvas-wrap canvas,
.sd-dc canvas[data-preview]{
  display:block;
  max-width:100%;
  height:auto;
  box-sizing:border-box;
}

/* Add vertical space only before the Hinge 1-5 row. */
.sd-dc [data-hinge-fields]{
  margin-top:12px;
}


/* v2.3.11 Minimum dimension validation uses the same visual treatment as
   the existing maximum/size-table validation. */
.sd-profile-min-dimension-error{
  display:block;
  position:static !important;
  float:none !important;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.sd-profile-min-dimension-error + .sd-profile-min-dimension-error{
  margin-top:6px;
}


/* v2.3.12 Stronger selected states */

/* Text / choice buttons */
.sd-dc .sd-buttons button.is-active,
.sd-dc .sd-choice-grid button.is-active{
  background:#f19429;
  border:2px solid #d97c00;
  color:#fff;
  font-weight:600;
}

/* Preserve image/colour visibility while making selection obvious */
.sd-dc .sd-image-options button.is-active,
.sd-dc .sd-image-option.is-active,
.sd-dc .sd-image-options .is-active{
  border:3px solid #f19429 !important;
  box-shadow:0 0 0 1px #d97c00;
}

/* Do not orange-fill image/swatch buttons */
.sd-dc .sd-image-options button.is-active{
  background:#fff;
  color:inherit;
}

/* Keep selected state clear on keyboard focus as well */
.sd-dc .sd-buttons button.is-active:focus-visible,
.sd-dc .sd-choice-grid button.is-active:focus-visible,
.sd-dc .sd-image-options button.is-active:focus-visible{
  outline:2px solid #242424;
  outline-offset:2px;
}


/* v2.3.21 Design Panel spacing */
.sd-dc .sd-panel-kickboard-field{
  display:block;
  margin-top:12px;
}

/* v2.3.21 Laminated child colours/designs: 4 columns on desktop */
@media (min-width:1024px){
  .sd-dc [data-radio="design16_colour"],
  .sd-dc [data-radio="design18_colour"]{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}


/* ==========================================================
 * v2.3.26 Cart-derived configurator summary
 * Reads WooCommerce cart contents; does not alter Add to Cart.
 * ========================================================== */
.sd-cart-summary-container{width:100%;max-width:100%;margin-top:28px;clear:both;min-width:0}
.sd-cart-summary-container:empty{display:none}
.sd-production-summary{width:100%;margin:0;padding:22px;border:1px solid #dedbd3;border-radius:16px;background:#fff;box-sizing:border-box}
.sd-production-summary>h2{margin:0 0 18px;font-size:22px;font-weight:700}
.sd-production-group+.sd-production-group{margin-top:26px}
.sd-production-group>h3{margin:0;padding:11px 14px;background:#f5f3ee;border:1px solid #dedbd3;border-bottom:0;border-radius:10px 10px 0 0;font-size:16px;font-weight:700}
.sd-production-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sd-production-table{width:100%;border-collapse:collapse;table-layout:auto;margin:0}
.sd-production-table th,.sd-production-table td{padding:10px 12px;border:1px solid #dedbd3;text-align:left;vertical-align:middle;font-size:13px;line-height:1.4}
.sd-production-table th{font-weight:700;white-space:nowrap;background:#fbfaf7}
.sd-production-table td:first-child{width:54px;text-align:center}
.sd-production-table td:nth-child(3){white-space:nowrap}
@media(max-width:767px){
 .sd-cart-summary-container{margin-top:20px}
 .sd-production-summary{padding:10px;border-radius:12px}
 .sd-production-summary>h2{margin-bottom:12px;font-size:18px}
 .sd-production-group+.sd-production-group{margin-top:18px}
 .sd-production-group>h3{padding:8px 10px;font-size:14px}
 .sd-production-table{width:max-content;min-width:100%;table-layout:auto}
 .sd-production-table th,.sd-production-table td{padding:6px 7px;font-size:11.5px;line-height:1.25}
 .sd-production-table th{white-space:nowrap}
 .sd-production-table td{white-space:nowrap}
 .sd-production-table td[data-label="Notes"]{width:180px;min-width:150px;max-width:220px;white-space:normal;overflow-wrap:anywhere;word-break:normal}
}


/* v2.3.27 cart summary minimum-order progress + remove action */
.sd-minimum-progress{margin:0 0 12px;padding:10px 13px;border:1px solid #e1ded6;border-radius:9px;background:#fbfaf7;font-size:13px;line-height:1.45}
.sd-minimum-progress.is-short{border-color:#f0b8b3;background:#fff5f4;color:#8f1d18}
.sd-minimum-progress.is-reached{border-color:#a9d7b6;background:#f2fbf5;color:#176b37}
.sd-minimum-progress+.sd-production-group{margin-top:0}
.sd-production-group+.sd-minimum-progress{margin-top:22px}
.sd-production-table th.sd-remove-column,.sd-production-table td.sd-remove-column{width:44px;min-width:44px;padding:6px;text-align:center;vertical-align:middle}
.sd-cart-summary-remove{display:inline-block;width:auto;height:auto;min-width:0;padding:4px 8px;border:1px solid #b42318;border-radius:4px;background:#d92d20;color:#fff;font-family:inherit;font-size:11px;font-weight:700;line-height:1.2;cursor:pointer;box-shadow:none;transition:background .15s ease,border-color .15s ease,opacity .15s ease}
.sd-cart-summary-remove:hover,.sd-cart-summary-remove:focus{background:#b42318;border-color:#8f1d18;color:#fff;outline:0}
.sd-cart-summary-remove:disabled,.sd-cart-summary-remove.is-loading{opacity:.45;cursor:wait}

/* v4.8.198/v4.8.219: full-screen Project List mutation lock.
   Originally Delete-only; v4.8.219 reuses it for Add, Update and Duplicate. */
.sd-delete-processing-overlay{
 position:fixed;
 inset:0;
 z-index:2147482000;
 display:none;
 align-items:center;
 justify-content:center;
 padding:20px;
 box-sizing:border-box;
 background:rgba(255,255,255,.72);
 cursor:wait;
 pointer-events:all;
}
.sd-delete-processing-overlay.is-active{display:flex}
.sd-delete-processing-card{
 display:flex;
 align-items:center;
 gap:12px;
 min-width:180px;
 padding:14px 18px;
 border:1px solid #dedbd3;
 border-radius:10px;
 background:#fff;
 box-shadow:0 8px 28px rgba(0,0,0,.14);
 color:#222;
 font-family:inherit;
 font-size:14px;
 font-weight:700;
 line-height:1.2;
}
.sd-delete-processing-spinner{
 display:block;
 width:22px;
 height:22px;
 flex:0 0 22px;
 box-sizing:border-box;
 border:3px solid rgba(0,0,0,.18);
 border-top-color:currentColor;
 border-radius:50%;
 animation:sd-delete-processing-spin .75s linear infinite;
}
@keyframes sd-delete-processing-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sd-delete-processing-spinner{animation-duration:1.5s}}
@media(max-width:767px){.sd-minimum-progress{font-size:12px}.sd-production-table th.sd-remove-column,.sd-production-table td.sd-remove-column{width:40px;min-width:40px}}


/* v2.3.30: hard reset for cart-summary Delete button.
   High specificity intentionally overrides theme/global button styling. */
.sd-production-summary .sd-production-table td.sd-remove-column button.sd-cart-summary-remove{
    -webkit-appearance:none !important;
    appearance:none !important;
    display:inline-block !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    padding:4px 8px !important;
    margin:0 !important;
    border:1px solid #b42318 !important;
    border-radius:3px !important;
    background:#d92d20 !important;
    background-image:none !important;
    color:#fff !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    text-indent:0 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    box-shadow:none !important;
    transform:none !important;
    cursor:pointer !important;
}
.sd-production-summary .sd-production-table td.sd-remove-column button.sd-cart-summary-remove::before,
.sd-production-summary .sd-production-table td.sd-remove-column button.sd-cart-summary-remove::after{
    content:none !important;
    display:none !important;
}
.sd-production-summary .sd-production-table td.sd-remove-column button.sd-cart-summary-remove:hover,
.sd-production-summary .sd-production-table td.sd-remove-column button.sd-cart-summary-remove:focus{
    background:#b42318 !important;
    border-color:#8f1d18 !important;
    color:#fff !important;
    transform:none !important;
}


/* v2.3.31: cart-summary footer action */
.sd-summary-cart-action{margin-top:18px;text-align:right}
@media(max-width:767px){.sd-summary-cart-action{text-align:left}}


/* v2.3.33: compact mobile production summary; headers stay on one line, Notes may wrap. */
@media(max-width:767px){
 .sd-production-summary .sd-production-table th{white-space:nowrap!important}
 .sd-production-summary .sd-production-table td:not([data-label="Notes"]){white-space:nowrap}
}

/* v2.3.34: editable cart quantity in configurator summary. */
.sd-production-summary .sd-cart-summary-qty{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:34px!important;
    min-height:34px!important;
    padding:4px 6px!important;
    margin:0!important;
    border:1px solid #cfcac0!important;
    border-radius:4px!important;
    background:#fff!important;
    color:inherit!important;
    font:inherit!important;
    line-height:1.2!important;
    text-align:center!important;
    box-sizing:border-box!important;
}
.sd-production-summary .sd-cart-summary-qty:focus{border-color:#f19429!important;outline:2px solid rgba(241,148,41,.22)!important;outline-offset:1px}
.sd-production-summary .sd-cart-summary-qty:disabled,.sd-production-summary .sd-cart-summary-qty.is-loading{opacity:.55;cursor:wait}
@media(max-width:767px){
 .sd-production-summary .sd-cart-summary-qty{width:50px!important;min-width:50px!important;max-width:50px!important;height:30px!important;min-height:30px!important;padding:2px 4px!important}
}


/* v2.3.35: vertically centre production-summary rows for uniform alignment with editable quantity controls. */
.sd-production-summary .sd-production-table th,
.sd-production-summary .sd-production-table td{vertical-align:middle!important}

/* v2.3.36: desktop summary layout. */
@media(min-width:768px){
 .sd-production-summary .sd-production-table{width:100%;table-layout:auto}
 .sd-production-summary .sd-production-table th{white-space:nowrap!important}
 .sd-production-summary .sd-production-table td:not([data-label="Notes"]){white-space:nowrap!important}
 .sd-production-summary .sd-production-table th,.sd-production-summary .sd-production-table td{padding-left:10px;padding-right:10px}
 .sd-production-summary .sd-production-table td[data-label="Notes"]{width:34%;min-width:280px;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
}


/* v2.3.37: Project List navigation and footer actions. */
.sd-cart-actions [data-cart-message] .sd-view-project-list{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:36px!important;
    height:auto!important;
    margin-left:8px!important;
    padding:6px 14px!important;
    vertical-align:middle!important;
    line-height:1.2!important;
    text-decoration:none!important;
}
.sd-summary-cart-action{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.sd-summary-cart-action .button{
    margin:0!important;
}
@media(max-width:767px){
    .sd-cart-actions [data-cart-message] .sd-view-project-list{
        margin-left:0!important;
        margin-top:8px!important;
    }
    .sd-summary-cart-action{
        justify-content:flex-start;
    }
}


/* v2.3.39: Prevent View Cart / Checkout navigation while summary edits are syncing. */
.sd-summary-cart-action .button.is-cart-sync-pending,
.sd-summary-cart-action .button[aria-disabled="true"]{
    opacity:.5!important;
    cursor:not-allowed!important;
    pointer-events:none!important;
    filter:grayscale(.2);
}

/* ==========================================================
 * v2.3.51 Tablet portrait containment
 * - Switch the fixed desktop two-column configurator to one column
 *   before 1024px portrait tablets can overflow.
 * - Keep the Project List / Production Table inside its own width
 *   and horizontally scroll it, matching the mobile behaviour.
 * ========================================================== */
@media (max-width:1100px){
  .sd-dc,
  .sd-dc-layout,
  .sd-dc-form,
  .sd-cart-summary-container,
  .sd-production-summary,
  .sd-production-group,
  .sd-production-table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .sd-dc-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .sd-production-table-wrap{
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .sd-production-summary .sd-production-table{
    width:max-content;
    min-width:100%;
    max-width:none;
    table-layout:auto;
  }

  .sd-production-summary .sd-production-table th,
  .sd-production-summary .sd-production-table td:not([data-label="Notes"]){
    white-space:nowrap!important;
  }

  .sd-production-summary .sd-production-table td[data-label="Notes"]{
    width:220px;
    min-width:180px;
    max-width:260px;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}


/* v2.3.56 child-product gallery navigation */
.sd-image-zoom-nav{
    position:absolute;
    top:50%;
    width:44px;
    height:52px;
    padding:0;
    border:1px solid rgba(0,0,0,.28);
    border-radius:8px;
    background:rgba(255,255,255,.94);
    color:#222;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    z-index:2;
    transform:translateY(-50%);
    box-shadow:0 3px 12px rgba(0,0,0,.18);
}
.sd-image-zoom-prev{left:28px}
.sd-image-zoom-next{right:28px}
.sd-image-zoom-nav:hover,
.sd-image-zoom-nav:focus-visible{
    border-color:#f19429;
    outline:2px solid rgba(241,148,41,.32);
}
.sd-image-zoom-counter{
    min-height:18px;
    margin-top:3px;
    font-size:12px;
    text-align:center;
    color:#666;
}
@media (max-width:620px){
    .sd-image-zoom-nav{width:38px;height:46px;font-size:24px}
    .sd-image-zoom-prev{left:18px}
    .sd-image-zoom-next{right:18px}
}

/* v2.3.60: show arithmetic guide when hovering directly over supported inputs */
.sd-math-hover {
  position: relative;
  display: block;
}
.sd-math-hover::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 1000;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(300px, 80vw);
  padding: 8px 10px;
  border-radius: 5px;
  background: #222;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.sd-math-hover::before {
  content: "";
  position: absolute;
  z-index: 1001;
  left: 50%;
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: #222;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .sd-math-hover:hover::after,
  .sd-math-hover:hover::before {
    opacity: 1;
    visibility: visible;
  }
  .sd-math-hover:hover::after {
    transform: translate(-50%, 0);
  }
}

/* ==========================================================
 * v2.3.62 Tablet portrait sticky preview
 * - v2.3.51 moves tablets up to 1100px into the one-column layout.
 * - v2.2.34 sticky preview stopped at 950px, leaving 951-1100px
 *   portrait tablets without the sticky renderer.
 * - Extend the same sticky preview behaviour only to that portrait gap.
 * ========================================================== */
@media (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-wrap{
    display:contents;
  }

  .sd-preview-visual{
    order:-1;
    position:sticky;
    top:8px;
    z-index:30;
    margin:0 0 12px;
    padding:10px;
    background:#F4F5F6;
    border:2px solid #c8ccce;
    border-radius:10px;
    text-align:center;
  }

  .sd-preview-visual h3{
    margin:0 0 7px;
    font-size:15px;
    line-height:1.2;
  }

  .sd-preview-visual canvas{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:33vh;
    margin:0 auto;
  }

  .sd-preview-price-panel{
    order:1;
    margin:0;
    padding:15px;
    background:#F4F5F6;
    border:2px solid #c8ccce;
    border-radius:10px;
  }
}

/* ==========================================================
 * v2.4.0 Compact purchase panel
 * - Qty and Price remain on one compact row.
 * - Qty is directly editable with minus/plus buttons.
 * - Detailed component pricing appears after Add to Cart.
 * - No renderer/grid/tablet layout changes from v2.3.62.
 * ========================================================== */
.sd-preview-price-panel .sd-qty-price{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%;
}

.sd-preview-price-panel .sd-qty-label{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex:0 0 auto!important;
  margin:0!important;
  white-space:nowrap;
  font-size:13px;
  line-height:1;
}

.sd-preview-price-panel .sd-qty-stepper{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.sd-preview-price-panel .sd-qty-stepper input[data-field="quantity"]{
  width:50px!important;
  min-width:50px!important;
  max-width:50px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:4px 5px!important;
  text-align:center;
}

.sd-preview-price-panel .sd-qty-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  min-width:30px;
  height:34px;
  min-height:34px;
  margin:0;
  padding:0;
  border:1px solid #cfcac2;
  border-radius:6px;
  background:#fff;
  color:inherit;
  font:inherit;
  font-size:18px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
}

.sd-preview-price-panel .sd-qty-btn:hover{background:#f7f5f1;}
.sd-preview-price-panel .sd-qty-btn:active{transform:translateY(1px);}

.sd-preview-price-panel .sd-price{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex:0 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:7px 10px!important;
  border-radius:8px!important;
}

.sd-preview-price-panel .sd-price>span{
  font-size:12px!important;
  line-height:1!important;
}

.sd-preview-price-panel .sd-price>strong{
  font-size:24px!important;
  line-height:1.05!important;
}

.sd-preview-price-panel .sd-price-status{
  margin-top:6px!important;
  margin-bottom:6px!important;
}

.sd-preview-price-panel .sd-cart-actions{
  margin-top:8px!important;
}

.sd-preview-price-panel .sd-cart-actions .button[data-add-to-cart]{
  width:100%;
}

.sd-preview-price-panel .sd-breakdown{
  margin-top:10px!important;
  padding-top:9px;
  border-top:1px solid var(--border);
  gap:5px 10px!important;
  font-size:11px!important;
  line-height:1.35;
}

@media(max-width:620px){
  .sd-preview-price-panel .sd-qty-price{
    display:flex!important;
    gap:8px!important;
  }

  .sd-preview-price-panel .sd-qty-label{
    gap:5px!important;
    font-size:12px;
  }

  .sd-preview-price-panel .sd-qty-stepper{
    gap:3px;
  }

  .sd-preview-price-panel .sd-qty-stepper input[data-field="quantity"]{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:32px!important;
    min-height:32px!important;
  }

  .sd-preview-price-panel .sd-qty-btn{
    width:28px;
    min-width:28px;
    height:32px;
    min-height:32px;
    font-size:17px;
  }

  .sd-preview-price-panel .sd-price{
    gap:5px!important;
    padding:6px 8px!important;
  }

  .sd-preview-price-panel .sd-price>span{
    font-size:11px!important;
  }

  .sd-preview-price-panel .sd-price>strong{
    font-size:21px!important;
  }
}

/* ==========================================================
 * v2.4.3 Fluid renderer sizing + compact preview header
 * - Canvas scales fluidly with the right-pane width.
 * - Preserve the rendered door's natural aspect ratio.
 * - Cap display height to prevent tall previews from pushing
 *   Qty / Price / Add to Cart too far down.
 * - Keep the pane structure in normal document flow.
 * ========================================================== */

/* Compact the preview heading and reclaim vertical space. */
.sd-preview-wrap > h3,
.sd-preview-visual > h3{
  margin:0 0 5px!important;
  padding:0!important;
  font-size:15px!important;
  line-height:1.1!important;
}

/* Slightly tighter preview container padding without changing layout structure. */
.sd-preview-wrap{
  padding-top:12px!important;
  padding-bottom:12px!important;
}

/* Fluid canvas envelope for two-column/floating preview layouts. */
@media (min-width:951px){
  .sd-preview-wrap canvas,
  .sd-preview-visual canvas{
    display:block;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:min(45vh, 500px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    object-fit:contain;
  }
}


/* v3.0.21: preserve renderer aspect ratio on tablet landscape.
   The general desktop rule forces width:100% while also capping height;
   on landscape tablets that can distort the canvas after viewport settling. */
@media (min-width:951px) and (max-width:1366px) and (orientation:landscape){
  .sd-preview-wrap canvas,
  .sd-preview-visual canvas{
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:min(45vh, 500px)!important;
  }
}

/* Keep existing mobile/tablet portrait behaviour untouched. */
@media (max-width:950px), (orientation:portrait) and (max-width:1100px){
  .sd-preview-wrap{
    padding-top:12px!important;
    padding-bottom:12px!important;
  }
}



/* v3.0.16: simple theme-button navigation. */
.sd-flow-progress{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
  position:sticky;
  top:0;
  z-index:8;
  background:rgba(255,255,255,.96);
  padding:6px 0 8px;
  backdrop-filter:blur(8px);
}
.sd-flow-progress button.button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:38px;
  margin:0;
  padding:7px 10px;
  border-radius:8px!important;
  font:inherit;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  background:var(--theme-button-background-initial-color);
  color:var(--theme-button-text-initial-color);
  border:1px solid var(--theme-button-background-initial-color);
  box-shadow:none;
}
.sd-flow-progress button.button:hover,
.sd-flow-progress button.button:focus-visible{
  background:var(--theme-button-background-hover-color);
  color:var(--theme-button-text-hover-color);
  border-color:var(--theme-button-background-hover-color);
}
.sd-flow-progress button.button.is-current{
  background:var(--theme-button-background-hover-color);
  color:var(--theme-button-text-hover-color);
  border-color:var(--theme-button-background-hover-color);
}
.sd-flow-progress button.button.is-complete{
  background:var(--theme-button-background-initial-color);
  color:var(--theme-button-text-initial-color);
  border-color:var(--theme-button-background-initial-color);
}
@media(max-width:1024px){
  .sd-flow-progress{
    position:static;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sd-flow-progress button.button{white-space:normal;}
}
@media(max-width:520px){
  .sd-flow-progress{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .sd-flow-progress button.button{
    min-height:36px;
    padding:6px 5px;
    font-weight:800;
  }
  .sd-dc-form section{scroll-margin-top:12px}
}

.sd-advanced-toggle{width:100%;margin-top:15px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#f8f7f4;text-align:left;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.sd-advanced-toggle span{transition:transform .2s ease}.sd-advanced-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.sd-advanced-hinges{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .25s ease,opacity .2s ease}.sd-advanced-hinges.is-open{max-height:800px;opacity:1;pointer-events:auto;padding-bottom:2px}
.sd-live-summary{margin:10px 0 0;padding:9px 10px;border-radius:8px;background:var(--soft);font-size:11px;line-height:1.45;text-align:left;color:#555}.sd-live-summary strong{color:#242424}
.sd-preview-visual>h3{font-size:16px!important;margin-bottom:8px!important}
@media(max-width:960px){.sd-flow-progress{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.sd-flow-progress button{white-space:normal}}
@media(max-width:520px){.sd-flow-progress{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.sd-flow-progress button{font-size:10px}.sd-dc-form section{scroll-margin-top:12px}}



/* v3.0.16: simplified section navigation from v3.0.16 baseline.
   Plain rounded buttons, no circle/chevron, centred bold text.
   Mobile uses 3 columns. */
.sd-flow-progress{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
}

.sd-flow-progress button.button,
.sd-flow-progress button.button:hover,
.sd-flow-progress button.button:focus,
.sd-flow-progress button.button:active,
.sd-flow-progress button.button.is-current,
.sd-flow-progress button.button.is-complete{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  height:auto!important;
  padding:7px 10px!important;
  margin:0!important;
  border-radius:8px!important;
  text-align:center!important;
  font-weight:800!important;
  line-height:1.2!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

.sd-flow-progress button.button::before,
.sd-flow-progress button.button::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

@media (min-width:769px){
  .sd-flow-progress{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .sd-flow-progress button.button,
  .sd-flow-progress button.button:hover,
  .sd-flow-progress button.button:focus,
  .sd-flow-progress button.button:active{
    min-height:34px!important;
    padding:5px 6px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
}

@media (max-width:1024px) and (orientation:portrait){
  .sd-flow-progress{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

@media (max-width:480px){
  .sd-flow-progress{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .sd-flow-progress button.button,
  .sd-flow-progress button.button:hover,
  .sd-flow-progress button.button:focus,
  .sd-flow-progress button.button:active{
    min-height:36px!important;
    padding:6px 5px!important;
    font-weight:800!important;
    text-align:center!important;
  }
}


/* v3.0.16: return navigation labels to regular font weight. */
.sd-flow-progress button.button,
.sd-flow-progress button.button:hover,
.sd-flow-progress button.button:focus,
.sd-flow-progress button.button:active,
.sd-flow-progress button.button.is-current,
.sd-flow-progress button.button.is-complete{
  font-weight:400!important;
}

/* v3.0.18: keep section navigation visible beside the sticky renderer on
   mobile and portrait tablet. JS relocates the existing navigation into the
   renderer only at these responsive widths, so there is still a single set
   of working navigation buttons. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    padding-right:112px!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    position:absolute!important;
    top:36px!important;
    right:8px!important;
    left:auto!important;
    z-index:36!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
    width:96px!important;
    margin:0!important;
    padding:5px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(0,0,0,.10)!important;
    border-radius:9px!important;
    box-shadow:0 2px 8px rgba(0,0,0,.08)!important;
    backdrop-filter:blur(6px);
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete{
    min-height:27px!important;
    padding:4px 5px!important;
    border-radius:6px!important;
    font-size:10px!important;
    font-weight:400!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  .sd-preview-visual.has-floating-flow-nav canvas{
    max-width:100%!important;
  }
}

@media (max-width:420px){
  .sd-preview-visual.has-floating-flow-nav{
    padding-right:98px!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    width:84px!important;
    right:6px!important;
    padding:4px!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active{
    min-height:25px!important;
    padding:3px 4px!important;
    font-size:9px!important;
  }
}


/* v3.0.19 navigation hover and renderer note refinements. */
@media (hover:hover) and (pointer:fine){
  .sd-flow-progress button.button:hover{
    background:#f58245!important;
    border-color:#f58245!important;
    color:#fff!important;
  }
}
.sd-render-view-note{margin:8px 0 2px!important;text-align:left;font-size:11px!important;line-height:1.4!important;}


/* v3.2.1: Size note placement and renderer contextual help. */
.sd-size-note{
  margin-top:10px;
  margin-bottom:0;
}


/* Raise Zoom clear of the live summary/description at the bottom of Render View. */
.sd-preview-zoom-button{
  bottom:64px!important;
}

@media(max-width:620px){
  .sd-preview-zoom-button{
    bottom:60px!important;
  }
}


/* v3.2.1: restore visible filtering for Laminated (Polytec) colour search. */
.sd-colour-options button.sd-colour-filtered{
  display:none!important;
}

/* v3.3.4 Edit Item trial */
.sd-production-table th.sd-remove-column,
.sd-production-table td.sd-remove-column{
  width:auto;
  min-width:104px;
  white-space:nowrap;
}
.sd-cart-summary-edit{
  display:inline-block;
  width:auto;
  min-width:0;
  margin:0 5px 0 0;
  padding:4px 8px;
  border:1px solid #cfcac2;
  border-radius:4px;
  background:#fff;
  color:#333;
  font-family:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  cursor:pointer;
  box-shadow:none;
}
.sd-cart-summary-edit:hover,
.sd-cart-summary-edit:focus{
  border-color:#f19429;
  background:#fff7ef;
  outline:0;
}
.sd-cancel-edit[hidden]{display:none!important}

/* v3.3.6: stable mobile renderer viewport.
   Keep the sticky Render View dimensions independent of the selected product's
   canvas aspect ratio. Design Panel can use a wide internal canvas, but it is
   letterboxed/centred inside the same fixed display stage as doors and panels. */
.sd-preview-canvas-stage{
  position:relative;
  width:100%;
  max-width:100%;
}

/* Zoom now belongs to the renderer stage, not to the full sticky panel/live summary. */
.sd-preview-canvas-stage .sd-preview-zoom-button{
  bottom:10px!important;
}

@media (max-width:950px){
  .sd-preview-canvas-stage{
    height:260px;
    min-height:260px;
  }

  .sd-preview-canvas-stage canvas,
  .sd-dc.is-design-panel .sd-preview-canvas-stage canvas{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  /* The stage contributes a fixed amount to the sticky shell. The live summary
     may add height below it, but switching product types cannot make it shorter. */
  .sd-preview-visual{
    min-height:0!important;
  }
}

@media (max-width:620px){
  .sd-preview-canvas-stage{
    height:210px;
    min-height:210px;
  }
}

/* Match the existing portrait-tablet sticky renderer behaviour. */
@media (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-canvas-stage{
    height:260px;
    min-height:260px;
  }
  .sd-preview-canvas-stage canvas,
  .sd-dc.is-design-panel .sd-preview-canvas-stage canvas{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
}

/* v3.4 Glass Frame test UI */
.sd-glass-frame-types .sd-image-placeholder{display:flex;align-items:center;justify-content:center;min-height:110px;background:#f5f5f5;border:1px dashed #bbb;font-size:12px;color:#777;padding:8px;text-align:center}
[data-radio="glass_type"] button small{display:block;font-size:11px;opacity:.75;margin-top:2px}


/* v3.4.22: preserve renderer aspect ratio on first paint in mobile/tablet portrait.
   A fixed-height stage must not force both canvas dimensions to 100%, otherwise
   the intrinsic 500x700 door renderer is stretched until another redraw occurs. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-canvas-stage canvas:not(.sd-landscape-design-panel-canvas),
  .sd-dc:not(.is-design-panel) .sd-preview-canvas-stage canvas{
    width:auto!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  /* Design Panel has a deliberately horizontal internal canvas. Fit it by width
     inside the same stable stage without stretching its bitmap. */
  .sd-dc.is-design-panel .sd-preview-canvas-stage canvas{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:100%!important;
    margin:auto!important;
    object-fit:contain!important;
  }
}

/* v4.0.0 Cabinet System -> Product Type hierarchy */
.sd-v4-legacy-fields{display:none!important}
.sd-v4-cabinet-choice{grid-template-columns:repeat(3,minmax(0,1fr))}
.sd-v4-product-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sd-v4-product-choice .sd-v4-product-group-label{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.72;margin:8px 0 -2px}
.sd-v4-product-choice button{display:flex;min-height:50px;align-items:center;justify-content:flex-start;text-align:left}
.sd-v4-product-choice button b{font-size:14px}
.sd-v4-cabinet-help,[data-manufacturer-preset-help]{display:block;margin-top:7px;opacity:.75}
.sd-v4-product-help{display:none!important}
.sd-v4-preset-select{width:100%;max-width:620px}
.sd-v4-preset-field:not([hidden]){display:block}
[data-v4-preset-locked="1"]{background:rgba(0,0,0,.035);font-weight:600}
@media(max-width:950px){.sd-v4-cabinet-choice,.sd-v4-product-choice{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sd-v4-cabinet-choice,.sd-v4-product-choice{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-v4-product-choice button{min-height:46px;padding:8px}}




/* v4.1.51: Product Type uses the configurator's standard choice-button behaviour.
   Natural flex wrapping replaces the special fixed 3/2-column product grid. */
.sd-dc .sd-v4-product-choice{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
    margin-top:7px;
    grid-template-columns:none;
}
.sd-dc .sd-v4-product-choice .sd-v4-product-group-label{
    flex:0 0 100%;
    width:100%;
    margin:8px 0 0;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    opacity:.72;
}
.sd-dc .sd-v4-product-choice .sd-v4-product-group-label{
    flex:0 0 100%;
    width:100%;
    margin:8px 0 0;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    opacity:.72;
}


/* v4.1.51 Material / Finish descriptions */
.sd-v4-material-descriptions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:9px;
}
.sd-v4-material-descriptions p{
  margin:0;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.55);
  font-size:12px;
  line-height:1.4;
}
@media(max-width:620px){
  .sd-v4-material-descriptions{grid-template-columns:1fr;gap:7px}
  .sd-v4-material-descriptions p{padding:8px 9px}
}

/* v4.1 Drawer Front Configurator */
.sd-drawer-set{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:10px}
.sd-drawer-set-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.sd-drawer-set-head span{font-size:12px;opacity:.78}
.sd-drawer-heights{display:grid;gap:7px}
.sd-drawer-row{display:grid;grid-template-columns:minmax(80px,.7fr) minmax(150px,1fr) auto;gap:8px;align-items:end}
.sd-drawer-row>span{font-weight:600;padding-bottom:9px}
.sd-drawer-row label{margin:0}
.sd-drawer-row input{width:100%}
.sd-drawer-row .button{min-height:38px}
.sd-drawer-add{margin-top:9px}
.sd-drawer-total{margin-top:10px}
.sd-drawer-routing-field{margin-top:14px}
@media(max-width:620px){
 .sd-drawer-row{grid-template-columns:1fr auto}
 .sd-drawer-row>span{grid-column:1/-1;padding:0}
 .sd-drawer-row label{min-width:0}
}

/* v4.1.51 Drawer mode-first flow */
.sd-drawer-mode{margin-bottom:12px}
.sd-drawer-configurator-section{margin-top:18px}
.sd-drawer-set-width-controls{display:grid;gap:10px;margin:12px 0}
/* v4.8.72 Flat Pack Drawer Sets: keep the manufacturer Width selector and
   shared Width field on one row to reduce vertical space. Custom Made sets
   remain a single-column width field because the manufacturer selector is hidden. */
.sd-drawer-set-width-controls:has([data-manufacturer-width-group-field]:not([hidden])){
  grid-template-columns:minmax(180px,.95fr) minmax(180px,1.05fr);
  align-items:end;
}
.sd-drawer-set-width-slot>[data-standard-width-field]{display:block;margin:0}
.sd-drawer-set-width-slot .sd-size-range-guide{display:none!important}
.sd-drawer-set-width-group-slot>[data-manufacturer-width-group-field]{margin:0}
.sd-drawer-set-width-controls .sd-drawer-width-validation{grid-column:1/-1}
@media(max-width:540px){
  .sd-drawer-set-width-controls:has([data-manufacturer-width-group-field]:not([hidden])){grid-template-columns:1fr}
}
.sd-drawer-sizes-title{display:flex;flex-direction:column;gap:2px;margin:12px 0 8px}
.sd-drawer-sizes-title span{font-size:12px;opacity:.78}

/* v4.1.51 individual manufacturer presets for Drawer Sets */
.sd-drawer-row:has([data-drawer-preset]){grid-template-columns:minmax(72px,.55fr) minmax(230px,1.6fr) minmax(120px,.75fr) auto}
.sd-drawer-preset-label select{width:100%;min-height:38px}
@media(max-width:760px){
 .sd-drawer-row:has([data-drawer-preset]){grid-template-columns:1fr}
 .sd-drawer-row:has([data-drawer-preset])>span{grid-column:1}
}

/* v4.1.51 Drawer Set validation targeting */
.sd-drawer-validation-error{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* v4.1.51 Manufacturer Presets: width group first, filtered sizes second */
.sd-v4-preset-group{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.4fr);gap:12px;align-items:end}
.sd-v4-preset-group[hidden]{display:none!important}
@media(max-width:760px){.sd-v4-preset-group{grid-template-columns:1fr}}


/* v4.1.51 Manufacturer Corner & Bi-fold: restricted real cabinet pairs */
.sd-v4-corner-preset-group{display:grid;grid-template-columns:minmax(260px,1fr);gap:12px;max-width:720px}
.sd-v4-corner-preset-group[hidden]{display:none!important}


/* v4.1.51 Project List actions + running total */
@media(min-width:768px){
  .sd-production-summary .sd-production-table td[data-label="Notes"]{
    width:18%!important;
    min-width:150px!important;
    max-width:220px!important;
  }
}
.sd-production-summary .sd-remove-column{
  white-space:nowrap!important;
  width:1%!important;
  min-width:205px!important;
}

/* Duplicate deliberately mirrors Edit. */
.sd-production-summary .sd-cart-summary-edit,
.sd-production-summary .sd-cart-summary-duplicate{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  min-height:0;
  margin:2px;
  padding:4px 8px;
  border:1px solid #cfcac2;
  border-radius:4px;
  background:#fff;
  background-image:none;
  color:#333;
  font-family:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.sd-production-summary .sd-cart-summary-edit:hover,
.sd-production-summary .sd-cart-summary-edit:focus,
.sd-production-summary .sd-cart-summary-duplicate:hover,
.sd-production-summary .sd-cart-summary-duplicate:focus{
  border-color:#f19429;
  background:#fff7ef;
  color:#333;
  outline:0;
}
.sd-production-summary .sd-cart-summary-edit:disabled,
.sd-production-summary .sd-cart-summary-duplicate:disabled,
.sd-production-summary .sd-cart-summary-edit.is-loading,
.sd-production-summary .sd-cart-summary-duplicate.is-loading{
  opacity:.5;
  cursor:wait;
}

.sd-project-running-total{
  margin-top:18px;
  padding:12px 14px;
  border-top:2px solid rgba(0,0,0,.12);
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:18px;
  font-size:15px;
}
.sd-project-running-total span{font-weight:650}
.sd-project-running-total strong{font-size:18px}
.sd-project-running-total small{font-size:11px;font-weight:500;opacity:.68}

@media(max-width:767px){
  .sd-production-summary .sd-remove-column{min-width:205px!important}
  .sd-project-running-total{justify-content:space-between}
}


/* v4.1.54: make the current selection easy to find when Size dropdowns are opened. */
.sd-dc [data-flow-section="size"] select option:checked{
    background:#f19429 linear-gradient(0deg,#f19429 0%,#f19429 100%);
    color:#fff;
    font-weight:700;
}
.sd-dc [data-flow-section="size"] select option:hover{
    background:#f7d1a5 linear-gradient(0deg,#f7d1a5 0%,#f7d1a5 100%);
    color:#222;
}


/* v4.1.55: Glass Frame profile choices use the same image-card interaction as other design selectors. */
.sd-glass-frame-profiles{grid-template-columns:repeat(3,minmax(0,1fr));}
.sd-glass-frame-profiles button>img{display:block;width:100%;aspect-ratio:1 / 1;object-fit:contain;object-position:center;background:#fff;border-radius:6px;margin-bottom:8px;}
@media(max-width:620px){.sd-glass-frame-profiles{grid-template-columns:repeat(3,minmax(0,1fr));}.sd-glass-frame-profiles button{padding:6px;}}

/* Backside paint return */
.sd-backside-paint-options{margin-top:12px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:8px}
.sd-backside-paint-options[hidden]{display:none!important}
.sd-backside-return-label{display:block;margin-top:10px;font-weight:600}
.sd-backside-return-label select{display:block;width:100%;margin-top:6px}
.sd-backside-orientation{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08)}
.sd-backside-guide{position:relative;width:min(100%,250px);height:210px;margin:10px auto 4px;display:flex;align-items:center;justify-content:center;padding:24px}
.sd-backside-guide-panel{position:relative;height:150px;aspect-ratio:var(--sd-backside-panel-ratio,1);max-width:180px;border:2px solid #555;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sd-backside-guide-panel>span{position:relative;z-index:2;font-size:10px;font-weight:700;letter-spacing:.08em;color:#666;background:rgba(255,255,255,.78);padding:2px 5px;border-radius:3px;pointer-events:none}
.sd-backside-guide-coverage{position:absolute;z-index:1;background:rgba(242,100,34,.23);pointer-events:none}
.sd-backside-guide-coverage.from-left{left:0;top:0;bottom:0;width:var(--sd-backside-coverage,20%);border-right:2px solid rgba(242,100,34,.75)}
.sd-backside-guide-coverage.from-right{right:0;top:0;bottom:0;width:var(--sd-backside-coverage,20%);border-left:2px solid rgba(242,100,34,.75)}
.sd-backside-guide-coverage.from-top{left:0;right:0;top:0;height:var(--sd-backside-coverage,20%);border-bottom:2px solid rgba(242,100,34,.75)}
.sd-backside-guide-coverage.from-bottom{left:0;right:0;bottom:0;height:var(--sd-backside-coverage,20%);border-top:2px solid rgba(242,100,34,.75)}
.sd-backside-guide-coverage.is-full{inset:0}
.sd-backside-guide-edge{position:absolute!important;display:none;width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border:1px solid #cfcac2!important;border-radius:50%!important;background:#fff!important;box-shadow:none!important;cursor:pointer}
.sd-backside-guide-edge:before{content:'';position:absolute;inset:7px;border-radius:50%;background:#dedbd6}
.sd-backside-guide-edge.is-active{border-color:#222!important;box-shadow:0 0 0 1px #222!important}
.sd-backside-guide-edge.is-active:before{background:#f26422}
.sd-backside-guide-top{top:0;left:50%;transform:translateX(-50%)}.sd-backside-guide-right{right:0;top:50%;transform:translateY(-50%)}.sd-backside-guide-bottom{bottom:0;left:50%;transform:translateX(-50%)}.sd-backside-guide-left{left:0;top:50%;transform:translateY(-50%)}
.sd-backside-guide-caption{text-align:center;font-weight:650;font-size:13px;margin-top:4px}.sd-backside-orientation small{text-align:center;font-size:11px;color:#777;margin-top:5px}
.sd-backside-orientation.is-full .sd-backside-guide{height:190px}
@media(max-width:620px){.sd-backside-guide{height:195px;width:min(100%,230px)}.sd-backside-guide-panel{height:135px}}

/* v4.1.60: larger bold single-row desktop/landscape navigation with an
   active-section pointer. Portrait/mobile renderer navigation is unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav){
    overflow:visible!important;
    padding-bottom:8px!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button,
  .sd-flow-progress:not(.is-renderer-nav) button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav) button.button:active,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-complete{
    min-height:35px!important;
    padding:5px 4px!important;
    font-size:14px!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    bottom:-8px!important;
    width:0!important;
    height:0!important;
    transform:translateX(-50%)!important;
    border-left:6px solid transparent!important;
    border-right:6px solid transparent!important;
    border-top:6px solid currentColor!important;
    background:none!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
}
\n\n/* v4.1.61: reliable active navigation pointer. Use a real child element rather\n   than a button pseudo-element so theme button CSS cannot suppress it. */\n.sd-flow-progress .sd-flow-active-chevron{display:none!important;}\n@media (min-width:951px) and (orientation:landscape), (min-width:1101px){\n  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current>.sd-flow-active-chevron{\n    display:block!important;\n    position:absolute!important;\n    left:50%!important;\n    bottom:-9px!important;\n    width:0!important;\n    height:0!important;\n    transform:translateX(-50%)!important;\n    border-left:6px solid transparent!important;\n    border-right:6px solid transparent!important;\n    border-top:7px solid currentColor!important;\n    pointer-events:none!important;\n    z-index:2!important;\n  }\n}\n

/* v4.1.63: navigation uses the same selected/unselected visual language as
   configurator controls. The current viewport section is filled using the
   theme button colour; all other sections remain outlined with black text.
   This supersedes and removes the v4.1.60/v4.1.61 chevron indicator. */
.sd-flow-progress .sd-flow-active-chevron{
  display:none!important;
}
.sd-flow-progress button.button,
.sd-flow-progress button.button.is-complete,
.sd-flow-progress button.button:not(.is-current),
.sd-flow-progress button.button:not(.is-current):focus,
.sd-flow-progress button.button:not(.is-current):active{
  background:transparent!important;
  color:#111!important;
  border:1px solid var(--theme-button-background-initial-color)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.sd-flow-progress button.button.is-current,
.sd-flow-progress button.button.is-current:hover,
.sd-flow-progress button.button.is-current:focus,
.sd-flow-progress button.button.is-current:active{
  background:var(--theme-button-background-initial-color)!important;
  color:var(--theme-button-text-initial-color)!important;
  border-color:var(--theme-button-background-initial-color)!important;
  box-shadow:none!important;
}
.sd-flow-progress button.button:not(.is-current):hover{
  background:transparent!important;
  color:#111!important;
  border-color:var(--theme-button-background-hover-color)!important;
}
.sd-flow-progress button.button::after,
.sd-flow-progress button.button.is-current::after{
  content:none!important;
  display:none!important;
}
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav){
    padding-bottom:0!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button,
  .sd-flow-progress:not(.is-renderer-nav) button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav) button.button:active,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-complete{
    font-size:14px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
}

/* v4.1.65: taller navigation targets and a clear active-section pointer.
   The pointer is hidden for every unselected item and uses the solid theme
   button colour only for the current section. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav){
    padding-bottom:10px!important;
    overflow:visible!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button,
  .sd-flow-progress:not(.is-renderer-nav) button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav) button.button:active,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-complete{
    min-height:44px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    overflow:visible!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button::after,
  .sd-flow-progress:not(.is-renderer-nav) button.button:not(.is-current)::after{
    content:none!important;
    display:none!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    bottom:-9px!important;
    width:0!important;
    height:0!important;
    transform:translateX(-50%)!important;
    border-left:7px solid transparent!important;
    border-right:7px solid transparent!important;
    border-top:8px solid var(--theme-button-background-initial-color)!important;
    background:none!important;
    box-shadow:none!important;
    pointer-events:none!important;
    z-index:5!important;
  }
}

/* v4.1.68 Custom Paint compact row */
.sd-custom-paint{margin-top:14px}
.sd-custom-paint-row{align-items:start}
.sd-custom-paint-row>label{display:flex;flex-direction:column;min-width:0}
.sd-custom-paint-row>label>select,
.sd-custom-paint-row>label>input{width:100%;margin-top:6px}
.sd-custom-paint-helper{display:block;min-height:22px;margin-top:6px;line-height:16px}
.sd-paint-colour-library{display:inline-block;font-size:13px;font-weight:650;text-decoration:none}
.sd-paint-colour-library:hover{text-decoration:underline}
@media(max-width:620px){
  .sd-custom-paint-row{grid-template-columns:1fr}
  .sd-custom-paint-helper[aria-hidden="true"]{display:none;min-height:0;margin-top:0}
}

/* v4.1.69 panel edge configuration */
.sd-panel-edge-config{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.sd-panel-edge-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:20px;align-items:center;margin-top:8px}
.sd-panel-edge-selectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.sd-panel-edge-selectors label{display:flex;flex-direction:column;min-width:0}
.sd-panel-edge-selectors select{margin-top:6px}
.sd-panel-edge-guide{position:relative;width:170px;height:170px;margin:0 auto}
.sd-panel-edge-guide-panel{position:absolute;left:50%;top:50%;width:112px;height:112px;min-width:58px;min-height:58px;max-width:120px;max-height:120px;transform:translate(-50%,-50%);border:2px solid #333;background:#fafafa;display:flex;align-items:center;justify-content:center}
.sd-panel-edge-guide-panel span{font-size:10px;font-weight:700;letter-spacing:.04em;color:#777}
.sd-panel-edge-code{position:absolute;z-index:2;min-width:24px;text-align:center;font-size:14px;font-weight:800;color:#222}
.sd-panel-edge-code-top{top:5px;left:50%;transform:translateX(-50%)}
.sd-panel-edge-code-bottom{bottom:5px;left:50%;transform:translateX(-50%)}
.sd-panel-edge-code-left{left:5px;top:50%;transform:translateY(-50%)}
.sd-panel-edge-code-right{right:5px;top:50%;transform:translateY(-50%)}
.sd-panel-edge-key{margin-top:8px;font-size:12px;color:#666}
.sd-panel-edge-key strong{color:#222}

/* Keep Custom Paint labels and controls on one baseline, matching Size fields. */
.sd-custom-paint-row{align-items:stretch}
.sd-custom-paint-row>label{display:flex;flex-direction:column;min-width:0;height:100%}
.sd-custom-paint-row>label>input,
.sd-custom-paint-row>label>select{margin-top:auto}
@media(max-width:620px){
  .sd-panel-edge-layout{grid-template-columns:1fr}
  .sd-panel-edge-selectors{grid-template-columns:1fr 1fr}
  .sd-panel-edge-guide{margin-top:2px}
}

.sd-panel-edge-config{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.sd-panel-edge-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:14px;
  align-items:start;
}

.sd-panel-edge-key-block{
  min-width:0;
}

.sd-panel-edge-key{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:7px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fafafa;
  font-size:12px;
  color:#555;
}

.sd-panel-edge-key span{
  display:block;
}

.sd-panel-edge-key strong{
  display:inline-block;
  min-width:18px;
  font-size:15px;
  color:#111;
}

.sd-panel-edge-guide{
  width:140px;
  height:140px;
  margin:0 0 0 auto;
}

.sd-panel-edge-guide-panel{
  max-width:96px;
  max-height:96px;
}

.sd-panel-edge-code{
  font-size:13px;
}

.sd-panel-edge-selectors{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

.sd-panel-edge-selectors label{
  display:flex;
  flex-direction:column;
  min-width:0;
  font-size:12px;
}

.sd-panel-edge-selectors select{
  min-width:0;
  min-height:40px;
  margin-top:4px;
  padding-top:6px;
  padding-bottom:6px;
  font-size:12px;
}

.sd-panel-edge-tip{
  margin-top:10px;
}

@media(max-width:760px){
  .sd-panel-edge-head{
    grid-template-columns:minmax(0,1fr) 130px;
  }
  .sd-panel-edge-guide{
    width:125px;
    height:125px;
  }
  .sd-panel-edge-selectors{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:480px){
  .sd-panel-edge-head{
    grid-template-columns:1fr;
  }
  .sd-panel-edge-guide{
    margin:0 auto;
  }
}

/* v4.1.73 Integrated Handle position within the Edge mini guide */
.sd-panel-edge-guide-panel{
  overflow:visible;
}
.sd-panel-edge-handle-marker{
  position:absolute;
  display:block;
  background:#777;
  border-radius:2px;
  z-index:3;
}
.sd-panel-edge-handle-marker[hidden],
.sd-panel-edge-handle-label[hidden]{
  display:none !important;
}
.sd-panel-edge-handle-marker.is-top,
.sd-panel-edge-handle-marker.is-bottom{
  left:8%;
  right:8%;
  height:5px;
}
.sd-panel-edge-handle-marker.is-top{top:-9px}
.sd-panel-edge-handle-marker.is-bottom{bottom:-9px}
.sd-panel-edge-handle-marker.is-left,
.sd-panel-edge-handle-marker.is-right{
  top:8%;
  bottom:8%;
  width:5px;
}
.sd-panel-edge-handle-marker.is-left{left:-9px}
.sd-panel-edge-handle-marker.is-right{right:-9px}
.sd-panel-edge-handle-label{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translate(-50%,100%);
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
  color:#555;
}

/* v4.1.74 spatial Edge Configuration controls */
.sd-panel-edge-config{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.sd-panel-edge-key{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  width:max-content;
  max-width:100%;
  margin:7px 0 10px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:#fafafa;
  font-size:11px;
  line-height:1.25;
}
.sd-panel-edge-key strong{font-size:13px;color:#111}
.sd-panel-edge-control-map{
  display:grid;
  grid-template-columns:minmax(110px,1fr) minmax(190px,2fr) minmax(110px,1fr);
  grid-template-rows:auto minmax(200px,auto) auto auto;
  grid-template-areas:
    ". top ."
    "left panel right"
    ". bottom ."
    ". handle .";
  gap:8px 14px;
  align-items:center;
  justify-items:center;
  max-width:720px;
  margin:0 auto 10px;
  padding:6px 0;
}
.sd-edge-control{display:flex;flex-direction:column;width:100%;max-width:180px;font-size:11px;font-weight:600}
.sd-edge-control span{margin-bottom:3px;text-align:center}
.sd-edge-control select{width:100%;min-width:0;min-height:38px;font-size:11px;padding-top:5px;padding-bottom:5px}
.sd-edge-control-top{grid-area:top}
.sd-edge-control-bottom{grid-area:bottom}
.sd-edge-control-left{grid-area:left}
.sd-edge-control-right{grid-area:right}
.sd-panel-edge-guide-panel{
  grid-area:panel;
  position:relative;
  width:150px;
  height:190px;
  min-width:78px;
  min-height:78px;
  max-width:190px;
  max-height:190px;
  transform:none;
  left:auto;
  top:auto;
  border:2px solid #333;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.sd-panel-edge-front-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:#777;
  pointer-events:none;
}
.sd-panel-edge-handle-label{grid-area:handle;position:static;transform:none;text-align:center;font-size:10px;font-weight:700;color:#555}
.sd-panel-edge-tip{margin-top:8px}
.sd-panel-edge-tip p{margin:0 0 8px}
.sd-panel-edge-tip p:last-child{margin-bottom:0}

@media(max-width:760px){
  .sd-panel-edge-control-map{
    grid-template-columns:minmax(90px,1fr) minmax(150px,1.5fr) minmax(90px,1fr);
    gap:7px 9px;
  }
  .sd-edge-control{max-width:145px}
  .sd-edge-control select{font-size:10px;padding-right:26px!important}
}
@media(max-width:520px){
  .sd-panel-edge-control-map{
    grid-template-columns:82px minmax(120px,1fr) 82px;
    gap:6px;
  }
  .sd-edge-control select{
    min-height:36px;
    font-size:0;
  }
  .sd-edge-control select option{font-size:12px}
  .sd-edge-control select{font-size:11px}
  .sd-panel-edge-key{width:100%;gap:5px 10px}
}

/* v4.1.75 Advanced Edge Options accordion */
.sd-advanced-edges{
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-height .25s ease,opacity .2s ease;
}
.sd-advanced-edges.is-open{
  max-height:1100px;
  opacity:1;
  pointer-events:auto;
  padding-bottom:2px;
}
.sd-panel-edge-config>.sd-advanced-toggle{
  margin-top:14px;
}

/* v4.1.76 fixed-square Advanced Edge Options guide */
.sd-panel-edge-control-map{
  grid-template-columns:74px 150px 74px;
  grid-template-rows:auto 150px auto auto;
  gap:7px 9px;
  max-width:360px;
  margin:0 auto 10px;
}
.sd-panel-edge-guide-panel{
  width:150px !important;
  height:150px !important;
  min-width:150px !important;
  min-height:150px !important;
  max-width:150px !important;
  max-height:150px !important;
}
.sd-edge-control{
  max-width:74px;
}
.sd-edge-control select{
  width:74px;
  min-width:74px;
  min-height:38px;
  padding:5px 28px 5px 10px !important;
  font-size:13px !important;
  font-weight:700;
  text-align:left;
  text-align-last:left;
}

@media(max-width:520px){
  .sd-panel-edge-control-map{
    grid-template-columns:66px 140px 66px;
    grid-template-rows:auto 140px auto auto;
    gap:6px;
    max-width:320px;
  }
  .sd-panel-edge-guide-panel{
    width:140px !important;
    height:140px !important;
    min-width:140px !important;
    min-height:140px !important;
    max-width:140px !important;
    max-height:140px !important;
  }
  .sd-edge-control,
  .sd-edge-control select{
    width:66px;
    min-width:66px;
    max-width:66px;
  }
  .sd-edge-control select{
    padding-left:8px !important;
    padding-right:24px !important;
  }
}

/* v4.1.77 reliable dropdown chevrons */
.sd-select-wrap{
  position:relative;
  display:block;
  width:100%;
}
.sd-select-wrap::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid #555;
  border-bottom:2px solid #555;
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
  z-index:2;
}
.sd-select-wrap .sd-chevron-select{
  width:100%;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-image:none !important;
  padding-right:28px !important;
}
.sd-edge-control .sd-select-wrap{
  width:74px;
}
@media(max-width:520px){
  .sd-edge-control .sd-select-wrap{
    width:66px;
  }
  .sd-select-wrap::after{
    right:8px;
  }
}

/* v4.1.80 Polytec standard edge + optional handle */
.sd-polytec-standard-edge{
  margin:4px 0 14px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fafafa;
}
.sd-polytec-standard-edge span{color:#666;font-size:.92em}
.sd-polytec-handle-field{margin-top:0}

/* v4.1.81: Design Panel renderer uses the same responsive canvas rules as all products. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-dc.is-design-panel .sd-preview-canvas-stage canvas{
    width:auto!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
}

/* v4.1.82 Advanced Paint Options + multi-edge paint returns */
.sd-advanced-paint{
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-height .25s ease,opacity .2s ease;
}
.sd-advanced-paint.is-open{
  max-height:1050px;
  opacity:1;
  pointer-events:auto;
  padding:10px 0 2px;
}
.sd-backside-return-map{
  display:grid;
  grid-template-columns:76px 150px 76px;
  grid-template-rows:auto 150px auto;
  grid-template-areas:
    ". top ."
    "left panel right"
    ". bottom .";
  gap:7px 10px;
  align-items:center;
  justify-items:center;
  width:min(100%,360px);
  margin:12px auto 8px;
}
.sd-backside-return-control{
  display:flex;
  flex-direction:column;
  width:76px;
  margin:0;
  font-size:11px;
  font-weight:650;
}
.sd-backside-return-control>span:first-child{
  margin-bottom:3px;
  text-align:center;
}
.sd-backside-return-control select{
  width:76px;
  min-width:76px;
  height:38px;
  min-height:38px;
  padding:5px 25px 5px 7px!important;
  font-size:11px;
}
.sd-backside-return-top{grid-area:top}
.sd-backside-return-bottom{grid-area:bottom}
.sd-backside-return-left{grid-area:left}
.sd-backside-return-right{grid-area:right}
.sd-backside-return-panel{
  grid-area:panel;
  position:relative;
  width:150px;
  height:150px;
  overflow:hidden;
  border:2px solid #333;
  border-radius:2px;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sd-backside-return-panel>span{
  position:relative;
  z-index:5;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:#555;
}
.sd-backside-return-fill{
  position:absolute;
  z-index:1;
  background:rgba(105,105,105,.25);
  pointer-events:none;
}
.sd-backside-return-fill.is-top{left:0;right:0;top:0;height:0}
.sd-backside-return-fill.is-bottom{left:0;right:0;bottom:0;height:0}
.sd-backside-return-fill.is-left{left:0;top:0;bottom:0;width:0}
.sd-backside-return-fill.is-right{right:0;top:0;bottom:0;width:0}
.sd-backside-full-guide{margin:12px auto 8px;width:150px}
.sd-backside-full-guide .sd-backside-return-panel{
  width:150px;
  height:150px;
  background:rgba(105,105,105,.25);
}
.sd-backside-reference-note{display:block;text-align:center;margin-top:5px;color:#777;font-size:11px}

/* Compact sticky renderer on mobile / portrait tablet.
   Descriptor moves to Summary/Add-to-Cart to free vertical scroll space. */
.sd-mobile-render-summary{display:none}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual{
    --sd-compact-sticky-height:220px;
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
    box-sizing:border-box;
    overflow:visible;
    padding:7px 8px!important;
  }
  .sd-preview-visual h3{
    margin:0 0 4px!important;
    font-size:14px!important;
  }
  .sd-preview-canvas-stage{
    height:178px!important;
    min-height:178px!important;
    max-height:178px!important;
  }
  .sd-preview-visual [data-live-summary]{
    display:none!important;
  }
  .sd-mobile-render-summary{
    display:block;
    margin:0 0 12px;
    padding:9px 10px;
    border-radius:8px;
    background:var(--soft);
    font-size:11px;
    line-height:1.45;
    text-align:left;
    color:#555;
  }
  .sd-mobile-render-summary strong{color:#242424}
}
@media(max-width:420px){
  .sd-backside-return-map{
    grid-template-columns:68px 136px 68px;
    grid-template-rows:auto 136px auto;
    gap:6px;
  }
  .sd-backside-return-panel,
  .sd-backside-full-guide .sd-backside-return-panel{
    width:136px;
    height:136px;
  }
  .sd-backside-full-guide{width:136px}
  .sd-backside-return-control,
  .sd-backside-return-control select{
    width:68px;
    min-width:68px;
  }
}

.sd-backside-return-map[hidden],
.sd-backside-full-guide[hidden]{display:none!important}

/* v4.3.0: keep mobile/portrait navigation fixed inside the sticky renderer. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    position:sticky!important;
    overflow:hidden!important;
    padding-right:96px!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    position:absolute!important;
    top:30px!important;
    right:6px!important;
    bottom:6px!important;
    left:auto!important;
    width:84px!important;
    height:auto!important;
    max-height:calc(var(--sd-compact-sticky-height,220px) - 36px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    align-content:center!important;
    grid-auto-rows:minmax(22px,auto)!important;
    gap:3px!important;
    margin:0!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete{
    min-height:22px!important;
    padding:3px 4px!important;
    font-size:9.5px!important;
    line-height:1.05!important;
  }
  .sd-preview-visual.has-floating-flow-nav .sd-preview-canvas-stage{
    width:calc(100% - 4px)!important;
    max-width:calc(100% - 4px)!important;
  }
}
@media(max-width:420px){
  .sd-preview-visual.has-floating-flow-nav{
    padding-right:88px!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    width:78px!important;
    right:5px!important;
  }
}

/* v4.3.1: taller compact sticky renderer so all mobile nav buttons fit without scrolling. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual{
    --sd-compact-sticky-height:268px!important;
    height:268px!important;
    min-height:268px!important;
    max-height:268px!important;
  }
  .sd-preview-canvas-stage{
    height:226px!important;
    min-height:226px!important;
    max-height:226px!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    top:28px!important;
    bottom:6px!important;
    max-height:none!important;
    overflow:visible!important;
    align-content:start!important;
  }
}

/* v4.3.3: v4.3.1 layout retained.
   Distribute the renderer navigation buttons evenly across the full available
   vertical height instead of using compact rows at the top. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(7,minmax(0,1fr))!important;
    align-content:stretch!important;
    height:auto!important;
    top:28px!important;
    bottom:6px!important;
    max-height:none!important;
    overflow:hidden!important;
    gap:3px!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:2px 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}

/* v4.3.4: compact sticky renderer uses a 2/3 renderer + 1/3 navigation split.
   Canvas height aligns to the full navigation stack, and nav buttons fill
   the complete width of their allocated column. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    display:grid!important;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:8px!important;
    padding:7px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .sd-preview-visual>h3{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:stretch!important;
    margin:0 0 4px!important;
    padding:0!important;
    text-align:center!important;
    z-index:2!important;
  }

  .sd-preview-visual .sd-preview-canvas-stage{
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding-top:23px!important;
    box-sizing:border-box!important;
  }

  .sd-preview-visual .sd-preview-canvas-stage canvas{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(7,minmax(0,1fr))!important;
    gap:4px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    overflow:hidden!important;
    align-self:stretch!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:3px 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    font-size:10px!important;
    line-height:1.05!important;
    white-space:normal!important;
    text-align:center!important;
  }

  .sd-preview-visual [data-live-summary],
  .sd-preview-visual [data-hinge-validation]{
    grid-column:1!important;
  }
}

/* v4.3.5: inset mobile navigation buttons so their rounded corners
   are not clipped by the navigation/container edge. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    padding:5px!important;
    box-sizing:border-box!important;
  }
}

/* v4.3.6 size range guidance */
.sd-size-range-guide{display:block!important;margin-top:5px!important;font-size:11px!important;color:#777!important;font-weight:500!important;line-height:1.25}

/* v4.3.7 handle-clearance notice + clearer compact navigation */
.sd-hinge-handle-adjustment[hidden]{display:none!important}
.sd-hinge-handle-adjustment{margin:8px 0 10px!important}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete{
    font-size:11px!important;
    font-weight:700!important;
    padding:3px 5px!important;
  }
}

/* v4.3.9 Left/Right handle vs hinge-side rule */
.sd-handle-side-collision[hidden]{display:none!important}
.sd-handle-side-collision{margin-top:8px!important}

/* v4.3.10 Plain Panel pricing orientation */

/* v4.4.3 shared panel pattern validation */
.sd-panel-pattern-width-guide.is-error{
  border-color:#b42318;
  background:#fff4f2;
  color:#8a1c13;
  font-weight:600;
}

/* v4.5.5 Advanced Paint Options: matched Front / Back technical views */
.sd-backside-return-views{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(220px,1fr);
  gap:20px;
  align-items:stretch;
  width:100%;
  max-width:760px;
  margin:12px auto 8px;
}
.sd-backside-return-views>.sd-backside-return-map{
  width:100%;
  margin:0;
  align-self:stretch;
}
.sd-backside-back-view{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:250px;
  padding:12px;
  box-sizing:border-box;
}
.sd-backside-view-title{
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.sd-backside-back-view>.sd-backside-return-panel{
  width:150px;
  height:150px;
}
.sd-backside-back-view>small{
  display:block;
  margin-top:7px;
  color:#777;
  font-size:11px;
  text-align:center;
}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-backside-return-views{grid-template-columns:1fr;max-width:390px;gap:8px}
  .sd-backside-back-view{min-height:auto;padding:8px 0 4px}
}
.sd-backside-return-views[hidden]{display:none!important}

/* v4.5.6 Paint Returns: front reference + centered stacked views */
.sd-backside-front-edge{
  position:absolute;
  z-index:3;
  background:rgba(105,105,105,.42);
  pointer-events:none;
  display:none;
}
.sd-backside-front-edge.is-top{left:0;right:0;top:0;height:10px}
.sd-backside-front-edge.is-bottom{left:0;right:0;bottom:0;height:10px}
.sd-backside-front-edge.is-left{left:0;top:0;bottom:0;width:10px}
.sd-backside-front-edge.is-right{right:0;top:0;bottom:0;width:10px}

.sd-backside-return-views{
  justify-items:center;
}
.sd-backside-front-view,
.sd-backside-back-view{
  justify-self:center;
}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-backside-return-views{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    align-items:start;
    width:100%;
    max-width:390px;
    margin-left:auto;
    margin-right:auto;
  }
  .sd-backside-front-view{
    justify-self:center;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .sd-backside-back-view{
    justify-self:center;
    align-items:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
}

/* v4.5.7 Paint Returns: proportional Front View + top-aligned previews */
.sd-backside-front-edge.is-top{height:0}
.sd-backside-front-edge.is-bottom{height:0}
.sd-backside-front-edge.is-left{width:0}
.sd-backside-front-edge.is-right{width:0}

/* Both technical panel boxes begin on the same vertical line. */
.sd-backside-return-views{
  align-items:start;
}
.sd-backside-front-view{
  align-self:start;
}
.sd-backside-back-view{
  justify-content:flex-start;
  align-self:start;
  padding-top:0;
}
/* The rear caption lives below the box and must not vertically centre/push it. */
.sd-backside-back-view>.sd-backside-return-panel{
  flex:0 0 auto;
}
.sd-backside-back-view>small{
  flex:0 0 auto;
}
@media (min-width:951px) and (orientation:landscape){
  .sd-backside-front-view,
  .sd-backside-back-view{
    align-self:start;
  }
}

/* v4.5.8 Advanced Paint Options: single Front/Back switchable preview */
.sd-backside-return-single{
  width:100%;
  max-width:390px;
  margin:12px auto 8px;
}
.sd-backside-view-switch{
  max-width:300px;
  margin:0 auto 10px;
  text-align:center;
}
.sd-backside-view-switch .sd-buttons{
  justify-content:center;
}
.sd-backside-return-single>.sd-backside-return-map{
  margin:0 auto;
}
.sd-backside-view-note{
  display:block;
  margin-top:8px;
  color:#777;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}
.sd-backside-return-single[hidden]{display:none!important}

/* Retire dual-view layout styling from active use. */
.sd-backside-return-views{display:none!important}

[data-advanced-edge-custom]{margin-top:8px}




/* v4.6.7 unified standard selector button system */
.sd-dc .sd-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:7px;
  align-items:stretch;
}

.sd-dc .sd-buttons button{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  min-height:40px;
  height:auto;
  padding:8px 12px;
  border:1px solid #8f969a;
  border-radius:8px;
  background:#F4F5F6;
  color:inherit;
  font:inherit;
  line-height:1.2;
  white-space:normal;
  text-align:center;
  cursor:pointer;
  box-shadow:none;
  box-sizing:border-box;
}

.sd-dc .sd-buttons button:hover{
  border-color:#666d71;
}

.sd-dc .sd-buttons button.is-active{
  background:#f19429;
  border-color:#d97c00;
  color:#fff;
  font-weight:600;
  box-shadow:none;
}

.sd-dc .sd-buttons button.is-disabled,
.sd-dc .sd-buttons button:disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}

/* Product Type inherits the exact same button sizing; only its category labels differ. */
.sd-dc .sd-v4-product-choice{
  align-items:flex-start;
}
.sd-dc .sd-v4-product-choice button b{
  display:inline;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
}

/* Mobile compact breakpoint for every standard selector group.
   Tablet portrait intentionally keeps the same button sizing as tablet landscape. */
@media (max-width:620px){
  .sd-dc .sd-buttons{
    gap:6px;
    margin-top:6px;
  }
  .sd-dc .sd-buttons button{
    min-height:36px;
    padding:7px 10px;
    border-radius:7px;
    font-size:12px;
    line-height:1.2;
  }
}

/* Very small screens use the same system with slightly tighter spacing. */
@media (max-width:420px){
  .sd-dc .sd-buttons{
    gap:6px;
  }
  .sd-dc .sd-buttons button{
    min-height:36px;
    padding:7px 8px;
    font-size:12px;
  }
}

/* v4.6.8 unified dropdown/select formatting */
.sd-dc select.sd-select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:100%;
  min-width:0;
  min-height:44px;
  margin-top:6px;
  padding:8px 36px 8px 10px;
  border:1px solid #cfcac2;
  border-radius:7px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,transparent 50%,#555 50%),
    linear-gradient(135deg,#555 50%,transparent 50%);
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:inherit;
  font:inherit;
  line-height:1.2;
  cursor:pointer;
  box-sizing:border-box;
}

.sd-dc select.sd-select:hover,
.sd-dc select.sd-select:focus{
  border-color:var(--theme-button-background-initial-color);
}

.sd-dc select.sd-select:disabled{
  opacity:.55;
  cursor:not-allowed;
  background-color:#f3f3f3;
}

@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-dc select.sd-select{
    min-height:40px;
    margin-top:5px;
    padding:6px 30px 6px 8px;
    border-radius:6px;
    background-position:
      calc(100% - 14px) calc(50% - 2px),
      calc(100% - 9px) calc(50% - 2px);
  }
}

/* v4.6.9 restore selected-state colours after unified button cleanup */
.sd-dc .sd-buttons button.is-active:hover,
.sd-dc .sd-buttons button.is-active:focus,
.sd-dc .sd-buttons button.is-active:active{
  background:#f19429;
  border-color:#d97c00;
  color:#fff;
}



/* v4.7.11 spacing after Vertical Pattern Number of Patterns buttons */
.sd-pattern-count-buttons{margin-bottom:12px}

/* v4.7.12 spacing after Pattern Layout explanatory note */
.sd-pattern-layout-note{margin-bottom:12px}


/* v4.7.20 Advanced Paint Options: Paint Returns controls left, installed guides right */
.sd-backside-returns-layout{
  display:grid;
  grid-template-columns:minmax(330px,1.15fr) minmax(250px,.85fr);
  gap:24px;
  align-items:start;
  width:100%;
  margin-top:14px;
}
.sd-backside-returns-layout[hidden]{display:none!important}
.sd-backside-returns-configurator,
.sd-backside-install-guides{min-width:0}
.sd-backside-section-label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:700;
}
.sd-backside-returns-configurator>.sd-backside-return-map{
  width:100%;
  max-width:390px;
  margin:0;
}
.sd-backside-install-guides>small{
  display:block;
  margin:-2px 0 8px;
  color:#777;
  font-size:11px;
  line-height:1.35;
}
.sd-backside-guide-thumbnails{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.sd-backside-guide-thumb{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
}
.sd-backside-guide-thumb img{
  display:block;
  width:100%;
  height:150px;
  object-fit:contain;
}
.sd-backside-guide-thumb b{
  font-size:11px;
  line-height:1.25;
  text-align:center;
}
@media(max-width:950px){
  .sd-backside-returns-layout{grid-template-columns:1fr;gap:16px}
  .sd-backside-returns-configurator>.sd-backside-return-map{margin-left:auto;margin-right:auto}
  .sd-backside-install-guides{max-width:390px;width:100%;margin:0 auto}
}
@media(max-width:620px){
  .sd-backside-guide-thumb img{height:120px}
}


/* v4.7.62: paint return installation guide thumbnails use SVG assets in the existing image gallery modal */
.sd-backside-guide-clickable{
    cursor:pointer;
}
.sd-backside-guide-clickable:focus-visible{
    outline:2px solid currentColor;
    outline-offset:3px;
}

/* v4.7.62: single installation guide fills the full Installation Guides section */
.sd-backside-install-guides .sd-backside-guide-thumbnails{
  grid-template-columns:minmax(0,1fr);
  width:100%;
}
.sd-backside-install-guides .sd-backside-guide-thumb{
  width:100%;
  padding:0;
  overflow:hidden;
}
.sd-backside-install-guides .sd-backside-guide-thumb img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
@media(max-width:620px){
  .sd-backside-install-guides .sd-backside-guide-thumb img{
    height:auto;
  }
}

/* v4.7.62: let the installation guide occupy the full right-hand column beside Paint Return Configurator */
@media(min-width:951px){
  .sd-backside-returns-layout{
    align-items:stretch;
  }
  .sd-backside-install-guides{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:none;
    align-self:stretch;
  }
  .sd-backside-install-guides .sd-backside-guide-thumbnails{
    flex:1 1 auto;
    display:flex;
    width:100%;
    min-height:0;
  }
  .sd-backside-install-guides .sd-backside-guide-thumb{
    flex:1 1 auto;
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
  }
  .sd-backside-install-guides .sd-backside-guide-thumb img{
    flex:1 1 auto;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:contain;
  }
}

/* v4.7.62: balanced Paint Returns / Reference Guide layout */
@media(min-width:951px){
  .sd-backside-returns-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;
  }
  .sd-backside-returns-configurator,
  .sd-backside-install-guides{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .sd-backside-section-label{
    width:100%;
    text-align:center;
  }
  .sd-backside-returns-configurator>.sd-backside-return-map{
    margin-left:auto;
    margin-right:auto;
  }
}

/* Wider return selectors so values such as 100mm remain fully visible. */
.sd-backside-return-map{
  grid-template-columns:100px 150px 100px;
  column-gap:12px;
  width:min(100%,374px);
}
.sd-backside-return-control{
  width:100px;
  align-items:center;
  text-align:center;
}
.sd-backside-return-control>span:first-child{
  width:100%;
  text-align:center;
}
.sd-backside-return-control .sd-select-wrap{
  display:block;
  width:100px;
}
.sd-backside-return-control select{
  width:100px;
  min-width:100px;
  padding-left:10px!important;
  padding-right:28px!important;
  text-align:center;
  text-align-last:center;
  box-sizing:border-box;
}

/* Keep all four controls centred on their respective sides of the front-view panel. */
.sd-backside-return-top,
.sd-backside-return-bottom,
.sd-backside-return-left,
.sd-backside-return-right{
  justify-self:center;
  align-self:center;
}

@media(max-width:420px){
  .sd-backside-return-map{
    grid-template-columns:82px 140px 82px;
    column-gap:7px;
    width:min(100%,318px);
  }
  .sd-backside-return-panel{
    width:140px;
    height:140px;
  }
  .sd-backside-return-control,
  .sd-backside-return-control .sd-select-wrap{
    width:82px;
  }
  .sd-backside-return-control select{
    width:82px;
    min-width:82px;
    padding-left:5px!important;
    padding-right:22px!important;
    font-size:10px;
  }
}

/* v4.7.62: Paint Returns helper/caption belongs to the Paint Returns column */
.sd-backside-returns-configurator .sd-backside-guide-caption,
.sd-backside-returns-configurator .sd-backside-reference-note{
  width:100%;
  text-align:center;
}
.sd-backside-returns-configurator .sd-backside-guide-caption{
  margin-top:8px;
}
.sd-backside-returns-configurator .sd-backside-reference-note{
  margin-top:5px;
}

/* v4.7.62: Advanced Edge Options follows the two-column Paint Returns / Reference Guide layout */
.sd-panel-edge-reference-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:stretch;
  width:100%;
  margin-top:14px;
}
.sd-panel-edge-config-section,
.sd-panel-edge-reference-section{
  min-width:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sd-panel-edge-config-section>.sd-backside-section-label,
.sd-panel-edge-reference-section>.sd-backside-section-label{
  width:100%;
  text-align:center;
}
.sd-panel-edge-config-section .sd-panel-edge-key{
  width:min(100%,374px);
  box-sizing:border-box;
  margin-left:auto;
  margin-right:auto;
}
.sd-panel-edge-config-section .sd-panel-edge-control-map{
  grid-template-columns:100px 150px 100px;
  grid-template-rows:auto minmax(190px,auto) auto auto;
  column-gap:12px;
  width:min(100%,374px);
  max-width:374px;
  margin-left:auto;
  margin-right:auto;
}
.sd-panel-edge-config-section .sd-edge-control{
  width:100px;
  max-width:100px;
  align-items:center;
  text-align:center;
  justify-self:center;
  align-self:center;
}
.sd-panel-edge-config-section .sd-edge-control>span:first-child{
  width:100%;
  text-align:center;
}
.sd-panel-edge-config-section .sd-edge-control .sd-select-wrap{
  display:block;
  width:100px;
}
.sd-panel-edge-config-section .sd-edge-control select{
  width:100px;
  min-width:100px;
  box-sizing:border-box;
  text-align:center;
  text-align-last:center;
  padding-left:10px!important;
  padding-right:28px!important;
}
.sd-panel-edge-config-section .sd-panel-edge-tip{
  width:100%;
  box-sizing:border-box;
}
.sd-panel-edge-reference-section{
  align-self:stretch;
}
.sd-panel-edge-reference-thumbnails{
  flex:1 1 auto;
  display:flex;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  min-height:0;
}
.sd-panel-edge-reference-thumbnails .sd-backside-guide-thumb{
  flex:1 1 auto;
  display:flex;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  overflow:hidden;
}
.sd-panel-edge-reference-thumbnails .sd-backside-guide-thumb img{
  flex:1 1 auto;
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  min-height:0;
  object-fit:contain;
}

@media(max-width:950px){
  .sd-panel-edge-reference-layout{
    grid-template-columns:1fr;
    gap:16px;
  }
  .sd-panel-edge-config-section,
  .sd-panel-edge-reference-section{
    max-width:390px;
    margin-left:auto;
    margin-right:auto;
  }
  .sd-panel-edge-reference-thumbnails .sd-backside-guide-thumb img{
    height:auto;
  }
}
@media(max-width:420px){
  .sd-panel-edge-config-section .sd-panel-edge-control-map{
    grid-template-columns:82px 140px 82px;
    column-gap:7px;
    width:min(100%,318px);
  }
  .sd-panel-edge-config-section .sd-panel-edge-guide-panel{
    width:140px;
    height:180px;
  }
  .sd-panel-edge-config-section .sd-edge-control,
  .sd-panel-edge-config-section .sd-edge-control .sd-select-wrap{
    width:82px;
    max-width:82px;
  }
  .sd-panel-edge-config-section .sd-edge-control select{
    width:82px;
    min-width:82px;
    padding-left:5px!important;
    padding-right:22px!important;
    font-size:11px;
  }
}

/* v4.7.62: shared Advanced Edge footer spans Edge Config and Reference Guide */
.sd-panel-edge-footer{
  grid-column:1 / -1;
  width:100%;
  margin-top:4px;
}
.sd-panel-edge-footer .sd-panel-edge-key{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0 0 10px;
  justify-content:center;
}
.sd-panel-edge-footer .sd-panel-edge-tip{
  width:100%;
  box-sizing:border-box;
  margin-top:0;
}

/* v4.7.62: legend and TIP share one footer row */
.sd-panel-edge-footer{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.sd-panel-edge-footer .sd-panel-edge-key{
  width:max-content;
  max-width:220px;
  margin:0;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:flex-start;
  gap:5px;
}
.sd-panel-edge-footer .sd-panel-edge-tip{
  min-width:0;
  margin:0;
}
@media(max-width:700px){
  .sd-panel-edge-footer{
    grid-template-columns:1fr;
    gap:10px;
  }
  .sd-panel-edge-footer .sd-panel-edge-key{
    width:100%;
    max-width:none;
  }
}

/* v4.7.62: simple Kaboodle products use one full-width preset selector */
.sd-v4-preset-group.is-single-preset{
  grid-template-columns:minmax(0,1fr);
  width:100%;
  max-width:760px;
}
.sd-v4-preset-group.is-single-preset [data-manufacturer-size-preset-field]{
  width:100%;
  max-width:none;
}
.sd-v4-preset-group.is-single-preset [data-field="manufacturer_preset"]{
  width:100%;
  max-width:none;
  min-width:0;
}


/* v4.7.62: deterministic Custom Paint alignment */
.sd-custom-paint-catalogue-row{
  display:block;
  width:100%;
  margin-top:7px;
}

@media(min-width:621px){
  .sd-custom-paint-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px;
    align-items:stretch!important;
  }
  .sd-custom-paint-row>label{
    display:grid!important;
    grid-template-rows:auto 44px;
    gap:6px;
    align-items:stretch;
    min-width:0;
    height:auto!important;
  }
  .sd-custom-paint-row>label>input,
  .sd-custom-paint-row>label>select{
    width:100%;
    min-width:0;
    height:44px;
    min-height:44px;
    margin-top:0!important;
    box-sizing:border-box;
  }
}

@media(max-width:620px){
  .sd-custom-paint-row{
    grid-template-columns:1fr!important;
  }
  .sd-custom-paint-row>label{
    display:block!important;
  }
  .sd-custom-paint-row>label>input,
  .sd-custom-paint-row>label>select{
    margin-top:6px!important;
  }
}

/* v4.7.62: explicit caption/control rows prevent browser label-baseline drift */
@media(min-width:621px){
  .sd-custom-paint-row>label{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    height:auto!important;
  }
  .sd-custom-paint-label{
    display:block;
    flex:0 0 auto;
    min-height:18px;
    line-height:18px;
    margin:0 0 6px;
  }
  .sd-custom-paint-row>label>input,
  .sd-custom-paint-row>label>select{
    display:block;
    flex:0 0 44px;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    box-sizing:border-box!important;
    align-self:stretch;
  }
}
@media(max-width:620px){
  .sd-custom-paint-label{
    display:block;
    margin-bottom:0;
  }
}

/* v4.7.62: taller fixed sticky renderer across portrait tablet widths.
   Phones remain on the compact renderer; tablet portrait uses the larger section. */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-preview-visual{
    --sd-compact-sticky-height:300px!important;
    height:300px!important;
    min-height:300px!important;
    max-height:300px!important;
  }
  .sd-preview-canvas-stage{
    height:258px!important;
    min-height:258px!important;
    max-height:258px!important;
  }
}

/* v4.7.62: standard selected configurator buttons use the site theme button colours.
   Image/colour swatch selection styling remains unchanged. */
.sd-dc .sd-buttons button.is-active,
.sd-dc .sd-choice-grid button.is-active,
.sd-dc .sd-buttons button.is-active:hover,
.sd-dc .sd-buttons button.is-active:focus,
.sd-dc .sd-buttons button.is-active:active{
  background:var(--theme-button-background-initial-color)!important;
  border-color:var(--theme-button-background-initial-color)!important;
  color:var(--theme-button-text-initial-color)!important;
  box-shadow:none!important;
}

/* v4.7.62: Drawer Set manufacturer presets use the standard chevron selector */
.sd-drawer-preset-label .sd-drawer-preset-select{
  width:100%;
  max-width:none;
}
.sd-drawer-preset-label .sd-drawer-preset-select:not(:invalid){
  border-color:var(--theme-button-background-initial-color);
}
.sd-drawer-preset-label .sd-drawer-preset-select:focus{
  border-color:var(--theme-button-background-initial-color);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--theme-button-background-initial-color) 22%, transparent);
  outline:none;
}

/* v4.7.62 Dropdown styling consolidation
   Visual source of truth: .sd-dc select.sd-select
   Intentional layout exceptions retained:
   - .sd-v4-preset-select: manufacturer preset max-width only
   - .sd-edge-control select: compact Edge Config dimensions/alignment
   - .sd-select-wrap: pseudo-chevron for compact wrapped controls
   - .sd-drawer-preset-select: Drawer Set width + selected/focus treatment
*/


/* v4.7.67 Drawer Front Configuration: universal action buttons + purpose-specific validation */
.sd-drawer-configurator-section .sd-drawer-add,
.sd-drawer-configurator-section [data-drawer-remove]{
  appearance:none;
  -webkit-appearance:none;
  background:#F4F5F6!important;
  border:1px solid #8f969a!important;
  border-radius:8px!important;
  color:inherit!important;
  box-shadow:none!important;
  cursor:pointer;
  font:inherit;
  font-weight:400!important;
  line-height:1.25;
  padding:10px 14px!important;
  text-transform:none!important;
}
.sd-drawer-configurator-section .sd-drawer-add:hover,
.sd-drawer-configurator-section .sd-drawer-add:focus,
.sd-drawer-configurator-section [data-drawer-remove]:hover,
.sd-drawer-configurator-section [data-drawer-remove]:focus{
  border-color:#666d71!important;
  background:#F4F5F6!important;
  color:inherit!important;
}
.sd-drawer-width-validation{grid-column:1/-1;margin-top:0}
.sd-drawer-row-validation{grid-column:2/-1;margin-top:0}
.sd-drawer-row-validation[hidden],.sd-drawer-width-validation[hidden]{display:none!important}
.sd-edge-reference-note{margin-bottom:12px}
@media(max-width:760px){
  .sd-drawer-row-validation{grid-column:1/-1}
}

/* v4.7.68 Drawer Front actions: semantic add/remove colours. */
.sd-drawer-configurator-section .sd-drawer-add{
  background:#15803d!important;
  border-color:#166534!important;
  color:#fff!important;
}
.sd-drawer-configurator-section .sd-drawer-add:hover,
.sd-drawer-configurator-section .sd-drawer-add:focus{
  background:#166534!important;
  border-color:#14532d!important;
  color:#fff!important;
}
.sd-drawer-configurator-section [data-drawer-remove]{
  min-width:0!important;
  min-height:0!important;
  padding:4px 8px!important;
  border:1px solid #b42318!important;
  border-radius:4px!important;
  background:#d92d20!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.2!important;
}
.sd-drawer-configurator-section [data-drawer-remove]:hover,
.sd-drawer-configurator-section [data-drawer-remove]:focus{
  background:#b42318!important;
  border-color:#8f1d18!important;
  color:#fff!important;
}
.sd-drawer-size-note{margin-top:0;}
.sd-drawer-size-note[hidden]{display:none!important;}

/* v4.7.70: dynamic flow labels + state-aware Items navigation. */
.sd-flow-progress button.button:disabled,
.sd-flow-progress button.button[aria-disabled="true"]{
  opacity:.46!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}
.sd-project-list-anchor{width:100%;max-width:100%;clear:both;scroll-margin-top:72px}
.sd-project-list-return{display:flex;justify-content:flex-end;margin:12px 0 0}
.sd-project-list-return[hidden]{display:none!important}
.sd-project-list-return .button{margin:0;min-height:38px;padding:7px 12px;border-radius:8px!important}
@media(max-width:620px){
  .sd-project-list-return{justify-content:stretch}
  .sd-project-list-return .button{width:100%}
}



/* v4.7.78 Test A: Pattern Layout is a conditional first-class flow section.
   Preserve the existing seven-button navigation when hidden; use eight equal
   compact slots only when the Pattern Layout step is relevant. */
@media (min-width:1101px), (min-width:951px) and (orientation:landscape){
  .sd-flow-progress.has-pattern-layout:not(.is-renderer-nav){
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
  }
}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav.has-pattern-layout{
    grid-template-rows:repeat(8,minmax(0,1fr))!important;
  }
}
.sd-pattern-layout-section .sd-pattern-config{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.sd-pattern-layout-section .sd-pattern-config>h4{
  margin-bottom:12px;
}


/* v4.7.82: restore Summary as a first-class navigation destination.
   Base flow is now eight visible buttons; conditional Pattern Layout makes nine. */
@media (min-width:1101px), (min-width:951px) and (orientation:landscape){
  .sd-flow-progress:not(.is-renderer-nav){
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
  }
  .sd-flow-progress.has-pattern-layout:not(.is-renderer-nav){
    grid-template-columns:repeat(9,minmax(0,1fr))!important;
  }
}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    grid-template-rows:repeat(8,minmax(0,1fr))!important;
  }
  .sd-preview-visual .sd-flow-progress.is-renderer-nav.has-pattern-layout{
    grid-template-rows:repeat(9,minmax(0,1fr))!important;
  }
}

/* v4.7.82: give the floating renderer/nav roughly two additional compact
   button-row heights instead of compressing the larger navigation stack. */
@media (max-width:950px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-compact-sticky-height:344px!important;
    height:344px!important;
    min-height:344px!important;
    max-height:344px!important;
  }
}
/* v4.8.99: phone/mobile only – reduce floating renderer + nav height.
   Keep the existing 344px compact tablet/landscape rule and 376px portrait-tablet override. */
@media (max-width:620px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-compact-sticky-height:280px!important;
    height:280px!important;
    min-height:280px!important;
    max-height:280px!important;
  }
}
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-compact-sticky-height:376px!important;
    height:376px!important;
    min-height:376px!important;
    max-height:376px!important;
  }
}

/* v4.7.82: UI-only build/version marker in Cabinet Type. */
.sd-plugin-version{
  float:right;
  margin-top:2px;
  padding:2px 6px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:var(--soft,#f5f5f5);
  color:#777;
  font-size:10px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.01em;
  white-space:nowrap;
}


/* v4.7.83: keep the expanded desktop/tablet-landscape flow navigation on one row.
   Tighten only wide-layout typography/spacing; portrait/mobile renderer-nav remains unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav){
    gap:3px!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) button.button,
  .sd-flow-progress:not(.is-renderer-nav) button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav) button.button:active,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-complete{
    min-height:32px!important;
    padding:4px 3px!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    letter-spacing:-.08px;
  }
}


/* v4.7.84: conditional navigation visibility + stable single-row wide layout.
   The universal nav button rule uses display:flex!important, so explicitly
   honour hidden conditional steps (notably Pattern Layout). On desktop and
   landscape tablet, size only the buttons that are actually visible and
   never wrap them onto a second row. */
.sd-flow-progress button.button[hidden],
.sd-flow-progress button.button[aria-hidden="true"],
.sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[hidden],
.sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-hidden="true"]{
  display:none!important;
}
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav){
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:3px!important;
    grid-template-columns:none!important;
  }
  .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:4px 2px!important;
    font-size:10px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
}

/* v4.8.2: keep Kickboard Height visually separated from Mid-Rail Options in Vertical Automatic layout. */
.sd-dc .sd-vertical-auto-kickboard-field{margin-top:17px;}

/* v4.8.8: old-tablet landscape containment.
   Keep the established desktop navigation and renderer behaviour, but make
   the 1101-1365px landscape range fluid so 1280px-class tablets do not
   inherit the fixed 880px + 390px + 24px desktop footprint. */
@media (min-width:1101px) and (max-width:1365px) and (orientation:landscape){
  .sd-dc,
  .sd-dc-layout{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .sd-dc-form{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .sd-dc-layout{
    grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);
    gap:18px;
  }

  .sd-flow-progress:not(.is-renderer-nav){
    gap:4px!important;
  }

  .sd-flow-progress:not(.is-renderer-nav) button.button,
  .sd-flow-progress:not(.is-renderer-nav) button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav) button.button:active,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-complete{
    padding:5px 2px!important;
    font-size:12.5px!important;
  }
}

/* v4.8.9: keep connected Corner & Bi-fold sets visually identifiable in Project List. */
.sd-project-type-note{display:block;margin-top:2px;font-size:11px;font-weight:500;line-height:1.25;opacity:.68;white-space:normal}

/* v4.8.10: responsive navigation typography.
   Keep navigation labels visually consistent while the viewport changes.
   Wide navigation now scales with the viewport instead of jumping to the
   v4.8.8 tablet-landscape 12.5px size, and all navigation modes use the same
   regular font weight. Existing navigation layout/relocation is unchanged. */
.sd-flow-progress button.button,
.sd-flow-progress button.button:hover,
.sd-flow-progress button.button:focus,
.sd-flow-progress button.button:focus-visible,
.sd-flow-progress button.button:active,
.sd-flow-progress button.button.is-current,
.sd-flow-progress button.button.is-complete,
.sd-flow-progress button.button:disabled,
.sd-flow-progress button.button[aria-disabled="true"]{
  font-family:inherit!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:0!important;
}

@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav) button.button,
  .sd-flow-progress:not(.is-renderer-nav) button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav) button.button:focus-visible,
  .sd-flow-progress:not(.is-renderer-nav) button.button:active,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav) button.button.is-complete,
  .sd-flow-progress:not(.is-renderer-nav) button.button:disabled,
  .sd-flow-progress:not(.is-renderer-nav) button.button[aria-disabled="true"]{
    padding-left:clamp(1px,.18vw,3px)!important;
    padding-right:clamp(1px,.18vw,3px)!important;
    font-size:clamp(9px,.72vw,10.5px)!important;
    font-weight:400!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label{
    display:block;
    min-width:0;
    max-width:100%;
    white-space:nowrap;
  }
}

/* v4.8.17: taller two-line desktop/tablet navigation with 13.5px semibold labels.
   Allow wide-layout labels to wrap to a second line so the type can remain
   comfortably readable without overflowing equal-width navigation buttons.
   Mobile/portrait renderer navigation remains unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    min-height:48px!important;
    padding:6px clamp(3px,.28vw,5px)!important;
    font-size:13.5px!important;
    font-weight:600!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label{
    display:-webkit-box;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:normal!important;
    overflow-wrap:normal;
    word-break:normal;
    text-align:center;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
  }

  /* Keep these two longer labels predictably balanced at the larger type size. */
  .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label-split{
    display:block;
    line-height:1.08!important;
  }
  .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label-split>span{
    display:block;
  }
}

/* v4.8.19: portrait navigation typography split.
   Tablet portrait gets larger medium-weight labels; mobile remains compact.
   v4.8.26: mobile navigation increased to 10px semibold for readability. */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus-visible,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:disabled,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-disabled="true"]{
    font-size:13px!important;
    font-weight:500!important;
  }
}

@media (max-width:620px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus-visible,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:disabled,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-disabled="true"]{
    font-size:10px!important;
    font-weight:600!important;
  }
}


@media(max-width:620px){.sd-image-zoom-dialog.has-guide-note img{max-height:calc(var(--sd-visible-viewport-height,100dvh) - 245px)}.sd-image-zoom-note{font-size:12px;padding:10px 11px}}


/* v4.8.34: compact Design Options information lightbox. */
.sd-design-info-button{margin-top:10px!important;width:auto!important;min-height:38px;padding:7px 14px!important}
.sd-design-info-modal{position:fixed;top:var(--sd-visible-viewport-top,0px);right:auto;bottom:auto;left:var(--sd-visible-viewport-left,0px);width:100vw;width:var(--sd-visible-viewport-width,100vw);height:100vh;height:100dvh;height:var(--sd-visible-viewport-height,100dvh);box-sizing:border-box;z-index:2147483646;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.78)}
.sd-design-info-modal.is-open{display:flex}
.sd-design-info-dialog{position:relative;width:min(92vw,860px);max-height:calc(var(--sd-visible-viewport-height,100dvh) - 48px);overflow:auto;padding:22px;border-radius:14px;background:#fff;color:#333;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.sd-design-info-dialog h3{margin:0 44px 14px 0;font-size:20px;line-height:1.25}
.sd-design-info-dialog h4{margin:18px 0 6px;font-size:15px}
.sd-design-info-copy p{margin:0 0 10px;line-height:1.5}
.sd-design-info-guide-section{padding-top:2px}
.sd-design-info-guide-image{display:block;width:min(100%,680px);max-height:390px;margin:12px auto 4px;object-fit:contain;border:1px solid var(--border,#ddd);border-radius:8px;background:#f6f6f6}
.sd-design-info-close{position:absolute;top:10px;right:10px;width:38px;height:38px;min-height:38px!important;padding:0!important;border:1px solid #777!important;border-radius:50%!important;background:#fff!important;color:#222!important;font-size:25px!important;font-weight:400!important;line-height:34px!important;cursor:pointer}
.sd-design-info-done{display:block;margin:18px 0 0 auto!important}
body.sd-design-info-open{overflow:hidden}
@media(max-width:620px){.sd-design-info-modal{padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left))}.sd-design-info-dialog{padding:16px;max-height:calc(var(--sd-visible-viewport-height,100dvh) - 24px)}.sd-design-info-dialog h3{font-size:18px}.sd-design-info-guide-image{max-height:300px}}

/* v4.8.35: restore the active navigation chevron after the taller two-line
   navigation update. The button must allow the pointer pseudo-element to
   extend below its border; label clipping remains handled by .sd-flow-label. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    overflow:visible!important;
  }
}


/* v4.8.36: Design Options Section Guide placement + Corner/Bi-fold mobile note row. */
.sd-section-guide-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
}
.sd-section-guide-heading>h3{
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
}
.sd-section-guide-heading .sd-design-info-button{
  flex:0 0 auto;
  width:auto!important;
  min-width:0!important;
  min-height:30px!important;
  margin:0!important;
  padding:5px 10px!important;
  border-radius:7px!important;
  font-size:11px!important;
  line-height:1.2!important;
  white-space:nowrap;
}
.sd-pattern-layout-section .sd-pattern-layout-control{
  margin-top:0;
}
.sd-v4-corner-preset-group{
  width:100%;
  max-width:none;
}
.sd-corner-preset-note{
  display:block;
  grid-column:1 / -1;
  width:100%;
  margin:0;
  color:#777;
  font-size:12px;
  font-weight:400;
  line-height:1.45;
}
@media(max-width:620px){
  .sd-section-guide-heading{gap:8px;margin-bottom:14px}
  .sd-section-guide-heading .sd-design-info-button{
    min-height:28px!important;
    padding:4px 8px!important;
    font-size:10px!important;
  }
  .sd-v4-corner-preset-group{gap:8px}
  .sd-corner-preset-note{
    margin-bottom:8px;
    font-size:11px;
    line-height:1.4;
  }
  .sd-v4-corner-preset-group + .sd-dimensions-row{
    margin-top:12px;
  }
  .sd-dimensions-row:has([data-show="corner"]:not([style*="display: none"])){
    margin-top:24px;
    padding-top:4px;
  }
}

/* v4.8.38: conditional landscape-orientation guidance below renderer */
.sd-polytec-rotation-note{margin-top:8px;font-size:12px;line-height:1.4}

/* v4.8.42: uniform Section Guide subsection hierarchy. */
.sd-design-info-dialog .sd-design-info-guide-section>h4{
  margin:18px 0 7px;
  font-size:17px;
  line-height:1.3;
  font-weight:700;
}
@media(max-width:620px){
  .sd-design-info-dialog .sd-design-info-guide-section>h4{font-size:16px}
}


/* v4.8.43: contextual wide-width resolution in the Size section. */
.sd-wide-pattern-notice.is-error {
  border-color: #e5b46f;
  background: #fff8ed;
}
.sd-wide-pattern-switch {
  margin-left: 8px !important;
  padding: 5px 10px !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .sd-wide-pattern-switch {
    display: block;
    margin: 8px 0 0 !important;
    width: 100%;
  }
}

/* v4.8.44: shared configurator button interaction + navigation typography.
   Apply one restrained hover treatment to the standard section controls and
   navigation so older controls match the newer Section Guide interaction.
   Transform does not change layout dimensions. Touch devices keep their normal
   pressed/active behaviour because hover transforms only run on fine pointers. */
.sd-dc .sd-buttons button,
.sd-dc .sd-image-options button,
.sd-dc .sd-flow-progress button.button,
.sd-dc .sd-design-info-button,
.sd-dc .sd-wide-pattern-switch{
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease!important;
  transform-origin:center center;
}

@media (hover:hover) and (pointer:fine){
  .sd-dc .sd-buttons button:not(:disabled):hover,
  .sd-dc .sd-image-options button:not(:disabled):hover,
  .sd-dc .sd-flow-progress button.button:not(:disabled):hover,
  .sd-dc .sd-design-info-button:not(:disabled):hover,
  .sd-dc .sd-wide-pattern-switch:not(:disabled):hover{
    transform:translateY(-1px) scale(1.025);
  }
}

/* Navigation labels: smaller 12px type with slightly more tracking. */
.sd-dc .sd-flow-progress button.button,
.sd-dc .sd-flow-progress button.button:hover,
.sd-dc .sd-flow-progress button.button:focus,
.sd-dc .sd-flow-progress button.button:focus-visible,
.sd-dc .sd-flow-progress button.button:active,
.sd-dc .sd-flow-progress button.button.is-current,
.sd-dc .sd-flow-progress button.button.is-complete,
.sd-dc .sd-flow-progress button.button:disabled,
.sd-dc .sd-flow-progress button.button[aria-disabled="true"]{
  letter-spacing:.03em!important;
}

@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    font-size:12px!important;
  }
}

@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus-visible,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:disabled,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-disabled="true"]{
    font-size:12px!important;
  }
}

@media (max-width:620px){
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus-visible,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:disabled,
  .sd-dc .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-disabled="true"]{
    /* Retain the intentionally compact mobile size while adding tracking. */
    font-size:10px!important;
  }
}



/* v4.8.50: persistent Important Preview guidance lives in Material / Finish. */
.sd-material-preview-important{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid #d98f8a;
  border-left:4px solid #b42318;
  border-radius:8px;
  background:#fff7f6;
  color:#7a1712;
  font-size:11px;
  line-height:1.45;
  text-align:left;
}
.sd-material-preview-important strong{
  color:#8f1d18;
  font-weight:700;
}
.sd-material-renderer-guide{
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid #e2aaa6;
  border-left:4px solid #b42318;
  border-radius:8px;
  background:#fff8f7;
}
.sd-material-renderer-guide h5{
  margin:0 0 6px;
  color:#8f1d18;
  font-size:15px;
  line-height:1.3;
  font-weight:700;
}
.sd-material-renderer-guide p:last-child{margin-bottom:0}
@media(max-width:620px){
  .sd-material-preview-important{padding:9px 10px;font-size:10px;line-height:1.4}
  .sd-material-renderer-guide{padding:9px 10px}
  .sd-material-renderer-guide h5{font-size:14px}
}


/* v4.8.55: Polytec full-sheet reference links + Drawer Set action alignment. */
.sd-material-preview-important .sd-polytec-full-sheet-inline{
  display:inline;
  color:#8f1d18!important;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.sd-material-preview-important .sd-polytec-full-sheet-inline:hover,
.sd-material-preview-important .sd-polytec-full-sheet-inline:focus{
  color:#6f120e!important;
}
.sd-material-renderer-guide .sd-polytec-full-sheet-button{
  display:inline-flex!important;
  width:auto!important;
  min-height:38px;
  align-items:center;
  justify-content:center;
  margin:2px 0 0!important;
  text-decoration:none!important;
}
.sd-drawer-configurator-section [data-drawer-remove]{
  height:44px!important;
  min-height:44px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}

/* v4.8.66: Hinge Options Section Guide. */
.sd-hinge-guide-types{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:10px 0 12px;
}
.sd-hinge-guide-card{
  min-width:0;
  padding:12px;
  border:1px solid var(--border,#ddd);
  border-radius:10px;
  background:#fff;
}
.sd-hinge-guide-card h5{
  margin:8px 0 5px;
  font-size:15px;
  line-height:1.3;
}
.sd-hinge-guide-card p{margin:0!important}
.sd-hinge-guide-image{
  display:block!important;
  position:static!important;
  width:100%!important;
  max-width:500px;
  height:auto!important;
  max-height:none!important;
  margin:0 auto;
  object-fit:contain!important;
  aspect-ratio:auto!important;
  border:1px solid var(--border,#ddd);
  border-radius:8px;
  background:#fff;
  cursor:default!important;
  box-sizing:border-box;
}
.sd-hinge-guide-reference-note{
  margin-top:4px!important;
  color:#666;
  font-size:12px;
}
@media(max-width:620px){
  .sd-hinge-guide-types{grid-template-columns:1fr;gap:10px}
}

/* v4.8.88: Custom Frame Configurator now uses the shared configurator section/grid design. */
.sd-dc .sd-oven-frame-rail-grid{margin-top:17px}
.sd-dc .sd-oven-frame-two-cutout .sd-oven-frame-rail-grid{margin-top:14px}
.sd-dc .sd-oven-frame-opening-results{margin-top:14px}
.sd-dc .sd-oven-frame-opening-list{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:7px}
.sd-dc .sd-oven-frame-opening-list span{display:inline-block}
@media (max-width:620px){.sd-dc .sd-oven-frame-opening-list{display:grid;gap:6px}}


/* v4.8.100: image-level pinch zoom for configurator lightboxes.
   Pinch gestures scale only the viewed image; lightbox controls remain fixed. */
.sd-image-zoom-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:8px;
  background:#fff;
  touch-action:none;
  overscroll-behavior:contain;
}
.sd-image-zoom-stage img{
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}
.sd-image-zoom-stage.is-zoomed{cursor:grab}

.sd-preview-zoom-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-radius:8px;
  touch-action:none;
  overscroll-behavior:contain;
}
.sd-preview-zoom-image{
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}
.sd-preview-zoom-stage.is-zoomed{cursor:grab}

/* v4.8.102: desktop + tablet-landscape navigation in two rows.
   Match the standard section selector buttons for height, padding and font.
   Portrait tablet/mobile renderer navigation remains unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
    overflow:visible!important;
    padding:6px 0 8px!important;
  }

  /* Pattern Layout adds a ninth visible destination, so use five columns
     while retaining exactly two navigation rows. */
  .sd-dc .sd-flow-progress.has-pattern-layout:not(.is-renderer-nav){
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:40px!important;
    height:auto!important;
    padding:8px 12px!important;
    border-radius:8px!important;
    font:inherit!important;
    font-size:inherit!important;
    font-weight:inherit!important;
    line-height:1.2!important;
    letter-spacing:normal!important;
    white-space:normal!important;
    text-align:center!important;
    overflow:visible!important;
  }

  /* Remove the old current-section reverse triangle/pointer. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button::before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button::after,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current::before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current::after,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav) .sd-flow-active-chevron{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
  }
}

/* v4.8.104: refine wide two-row navigation typography.
   Keep Cabinet Type, Product Type, Material / Finish and Custom Frame on one line.
   Use 14px medium-weight text. Portrait tablet/mobile remain unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    font-size:14px!important;
    font-weight:500!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="system"] .sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="product"] .sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="material"] .sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="oven-frame"] .sd-flow-label{
    display:block!important;
    white-space:nowrap!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="system"] .sd-flow-label-split>span,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="product"] .sd-flow-label-split>span,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="material"] .sd-flow-label-split>span,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button[data-flow-jump="oven-frame"] .sd-flow-label-split>span{
    display:inline!important;
  }
}



/* v4.8.105: lock wide navigation to the actual visible-step counts.
   Base flow has 8 visible destinations = 4 + 4.
   Design Options is the only ninth destination = 5 + 4.
   Custom Frame replaces Profiles for Oven Frame and does not add a tenth visible step. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
  }
  .sd-dc .sd-flow-progress.has-pattern-layout:not(.is-renderer-nav){
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
}


/* v4.8.107: dynamic visible-step numbering for the configurator navigation.
   Numbers are inserted by JS only on buttons currently shown, so conditional
   Custom Frame / Design Options steps never leave numbering gaps. */
.sd-dc .sd-flow-progress button.button > .sd-flow-step-number{
  flex:0 0 auto;
  display:inline-block;
  margin-right:4px;
  font:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}
.sd-dc .sd-flow-progress button.button > .sd-flow-label{
  min-width:0;
}


/* v4.8.108: mirror dynamic navigation step numbers into section headings. */
.sd-dc .sd-section-step-number {
  margin-right: 0.3em;
  font: inherit;
}

/* v4.8.112: wider, clearer mobile/portrait renderer navigation.
   Give phone navigation more horizontal room, reduce label size and align
   all navigation content to the left so longer step names stay readable. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus-visible,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:disabled,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-disabled="true"]{
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:10px!important;
    line-height:1.08!important;
    padding:3px 6px!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav .sd-flow-label{
    text-align:left!important;
    white-space:nowrap!important;
  }
}

/* v4.8.114: individual Paint / Hinge / Edge navigation + mobile shortcut row.
   Wide desktop/tablet-landscape navigation supports the maximum visible set
   in exactly two rows. All navigation labels remain on one line. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:8px!important;
    align-items:stretch!important;
    overflow:visible!important;
    padding:6px 0 8px!important;
  }

  .sd-dc .sd-flow-progress.has-pattern-layout:not(.is-renderer-nav){
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:40px!important;
    height:auto!important;
    padding:8px 8px!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    text-align:center!important;
    overflow:visible!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label-split{
    display:block!important;
    min-width:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav) .sd-flow-label-split>span{
    display:inline!important;
  }
}

/* Renderer-nav mode: only numbered setup steps stay in the right-hand column.
   Summary and Items sit in a separate full-width row below both columns. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-nav-main-height:344px;
    --sd-nav-shortcut-height:40px;
    height:calc(var(--sd-nav-main-height) + var(--sd-nav-shortcut-height) + 6px)!important;
    min-height:calc(var(--sd-nav-main-height) + var(--sd-nav-shortcut-height) + 6px)!important;
    max-height:calc(var(--sd-nav-main-height) + var(--sd-nav-shortcut-height) + 6px)!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,var(--sd-nav-main-height)) var(--sd-nav-shortcut-height)!important;
    align-items:stretch!important;
  }

  .sd-preview-visual>h3,
  .sd-preview-visual .sd-preview-canvas-stage,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    grid-row:1!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    grid-template-rows:none!important;
    grid-auto-rows:minmax(0,1fr)!important;
    align-content:stretch!important;
    overflow:hidden!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:hover,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:focus-visible,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:active,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-current,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button.is-complete,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button:disabled,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[aria-disabled="true"]{
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1.05!important;
    padding:2px 5px!important;
    white-space:nowrap!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav .sd-flow-label,
  .sd-preview-visual .sd-flow-progress.is-renderer-nav .sd-flow-label-split{
    display:block!important;
    white-space:nowrap!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
  }

  .sd-preview-visual .sd-flow-progress.is-renderer-nav .sd-flow-label-split>span{
    display:inline!important;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    align-self:stretch!important;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:hover,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus-visible,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:active,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-current,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-complete,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:disabled,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button[aria-disabled="true"]{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    margin:0!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    text-align:center!important;
    background:var(--theme-button-background-initial-color)!important;
    color:var(--theme-button-text-initial-color)!important;
    border:1px solid var(--theme-button-background-initial-color)!important;
    box-shadow:none!important;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:hover,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus-visible,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-current{
    background:var(--theme-button-background-hover-color)!important;
    color:var(--theme-button-text-hover-color)!important;
    border-color:var(--theme-button-background-hover-color)!important;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:disabled,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button[aria-disabled="true"]{
    opacity:.46!important;
    cursor:not-allowed!important;
    pointer-events:none!important;
  }
}

@media (max-width:620px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-nav-main-height:280px;
    --sd-nav-shortcut-height:38px;
  }
}

@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-nav-main-height:376px;
    --sd-nav-shortcut-height:40px;
  }
}


/* v4.8.115: compact mobile Summary / Items shortcut row to match nav button height. */
@media (max-width:620px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-nav-shortcut-height:30px;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:hover,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus-visible,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:active,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-current,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-complete,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:disabled,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button[aria-disabled="true"]{
    padding:2px 5px!important;
    line-height:1.05!important;
  }
}

/* v4.8.120: solid divider beneath navigation to visually separate it from content. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    border-bottom:2px solid var(--border, #d9dde2)!important;
    padding-bottom:12px!important;
    margin-bottom:12px!important;
  }
}

/* v4.8.165: standard typography for wide navigation.
   Restore the normal inherited site font and normal character width while
   retaining the established 14px / 700-weight navigation treatment. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    font-family:inherit!important;
    font-stretch:normal!important;
    font-size:14px!important;
    font-weight:700!important;
  }
}

@media (min-width:951px) and (max-width:1280px) and (orientation:landscape){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[aria-disabled="true"]{
    padding-left:6px!important;
    padding-right:6px!important;
    letter-spacing:0!important;
  }
}


/* v4.8.122: navigation typography weight increased to 700 across wide and mobile navigation controls. */

/* v4.8.124: align dynamic step numbers and navigation labels vertically.
   Older split-label rules used a different line-height from the inserted step
   number, which made the two flex items look vertically offset. Keep both
   items on the button's current line-height and centre their own inline boxes. */
.sd-dc .sd-flow-progress button.button > .sd-flow-step-number,
.sd-dc .sd-flow-progress button.button > .sd-flow-label{
  display:inline-flex!important;
  align-items:center!important;
  align-self:center!important;
  line-height:inherit!important;
}
.sd-dc .sd-flow-progress button.button > .sd-flow-label-split,
.sd-dc .sd-flow-progress button.button > .sd-flow-label-split > span{
  line-height:inherit!important;
}

/* Finish/Colours Section Guide comparison tables */
.sd-finish-guide-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 12px}
.sd-finish-guide-table{width:100%;min-width:780px;border-collapse:collapse;font-size:13px;line-height:1.4}
.sd-finish-guide-table th,.sd-finish-guide-table td{padding:9px 10px;border:1px solid var(--border,#ddd);text-align:left;vertical-align:top}
.sd-finish-guide-table thead th{background:#f4f5f6;font-weight:700;white-space:nowrap}
.sd-finish-guide-table tbody th{background:#fafafa;font-weight:700;white-space:nowrap}
@media(max-width:620px){.sd-finish-guide-table{font-size:12px;min-width:720px}.sd-finish-guide-table th,.sd-finish-guide-table td{padding:8px}}

/* v4.8.145: preserve spaces in split mobile navigation labels.
   The split labels are inline-flex for number alignment, so literal HTML
   whitespace between child spans does not render. Add an explicit gap only
   in renderer-nav mode to display Cabinet Type, Product Type and Custom Frame. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav .sd-flow-label-split{
    column-gap:0.28em!important;
  }
}


/* v4.8.166: connected step-process navigation.
   Numbered configuration destinations are presented as a progress rail rather
   than independent buttons. Summary and Items remain separate action shortcuts. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    column-gap:8px!important;
    row-gap:10px!important;
    align-items:start!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-complete{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:58px!important;
    height:58px!important;
    padding:4px 6px 5px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#111!important;
    box-shadow:none!important;
    text-align:center!important;
    font-family:inherit!important;
    font-stretch:normal!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.08!important;
    letter-spacing:0!important;
    overflow:visible!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:hover{
    background:rgba(0,0,0,.035)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current{
    background:rgba(242,100,34,.08)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:focus-visible{
    outline:2px solid var(--theme-button-background-initial-color,#f26422)!important;
    outline-offset:1px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-step-number{
    position:relative!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    margin:0 0 5px!important;
    padding:0!important;
    border:2px solid #c9ced4!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#5d6268!important;
    box-sizing:border-box!important;
    font-family:inherit!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-complete>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current>.sd-flow-step-number{
    border-color:var(--theme-button-background-initial-color,#f26422)!important;
    background:var(--theme-button-background-initial-color,#f26422)!important;
    color:var(--theme-button-text-initial-color,#fff)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current>.sd-flow-step-number{
    box-shadow:0 0 0 3px rgba(242,100,34,.18)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-label-split{
    position:relative!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    line-height:1.08!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:15px!important;
    left:50%!important;
    right:calc(-50% - 8px)!important;
    width:auto!important;
    height:2px!important;
    border:0!important;
    background:#d9dde2!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-complete::after{
    background:var(--theme-button-background-initial-color,#f26422)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].sd-step-row-end::after{
    content:none!important;
    display:none!important;
  }

  /* Summary / Items intentionally remain recognisable action buttons and are
     not connected to the numbered setup rail. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]{
    align-self:center!important;
    min-height:42px!important;
    height:42px!important;
    padding:8px 10px!important;
    border-radius:8px!important;
    font-family:inherit!important;
    font-stretch:normal!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.1!important;
    letter-spacing:0!important;
  }
}

/* Mobile + portrait tablet: renderer-nav placement remains here.
   All compact navigation visual formatting (rows, fonts, nodes, state colours,
   spacing and connectors) is owned by assets/compact-navigation.css. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-flow-progress.is-renderer-nav{
    gap:0!important;
  }

  /* Keep a small divider gap while making the actual shortcut controls taller. */
  .sd-preview-visual .sd-mobile-flow-shortcuts{
    padding-bottom:4px!important;
  }
}

/* v4.8.166: taller Summary / Items shortcuts in phone and portrait-tablet modes.
   With the 4px divider gap, these yield approximately 36px and 44px button heights. */
@media (max-width:620px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-nav-shortcut-height:40px!important;
  }
}
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    --sd-nav-shortcut-height:48px!important;
  }
}

/* v4.8.167: continuous wide process rail.
   Dedicated connector spans replace button pseudo-elements so legacy navigation
   CSS cannot suppress the Step 1 -> Step 2 connection or row-start continuation.
   Summary and Items join the wide rail as unnumbered terminal nodes. */
.sd-flow-chain-before,
.sd-flow-chain-after,
.sd-flow-action-node{
  display:none;
}

@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    column-gap:8px!important;
    row-gap:10px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][aria-disabled="true"]{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:62px!important;
    height:62px!important;
    padding:4px 6px 5px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#111!important;
    box-shadow:none!important;
    text-align:center!important;
    font-family:inherit!important;
    font-stretch:normal!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.08!important;
    letter-spacing:0!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:hover{
    background:rgba(0,0,0,.035)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current{
    background:rgba(242,100,34,.08)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus-visible{
    outline:2px solid var(--theme-button-background-initial-color,#f26422)!important;
    outline-offset:1px!important;
  }

  /* Disable every historical button connector/pointer. The rail below uses
     real child elements and therefore does not compete with legacy pseudo CSS. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]::before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]::after,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current::before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current::after{
    content:none!important;
    display:none!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"]>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]>.sd-flow-action-node{
    position:relative!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    margin:0 0 5px!important;
    padding:0!important;
    border:2px solid #c9ced4!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#5d6268!important;
    box-sizing:border-box!important;
    font-family:inherit!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-complete>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"].is-complete>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"].is-current>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"].is-complete>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"].is-current>.sd-flow-action-node{
    border-color:var(--theme-button-background-initial-color,#f26422)!important;
    background:var(--theme-button-background-initial-color,#f26422)!important;
    color:var(--theme-button-text-initial-color,#fff)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-action-node{
    box-shadow:0 0 0 3px rgba(242,100,34,.18)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-label-split{
    position:relative!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    white-space:nowrap!important;
    line-height:1.08!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-after{
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:18px!important;
    height:2px!important;
    border:0!important;
    background:#d9dde2!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  /* Each adjacent pair contributes one half of the line. Extending 4px into
     the 8px grid gap makes the two halves meet continuously between nodes. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-before{
    left:-4px!important;
    right:50%!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-after{
    left:50%!important;
    right:-4px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-before-passed>.sd-flow-chain-before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-after-passed>.sd-flow-chain-after{
    background:var(--theme-button-background-initial-color,#f26422)!important;
  }

  /* First row starts at Step 1. Later rows visibly enter from the left edge;
     preceding rows visibly exit to the right edge, making the wrap intentional. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-first>.sd-flow-chain-before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-last>.sd-flow-chain-after{
    display:none!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-row-start:not(.sd-chain-first)>.sd-flow-chain-before{
    left:0!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-row-end:not(.sd-chain-last)>.sd-flow-chain-after{
    right:0!important;
  }
}

/* v4.8.168: portrait-tablet navigation readability + conditional-step hardening.
   Restore fuller Type / Options wording in the template, guarantee hidden
   conditional destinations stay hidden even under stepper display rules, and
   tune only portrait-tablet renderer navigation typography/node size. */
.sd-dc .sd-flow-progress button.button[hidden],
.sd-preview-visual .sd-flow-progress.is-renderer-nav button.button[hidden]{
  display:none!important;
}

/* v4.8.170: wide-layout conditional navigation hardening.
   The wide stepper gives visible destinations display:flex!important; this
   later, equally-specific rule ensures hidden/aria-hidden destinations always
   stay out of desktop and tablet-landscape navigation and therefore out of
   step numbering / connector layout. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][hidden],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][aria-hidden="true"]{
    display:none!important;
  }
}


/* v4.8.173: minimal navigation refinement based directly on v4.8.170.
   - Add a visible lead-in connector before Step 1 on wide layouts.
   - Remove navigation hover zoom/lift while preserving the existing hover
     background colour response. No later node/circle styling is included. */
.sd-dc .sd-flow-progress button.button,
.sd-dc .sd-flow-progress button.button:hover,
.sd-dc .sd-flow-progress button.button:focus,
.sd-dc .sd-flow-progress button.button:active{
  transform:none!important;
}

@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-first>.sd-flow-chain-before{
    display:block!important;
    left:0!important;
    right:50%!important;
  }
}


/* v4.8.174: desktop + tablet-landscape single-row process rail.
   All visible destinations share one horizontal rail. Labels alternate above
   and below the nodes (Step 1 above, Step 2 below, etc.) so full labels can
   remain readable without condensed typography. Mobile/portrait is unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    min-height:68px!important;
    height:68px!important;
    padding:0!important;
    margin-bottom:12px!important;
    overflow:visible!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][aria-disabled="true"]{
    position:relative!important;
    display:block!important;
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    min-height:68px!important;
    height:68px!important;
    padding:0 2px!important;
    margin:0!important;
    border:0!important;
    border-radius:6px!important;
    background:transparent!important;
    color:#111!important;
    box-shadow:none!important;
    text-align:center!important;
    font-family:inherit!important;
    font-stretch:normal!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.05!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    transform:none!important;
  }

  /* Retain the existing hover/current background response, but never move or
     scale the navigation target. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:hover{
    background:rgba(0,0,0,.035)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current{
    background:rgba(242,100,34,.08)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"]>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]>.sd-flow-action-node{
    position:absolute!important;
    z-index:3!important;
    top:50%!important;
    left:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    margin:0!important;
    padding:0!important;
    transform:translate(-50%,-50%)!important;
    border:2px solid #c9ced4!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#5d6268!important;
    box-sizing:border-box!important;
    font-family:inherit!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-complete>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"].is-complete>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"].is-current>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"].is-complete>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"].is-current>.sd-flow-action-node{
    border-color:var(--theme-button-background-initial-color,#f26422)!important;
    background:var(--theme-button-background-initial-color,#f26422)!important;
    color:var(--theme-button-text-initial-color,#fff)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-action-node{
    box-shadow:0 0 0 3px rgba(242,100,34,.18)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-label-split{
    position:absolute!important;
    z-index:4!important;
    left:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0 2px!important;
    transform:translateX(-50%)!important;
    white-space:nowrap!important;
    line-height:1.05!important;
    pointer-events:none!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top>.sd-flow-label-split{
    top:3px!important;
    bottom:auto!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom>.sd-flow-label-split{
    top:auto!important;
    bottom:3px!important;
  }

  /* One continuous centre rail. Each button contributes the half before and
     after its node. Step 1 retains the v4.8.173 lead-in from the left edge. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-after{
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:50%!important;
    height:2px!important;
    transform:translateY(-50%)!important;
    border:0!important;
    background:#d9dde2!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-before{
    left:0!important;
    right:50%!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-after{
    left:50%!important;
    right:0!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-before-passed>.sd-flow-chain-before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-after-passed>.sd-flow-chain-after{
    background:var(--theme-button-background-initial-color,#f26422)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-chain-last>.sd-flow-chain-after{
    display:none!important;
  }
}


/* v4.8.175: force wide navigation onto exactly one physical rail.
   Flex nowrap replaces the v4.8.174 grid so no implicit second row can be
   created by inherited grid rules or a destination-count mismatch. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    display:flex!important;
    flex-flow:row nowrap!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:not([hidden]):not([aria-hidden="true"]){
    flex:1 1 0!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][hidden],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][aria-hidden="true"]{
    display:none!important;
  }
}

/* v4.8.176: refine forced single-row wide navigation alignment and active state.
   - Summary / Items use exactly the same node centreline as numbered steps.
   - Larger 30px nodes and 13px numerals.
   - White node halo creates breathing room between the circle and rail.
   - Current button no longer receives an orange background; only the node is
     emphasised, with a red offset ring.
   - Add a small sticky top offset on wide layouts so the rail does not sit
     directly against the browser chrome when scrolling. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    top:8px!important;
    min-height:72px!important;
    height:72px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]{
    align-self:stretch!important;
    min-height:72px!important;
    height:72px!important;
    padding:0 2px!important;
  }

  /* Keep hover feedback, but the selected destination itself has no filled
     background. Selection is communicated by the node and red offset ring. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current:active{
    background:transparent!important;
  }

  /* Every wide-layout node shares one exact centreline. The white halo masks
     the rail for 3px around the node so the line never appears to touch it. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"]>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]>.sd-flow-action-node{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex:0 0 30px!important;
    margin:0!important;
    padding:0!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    font-size:13px!important;
    line-height:1!important;
    box-shadow:0 0 0 3px #fff!important;
  }

  /* Selected node keeps its existing theme fill, with a red offset ring. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-action-node{
    box-shadow:0 0 0 3px #fff,0 0 0 5px #d32f2f!important;
  }

  /* Rail follows the same centreline after the height adjustment. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-before,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-chain-after{
    top:50%!important;
  }
}

/* v4.8.182: consolidated current responsive navigation rules.
   - Wide sticky rail keeps an opaque 8px top breathing area and the 90px
     single-row navigation rail used for clear label/node separation.
   - Portrait-tablet numbered navigation keeps the larger proportional sizing.
   - Mobile and tablet floating layouts use one canonical 50/50 renderer/nav
     split; Summary / Items typography is defined once in the base floating
     rule above, preventing breakpoint-specific font fallbacks.
   - Sticky top masks remain opaque so scrolling content cannot show through. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    top:0!important;
    min-height:98px!important;
    height:98px!important;
    padding-top:8px!important;
    background:#fff!important;
    box-sizing:border-box!important;
    z-index:20!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]{
    min-height:90px!important;
    height:90px!important;
  }
}

@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    box-shadow:0 -10px 0 0 #fff!important;
  }
}

@media (max-width:620px){
  .sd-preview-visual.has-floating-flow-nav{
    box-shadow:0 -8px 0 0 #fff!important;
  }
}

/* v4.8.184: centre-anchored wide label / active-ring clearance.
   Labels are positioned from the node centreline, not from the rail edges, so
   changing rail height cannot move them toward the active ring. The outer red
   ring is 20px from node centre; labels begin/end 36px from centre, leaving a
   fixed 16px geometric gap to the ring. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    min-height:106px!important;
    height:106px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]{
    min-height:98px!important;
    height:98px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]>.sd-flow-label-split{
    font-size:11px!important;
    line-height:12px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top>.sd-flow-label-split{
    top:auto!important;
    bottom:calc(50% + 36px)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom>.sd-flow-label-split{
    top:calc(50% + 36px)!important;
    bottom:auto!important;
  }
}

/* v4.8.185: tighten centre-anchored wide label / active-ring clearance.
   Keep the v4.8.184 centre-based positioning, but reduce the outer red-ring
   to label-line-box clearance from 16px to 8px. The outer ring is 20px from
   node centre, so labels begin/end 28px from the node centre. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    min-height:90px!important;
    height:90px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]{
    min-height:82px!important;
    height:82px!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top>.sd-flow-label-split{
    top:auto!important;
    bottom:calc(50% + 28px)!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom>.sd-flow-label-split{
    top:calc(50% + 28px)!important;
    bottom:auto!important;
  }
}



/* v4.8.186: keep the wide hover/focus state at the full current row height.
   Older v4.8.174 state selectors had higher specificity and reduced hovered
   buttons to 68px, causing the hover background edge to cross the labels. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:focus-visible,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-complete,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:disabled,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump][aria-disabled="true"]{
    align-self:stretch!important;
    min-height:82px!important;
    height:82px!important;
  }
}

/* v4.8.187: restore balanced white breathing room around the wide nav row.
   v4.8.186 correctly keeps every button state at 82px, but the parent band was
   only 90px tall while carrying 8px top padding, leaving no effective bottom
   buffer. Keep the 82px hover/button row and reserve 8px above and below it. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    min-height:98px!important;
    height:98px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    box-sizing:border-box!important;
    background:#fff!important;
  }
}


/* v4.8.188: floating-mode Back / Next navigation test.
   Mobile and portrait-tablet only: add arrow-only Back and Next controls around
   Summary / Items. All four controls share one 12px treatment and equal-width
   columns, giving each a generous full-column tap target without affecting the
   desktop / tablet-landscape process rail. */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual .sd-mobile-flow-shortcuts{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:hover,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:focus-visible,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:active,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-current,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button.is-complete,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button:disabled,
  .sd-preview-visual .sd-mobile-flow-shortcuts>button.button[aria-disabled="true"]{
    min-width:0!important;
    width:100%!important;
    font-size:12px!important;
    line-height:1!important;
  }

  .sd-preview-visual .sd-mobile-flow-shortcuts>.sd-mobile-flow-back,
  .sd-preview-visual .sd-mobile-flow-shortcuts>.sd-mobile-flow-next{
    cursor:pointer!important;
  }

  /* v4.8.189: CSS-drawn chevrons stay large and consistent across fonts. */
  .sd-preview-visual .sd-mobile-flow-chevron{
    display:block!important;
    width:14px!important;
    height:14px!important;
    box-sizing:border-box!important;
    border-style:solid!important;
    border-color:currentColor!important;
    border-width:0 3px 3px 0!important;
    flex:0 0 14px!important;
  }

  .sd-preview-visual .sd-mobile-flow-chevron-back{
    transform:rotate(135deg)!important;
  }

  .sd-preview-visual .sd-mobile-flow-chevron-next{
    transform:rotate(-45deg)!important;
  }
}


/* v4.8.201: section-style wide navigation container.
   Desktop/tablet-landscape only. Replace the old standalone bottom divider
   with a complete section-style container and strengthen hover contrast
   against the new #F4F5F6 navigation background. Mobile and portrait-tablet
   renderer navigation remains unchanged. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    min-height:102px!important;
    height:102px!important;
    padding:8px!important;
    margin-bottom:18px!important;
    border:2px solid #c8ccce!important;
    border-radius:14px!important;
    background:#F4F5F6!important;
    box-sizing:border-box!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Stronger neutral hover against the light-grey navigation container. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]:not(:disabled):not([aria-disabled="true"]):hover{
    background:#E1E5E8!important;
  }

  /* Match the node/rail mask to the new navigation container instead of the
     previous white sticky band. */
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="summary"]>.sd-flow-action-node,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump="items"]>.sd-flow-action-node{
    box-shadow:0 0 0 3px #F4F5F6!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump].is-current>.sd-flow-action-node{
    box-shadow:0 0 0 3px #F4F5F6,0 0 0 5px #d32f2f!important;
  }
}

/* v4.8.202: match the wide navigation sticky offset to the floating Render View.
   Keep a solid white backing behind the full navigation footprint and the 20px
   sticky top gutter so scrolling sections cannot show through the rounded
   container corners or the space above the navigation. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    top:20px!important;
    isolation:isolate!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:-20px!important;
    bottom:0!important;
    z-index:-1!important;
    display:block!important;
    background:#fff!important;
    pointer-events:none!important;
  }
}


/* v4.8.203: full-height white backing plate for the wide sticky navigation.
   The backing sits behind the complete rounded navigation container, starts at
   the 20px sticky top gutter and continues slightly past the bottom border so
   scrolling sections can never show through around either set of rounded corners. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    overflow:visible!important;
    z-index:100!important;
    isolation:isolate!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)::before{
    content:""!important;
    position:absolute!important;
    left:-2px!important;
    right:-2px!important;
    top:-20px!important;
    bottom:-2px!important;
    z-index:-1!important;
    display:block!important;
    background:#fff!important;
    border-radius:0!important;
    pointer-events:none!important;
  }
}

/* v4.8.204: correct wide-navigation mask stacking.
   Use two explicit layers inside the sticky nav stacking context:
   1) a white rectangular backing plate covering the 20px top gutter and full nav footprint;
   2) the rounded #F4F5F6 navigation section above it.
   Navigation controls remain above both layers. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    background:transparent!important;
    border-color:transparent!important;
    overflow:visible!important;
    z-index:100!important;
    isolation:isolate!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)::before{
    content:""!important;
    position:absolute!important;
    left:-2px!important;
    right:-2px!important;
    top:-20px!important;
    bottom:-2px!important;
    z-index:0!important;
    display:block!important;
    background:#fff!important;
    border-radius:0!important;
    pointer-events:none!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    display:block!important;
    box-sizing:border-box!important;
    background:#F4F5F6!important;
    border:2px solid #c8ccce!important;
    border-radius:14px!important;
    pointer-events:none!important;
  }

  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]{
    position:relative!important;
    z-index:2!important;
  }
}


/* v4.8.205: robust wide-navigation masking shell.
   The white sticky shell is the backing/mask. The actual navigation remains a
   normal rounded #F4F5F6 section above it, so no pseudo-element can cover the
   rail, nodes or labels. */
.sd-flow-progress-shell{
  display:contents;
}

@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress-shell{
    display:block!important;
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    width:100%!important;
    padding-top:20px!important;
    margin:0 0 18px!important;
    background:#fff!important;
    box-sizing:border-box!important;
    isolation:isolate!important;
  }

  .sd-dc .sd-flow-progress-shell>.sd-flow-progress:not(.is-renderer-nav){
    position:relative!important;
    top:auto!important;
    z-index:1!important;
    min-height:102px!important;
    height:102px!important;
    margin:0!important;
    padding:8px!important;
    background:#F4F5F6!important;
    border:2px solid #c8ccce!important;
    border-radius:14px!important;
    overflow:visible!important;
    isolation:auto!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Retire the old same-element masking layers. */
  .sd-dc .sd-flow-progress-shell>.sd-flow-progress:not(.is-renderer-nav)::before,
  .sd-dc .sd-flow-progress-shell>.sd-flow-progress:not(.is-renderer-nav)::after{
    content:none!important;
    display:none!important;
  }

  /* Navigation content sits naturally above the section background. */
  .sd-dc .sd-flow-progress-shell>.sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-jump]{
    position:relative!important;
    z-index:2!important;
  }
}

@media (max-width:950px), (orientation:portrait) and (max-width:1100px){
  .sd-dc .sd-flow-progress-shell{
    display:contents!important;
  }
}


/* v4.8.208: align the wide navigation section with Render View in both
   normal page flow and sticky mode.
   Previously the sticky shell used top:0 plus 20px of real padding. That
   padding pushed the navigation 20px lower before sticky positioning engaged,
   while Render View's top:20px only affected its sticky position. Keep the
   same 20px sticky clearance without changing normal-flow geometry: the shell
   now sticks at top:20px with no layout padding, and a non-layout white mask
   extends 20px above it to block scrolling content behind the rounded corners. */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress-shell{
    top:20px!important;
    padding-top:0!important;
    background:#fff!important;
    overflow:visible!important;
  }

  .sd-dc .sd-flow-progress-shell::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:-20px!important;
    height:20px!important;
    display:block!important;
    background:#fff!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  .sd-dc .sd-flow-progress-shell>.sd-flow-progress:not(.is-renderer-nav){
    position:relative!important;
    z-index:1!important;
  }
}


/* ==========================================================
 * v4.8.210 Summary Table Edge / Hinges / Notes wrapping
 * - Allow long Edge, Hinges and Notes values to wrap instead of
 *   forcing the production summary wider than its container.
 * - Notes no longer keeps the older 280px desktop minimum width.
 * - All other summary columns retain their existing behaviour.
 * ========================================================== */
.sd-production-summary .sd-production-table td[data-label="Edge"],
.sd-production-summary .sd-production-table td[data-label="Hinges"]{
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
  min-width:0!important;
  max-width:180px;
}

.sd-production-summary .sd-production-table td[data-label="Notes"]{
  width:auto!important;
  min-width:0!important;
  max-width:220px;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* ==========================================================
 * v4.8.211 Chrome Summary Table overflow containment
 * - Preserve v4.8.210 automatic column distribution.
 * - Prevent a wide table's intrinsic size from widening the
 *   Production Summary container in Chromium.
 * - Keep excess width inside the existing horizontal scroll wrapper.
 * ========================================================== */
.sd-cart-summary-container,
.sd-production-summary,
.sd-production-group{
  min-width:0;
  max-width:100%;
}

.sd-production-table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  contain:inline-size;
}


/* ==========================================================
 * v4.8.214 Consolidated Extras & Accessories summary
 * - Main Production Summary no longer carries Extras/Accessories columns.
 * - One cart-wide table below the production groups shows aggregated items.
 * ========================================================== */
.sd-extras-accessories-summary{
  margin-top:22px;
}
.sd-extras-accessories-summary>h3{
  margin:0 0 10px;
}
.sd-extras-accessories-table td[data-label="Category"],
.sd-extras-accessories-table td[data-label="Item"]{
  white-space:normal!important;
  overflow-wrap:anywhere;
}
.sd-extras-accessories-table td[data-label="Qty"],
.sd-extras-accessories-table td[data-label="Unit Price"],
.sd-extras-accessories-table td[data-label="Total"]{
  white-space:nowrap;
}
.sd-extras-accessories-table tfoot th{
  font-weight:700;
}
.sd-extras-accessories-table tfoot th:first-child{
  text-align:right;
}
@media (max-width:760px){
  .sd-extras-accessories-table tfoot th:first-child{
    text-align:left;
  }
}


/* ==========================================================
 * v4.8.217 Stable cart sync; retains v4.8.216 minimum-order note below Items Added to Cart
 * ========================================================== */
.sd-minimum-order-note{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:4px;
  background:#f7f8f9;
  font-size:13px;
  line-height:1.45;
}
.sd-minimum-order-note strong{
  font-weight:700;
}


/* ==========================================================
 * v4.8.219 Summary Line Total + mutation screen lock
 * - Line Total sits after Unit Price and stays compact.
 * - Existing full-screen processing overlay is reused for Add,
 *   Update, Duplicate and Delete operations.
 * ========================================================== */
.sd-production-summary .sd-production-table td[data-label="Line Total"]{
  white-space:nowrap!important;
}


/* ==========================================================
   RENDER VIEW MODE TOGGLE — shared 2D / 3D preview
   ========================================================== */
.sd-render-view-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sd-render-view-heading h3{margin:0}
.sd-render-mode-toggle{display:inline-flex;border:1px solid #d7d7d7;border-radius:7px;overflow:hidden;background:#fff}
.sd-render-mode-toggle button{appearance:none;border:0;border-right:1px solid #d7d7d7;background:#fff;padding:7px 14px;font:inherit;font-weight:700;cursor:pointer}
.sd-render-mode-toggle button:last-child{border-right:0}
.sd-render-mode-toggle button.is-active{background:#222;color:#fff}
.sd-render-mode-toggle button:disabled{opacity:.45;cursor:not-allowed}
.sd-render-pane[hidden]{display:none!important}
.sd-render-pane-3d{width:100%;min-width:0}
.sd-render-pane-3d .sd3d-designer{margin:0!important}
.sd-render-pane-3d .sd3d-canvas-wrap{width:100%!important}
@media(max-width:768px){.sd-render-view-heading{align-items:flex-start}.sd-render-mode-toggle button{padding:6px 12px}}

/* ==========================================================
   v4.8.225 — Embedded 3D preview isolation / centering
   - Prevent the generic 2D canvas rules from constraining WebGL.
   - Remove residual 2D/standalone spacing around the 3D pane.
   ========================================================== */
.sd-render-pane-3d{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.sd-render-pane-3d .sd3d-designer,
.sd-render-pane-3d .sd3d-layout,
.sd-render-pane-3d .sd3d-viewer-panel,
.sd-render-pane-3d .sd3d-canvas-wrap{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.sd-render-pane-3d .sd3d-viewer-toolbar{display:none!important;}
.sd-render-pane-3d .sd3d-viewer-panel{position:relative!important;top:auto!important;}
.sd-preview-wrap .sd-render-pane-3d canvas,
.sd-preview-visual .sd-render-pane-3d canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  object-fit:fill!important;
}

/* ==========================================================
   v4.8.226 — Restore mobile / tablet-portrait floating renderer grid
   after introduction of the 2D / 3D render pane wrappers.
   - Keep the established 50 / 50 renderer + navigation split.
   - Keep the existing phone / portrait-tablet main heights.
   - Treat the render heading and active pane as one renderer-column stack.
   - Prevent embedded 3D from changing the floating pane geometry.
   ========================================================== */
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-preview-visual.has-floating-flow-nav{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:stretch!important;
    position:relative!important;
    z-index:5!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 2px!important;
    box-sizing:border-box!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading h3{
    margin:0!important;
    font-size:13px!important;
    line-height:24px!important;
    white-space:nowrap!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading .sd-render-mode-toggle{
    flex:0 0 auto!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading .sd-render-mode-toggle button{
    min-height:24px!important;
    height:24px!important;
    padding:2px 9px!important;
    font-size:10px!important;
    line-height:1!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane{
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:0!important;
    padding:28px 0 0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* v4.8.227: preserve the 500 x 700 drawing-buffer proportions on compact
     floating layouts. Do not force both CSS dimensions to 100%, because once
     the sticky pane settles that stretches the bitmap independently of the
     renderer's intrinsic coordinate system. */
  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage canvas{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:100%!important;
    aspect-ratio:5 / 7!important;
    margin:auto!important;
    object-fit:contain!important;
    flex:0 1 auto!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane-3d,
  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane-3d .sd3d-designer,
  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane-3d .sd3d-layout,
  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane-3d .sd3d-viewer-panel,
  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane-3d .sd3d-canvas-wrap{
    min-height:0!important;
    max-height:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-render-pane-3d .sd3d-canvas-wrap canvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }

  /* Preserve the established right-hand navigation position and lower shortcut row. */
  .sd-preview-visual.has-floating-flow-nav > .sd-flow-progress.is-renderer-nav{
    grid-column:2!important;
    grid-row:1!important;
  }

  .sd-preview-visual.has-floating-flow-nav > .sd-mobile-flow-shortcuts{
    grid-column:1 / -1!important;
    grid-row:2!important;
  }
}

@media (max-width:620px){
  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading{
    padding:0 1px!important;
  }
  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading h3{
    font-size:12px!important;
  }
  .sd-preview-visual.has-floating-flow-nav > .sd-render-view-heading .sd-render-mode-toggle button{
    padding:2px 7px!important;
    font-size:9px!important;
  }
}


/* ==========================================================
   v4.8.241 — 3D Preview Lightbox
   Moves the existing live 3D renderer into a fixed full-screen
   lightbox. No second Three.js scene/WebGL context is created.
   ========================================================== */
.sd-render-pane-3d{position:relative!important;}
.sd-preview-3d-modal-button{
  position:absolute;right:10px;bottom:10px;z-index:30;
  width:36px;height:36px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.18);border-radius:6px;
  background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.12);
  color:#222;font-size:20px;line-height:1;cursor:pointer;
}
.sd-preview-3d-modal-button:hover,.sd-preview-3d-modal-button:focus{border-color:#f19429;background:#fff;outline:none;}
.sd-preview-3d-modal-button .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.sd-3d-preview-lightbox{
  display:none;position:fixed;inset:0;z-index:999999;
  width:100vw;height:100dvh;box-sizing:border-box;
  align-items:stretch;justify-content:stretch;
}
.sd-3d-preview-lightbox.is-open{display:flex;}
.sd-3d-preview-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);}
.sd-3d-preview-lightbox-panel{
  position:relative;z-index:1;flex:1 1 auto;
  margin:16px;min-width:0;min-height:0;padding:48px 12px 12px;
  display:flex;align-items:stretch;justify-content:stretch;
  box-sizing:border-box;
}
.sd-3d-preview-lightbox-stage{
  position:relative;flex:1 1 auto;min-width:0;min-height:0;
  background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 12px 44px rgba(0,0,0,.42);
}
.sd-3d-preview-lightbox-stage>.sd-render-pane-3d{display:block!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
.sd-3d-preview-lightbox-stage .sd3d-designer,
.sd-3d-preview-lightbox-stage .sd3d-layout,
.sd-3d-preview-lightbox-stage .sd3d-viewer-panel,
.sd-3d-preview-lightbox-stage .sd3d-canvas-wrap{width:100%!important;max-width:none!important;min-width:0!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;}
.sd-3d-preview-lightbox-stage .sd3d-viewer-toolbar{display:none!important;}
.sd-3d-preview-lightbox-stage canvas{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;}
.sd-3d-preview-lightbox-stage .sd-preview-3d-modal-button{display:none!important;}
.sd-3d-preview-lightbox-close{
  position:absolute;top:6px;right:8px;z-index:5;
  width:36px;height:36px;border:0;border-radius:50%;
  background:#fff;color:#222;font-size:26px;line-height:1;cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,.2);
}
body.sd-3d-preview-lightbox-open{overflow:hidden!important;}
@media(max-width:768px){
  .sd-3d-preview-lightbox-panel{margin:6px;padding:44px 4px 4px;}
  .sd-3d-preview-lightbox-stage{border-radius:6px;}
}

/* ==========================================================
   v4.8.239 — Embedded 3D help position
   - Move the ? help control to bottom-left so it no longer
     overlaps the fullscreen 3D preview button at bottom-right.
   - On compact layouts, nudge Reset right to clear the help.
   ========================================================== */
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help{
  left:8px!important;
  right:auto!important;
  bottom:8px!important;
}
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help-popover{
  left:0!important;
  right:auto!important;
}
@media (max-width:950px), (orientation:portrait) and (min-width:951px) and (max-width:1100px){
  .sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-view-overlay-left{
    left:44px!important;
    right:auto!important;
    bottom:8px!important;
  }
}

/* v4.8.242 — Mobile embedded 3D controls
   Reset moves to the top-right. Help stays bottom-left and
   the 3D lightbox/fullscreen button stays bottom-right. */
@media (max-width:768px){
  .sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-view-overlay-left{
    top:8px!important;
    right:8px!important;
    bottom:auto!important;
    left:auto!important;
  }
}

/* ==========================================================
   v4.8.250 — Compact 3D Render / Technical toggle
   - Icon-only overlay so it does not consume preview layout space.
   - Centred at the bottom of the live 3D pane.
   - The same live pane moves into the lightbox, so the control follows it.
   ========================================================== */
.sd-preview-3d-display-icon-button{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  z-index:31!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.92)!important;
  color:#222!important;
  box-shadow:0 1px 4px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(4px);
  cursor:pointer!important;
}
.sd-preview-3d-display-icon-button:hover,
.sd-preview-3d-display-icon-button:focus{
  border-color:#f19429!important;
  background:#fff!important;
  outline:none!important;
}
.sd-preview-3d-display-icon-button:focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:2px!important;
}
.sd-preview-3d-mode-icon{
  width:21px!important;
  height:21px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
}
.sd-preview-3d-mode-icon[hidden]{display:none!important;}
.sd-preview-3d-mode-icon svg{
  display:block!important;
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.sd-preview-3d-mode-icon-render svg path:first-child{
  fill:currentColor!important;
  fill-opacity:.16!important;
}
.sd-preview-3d-display-icon-button .screen-reader-text{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
@media(max-width:768px){
  .sd-preview-3d-display-icon-button{
    bottom:8px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
}

/* ==========================================================
   v4.8.251 — Align embedded 3D bottom controls
   - Help/tooltip uses the same rounded-square container as
     Render/Technical and lightbox controls.
   - All three controls share one bottom baseline.
   ========================================================== */
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help{
  left:10px!important;
  right:auto!important;
  bottom:10px!important;
  margin:0!important;
  z-index:31!important;
}
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help > summary{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.92)!important;
  color:#222!important;
  font:700 16px/1 Arial,sans-serif!important;
  box-shadow:0 1px 4px rgba(0,0,0,.12)!important;
  cursor:pointer!important;
}
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help > summary:hover,
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help > summary:focus{
  border-color:#f19429!important;
  background:#fff!important;
  outline:none!important;
}
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help > summary:focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:2px!important;
}
.sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help-popover{
  left:0!important;
  right:auto!important;
  bottom:42px!important;
}

/* Keep all three bottom controls on the same baseline. */
.sd-render-pane-3d .sd-preview-3d-display-icon-button,
.sd-render-pane-3d .sd-preview-3d-modal-button{
  bottom:10px!important;
}

@media(max-width:768px){
  .sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help{
    left:8px!important;
    bottom:8px!important;
  }
  .sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help > summary,
  .sd-render-pane-3d .sd-preview-3d-display-icon-button,
  .sd-render-pane-3d .sd-preview-3d-modal-button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  .sd-render-pane-3d .sd-preview-3d-display-icon-button,
  .sd-render-pane-3d .sd-preview-3d-modal-button{
    bottom:8px!important;
  }
  .sd-render-pane-3d .sd-preview-3d-modal-button{
    right:8px!important;
  }
  .sd-render-pane-3d .sd3d-designer.sd3d-embed .sd3d-embed-help-popover{
    bottom:40px!important;
  }
}

/* ==========================================================
   v4.8.269 — Embedded 3D height parity with 2D preview
   The live 3D pane uses the actual measured 2D stage height so
   preview switching does not push price / Add to Cart down-page.
   Lightbox is unaffected because it is moved outside this shell.
   ========================================================== */
.sd-preview-wrap .sd-render-pane-3d,
.sd-preview-visual .sd-render-pane-3d{
  height:var(--sd-embedded-3d-height,auto)!important;
  min-height:0!important;
  max-height:var(--sd-embedded-3d-height,none)!important;
  overflow:hidden!important;
}
.sd-preview-wrap .sd-render-pane-3d .sd3d-designer,
.sd-preview-wrap .sd-render-pane-3d .sd3d-layout,
.sd-preview-wrap .sd-render-pane-3d .sd3d-viewer-panel,
.sd-preview-wrap .sd-render-pane-3d .sd3d-canvas-wrap,
.sd-preview-visual .sd-render-pane-3d .sd3d-designer,
.sd-preview-visual .sd-render-pane-3d .sd3d-layout,
.sd-preview-visual .sd-render-pane-3d .sd3d-viewer-panel,
.sd-preview-visual .sd-render-pane-3d .sd3d-canvas-wrap{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}


/* v4.8.303 — CB 2D fullscreen now mirrors the WD live-preview lightbox. */
.sd-preview-zoom-lightbox{
  display:none;
  position:fixed;
  inset:0;
  width:auto;
  height:auto;
  z-index:1000000;
  padding:18px;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.sd-preview-zoom-lightbox.is-open{display:flex;}
.sd-preview-zoom-backdrop{position:absolute;inset:0;background:rgba(10,18,30,.82);}
.sd-preview-zoom-dialog{
  position:relative;
  inset:auto;
  z-index:1;
  width:min(1500px,96vw);
  height:min(94vh,1050px);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.35);
}
.sd-preview-zoom-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border-bottom:1px solid #d9dee7;
  background:#fff;
}
.sd-preview-zoom-head h3{margin:0;font-size:16px;line-height:1.3;}
.sd-preview-zoom-close{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  border:1px solid #cfd6df;
  border-radius:9px;
  background:#fff;
  color:#172033;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
.sd-preview-zoom-close:hover,.sd-preview-zoom-close:focus{border-color:#f19429;outline:none;}
.sd-preview-zoom-close:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.sd-preview-zoom-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(#f5f7fa,#eef2f6);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sd-preview-zoom-stage>[data-render-pane="2d"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}
.sd-preview-zoom-stage .sd-preview-canvas-stage{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sd-preview-zoom-stage .sd-preview-canvas-stage canvas,
.sd-preview-zoom-stage .sd-dc.is-design-panel .sd-preview-canvas-stage canvas{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
.sd-preview-zoom-stage .sd-preview-zoom-button{display:none!important;}
body.sd-preview-zoom-open{overflow:hidden!important;}
@media(max-width:720px){
  .sd-preview-zoom-lightbox{padding:6px;}
  .sd-preview-zoom-dialog{width:100%;height:96vh;border-radius:10px;}
  .sd-preview-zoom-head{padding:6px 8px;}
}


/* ==========================================================
   v4.8.304 — CB desktop navigation state treatment matches WD.
   Preserve CB rail geometry/alternating labels; copy WD state shading,
   circle backgrounds and selected/unselected emphasis.
   ========================================================== */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    padding:8px!important;
    border:2px solid #c8ccce!important;
    border-radius:14px!important;
    background:#F4F5F6!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step],
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:active{
    background:transparent!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:hover{
    background:#E1E5E8!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current{
    background:rgba(242,100,34,.08)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-step-number{
    border:2px solid #c9ced4!important;
    background:#fff!important;
    color:#5d6268!important;
    box-shadow:0 0 0 3px #F4F5F6!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-complete>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current>.sd-flow-step-number{
    border-color:var(--theme-button-background-initial-color,#f26422)!important;
    background:var(--theme-button-background-initial-color,#f26422)!important;
    color:var(--theme-button-text-initial-color,#fff)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step].is-current>.sd-flow-step-number{
    box-shadow:0 0 0 3px #F4F5F6,0 0 0 5px var(--theme-button-background-initial-color,#f26422)!important;
  }
}

/* v4.8.304 — CB 2D fullscreen without detaching the live pane from the CB root. */
.sd-preview-zoom-stage{pointer-events:none!important;}
.sd-cb-2d-fullscreen-live{
  position:fixed!important;
  inset:62px 24px 24px!important;
  z-index:1000002!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:linear-gradient(#f5f7fa,#eef2f6)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.35)!important;
}
.sd-cb-2d-fullscreen-live .sd-preview-canvas-stage{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sd-cb-2d-fullscreen-live .sd-preview-canvas-stage canvas,
.sd-cb-2d-fullscreen-live .sd-dc.is-design-panel .sd-preview-canvas-stage canvas{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
.sd-cb-2d-fullscreen-live .sd-preview-zoom-button{display:none!important;}
@media(max-width:720px){
  .sd-cb-2d-fullscreen-live{inset:52px 6px 6px!important;border-radius:10px!important;}
}
/* Keep the fullscreen close control above the live fixed 2D pane. */
#sd-preview-zoom-lightbox.is-open .sd-preview-zoom-close{
  position:fixed!important;
  top:18px!important;
  right:18px!important;
  z-index:1000004!important;
}
@media(max-width:720px){
  #sd-preview-zoom-lightbox.is-open .sd-preview-zoom-close{top:8px!important;right:8px!important;}
}

/* ==========================================================
   v4.8.305 — Flatten CB 2D preview to match WD presentation.
   Remove the extra white framed canvas container while keeping
   the Render View header, sizing and fullscreen behaviour intact.
   ========================================================== */
.sd-dc .sd-render-pane[data-render-pane="2d"],
.sd-dc .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.sd-dc .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage canvas{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}


/* v4.8.306 — Reliable CB 2D fullscreen uses a dedicated fullscreen canvas copy. */
.sd-preview-zoom-stage{pointer-events:auto!important;}
.sd-preview-zoom-stage .sd-preview-zoom-canvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:auto!important;
}
.sd-cb-2d-fullscreen-live{position:static!important;inset:auto!important;width:auto!important;height:auto!important;box-shadow:none!important;}


/* v4.8.307 — CB 2D fullscreen now uses the same live-pane lightbox pattern as WD. */
.sd-preview-zoom-stage{pointer-events:auto!important;}
.sd-preview-zoom-stage>[data-render-pane="2d"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
.sd-preview-zoom-stage>[data-render-pane="2d"] .sd-preview-canvas-stage{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}
.sd-preview-zoom-stage>[data-render-pane="2d"] canvas{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0 auto!important;
}

/* ==========================================================
   v4.8.309 — Dedicated CB 2D fullscreen lightbox.
   Unique names avoid all legacy sd-preview-zoom handler/style conflicts.
   ========================================================== */
.sd-cb-2d-lightbox[hidden]{display:none!important;}
.sd-cb-2d-lightbox{position:fixed;inset:0;z-index:1000000;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;}
.sd-cb-2d-lightbox-backdrop{position:absolute;inset:0;background:rgba(10,18,30,.82);}
.sd-cb-2d-lightbox-panel{position:relative;z-index:1;width:min(1500px,96vw);height:min(94vh,1050px);display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 22px 70px rgba(0,0,0,.35);}
.sd-cb-2d-lightbox-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid #d9dee7;background:#fff;}
.sd-cb-2d-lightbox-head h3{margin:0;font-size:16px;line-height:1.3;}
.sd-cb-2d-lightbox-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:0;border:1px solid #cfd6df;border-radius:9px;background:#fff;color:#172033;font-size:25px;line-height:1;cursor:pointer;}
.sd-cb-2d-lightbox-close:hover,.sd-cb-2d-lightbox-close:focus{border-color:#f19429;outline:none;}
.sd-cb-2d-lightbox-close:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.sd-cb-2d-lightbox-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:linear-gradient(#f5f7fa,#eef2f6);}
.sd-cb-2d-lightbox-stage>[data-render-pane="2d"]{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;}
.sd-cb-2d-lightbox-stage>[data-render-pane="2d"] .sd-preview-canvas-stage{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.sd-cb-2d-lightbox-stage>[data-render-pane="2d"] canvas{display:block!important;width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:0 auto!important;}
.sd-cb-2d-lightbox-stage .sd-preview-zoom-button{display:none!important;}
body.sd-cb-2d-lightbox-open{overflow:hidden!important;}
@media(max-width:720px){.sd-cb-2d-lightbox{padding:6px}.sd-cb-2d-lightbox-panel{width:100%;height:96vh;border-radius:10px}.sd-cb-2d-lightbox-head{padding:6px 8px}}

/* ==========================================================
   v4.8.322 — CB desktop navigation copies WD desktop rail formatting.
   Exact WD wide-nav geometry/progression: 104px rail, 84px steps,
   26px nodes, 11px labels, white future nodes, orange passed/current
   nodes, orange travelled rail, and active-only emphasis ring.
   Compact/mobile CB navigation is intentionally untouched.
   ========================================================== */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-flow-progress:not(.is-renderer-nav){
    position:relative!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    grid-template-columns:none!important;
    grid-auto-flow:initial!important;
    width:100%!important;
    min-height:104px!important;
    height:104px!important;
    margin:0!important;
    padding:10px 8px!important;
    gap:0!important;
    overflow:visible!important;
    border:2px solid #c8ccce!important;
    border-radius:14px!important;
    background:#F4F5F6!important;
    box-sizing:border-box!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]),
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]):hover,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]):focus,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]):active,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).is-current,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).is-complete{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    flex:1 1 0!important;
    flex-basis:0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:84px!important;
    height:84px!important;
    margin:0!important;
    padding:0 2px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#111!important;
    box-shadow:none!important;
    overflow:visible!important;
    text-align:center!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.08!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]):hover{
    background:#E1E5E8!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).is-current{
    background:rgba(242,100,34,.08)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden])>.sd-flow-step-number{
    position:absolute!important;
    z-index:3!important;
    top:50%!important;
    left:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    margin:0!important;
    padding:0!important;
    transform:translate(-50%,-50%)!important;
    border:2px solid #c9ced4!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#5d6268!important;
    box-shadow:0 0 0 3px #F4F5F6!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).sd-chain-after-passed>.sd-flow-step-number,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).is-current>.sd-flow-step-number{
    border-color:var(--theme-button-background-initial-color,#f26422)!important;
    background:var(--theme-button-background-initial-color,#f26422)!important;
    color:var(--theme-button-text-initial-color,#fff)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).is-current>.sd-flow-step-number{
    box-shadow:0 0 0 3px #F4F5F6,0 0 0 5px var(--theme-button-background-initial-color,#f26422)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden])>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden])>.sd-flow-label-split{
    position:absolute!important;
    z-index:4!important;
    left:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0 2px!important;
    transform:translateX(-50%)!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    color:#111!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:13px!important;
    pointer-events:none!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top[data-flow-step]:not([hidden])>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-top[data-flow-step]:not([hidden])>.sd-flow-label-split{
    top:auto!important;
    bottom:calc(50% + 28px)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom[data-flow-step]:not([hidden])>.sd-flow-label,
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button.sd-flow-label-bottom[data-flow-step]:not([hidden])>.sd-flow-label-split{
    top:calc(50% + 28px)!important;
    bottom:auto!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden])::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:50%!important;
    left:50%!important;
    right:-50%!important;
    width:auto!important;
    height:2px!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    border:0!important;
    background:#d9dde2!important;
    pointer-events:none!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]).sd-chain-after-passed::after{
    background:var(--theme-button-background-initial-color,#f26422)!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]:not([hidden]):last-of-type::after{
    display:none!important;
  }
  .sd-dc .sd-flow-progress:not(.is-renderer-nav)>button.button[data-flow-step]>.sd-flow-active-chevron{
    display:none!important;
  }
}


/* v4.8.322 — CB desktop visual progression now follows actual navigation progress.
   Use sd-chain-after-passed rather than field-validity is-complete, so future valid
   steps stay white/grey and the rail after the active step remains grey. */

/* ==========================================================
   v4.8.338 — Custom Builder Render View adopts Wardrobe Builder card layout
   - Wide CB Render View now uses WD's flush card/header/stage presentation.
   - Desktop stage is 540px; landscape tablets through 1366px retain the
     shared min(45vh, 500px) cap used by WD.
   - CB quantity, pricing, validation, lightboxes and compact mobile / portrait
     navigation behaviour remain functionally unchanged.
   ========================================================== */
@media (min-width:951px) and (orientation:landscape), (min-width:1101px){
  .sd-dc .sd-preview-wrap{
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid #d7d3cc!important;
    border-radius:14px!important;
    text-align:left!important;
  }

  .sd-dc .sd-preview-visual{
    padding:0!important;
    margin:0!important;
    background:#fff!important;
    border:0!important;
    border-radius:0!important;
    text-align:center!important;
  }

  .sd-dc .sd-render-view-heading{
    min-height:52px!important;
    margin:0!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    border-bottom:1px solid #dfe4ea!important;
    background:#fff!important;
  }

  .sd-dc .sd-render-view-heading h3{
    margin:0!important;
    padding:0!important;
    font-size:20px!important;
    line-height:1.2!important;
  }

  .sd-dc .sd-render-mode-toggle{
    display:inline-flex!important;
    border:1px solid #d7d7d7!important;
    border-radius:7px!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  .sd-dc .sd-render-mode-toggle button{
    appearance:none!important;
    border:0!important;
    border-right:1px solid #d7d7d7!important;
    background:#fff!important;
    padding:7px 14px!important;
    font:inherit!important;
    font-weight:700!important;
    line-height:1.2!important;
    cursor:pointer!important;
  }

  .sd-dc .sd-render-mode-toggle button:last-child{border-right:0!important;}
  .sd-dc .sd-render-mode-toggle button.is-active{background:#222!important;color:#fff!important;}

  .sd-dc .sd-render-pane{
    position:relative!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:linear-gradient(#f5f7fa,#eef2f6)!important;
  }

  .sd-dc .sd-render-pane[data-render-pane="2d"]{
    height:540px!important;
    min-height:540px!important;
    max-height:540px!important;
  }

  .sd-dc .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .sd-dc .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage canvas{
    display:block!important;
    width:auto!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:auto!important;
    object-fit:contain!important;
  }

  .sd-dc.is-design-panel .sd-render-pane[data-render-pane="2d"] .sd-preview-canvas-stage canvas{
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:100%!important;
  }

  .sd-dc .sd-render-pane-3d,
  .sd-dc .sd-render-pane-3d .sd3d-designer,
  .sd-dc .sd-render-pane-3d .sd3d-layout,
  .sd-dc .sd-render-pane-3d .sd3d-viewer-panel,
  .sd-dc .sd-render-pane-3d .sd3d-canvas-wrap{
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
  }

  .sd-dc .sd-polytec-rotation-note,
  .sd-dc .sd-hinge-validation{
    margin-left:12px!important;
    margin-right:12px!important;
  }

  .sd-dc .sd-live-summary{
    margin:0!important;
    padding:10px 12px!important;
    border-radius:0!important;
    border-top:1px solid #dfe4ea!important;
    background:#fff!important;
    color:#697386!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  .sd-dc .sd-live-summary strong{color:#3e4856!important;}

  .sd-dc .sd-preview-price-panel{
    margin:0!important;
    padding:11px 12px 12px!important;
    border:0!important;
    border-top:1px solid #dfe4ea!important;
    background:#fff!important;
    border-radius:0!important;
    text-align:left!important;
  }
}

/* Match WD's shared landscape-tablet viewport height through 1366px. */
@media (min-width:951px) and (max-width:1366px) and (orientation:landscape){
  .sd-dc .sd-render-pane[data-render-pane="2d"]{
    height:min(45vh,500px)!important;
    min-height:min(45vh,500px)!important;
    max-height:min(45vh,500px)!important;
  }
}


/* ==========================================================
   v4.8.339 — CB/WD embedded 3D square-edge parity + CB theme toggle
   - Remove residual inner 3D renderer rounding so the embedded renderer
     sits flush with the square live preview stage in both builders.
   - Make the Custom Builder active 2D/3D mode button use the site's
     theme button colours, matching Wardrobe Builder theme treatment.
   ========================================================== */
.sd-dc .sd-render-mode-toggle button.is-active{
  background:var(--theme-button-background-initial-color,#f26422)!important;
  color:var(--theme-button-text-initial-color,#fff)!important;
  border-color:var(--theme-button-background-initial-color,#f26422)!important;
}
.sd-dc .sd-render-mode-toggle button.is-active:hover,
.sd-dc .sd-render-mode-toggle button.is-active:focus{
  background:var(--theme-button-background-hover-color,var(--theme-button-background-initial-color,#f26422))!important;
  color:var(--theme-button-text-hover-color,var(--theme-button-text-initial-color,#fff))!important;
}

.sd-dc .sd-render-pane-3d > [data-sd3d-root],
.sd-dc .sd-render-pane-3d .sd3d-designer,
.sd-dc .sd-render-pane-3d .sd3d-layout,
.sd-dc .sd-render-pane-3d .sd3d-viewer-panel,
.sd-dc .sd-render-pane-3d .sd3d-canvas-wrap,
.sd-dc .sd-render-pane-3d canvas{
  border-radius:0!important;
}