.sd-dc{--border:#ddd8cf;--soft:#f7f5f1;--text:#242424;max-width:1320px;margin:auto;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;
    }
}
.sd-dc *{box-sizing:border-box}.sd-dc-form{width:880px;max-width:100%}.sd-dc-layout{display:grid;grid-template-columns:minmax(0,880px) 390px;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;
    inset:0;
    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:92vh;
    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(92vh - 82px);
    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(92vh - 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}
    .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(76vh,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;
  inset:0;
  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:4vh 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}
@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;
}

.sd-preview-hover-note{
  position:absolute;
  left:12px;
  right:12px;
  top:46px;
  z-index:50;
  padding:9px 10px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 3px 12px rgba(0,0,0,.14);
  color:#555;
  font-size:11px;
  line-height:1.4;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  pointer-events:none;
}
.sd-preview-hover-note.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.sd-preview-hover-note strong{
  color:var(--text);
  font-weight:650;
}

/* 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-hover-note{
    left:8px;
    right:8px;
    top:40px;
    padding:8px 9px;
    font-size:10px;
  }
  .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}
.sd-drawer-set-width-slot>[data-standard-width-field]{display:block;margin:0}
.sd-drawer-set-width-group-slot>[data-manufacturer-width-group-field]{margin:0}
.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;
  }
}
@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(92vh - 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;inset:0;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:90vh;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}.sd-design-info-dialog{padding:16px;max-height:92vh}.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;
}