/* Museum Configurator Frontend — Premium Museum Style */

/* ===== Variables ===== */
.mc-configurator,
.mc-order-config {
    --mc-gold: var(--gold, #c8a96b);
    --mc-gold-hover: var(--gold-hover, #f4e4b8);
    --mc-bg: var(--bg, #111111);
    --mc-text: var(--text, #d9d9d9);
    --mc-danger: var(--danger, #8b1e2d);
    --mc-danger-hover: var(--danger-hover, #c33b4f);
    --mc-success: #7E9B7A;
    --mc-success-hover: #91AE8D;
    --mc-success-dark: #587057;
    --mc-success-bg: rgba(126, 155, 122, 0.14);
    --mc-success-border: rgba(126, 155, 122, 0.55);
    --mc-radius: var(--radius, 10px);
    --mc-panel: rgba(17, 17, 17, .94);
    --mc-panel-soft: rgba(255, 255, 255, .035);
    --mc-border: rgba(200, 169, 107, .28);
    --mc-border-strong: rgba(244, 228, 184, .58);
    --mc-muted: rgba(217, 217, 217, .68);
    --mc-shadow: 0 18px 42px rgba(0, 0, 0, .28);
    --mc-glow: 0 0 18px rgba(200, 169, 107, .28);
    --mc-transition: 220ms ease;
}

/* ===== Configurator ===== */
.mc-configurator {
    /*margin: 28px 0;*/
    /*padding: 22px;*/
    /*border: 1px solid var(--mc-border);*/
    /*border-radius: calc(var(--mc-radius) + 6px);*/
    /*background:*/
    /*    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 36%),*/
    /*    linear-gradient(180deg, rgba(26, 26, 26, .98), var(--mc-bg));*/
    color: var(--mc-text);
    font-family: "Inter", "Roboto", "Helvetica Neue", helvetica, arial, sans-serif;
    /*box-shadow: var(--mc-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);*/
}

.mc-configurator.is-loading {
    /* MC_RAPID_SELECTION_SUPERSEDES_PENDING_REQUEST_V1
     * Selection remains interactive while pricing is in flight. The runtime
     * already aborts the previous jqXHR and rejects stale request ids; blocking
     * pointer events here prevented the newer customer choice from reaching
     * that protection and left the previous profile/gallery selected. */
    pointer-events: auto;
    opacity: .72;
}

.mc-configurator__header h3 {
    margin: 0 0 18px;
    color: var(--mc-gold);
    font-family: "Cormorant Garamond", "Roboto", sans-serif;
    font-size: clamp(20px, 2vw, 20px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: .035em;
    text-transform: uppercase;
    border-bottom: 1px solid #5b5447;
    padding-bottom: 10px;
}

.mc-configurator__components {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ===== Cards ===== */
.mc-component {
    /*padding: 18px;*/
    /*border: 1px solid var(--mc-border);*/
    border-radius: var(--mc-radius);
    /*background:*/
    /*    linear-gradient(135deg, rgba(200, 169, 107, .075), transparent 42%),*/
    /*    var(--mc-panel-soft);*/
    /*box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);*/
    transition: border-color var(--mc-transition), box-shadow var(--mc-transition), background var(--mc-transition);
}

.mc-component:hover {
    /*border-color: rgba(244, 228, 184, .42);*/
    /*box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 10px 26px rgba(0, 0, 0, .18);*/
}

.mc-component:last-child {
    /*border-bottom: 1px solid var(--mc-border);*/
}

.mc-component--hidden {
    display: none !important;
}

.mc-component--disabled {
    pointer-events: none;
    color: rgba(217, 217, 217, .48);
    border-color: rgba(200, 169, 107, .14);
    background: rgba(255, 255, 255, .018);
    filter: saturate(.72);
}

.mc-component__children {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(200, 169, 107, .2);
}

.mc-component.mc-component--nested {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mc-component.mc-component--nested:hover {
    border-color: transparent;
    box-shadow: none;
}

.mc-component.mc-component--nested:last-child {
    border-bottom: 0;
}

.mc-component__label {
    display: block;
    margin-bottom: 10px;
    color: var(--mc-gold);
    font-family: "Cormorant Garamond", "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: .02em;
}

.mc-component__label .required::after {
    content: ' *';
    color: var(--mc-danger-hover);
}

.mc-component__label-active {
    color: var(--mc-cream, #f3dfb1);
    font-weight: 700;
}

.mc-component__control {
    margin-bottom: 8px;
    padding: 5px;
}

.mc-component__preview {
    display: none;
    width: 100%;
    margin-top: 14px;
}

.mc-component__preview img {
    display: block;
    width: auto;
    max-width: min(100%, 420px);
    max-height: 280px;
    margin:auto;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    object-fit: contain;
}

.mc-configurator .mc-swatches--image .mc-swatch--image {
    width: auto !important;
    height: auto !important;
    min-width: 72px;
    min-height: 64px;
    padding: 8px;
    flex-direction: column;
    gap: 6px;
    flex:1;
}

.mc-configurator .mc-swatches--image .mc-swatch__img,
.mc-configurator .mc-swatches--image .mc-swatch__placeholder {
    flex: 0 0 auto;
}

.mc-configurator .mc-swatches--image .mc-swatch__label {
    max-width: 100px;
    overflow-wrap: anywhere;
}

.mc-component__description {
    margin-bottom: 8px;
    color: var(--mc-muted);
    font-size: 13px;
    line-height: 1.55;
}

.mc-info-text {
    color: var(--mc-text, #d9d9d9);
    font-size: 16px;
    line-height: 1.65;
}

.mc-info-block {
    margin: 0 0 12px;
}

.mc-info-block--accent,
.mc-info-block--warning,
.mc-info-block--note {
    box-sizing: border-box;
    padding: 15px 20px;
    border-radius: 16px;
}

.mc-info-block--accent {
    background: linear-gradient(135deg, #bda06a 0%, #ae8d53 100%);
    border: 1px solid rgba(212, 176, 106, .58);
    color: #111;
    font-size: 14px;
    font-style: italic;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 14px rgba(0, 0, 0, .12);
}

.mc-info-block--warning {
    background: rgba(105, 55, 38, .34);
    border: 1px solid rgba(207, 135, 98, .5);
    border-left: 4px solid #cf8762;
    color: var(--mc-text, #f0e7d6);
}

.mc-info-block--note {
    background: rgba(212, 176, 106, .08);
    border: 1px solid rgba(212, 176, 106, .30);
    border-left: 3px solid rgba(212, 176, 106, .72);
    color: var(--mc-text, #d9d9d9);
}

.mc-info-text > :first-child {
    margin-top: 0;
}

.mc-info-text > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .mc-info-block--accent,
    .mc-info-block--warning,
    .mc-info-block--note {
        padding: 15px 17px;
        border-radius: 13px;
    }
}

.mc-component__error {
    /*min-height: 18px;*/
    color: var(--mc-danger-hover);
    font-size: 13px;
    line-height: 1.45;
}

/* ===== Controls ===== */
.mc-select,
.mc-text,
.mc-number {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background: rgba(0, 0, 0, .26);
    color: var(--mc-text);
    font: inherit;
    font-size: 14px;
    transition: border-color var(--mc-transition), box-shadow var(--mc-transition), background var(--mc-transition);
}

.mc-select:hover,
.mc-text:hover,
.mc-number:hover {
    border-color: rgba(244, 228, 184, .44);
    background: rgba(0, 0, 0, .32);
}

.mc-select:focus,
.mc-text:focus,
.mc-number:focus {
    outline: none;
    border-color: var(--mc-gold-hover);
    box-shadow: 0 0 0 3px rgba(200, 169, 107, .18), var(--mc-glow);
}

.mc-radio-group,
.mc-checkbox-group,
.mc-color-group,
.mc-image-group,
.mc-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mc-radio,
.mc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(200, 169, 107, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--mc-text);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--mc-transition), background var(--mc-transition), box-shadow var(--mc-transition), transform var(--mc-transition);
}

.mc-radio:hover,
.mc-checkbox:hover {
    transform: translateY(-1px);
    border-color: var(--mc-border-strong);
    background: rgba(200, 169, 107, .08);
    box-shadow: var(--mc-glow);
}

.mc-radio input,
.mc-checkbox input {
    accent-color: var(--mc-gold);
}

.mc-radio:focus-within,
.mc-checkbox:focus-within {
    border-color: var(--mc-gold-hover);
    box-shadow: 0 0 0 3px rgba(200, 169, 107, .18);
}

.mc-color-swatch,
.mc-image-swatch,
.mc-button {
    border: 1px solid var(--mc-border);
    background: rgba(255, 255, 255, .035);
    color: var(--mc-text);
    cursor: pointer;
    transition: border-color var(--mc-transition), background var(--mc-transition), box-shadow var(--mc-transition), transform var(--mc-transition), color var(--mc-transition);
}

.mc-color-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.mc-color-swatch:hover,
.mc-image-swatch:hover,
.mc-button:hover {
    /*transform: translateY(-1px);*/
    border-color: var(--mc-border-strong);
    background: rgba(200, 169, 107, .09);
    box-shadow: var(--mc-glow);
}

.mc-color-swatch input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--mc-gold);
}

.mc-image-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 9px;
    border-radius: var(--mc-radius);
}

.mc-image-swatch input[type="radio"] {
    display: none;
}

.mc-image-swatch.mc-image-swatch[title]:hover {
    border-color: var(--mc-border-strong);
}

.mc-image-preview {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    border-radius: calc(var(--mc-radius) - 2px);
}

.mc-image-label {
    color: var(--mc-muted);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

.mc-button {
    padding: 9px 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    text-transform: uppercase;
}

.mc-configurator .mc-swatches--button[data-swatch-shape="circle"] .mc-swatch--button {
    border-radius: 999px;
}

.mc-configurator .mc-swatches--button[data-swatch-shape="square"] .mc-swatch--button {
    border-radius: 0;
}

.mc-configurator .mc-swatches--button[data-swatch-shape="rounded"] .mc-swatch--button {
    border-radius: var(--mc-radius);
}

.mc-configurator .mc-swatches--button .mc-swatch--button {
    min-width: var(--mc-swatch-size, 32px);
    min-height: var(--mc-swatch-size, 32px);
    padding-right: max(10px, calc(var(--mc-swatch-size, 32px) * .42));
    padding-left: max(10px, calc(var(--mc-swatch-size, 32px) * .42));
}

.mc-button--active {
    border-color: var(--mc-gold-hover);
    background: var(--mc-gold-hover);
    color: var(--mc-glow);
    box-shadow: var(--mc-glow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ===== Swatches rendered by MC_Color_Renderer ===== */
.mc-configurator .mc-swatches--color {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    max-width: 100%;
}

.mc-configurator .mc-swatches--color .mc-swatch--color {
    display: flex;
    /*flex: 0 1 112px;*/
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /*width: 112px !important;*/
    max-width: 100%;
    height: auto !important;
    /*min-height: 76px;*/
    /*padding: 8px 6px;*/
    gap: 7px;
    /*border: 1px solid var(--mc-border);*/
    border-radius: var(--mc-radius);
    box-sizing: border-box;
    overflow: visible;
    /*background: rgba(255, 255, 255, .03);*/
    text-align: center;
    border: none;
}

.mc-configurator .mc-swatches--color .mc-swatch--color:hover {
    /*transform: translateY(-1px);*/
    border-color: var(--mc-border-strong);
    box-shadow: var(--mc-glow);
}

.mc-configurator .mc-swatches--color .mc-swatch--color .mc-swatch__color {
    display: block;
    flex: 0 0 auto;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
    border: 1px solid rgba(244, 228, 184, .35);
    box-sizing: border-box;
}

.mc-configurator .mc-swatches--color .mc-swatch--color input:checked + .mc-swatch__color {
    border-color: var(--mc-gold-hover);
    box-shadow: 0 0 0 2px var(--mc-bg), 0 0 0 4px var(--mc-gold), var(--mc-glow);
}

.mc-configurator .mc-swatches--color .mc-swatch--color input:focus-visible + .mc-swatch__color {
    outline: 2px solid var(--mc-gold-hover);
    outline-offset: 3px;
}

.mc-configurator .mc-swatches--color .mc-swatch--color .mc-swatch__label {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--mc-muted);
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* ===== Summary / Price ===== */
.mc-configurator__summary {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--mc-border);
}

.mc-configurator__price {
    color: var(--mc-text);
    font-size: 16px;
    font-weight: 400;
}

.mc-price-line {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 7px;
    color: var(--mc-muted);
}

.mc-price-total {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--mc-border);
    color: var(--mc-gold-hover);
    /*font-family: "Cormorant Garamond", "Roboto", sans-serif;*/
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
}
.mc-price-total .woocommerce-Price-amount.amount{
    color: var(--mc-gold-hover);
}

.mc-message {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--mc-radius);
    font-size: 13px;
    line-height: 1.45;
}

.mc-message.error {
    border: 1px solid rgba(195, 59, 79, .45);
    background: rgba(139, 30, 45, .16);
    color: #f0b6bf;
}

.mc-message.success {
    border: 1px solid rgba(200, 169, 107, .42);
    background: rgba(200, 169, 107, .12);
    color: var(--mc-gold-hover);
}

/* ===== Order config ===== */
.mc-order-config {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%),
        var(--mc-panel);
    color: var(--mc-text);
    box-shadow: var(--mc-shadow);
}

.mc-order-config-title {
    margin-bottom: 12px;
    color: var(--mc-gold-hover);
    font-family: "Cormorant Garamond", "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 500;
}

.mc-order-config-table {
    width: 100%;
    border-collapse: collapse;
}

.mc-order-config-table th,
.mc-order-config-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(200, 169, 107, .16);
    color: var(--mc-text);
    text-align: left;
}

.mc-order-config-table th {
    color: var(--mc-gold-hover);
    font-weight: 500;
}

/* ===== States ===== */
.mc-configurator :disabled,
.mc-order-config :disabled {
    cursor: not-allowed;
    color: rgba(217, 217, 217, .44);
    border-color: rgba(200, 169, 107, .14);
    filter: saturate(.72);
}

.mc-configurator a:focus-visible,
.mc-configurator button:focus-visible,
.mc-configurator input:focus-visible,
.mc-configurator select:focus-visible,
.mc-configurator textarea:focus-visible {
    outline: 2px solid var(--mc-gold-hover);
    outline-offset: 3px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .mc-configurator,
    .mc-order-config {
        margin: 10px 0;
    }

    .mc-component {
        padding: 0px;
    }

    .mc-component__children {
        margin-top: 18px;
        padding-top: 18px;
    }

    .mc-color-swatch {
        width: 38px;
        height: 38px;
    }

    .mc-image-swatch {
        padding: 7px;
    }

    .mc-image-preview {
        max-width: 54px;
        max-height: 54px;
    }

    .mc-button {
        padding: 8px 13px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .mc-configurator .mc-swatches--color .mc-swatch--color {
        /*flex-basis: calc(50% - 6px);*/
        /*width: calc(50% - 6px) !important;*/
    }

    .mc-price-line {
        /*flex-direction: column;*/
        /*gap: 2px;*/
    }
}

/* ===== Additional WooCommerce products ===== */
.mc-product-addons {
    gap: 14px;
}

.mc-product-addon {
    position: relative;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 0 15px 0 0;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
    transition: border-color var(--mc-transition), box-shadow var(--mc-transition), background var(--mc-transition), transform var(--mc-transition);
}

.mc-product-addon:hover,
.mc-product-addon.is-selected,
.mc-product-addon:has(.mc-product-addon__input:checked) {
    border-color: var(--mc-border-strong);
    background: linear-gradient(145deg, rgba(200, 169, 107, .11), rgba(255, 255, 255, .025));
    box-shadow: var(--mc-glow);
}

.mc-product-addon.is-selected,
.mc-product-addon:has(.mc-product-addon__input:checked) {
    transform: translateY(-1px);
}

/* Keep the native input accessible while making the whole card the control. */
.mc-product-addon__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mc-product-addon__toggle {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: inherit;
    cursor: pointer;
}

.mc-product-addon__input:focus-visible + .mc-product-addon__toggle {
    outline: 2px solid var(--mc-gold-hover);
    outline-offset: 4px;
}

.mc-product-addon__image-link,
.mc-product-addon__title {
    position: relative;
    z-index: 2;
}

/*.mc-product-addon__image-link*/
.mc-product-addon img.attachment-woocommerce_thumbnail{
    display: block;
    overflow: hidden;
    width: 110px;
    height: 130px;
    border: 1px solid rgba(200, 169, 107, .22);
    border-radius: var(--mc-radius) 0 0 var(--mc-radius);
    background: #0d0d0d;
}

/*.mc-product-addon__image-link*/
.mc-product-addon img.attachment-woocommerce_thumbnail {
    display: block;
    /*width: 100%;*/
    /*height: 100%;*/
    margin: 0;
    object-fit: cover;
}

.mc-product-addon__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.mc-product-addon__title {
    color: var(--mc-text);
    font-family: "Cormorant Garamond", "Roboto", sans-serif;
    font-size: 17px;
    line-height: 1.2;
    text-decoration: none;
}

.mc-product-addon__title:hover,
.mc-product-addon__title:focus-visible {
    color: var(--mc-gold-hover);
}

.mc-product-addon__price {
    color: var(--mc-gold);
    font-size: 15px;
    font-weight: 600;
}

.mc-product-addon__stock,
.mc-product-addon__stock .stock {
    margin: 0;
    color: var(--mc-muted);
    font-size: 12px;
    line-height: 1.35;
}

.mc-product-addon__selected-state {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    padding: 5px 9px;
    border: 1px solid var(--mc-success);
    border-radius: 999px;
    color: var(--mc-success);
    background: rgba(12, 12, 12, .88);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .03em;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity var(--mc-transition), transform var(--mc-transition);
}

.mc-product-addon.is-selected .mc-product-addon__selected-state,
.mc-product-addon:has(.mc-product-addon__input:checked) .mc-product-addon__selected-state {
    opacity: 1;
    transform: translateY(0);
}

.mc-product-addons__empty {
    margin: 0;
    color: var(--mc-muted);
    font-style: italic;
}

@media (max-width: 900px) {
    .mc-product-addons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .mc-product-addon {
        gap: 12px;
        padding: 12px;
    }

    .mc-product-addon__image-link {
        width: 76px;
        height: 76px;
    }

    .mc-product-addon__selected-state {
        top: 7px;
        right: 8px;
        padding: 4px 7px;
        font-size: 10px;
    }
}

/*
 * ----------------------------------------------------------
 * Preview = Скрыть
 * ----------------------------------------------------------
 *
 * Do not remove the node from DOM because frontend-configurator.js
 * already knows this node and may update it.
 *
 * We simply prevent it from becoming visible.
 */
.mc-component.mc-component--image-preview-hidden
> .mc-component__preview {
    display: none !important;
}


/*
 * In this mode image swatches must remain in their original colors.
 *
 * Do not apply grayscale to inactive images.
 */
.mc-component.mc-component--image-preview-hidden
.mc-swatches--image
.mc-swatch__img {
    filter: none !important;
    border: none;
}


/*
 * Active state belongs to the SWATCH/BUTTON itself,
 * not to the image.
 *
 * Reuse the existing border geometry. Only its color/state changes.
 */
.mc-component.mc-component--image-preview-hidden
.mc-swatches--image
.mc-swatch.selected,

.mc-component.mc-component--image-preview-hidden
.mc-swatches--image
.mc-swatch:has(input:checked) {
    border-color: #a97a32 !important;
    box-shadow:
            inset 0 0 0 1px #d4b06a !important;
}

/*
 * MC_ACCORDION_PATCH_V1
 *
 * Single-product root component accordion.
 * Existing Museum Configurator class names are reused wherever possible.
 */

/*
 * Collapse all content of a ROOT component except its existing heading.
 * Because nested components live inside .mc-component__children,
 * they automatically follow their parent and never become separate panels.
 */
.mc-configurator.mc-configurator--accordion
> .mc-configurator__components
> .mc-component.mc-component--accordion-collapsible.is-collapsed
> :not(.mc-component__label):not(.mc-component__nested-summary) {
    display: none !important;
}

/*
 * Reuse the same toggle class already used by the grouped configurator.
 */
.mc-configurator.mc-configurator--accordion
> .mc-configurator__components
> .mc-component.mc-component--accordion-collapsible
> .mc-component__label.mc-component__toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/*
 * Small fallback arrow for the regular product configurator.
 * The class itself is the existing mc-component__toggle-icon class.
 */
.mc-configurator.mc-configurator--accordion
> .mc-configurator__components
> .mc-component.mc-component--accordion-collapsible
> .mc-component__label
> .mc-component__toggle-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(225deg);
    transition: transform 160ms ease;
}

/*
 * Downward arrow = panel is collapsed.
 */
.mc-configurator.mc-configurator--accordion
> .mc-configurator__components
> .mc-component.mc-component--accordion-collapsible.is-collapsed
> .mc-component__label
> .mc-component__toggle-icon {
    transform: rotate(45deg);
}

/*
 * "Всегда открыт" components intentionally get no toggle cursor/arrow.
 * No special visual design is introduced for them.
 */
.mc-configurator.mc-configurator--accordion
> .mc-configurator__components
> .mc-component.mc-component--accordion-locked
> .mc-component__label {
    cursor: default;
}

/*
 * MC_NESTED_ACCORDION_V1
 *
 * Every runtime nested Component is independently collapsible. Nested panels
 * are closed initially to keep deep configuration compact. The heading and
 * current value remain visible; descendants are represented in a compact
 * summary while an ancestor is closed.
 */
.mc-configurator.mc-configurator--accordion
.mc-component.mc-component--nested.mc-component--nested-accordion-collapsible
> .mc-component__label.mc-component__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.mc-configurator.mc-configurator--accordion
.mc-component.mc-component--nested.mc-component--nested-accordion-collapsible
> .mc-component__label
> .mc-component__toggle-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(225deg);
    transition: transform 160ms ease;
}

.mc-configurator.mc-configurator--accordion
.mc-component.mc-component--nested.mc-component--nested-accordion-collapsible.is-collapsed
> .mc-component__label
> .mc-component__toggle-icon {
    transform: rotate(45deg);
}

.mc-configurator.mc-configurator--accordion
.mc-component.mc-component--nested.mc-component--nested-accordion-collapsible.is-collapsed
> :not(.mc-component__label):not(.mc-component__nested-summary) {
    display: none !important;
}

.mc-configurator.mc-configurator--accordion
.mc-component.mc-component--nested.mc-component--nested-accordion-collapsible.is-collapsed
> .mc-component__label {
    margin-bottom: 0;
}

/*
 * Collapsed-summary rows are deliberately read-only projections of canonical
 * component state. They make child choices visible when a root/nested parent
 * is closed and also act as navigation shortcuts back to the real control.
 */
.mc-component__nested-summary {
    display: none;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 8px 0 0;
}

.mc-component__nested-summary.is-empty {
    display: none !important;
}

.mc-configurator.mc-configurator--accordion
> .mc-configurator__components
> .mc-component.mc-component--accordion-collapsible.is-collapsed
> .mc-component__nested-summary:not(.is-empty),
.mc-configurator.mc-configurator--accordion
.mc-component.mc-component--nested.mc-component--nested-accordion-collapsible.is-collapsed
> .mc-component__nested-summary:not(.is-empty) {
    display: flex !important;
}

.mc-component__nested-summary-action {
    appearance: none;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(200, 169, 107, .28);
    border-radius: 999px;
    background: rgba(200, 169, 107, .06);
    color: var(--mc-cream, #f3dfb1);
    font: inherit;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.mc-component__nested-summary-action:hover,
.mc-component__nested-summary-action:focus-visible {
    border-color: rgba(212, 176, 106, .68);
    background: rgba(200, 169, 107, .12);
    outline: none;
}

.mc-passepartout-auto-action.is-active,
.mc-passepartout-auto-action[aria-pressed="true"] {
    border-color: rgba(212, 176, 106, .82);
    background: rgba(200, 169, 107, .18);
    box-shadow: inset 0 0 0 1px rgba(212, 176, 106, .10);
}

.mc-passepartout-auto-control {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
}

/* ==========================================================
 * MC_SVG_COMPOSITION_STAGE1_V1
 * SVG Composition Engine
 * ========================================================== */

.mc-composition-stage1 {
    margin: 0 0 24px;
    border: 1px solid rgba(127, 127, 127, .28);
    border-radius: 6px;
    overflow: hidden;
}

.mc-composition-stage1__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid rgba(127, 127, 127, .22);
    background: rgba(127, 127, 127, .06);
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.mc-composition-stage1__toggle-icon {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(225deg);
    transition: transform 160ms ease;
}

.mc-composition-stage1__toggle[aria-expanded="false"]
.mc-composition-stage1__toggle-icon {
    transform: rotate(45deg);
}

.mc-composition-stage1__body {
    display: block;
    padding: 16px;
}

.mc-composition-stage1__body[hidden] {
    display: none !important;
}

.mc-composition-stage1__preview-column {
    min-width: 0;
    margin-bottom: 20px;
}


/*
 * MC_SVG_COMPOSITION_STAGE1_UPLOAD_LAYOUT_V1
 */

.mc-composition-stage1__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px dashed rgba(127, 127, 127, .35);
    border-radius: 4px;
    background: rgba(127, 127, 127, .04);
}

.mc-composition-stage1__upload-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.mc-composition-stage1__upload-label > span {
    font-size: 12px;
    font-weight: 600;
}

.mc-composition-stage1__upload-label input[type="file"] {
    max-width: 100%;
    font-size: 12px;
}

.mc-composition-stage1__clear-upload {
    padding: 6px 10px;
    border: 1px solid rgba(127, 127, 127, .4);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mc-composition-stage1__clear-upload:hover {
    border-color: #b58a42;
}

.mc-composition-stage1__canvas {
    position: relative;
    width: 100%;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(127, 127, 127, .22);
    border-radius: 4px;
    background: rgba(127, 127, 127, .04);
}

.mc-composition-stage1__svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 620px;
}

.mc-composition-stage1__metrics {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #b58a42;
    background: rgba(181, 138, 66, .07);
    font-size: 12px;
    line-height: 1.5;
}

.mc-composition-stage1__metrics--warning {
    border-left-color: #c55a45;
}

.mc-composition-stage1__controls {
    display: grid;
    align-content: start;
    gap: 10px;
}

.mc-composition-stage1__controls h4 {
    margin: 0 0 4px;
}

.mc-composition-stage1__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 10px;
    align-items: center;
}

.mc-composition-stage1__field > span {
    font-size: 12px;
    line-height: 1.35;
}

.mc-composition-stage1__field input[type="number"],
.mc-composition-stage1__field input[type="text"],
.mc-composition-stage1__field textarea {
    width: 100%;
    min-width: 0;
}

.mc-composition-stage1__field input[type="color"] {
    width: 100%;
    min-height: 34px;
    padding: 2px;
}

.mc-composition-stage1__check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 12px;
}

.mc-composition-stage1__reset {
    margin-top: 4px;
    padding: 8px 11px;
    border: 1px solid rgba(127, 127, 127, .4);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.mc-composition-stage1__reset:hover {
    border-color: #b58a42;
}

@media (max-width: 900px) {

    .mc-composition-stage1__canvas {
        min-height: 300px;
    }
}

@media (max-width: 520px) {

    .mc-composition-stage1__body {
        padding: 12px;
    }

    .mc-composition-stage1__field {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .mc-composition-stage1__canvas {
        min-height: 240px;
    }
}

/* MC_SVG_COMPOSITION_STAGE1_CUSTOMER_CONTROLS_V1 */


/* ==========================================================
 * MC_SVG_COMPOSITION_CROP_SCENE_ORIENTATION_V1
 * Frame orientation switch
 * ========================================================== */

.mc-composition-stage1__orientation {
    display: grid;
    gap: 6px;
    margin: 0 0 6px;
}

.mc-composition-stage1__orientation-label {
    font-size: 12px;
    line-height: 1.35;
}

.mc-composition-stage1__orientation-buttons {
    display: inline-flex;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(127, 127, 127, .38);
    border-radius: 4px;
    overflow: hidden;
}

.mc-composition-stage1__orientation-option {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.mc-composition-stage1__orientation-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mc-composition-stage1__orientation-option span {
    display: block;
    padding: 7px 11px;
    border-right: 1px solid rgba(127, 127, 127, .3);
    font-size: 12px;
    line-height: 1.2;
}

.mc-composition-stage1__orientation-option:last-child span {
    border-right: 0;
}

.mc-composition-stage1__orientation-option
input:checked + span {
    background: rgba(181, 138, 66, .16);
    box-shadow: inset 0 0 0 1px rgba(181, 138, 66, .45);
}


/* MC_SVG_COMPOSITION_CROP_SCENE_ORIENTATION_V1 */

/* ==========================================================
 * MC_PROFILE_PRESENTATION_ROUTER_V1
 *
 * SVG Composition and the existing WooCommerce/variant gallery share the
 * same product-gallery host. The normal gallery is never destroyed for SVG
 * profiles; it is kept initialized underneath and becomes visible again as
 * soon as a gallery-based profile is selected.
 * ========================================================== */
.woocommerce-product-gallery {
    position: relative;
}

.mc-svg-product-stage {
    display: none;
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mc-svg-product-stage-height, 470px);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #000;
}

.mc-svg-product-stage__svg {
    display: block;
    width: 100%;
    height: 100%;
    /*!*min-width: 100%;*!*/
    /*min-height: 100%;*/
    /*max-width: none;*/
    /*max-height: none;*/
    /*overflow: hidden;*/
}

.woocommerce-product-gallery.mc-presentation--svg .mc-svg-product-stage {
    display: flex;
}

/* Keep FlexSlider's geometry alive. Hiding the wrapper instead of removing
 * the viewport means switching SVG -> Gallery requires no second Woo init. */
.woocommerce-product-gallery.mc-presentation--svg
.woocommerce-product-gallery__wrapper {
    visibility: hidden;
    pointer-events: none;
}

.woocommerce-product-gallery.mc-presentation--svg
.woocommerce-product-gallery__trigger {
    visibility: hidden;
    pointer-events: none;
}

/* MC_SVG_FACE_THUMB_STRIP_VISIBILITY_V1
 * SVG presentation still hides native Woo thumbnails, but the same premium
 * strip becomes the visual owner of Front / Back face thumbnails. */
.woocommerce-product-gallery.mc-presentation--svg
.mc-premium-thumbs {
    display: none !important;
}

.woocommerce-product-gallery.mc-presentation--svg
.mc-premium-thumbs.mc-premium-thumbs--svg-faces {
    display: grid !important;
}

.woocommerce-product-gallery.mc-presentation--svg
.mc-premium-thumbs.mc-premium-thumbs--svg-faces
.mc-premium-thumbs__item[data-index] {
    display: none !important;
}

.woocommerce-product-gallery.mc-presentation--svg
.mc-premium-thumbs.mc-premium-thumbs--svg-faces
.mc-premium-thumbs__track {
    width: max-content;
    max-width: 100%;
    justify-self: center;
}

.woocommerce-product-gallery.mc-presentation--gallery .mc-svg-product-stage {
    display: none;
}

/* MC_GALLERY_MODE_FACE_THUMB_CLEANUP_V1
 * JS removes stale live-SVG face buttons on the applied owner transition.
 * Keep the same invariant during the single paint in which GalleryAdapter has
 * committed gallery mode but the transition event has not run yet. */
.woocommerce-product-gallery.mc-presentation--gallery .mc-svg-face-thumb {
    display: none !important;
}

/* ==========================================================
 * MC_SVG_COMPOSITION_CUSTOMER_UI_V2
 * The live SVG preview now lives in the main product gallery.
 * ========================================================== */
.mc-composition-stage1__body {
    padding: 14px 16px 16px;
}

.mc-composition-stage1__controls--customer {
    gap: 12px;
}

.mc-composition-stage1__controls--customer h4 {
    margin: 5px 0 0;
    padding: 9px 11px;
    border-left: 3px solid var(--gold, #b58a42);
    background: rgba(181, 138, 66, .08);
    color: inherit;
    font-size: 13px;
    letter-spacing: .02em;
}

.mc-composition-stage1__field {
    padding: 8px 10px;
    border: 1px solid rgba(181, 138, 66, .20);
    border-radius: 5px;
    background: rgba(255, 255, 255, .025);
}

.mc-composition-stage1__field > span {
    font-weight: 600;
}

.mc-composition-stage1__field input[type="number"],
.mc-composition-stage1__field input[type="text"],
.mc-composition-stage1__field textarea {
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid rgba(181, 138, 66, .42);
    border-radius: 4px;
    background: rgba(255,255,255,.055);
    color: inherit;
    box-shadow: none;
    outline: none;
}

.mc-composition-stage1__field input[type="number"]:focus,
.mc-composition-stage1__field input[type="text"]:focus,
.mc-composition-stage1__field textarea:focus {
    border-color: var(--gold, #b58a42);
    box-shadow: 0 0 0 1px var(--gold, #b58a42);
}


.mc-composition-stage1__check {
    margin: 0;
    padding: 9px 10px;
    border: 1px solid rgba(181, 138, 66, .20);
    border-radius: 5px;
    background: rgba(181, 138, 66, .05);
    cursor: pointer;
}

.mc-composition-stage1__check input[type="checkbox"] {
    accent-color: var(--gold, #b58a42);
}

.mc-composition-stage1__plaque-fit-note {
    padding: 9px 11px;
    border-left: 3px solid var(--gold, #b58a42);
    background: rgba(181, 138, 66, .07);
    font-size: 12px;
    line-height: 1.45;
}

.mc-composition-stage1__controls--customer .mc-composition-stage1__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
}

.mc-composition-stage1 .mc-svg-range-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.mc-composition-stage1 .mc-svg-range-control > input[type="number"] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
}

.mc-svg-ui-range {
    width: 100%;
    min-width: 0;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--gold, #b58a42);
    cursor: pointer;
}

.mc-svg-ui-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4b06a, #a97a32);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}

.mc-svg-ui-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 2px solid #f0d08b;
    border-radius: 50%;
    background: #a97a32;
    box-shadow: 0 2px 6px rgba(0,0,0,.32);
    -webkit-appearance: none;
    appearance: none;
}

.mc-svg-ui-range::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4b06a, #a97a32);
}

.mc-svg-ui-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #f0d08b;
    border-radius: 50%;
    background: #a97a32;
    box-shadow: 0 2px 6px rgba(0,0,0,.32);
}

@media (max-width: 520px) {
    .mc-composition-stage1 .mc-svg-range-control {
        grid-template-columns: minmax(0, 1fr) 84px;
        gap: 8px;
    }

    .mc-composition-stage1 .mc-svg-range-control > input[type="number"] {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
    }
}

/* Main SVG presentation behaves like the normal gallery image. */
.mc-svg-product-stage {
    cursor: zoom-in;
}

.mc-composition-stage1__toggle {
    border-bottom-color: rgba(181, 138, 66, .30);
    background: linear-gradient(180deg, rgba(212,176,106,.10), rgba(169,122,50,.055));
}
.mc-composition-stage1__toggle:hover,
.mc-composition-stage1__toggle:focus {
    background: linear-gradient(180deg, rgba(212,176,106,.16), rgba(169,122,50,.08));
    outline: none;
}
.mc-composition-stage1__toggle-icon {
    color: var(--gold, #b58a42);
}
.mc-composition-stage1__reset {
    border-color: rgba(181,138,66,.52);
}
.mc-svg-ui-range {
    -webkit-appearance: none;
    appearance: none;
}

/* 1.10.64: current configurator composition is mounted as inline SVG in
 * PhotoSwipe. Keep PhotoSwipe's zoom-wrap in charge of pan/zoom transforms. */
.pswp .mc-svg-photoswipe-inline {
    display: block;
    max-width: none;
    max-height: none;
    margin: 0;
    pointer-events: auto;
    user-select: none;
}

/* ============================================================
 * MC LIGHTBOX INLINE SVG 1.10.65
 * ============================================================ */

/*
 * The SVG is mounted inside PhotoSwipe's own zoom-wrap and therefore
 * follows exactly the same transform as its geometry image.
 */
.pswp .mc-svg-photoswipe-inline {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    margin: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    pointer-events: auto;
}

/* Keep the SVG root as the PhotoSwipe tap target.  Internal SVG layers do
 * not own gestures; zoom and pan remain one PhotoSwipe transaction. */
.pswp .mc-svg-photoswipe-inline > * {
    pointer-events: none;
}

/*
 * A composed SVG already contains the selected baguette.
 * frame-overlay.js must not display another frame on that slide.
 *
 * !important is intentionally restricted to this one exact conflict
 * because frame-overlay.js writes display:block as an inline style.
 */
.pswp[data-mc-svg-inline-active="1"] .mc-frame-lightbox-overlay {
    display: none !important;
}

/* END MC LIGHTBOX INLINE SVG 1.10.65 */


/* Auto composition: manual geometry remains stored and becomes editable again when Auto is disabled. */
.mc-composition-stage1--auto-layout [data-mc-composition-input="inner_width"],
.mc-composition-stage1--auto-layout [data-mc-composition-input="inner_height"],
.mc-composition-stage1--auto-layout [data-mc-composition-input="plaque_width"],
.mc-composition-stage1--auto-layout [data-mc-composition-input="plaque_height"],
.mc-composition-stage1--auto-layout [data-mc-composition-input="plaque_gap"],
.mc-composition-stage1--auto-layout [data-mc-composition-input="plaque_font_size"],
.mc-composition-stage1--auto-layout [data-mc-composition-range="inner_width"],
.mc-composition-stage1--auto-layout [data-mc-composition-range="inner_height"],
.mc-composition-stage1--auto-layout [data-mc-composition-range="plaque_width"],
.mc-composition-stage1--auto-layout [data-mc-composition-range="plaque_height"],
.mc-composition-stage1--auto-layout [data-mc-composition-range="plaque_gap"],
.mc-composition-stage1--auto-layout [data-mc-composition-range="plaque_font_size"] {
    opacity: .55;
    pointer-events: none;
}
.mc-composition-stage1__auto-layout-note { margin: 6px 0 14px; }

.mc-composition-stage1__auto-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}
.mc-composition-stage1__auto-profile select {
    min-width: 180px;
}

/* ==========================================================
 * MC_DUAL_FACE_PRESENTATION_V1
 * Front/back is presentation state only. It never exposes the customer
 * constructor and never changes Woo/configurator pricing selections.
 * ========================================================== */
.mc-svg-face-controls {
    display: none;
    position: absolute;
    z-index: 12;
    right: 12px;
    bottom: 12px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.woocommerce-product-gallery.mc-presentation--svg .mc-svg-face-controls.is-available {
    display: flex;
}
/* Front / Back now live inside the premium thumbnail track.  They inherit
 * the exact dimensions, border, hover and active treatment from
 * `.mc-premium-thumbs__item`; only their SVG-preview carrier is custom. */
.mc-svg-face-thumb {
    position: relative;
    pointer-events: auto;
}
.mc-svg-face-button__thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
    background: #302d29;
    pointer-events: none;
}
.mc-svg-face-button__thumb svg,
.mc-svg-face-button__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.mc-svg-face-button__rear-placeholder {
    color: #d4b06a;
    font-size: 26px;
    line-height: 1;
}
.mc-svg-face-flip {
    pointer-events: auto;
    appearance: none;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid rgba(212,176,106,.58);
    border-radius: 50%;
    background: rgba(25,25,25,.88);
    color: #d4b06a;
    box-shadow: 0 8px 22px rgba(0,0,0,.24);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-svg-face-flip > span:first-child {
    display: block;
    color: inherit;
    font-size: 21px;
    line-height: 1;
}
.mc-svg-face-flip:hover,
.mc-svg-face-flip:focus-visible {
    border-color: rgba(212,176,106,.9);
    background: rgba(25,25,25,.96);
    outline: none;
}
.mc-svg-face-flip:disabled {
    cursor: wait;
    opacity: .68;
}
/* MC_FACE_FLIP_NO_SCALE_V1
 * Face turning may rotate in 3D, but it must never explicitly scale the
 * composition. Target document geometry is already canonical before the
 * animation starts; scale() here creates a false zoom/grow effect.
 */
/* MC_DUAL_FACE_STATIC_SCENE_FLIP_V1
 * The scene/background remains in the live SVG and never rotates. During a
 * flip we hide only the live object group and animate a transparent clone
 * containing the framed object. This also avoids overwriting the canonical
 * translate/scale transform of .mc-composition-stage1__object. */
.mc-svg-product-stage--face-flipping > .mc-svg-product-stage__svg > .mc-composition-stage1__object {
    visibility: hidden;
}
.mc-svg-face-flip-layer {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    perspective: 1200px;
    transform-style: preserve-3d;
}
.mc-svg-face-flip-layer > svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.mc-svg-face-flip-layer.is-flip-out > svg {
    animation: mc-svg-face-object-flip-out-v1 .26s cubic-bezier(.55,.08,.8,.45) forwards;
}
.mc-svg-face-flip-layer.is-flip-in-start > svg {
    transform: rotateY(-88deg);
    opacity: .72;
}
.mc-svg-face-flip-layer.is-flip-in > svg {
    animation: mc-svg-face-object-flip-in-v1 .30s cubic-bezier(.2,.55,.25,1) forwards;
}
@keyframes mc-svg-face-object-flip-out-v1 {
    0% { transform: rotateY(0deg); opacity: 1; }
    100% { transform: rotateY(88deg); opacity: .72; }
}
@keyframes mc-svg-face-object-flip-in-v1 {
    0% { transform: rotateY(-88deg); opacity: .72; }
    100% { transform: rotateY(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-svg-face-flip-layer { display: none !important; }
    .mc-svg-product-stage--face-flipping > .mc-svg-product-stage__svg > .mc-composition-stage1__object {
        visibility: visible !important;
    }
}
@media (max-width: 767px) {
    .mc-svg-face-controls { right: 8px; bottom: 8px; }
    .mc-svg-face-flip { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
}

/* MC_FACE_PREPARED_INCOMING_LAYER_V1
 * The target layer exists before animation starts, but remains completely
 * hidden until the outgoing object reaches the edge. */
.mc-svg-face-flip-layer.is-flip-in-pending {
    opacity: 0;
}

/* MC_PROJECTION_FACE_THUMB_FULL_SCENE_V2
 * The UI carrier remains stable 1:1, but Front/Back artwork is fitted inside
 * it with contain so no projection pixels are cropped. SVG fallback and WebP
 * consumer therefore share identical full-scene framing. */
.mc-svg-face-thumb,
.mc-svg-face-button__thumb {
    aspect-ratio: 1 / 1;
}
.mc-svg-face-button__thumb > svg,
.mc-svg-face-button__thumb > img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    transition: none !important;
}

/* MC_MATERIAL_TRANSITION_CONTROLLER_V1
 * Preserve the previously visible framed object while the incoming material
 * textures decode, then dissolve it over the already mounted canonical SVG.
 * The scene itself is not duplicated, so the product background never dims. */
.mc-svg-material-transition-layer {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    transition: opacity .20s cubic-bezier(.22,.61,.36,1);
    will-change: opacity;
}
.mc-svg-material-transition-layer > svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.mc-svg-material-transition-layer.is-holding {
    opacity: 1;
}
.mc-svg-material-transition-layer.is-fading {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .mc-svg-material-transition-layer {
        display: none !important;
        transition: none !important;
    }
}