/* Presentation only: canvas geometry, step visibility and product controls stay local. */
.single-product {
    --cc-shell-line: #dce4e0;
    --cc-shell-ink: #303735;
    --cc-shell-muted: #68716e;
    --cc-shell-accent: #2f7d71;
    --cc-shell-preview: #f4f6f5;
    --cc-shell-font: var(--wp--preset--font-family--jost, sans-serif);
}
dialog:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) {
    box-sizing: border-box;
    width: min(1240px, calc(100% - 40px));
    height: min(930px, calc(100dvh - 32px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 1px solid var(--cc-shell-line);
    border-radius: 8px;
    background: #fff;
    color: var(--cc-shell-ink);
    font: 400 15px/1.4 var(--cc-shell-font);
    letter-spacing: 0;
    overflow: clip;
}
dialog:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog)::backdrop {
    background: rgb(30 41 37 / 42%);
}
/* WordPress may insert paragraph wrappers into rendered customizer markup. */
dialog:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) > p:empty,
:is(.cc-rb-form, .cc-yard-form, .cc-stick-builder) > p:empty,
:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) header p:empty {
    display: none;
}
:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) header p,
:is(.cc-rb-footer, .cc-yard-form > footer, .cc-stick-footer) p {
    margin: 0;
}
:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) :is(.cc-rb-header, header.cc-stick-header),
.cc-yard-form > header {
    min-height: 72px;
    padding: 14px 22px;
    gap: 16px;
    border-bottom: 1px solid var(--cc-shell-line);
    background: #fff;
}
:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) header h2,
:is(.cc-head-builder, .cc-poster-builder) h2,
.cc-product-customizer .cc-customizer-head h3 {
    margin: 0;
    font: 550 21px/1.25 var(--cc-shell-font);
    letter-spacing: 0;
    color: var(--cc-shell-ink);
}
:is(.cc-rb-header, .cc-stick-header) > div > :is(span, p),
.cc-yard-form > header > div > p,
.cc-yard-form > header > div > span {
    display: block;
    margin-top: 4px;
    color: var(--cc-shell-muted);
    font-size: 12px;
    line-height: 1.4;
}
:is(.cc-rb-header, .cc-stick-header, .cc-yard-form > header) button {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--cc-shell-muted);
    box-shadow: none;
}
:is(.cc-rb-header, .cc-stick-header, .cc-yard-form > header) button:hover {
    background: #edf2ef;
    color: var(--cc-shell-ink);
}
:is(.cc-rb-controls, .cc-yard-controls, .cc-stick-controls) {
    padding: 22px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #bdc9c3 transparent;
}
:is(.cc-rb-preview-pane, .cc-yard-preview, .cc-stick-preview-panel) {
    background: var(--cc-shell-preview);
    border-right-color: var(--cc-shell-line);
}
:is(.cc-rb-dialog .cc-rb-footer, .cc-yard-form > footer, .cc-stick-dialog .cc-stick-footer) {
    min-height: 76px;
    padding: 12px 22px;
    gap: 16px;
    flex-shrink: 0;
    border-top: 1px solid var(--cc-shell-line);
    background: #fff;
    box-shadow: none;
}
:is(.cc-rb-price, .cc-yard-price, .cc-stick-total) output {
    font: 500 25px/1.2 var(--cc-shell-font);
    font-variant-numeric: tabular-nums;
    color: var(--cc-shell-accent);
}
.single-product :is(.cc-rb-open, .cc-yard-open, .cc-rb-dialog .cc-rb-submit, .cc-yard-dialog .cc-yard-submit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 6px;
    background: var(--cc-shell-accent);
    color: #fff;
    font: 550 15px/1 var(--cc-shell-font);
    letter-spacing: 0;
    box-shadow: none;
}
.single-product :is(.cc-rb-open, .cc-yard-open, .cc-rb-submit, .cc-yard-submit):hover:not(:disabled) {
    background: #25665c;
}
.single-product :is(.cc-rb-submit, .cc-yard-submit):disabled {
    background: #aebbb6;
    cursor: not-allowed;
}
:is(.cc-rb-footer, .cc-yard-form > footer, .cc-stick-footer) button:focus-visible {
    outline: 2px solid var(--cc-shell-accent);
    outline-offset: 3px;
}
:is(.cc-rb-launch, .cc-yard-launch, .cc-stick-launch) {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cc-shell-line);
}
:is(.cc-head-builder, .cc-poster-builder) {
    gap: 20px;
    padding-top: 18px;
    border-top-color: var(--cc-shell-line);
    font: 400 15px/1.4 var(--cc-shell-font);
}
/* Legacy theme rules use !important; contain these overrides to purchase controls. */
.single-product .swp-product-summary form.cart .single_add_to_cart_button.button {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 22px !important;
    border-radius: 6px !important;
    background: var(--cc-shell-accent) !important;
    color: #fff !important;
    font: 550 15px/1.2 var(--cc-shell-font) !important;
    box-shadow: none !important;
}
.single-product .swp-product-summary form.cart .single_add_to_cart_button.button:hover {
    background: #25665c !important;
}
.single-product .swp-product-summary .cc-product-customizer .cc-customizer-head h3 {
    font: 550 21px/1.25 var(--cc-shell-font) !important;
}
.single-product .swp-product-summary .cc-customizer-total .cc-grand-total strong {
    font: 500 25px/1.2 var(--cc-shell-font) !important;
    color: var(--cc-shell-accent) !important;
}
@media (min-width: 841px) {
    :is(.cc-rb-body, .cc-yard-body, .cc-stick-modal-body) {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
    }
}
/* Keep each product's existing mobile pane/step behavior. */
@media (max-width: 760px) {
    dialog:is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) {
        width: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    :is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) :is(.cc-rb-header, header.cc-stick-header),
    .cc-yard-form > header {
        min-height: 64px;
        padding: 12px 16px;
    }
    :is(.cc-rb-dialog, .cc-yard-dialog, .cc-stick-dialog) header h2 {
        font-size: 18px;
    }
    :is(.cc-rb-controls, .cc-yard-controls, .cc-stick-controls) { padding: 18px 16px; }
    :is(.cc-rb-dialog .cc-rb-footer, .cc-yard-form > footer, .cc-stick-dialog .cc-stick-footer) {
        min-height: 68px;
        padding: 10px 14px max(10px, env(safe-area-inset-bottom));
        gap: 10px;
    }
    :is(.cc-rb-price, .cc-yard-price, .cc-stick-total) output { font-size: 22px; }
    .single-product :is(.cc-rb-dialog .cc-rb-submit, .cc-yard-dialog .cc-yard-submit) {
        min-width: 112px;
        padding: 0 14px;
        font-size: 14px;
    }
}