/* Hide the Elessi sidebar-toggle floating button — covers the live preview at mobile breakpoints. */
body.mcc-active .nasa-toggle-layout-side-sidebar.nasa-sidebar-single-product,
body.mcc-active .nasa-toggle-layout-side-sidebar {
    display: none !important;
}

/* `clip` (not `hidden`) so position:sticky on descendants still works; defends against full-bleed cards / WAPF inline widths overflowing the viewport. */
body.mcc-active {
    overflow-x: clip !important;
}
@supports not (overflow-x: clip) {
    body.mcc-active {
        overflow-x: hidden !important;
    }
}
.mcc-form,
.mcc-preview,
.mcc-toolbar {
    --mcc-gap:          1.25rem;
    --mcc-gap-sm:       .5rem;
    --mcc-radius:       6px;
    --mcc-radius-lg:    10px;
    --mcc-fg:           currentColor;
    --mcc-muted:        rgba(0, 0, 0, .55);
    --mcc-border:       rgba(0, 0, 0, .22);
    --mcc-border-hover: rgba(0, 0, 0, .42);
    --mcc-accent:       #222;
    --mcc-bg:           transparent;
    --mcc-surface:      rgba(255, 255, 255, .85);
    --mcc-danger:       #a02622;
    --mcc-soft-pink:        rgba(255, 220, 230, .55);
    --mcc-soft-pink-border: rgba(160, 38, 34, .18);
    font-family: inherit;
    font-size: inherit;
    color: var(--mcc-fg);
}

.mcc-preview-card {
    --mcc-gap:          1.25rem;
    --mcc-gap-sm:       .5rem;
    --mcc-radius:       6px;
    --mcc-radius-lg:    10px;
    --mcc-fg:           currentColor;
    --mcc-muted:        rgba(0, 0, 0, .55);
    --mcc-border:       rgba(0, 0, 0, .22);
    --mcc-border-hover: rgba(0, 0, 0, .42);
    --mcc-accent:       #222;
    --mcc-surface:      rgba(255, 255, 255, .85);
    --mcc-danger:       #a02622;
    --mcc-soft-pink:        rgba(255, 220, 230, .55);
    --mcc-soft-pink-border: rgba(160, 38, 34, .18);
    font-family: inherit;

    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1rem 1.25rem;
    background: var(--mcc-surface);
    border: none;
    border-radius: var(--mcc-radius-lg);
    box-shadow: 0 2px 28px rgba(0, 0, 0, .09);
    max-width: 640px;
    margin: 0 auto 2rem;
}
.mcc-preview-card__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--mcc-fg);
    letter-spacing: .01em;
}
.mcc-preview-card__subtitle {
    margin: 0 0 .25rem;
    font-size: .88em;
    color: var(--mcc-muted);
    line-height: 1.35;
}

.mcc-preview {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 240px;
}

/* Touch-device override (not gated on viewport width) — `pan-y` lets vertical finger swipes scroll the page; taps and horizontal drags still reach Konva. */
@media (pointer: coarse) {
    .mcc-preview__stage { touch-action: pan-y; }
    .mcc-toolbar             { order: 1; margin-top: .6rem; margin-bottom: 0; }
    .mcc-preview__size-info  { order: 2; }
}
.mcc-preview__wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mcc-gap-sm);
}
.mcc-preview__stage-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
}
.mcc-preview__stage {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: var(--mcc-radius-lg);
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden;
    touch-action: none;
}
.mcc-preview__stage canvas,
.mcc-preview__stage .konvajs-content {
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mcc-hint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease-out;
    z-index: 3;
}
.mcc-hint-overlay.is-visible { opacity: 1; }
.mcc-hint-overlay__pill {
    background: rgba(0, 0, 0, .82);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .88em;
    line-height: 1.35;
    max-width: calc(100% - 2rem);
    text-align: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
.mcc-preview__size-info {
    font-size: .9em;
    color: var(--mcc-muted);
    text-align: center;
    padding: .25rem .5rem;
}
.mcc-preview__size-info strong { color: var(--mcc-fg); font-weight: 600; }

.mcc-toolbar {
    display: none !important; /* hidden on all devices per Agapios request — gestures + uploader remove cover all actions */
    order: -1;
    flex-wrap: nowrap;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    padding: .55rem .6rem;
    background: var(--mcc-surface);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: var(--mcc-radius);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-bottom: .75rem;
}
.mcc-toolbar__group {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    justify-content: center;
}
.mcc-toolbar__label {
    font-size: .72em;
    color: var(--mcc-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .1rem;
}
.mcc-toolbar__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--mcc-border);
    border-radius: 999px;
    padding: .35rem .8rem;
    font: inherit;
    font-size: .88em;
    cursor: pointer;
    color: var(--mcc-fg);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: background .1s, border-color .1s, opacity .1s;
}
.mcc-toolbar__btn:hover:not(:disabled) { background: rgba(0, 0, 0, .04); border-color: var(--mcc-border-hover); }
.mcc-toolbar__btn:disabled { opacity: .4; cursor: not-allowed; }
.mcc-toolbar__btn--danger { color: #525252 !important; border-color: rgba(0, 0, 0, .12) !important; background: transparent !important; }
.mcc-toolbar__btn--danger:hover:not(:disabled) { background: rgba(0, 0, 0, .07) !important; border-color: rgba(0, 0, 0, .2) !important; }

.mcc-toolbar__shape {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: var(--mcc-radius);
}

.mcc-toolbar__nudge,
.mcc-toolbar__destructive {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: .25rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
/* Icon-only 36x36 circle button; caption visually-hidden via .mcc-sr-only. !important defeats NASA + Woo + WAPF button styling. */
.mcc-toolbar__iconbtn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 40px !important;
    min-height: 44px !important;
    padding: 4px 5px 3px !important;
    font: inherit;
    font-size: 1rem;
    line-height: 1 !important;
    color: #525252 !important;       /* soft neutral — readable on any light background without being harsh */
    cursor: pointer;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    transition: background .1s, color .1s, opacity .1s, border-color .1s;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.mcc-toolbar__iconbtn:hover:not(:disabled) { background: rgba(0, 0, 0, .07) !important; color: #2a2a2a !important; }
.mcc-toolbar__iconbtn:active:not(:disabled) { background: rgba(0, 0, 0, .12) !important; }
.mcc-toolbar__iconbtn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, .4) !important;
    outline-offset: 1px !important;
}
.mcc-toolbar__iconbtn:disabled { opacity: .5; cursor: not-allowed; }
/* Higher-specificity rescue: NASA theme .nasa-xxx button selectors beat the class-only rule above. */
.mcc-toolbar .mcc-toolbar__iconbtn {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: transparent !important;
    color: #525252 !important;
    flex-direction: column !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn:hover:not(:disabled) { background: rgba(0, 0, 0, .07) !important; }
.mcc-toolbar__iconbtn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none;
}
.mcc-toolbar__iconbtn-caption {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .5)) !important;
    pointer-events: none;
}
.mcc-sr-only {
    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;
}
/* Inline SVG over unicode glyphs — iOS WebKit renders unicode arrows as colour emoji. */
.mcc-toolbar__iconbtn svg {
    width: 18px !important;
    height: 18px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    flex-shrink: 0;
}
/* Recenter — safe undo-transform action; disabled until image selected. */
.mcc-toolbar .mcc-toolbar__iconbtn--recenter {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid rgba(0, 0, 0, .18) !important;
    border-radius: 8px !important;
    color: #525252 !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--recenter:hover:not(:disabled) {
    background: rgba(255, 255, 255, .85) !important;
    border-color: rgba(0, 0, 0, .28) !important;
    color: #2a2a2a !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--recenter:active:not(:disabled) {
    background: rgba(0, 0, 0, .06) !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--recenter:disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}

.mcc-toolbar .mcc-toolbar__iconbtn--danger {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #525252 !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--danger:hover:not(:disabled) {
    background: rgba(0, 0, 0, .07) !important;
    border-color: rgba(0, 0, 0, .1) !important;
    color: #2a2a2a !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--danger:active:not(:disabled) {
    background: rgba(0, 0, 0, .12) !important;
    color: #1a1a1a !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--danger:disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}
.mcc-toolbar__divider {
    width: 1px;
    height: 32px;
    background: rgba(0, 0, 0, .1);
    margin: 0 .25rem;
    flex-shrink: 0;
    align-self: center;
}
@media (pointer: coarse) {
    .mcc-toolbar__divider { height: 36px; }
}

.mcc-toolbar .mcc-toolbar__iconbtn--solo {
    border-radius: 8px !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--solo:hover:not(:disabled) {
    background: rgba(0, 0, 0, .07) !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--solo:active:not(:disabled) {
    background: rgba(0, 0, 0, .12) !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--startover {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
}
.mcc-toolbar .mcc-toolbar__iconbtn--startover:focus-visible {
    outline: 2px solid rgba(0, 0, 0, .4) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

@media (pointer: coarse) {
    .mcc-toolbar__iconbtn-icon { width: 20px !important; height: 20px !important; }
    .mcc-toolbar__iconbtn svg  { width: 20px !important; height: 20px !important; }
    .mcc-toolbar__shape   { width: 46px; height: 46px; }
}
.mcc-toolbar__shape-glyph {
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
}

.mcc-hint {
    margin: 0 0 .5rem;
    font-size: .85em;
    color: var(--mcc-muted);
    font-style: italic;
}

.mcc-form {
    display: flex;
    flex-direction: column;
    gap: var(--mcc-gap);
    margin: var(--mcc-gap) 0;
}
.mcc-field { display: flex; flex-direction: column; }
.mcc-label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--mcc-fg);
}
.mcc-label small { color: var(--mcc-muted); font-weight: 400; margin-left: .25rem; font-size: .85em; }
.mcc-required { color: var(--mcc-danger); margin-left: .15rem; font-weight: 700; }

/* Inline error below a blank field. Anchored by JS; revealed once the field is touched or after add-to-cart attempt. */
.mcc-error {
    display: block;
    color: var(--mcc-danger);
    font-size: .85rem;
    line-height: 1.35;
    margin-top: .4rem;
    padding: .35rem .55rem;
    background: rgba(160, 38, 34, .06);
    border-left: 3px solid var(--mcc-danger);
    border-radius: 3px;
    animation: mcc-error-in .15s ease-out;
}
@keyframes mcc-error-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Visual gating only — pointer-events stay live so a click triggers validate({reveal: true}). */
.mcc-cta-disabled,
.mcc-cta-disabled:hover,
.mcc-cta-disabled:focus {
    background: #cccccc !important;
    background-color: #cccccc !important;
    background-image: none !important;
    color: #888888 !important;
    border-color: rgba(0, 0, 0, .08) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    opacity: .7 !important;
    filter: none;
}

.mcc-section {
    border: 1px solid var(--mcc-border);
    border-radius: var(--mcc-radius-lg);
    padding: 1rem 1.1rem 1.1rem;
    margin: 0;
    background: var(--mcc-surface);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .025);
}
.mcc-section__legend {
    padding: 0 .5rem 0 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    color: var(--mcc-fg);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}
.mcc-section__legend:hover .mcc-section__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mcc-section__title { font-size: 1.15rem; font-weight: 700; }
.mcc-section__hint {
    margin: -.4rem 0 .15rem;
    font-size: .85em;
    color: var(--mcc-muted);
    line-height: 1.4;
}

.mcc-textrow { display: flex; flex-direction: column; gap: .4rem; }
.mcc-sublabel {
    font-weight: 600;
    font-size: .9rem;
    color: var(--mcc-fg);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.mcc-sublabel small { color: var(--mcc-muted); font-weight: 400; font-size: .8em; }
.mcc-sublabel__value {
    font-weight: 500;
    color: var(--mcc-muted);
    font-variant-numeric: tabular-nums;
    font-size: .85em;
}
.mcc-helptext { color: var(--mcc-muted); font-size: .78em; line-height: 1.4; }

/* iOS Safari hides the default thumb — we draw our own. */
.mcc-range {
    width: 100%;
    accent-color: var(--mcc-accent, #7f54b3);
    margin: .15rem 0 0;
    height: 26px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.mcc-range::-webkit-slider-runnable-track {
    height: 6px;
    background: rgba(0, 0, 0, .12);
    border-radius: 3px;
}
.mcc-range::-moz-range-track {
    height: 6px;
    background: rgba(0, 0, 0, .12);
    border-radius: 3px;
}
.mcc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mcc-accent, #222);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    margin-top: -8px;
    cursor: pointer;
}
.mcc-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mcc-accent, #222);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
}
.mcc-range:focus-visible { outline: none; }
.mcc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(127, 84, 179, .35); }
.mcc-range:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px rgba(127, 84, 179, .35); }

.mcc-select,
.mcc-textarea {
    width: 100%;
    max-width: 100%;
    padding: .6rem .7rem;
    min-height: 44px;
    border: 1px solid var(--mcc-border);
    border-radius: var(--mcc-radius);
    font: inherit;
    color: var(--mcc-fg);
    background: transparent;
    box-sizing: border-box;
    transition: border-color .1s, box-shadow .1s;
}
.mcc-select:hover,
.mcc-textarea:hover { border-color: var(--mcc-border-hover); }
.mcc-select:focus-visible,
.mcc-textarea:focus-visible {
    outline: none;
    border-color: var(--mcc-accent);
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25);
}
.mcc-textarea { resize: vertical; min-height: 60px; }

/* Hide WAPF's dropzone — our uploader is primary. */
body.mcc-active .wapf-field-file { display: none !important; }

.mcc-uploader { position: relative; }
.mcc-uploader__dropzone {
    position: relative;
    border: 2px dashed var(--mcc-border);
    border-radius: var(--mcc-radius-lg);
    padding: 1.2rem 1rem;
    text-align: center;
    background: rgba(0, 0, 0, .02);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcc-uploader__dropzone.is-dragover {
    border-color: var(--mcc-accent);
    background: rgba(0, 0, 0, .04);
}
.mcc-uploader__dropzone.is-done {
    border-style: solid;
    border-color: rgba(0, 120, 90, .28);
    background: rgba(0, 120, 90, .04);
    min-height: 0;
    padding: .65rem 1rem;
    cursor: default;
}
.mcc-uploader__dropzone.is-done .mcc-uploader__input {
    pointer-events: none;
}
.mcc-uploader__dropzone:focus-visible {
    outline: none;
    border-color: var(--mcc-accent);
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25);
}
.mcc-uploader__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.mcc-uploader__prompt {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    color: var(--mcc-muted);
}
.mcc-uploader__prompt strong { color: var(--mcc-fg); font-size: 1em; }
.mcc-uploader__prompt small { color: var(--mcc-muted); font-size: .85em; }

.mcc-uploader__progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.mcc-uploader__bar {
    height: 6px;
    background: var(--mcc-accent);
    width: 0%;
    border-radius: 3px;
    transition: width .15s linear;
}
.mcc-uploader__status { color: var(--mcc-muted); font-size: .9em; }

.mcc-uploader__done {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: center;
    color: var(--mcc-fg);
    font-weight: 600;
}
.mcc-uploader__filename { font-weight: 400; color: var(--mcc-fg); font-size: .95em; word-break: break-all; }
.mcc-uploader__remove {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--mcc-border);
    border-radius: var(--mcc-radius);
    padding: .3rem .7rem;
    font: inherit;
    font-size: .85em;
    cursor: pointer;
    color: var(--mcc-danger);
}
.mcc-uploader__remove:hover { background: rgba(160, 38, 34, .06); border-color: rgba(160, 38, 34, .4); }

.mcc-uploader__error {
    margin-top: .5rem;
    padding: .5rem .7rem;
    background: rgba(160, 38, 34, .08);
    border: 1px solid rgba(160, 38, 34, .25);
    color: var(--mcc-danger);
    border-radius: var(--mcc-radius);
    font-size: .9em;
}

.mcc-color-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 96px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(0, 0, 0, .25);
    border-radius: var(--mcc-radius);
    cursor: pointer;
    background: transparent;
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.mcc-color-input:hover  {
    border-color: rgba(0, 0, 0, .55);
    transform: translateY(-1px);
}
.mcc-color-input:active { transform: translateY(0); }
.mcc-color-input:focus-visible {
    outline: none;
    border-color: var(--mcc-accent);
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25);
}
.mcc-color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.mcc-color-input::-webkit-color-swatch { border: none; border-radius: 3px; }
.mcc-color-input::-moz-color-swatch     { border: none; border-radius: 3px; }

/* WAPF border-color swatches — :has(input:checked) needs Safari 15.4+ (no selected state on older browsers). */
body.mcc-active .wapf-swatch.wapf-swatch--image {
    border: 2px solid rgba(0, 0, 0, .18);
    border-radius: var(--mcc-radius, 6px);
    padding: 2px;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, box-shadow .12s, transform .08s;
    overflow: hidden;
}
body.mcc-active .wapf-swatch.wapf-swatch--image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--mcc-radius, 6px) - 2px);
}
body.mcc-active .wapf-swatch.wapf-swatch--image:hover {
    border-color: rgba(0, 0, 0, .45);
    transform: translateY(-1px);
}
body.mcc-active .wapf-swatch.wapf-swatch--image:has(input:checked) {
    border-color: var(--mcc-accent, #222);
    border-width: 3px;
    padding: 1px;
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25);
}
.mcc-textstyle {
    display: inline-flex;
    gap: 0;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}
.mcc-textstyle__opt {
    padding: .55rem 1rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mcc-fg);
    font: inherit;
    font-size: .9em;
    transition: background .1s, color .1s, box-shadow .1s;
    position: relative;
}
.mcc-textstyle__opt input { position: absolute; opacity: 0; pointer-events: none; }
.mcc-textstyle__opt:has(input:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--mcc-accent);
    z-index: 1;
}

.mcc-disclaimer {
    font-size: .85em;
    color: var(--mcc-muted);
    font-style: italic;
    margin: 0;
}

@media (max-width: 900px) {
    .mcc-preview-card {
        padding: .75rem .75rem 1rem;
    }
    .mcc-preview-card__title  { font-size: 1em; }
    .mcc-toolbar              { gap: .5rem .6rem; padding: .45rem .5rem; }
    .mcc-toolbar__btn         { padding: .3rem .6rem; font-size: .85em; }
    .mcc-toolbar__shape       { width: 36px; height: 36px; }
    .mcc-toolbar__label       { font-size: .65em; }
}

@media (max-width: 600px) {
    .mcc-preview-card {
        padding: .65rem .5rem .8rem;
        margin-bottom: 1rem;
        border-radius: var(--mcc-radius);
    }
    .mcc-preview-card__title    { font-size: .95em; }
    .mcc-preview-card__subtitle { font-size: .8em; }
    .mcc-preview                { min-height: 0; }
    /* min(100%, 48vh) clamps both dims so the canvas stays SQUARE via aspect-ratio; pure max-height would let a wide column stretch the canvas to a rectangle. */
    .mcc-preview__stage         {
        max-width: min(100%, 48vh);
        margin-left: auto;
        margin-right: auto;
        touch-action: pan-y;
    }
    .mcc-toolbar {
        order: 1;
        margin-top: .6rem;
        margin-bottom: 0;
        gap: .4rem;
        padding: .45rem .5rem;
    }
    .mcc-preview__size-info { order: 2; }
    .mcc-toolbar__group {
        flex-wrap: wrap;
        gap: .4rem;
    }
    .mcc-toolbar__iconbtn {
        width: auto !important;
        height: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 4px 6px 3px !important;
    }
    .mcc-toolbar__iconbtn-icon { width: 18px !important; height: 18px !important; }
    .mcc-toolbar__iconbtn svg  { width: 18px !important; height: 18px !important; }

    .mcc-form  { gap: 1rem; margin: 1rem 0; }
    .mcc-label { margin-bottom: .3rem; font-size: .95em; }
    .mcc-section            { padding: .85rem .9rem 1rem; gap: .75rem; }
    .mcc-section__title     { font-size: 1.05rem; }
    .mcc-section__hint      { margin-top: -.25rem; }

    .mcc-textstyle {
        width: 100%;
        flex-wrap: wrap;
    }
    .mcc-textstyle__opt {
        flex: 1 1 auto;
        text-align: center;
        padding: .55rem .75rem;
        min-height: 44px;
    }

    .mcc-color-input        { max-width: 100%; height: 48px; }

    .mcc-uploader__dropzone {
        min-height: 120px;
        padding: 1.1rem .8rem;
        border-width: 2px;
        background: rgba(127, 84, 179, .04);
    }
    .mcc-uploader__prompt strong { font-size: 1.05em; }

    body.mcc-active .wapf-image-swatch-wrapper {
        --apf-col-width: 90px !important;
        gap: .35rem;
    }
    body.mcc-active .wapf-image-swatch-wrapper img {
        max-width: 100%;
        height: auto;
    }

    body.mcc-active form.variations_form > .variations,
    body.mcc-active .wapf-field-container,
    body.mcc-active .mcc-section {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }
}

@media (max-width: 440px) {
    .mcc-section__legend    { gap: .45rem; }
    .mcc-preview__stage     { max-width: min(100%, 42vh); }
}

body.mcc-active form.variations_form {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
}

/* Mobile/touch full layout takeover: flow is title -> price -> description -> size -> flavor -> border -> upload -> inscription -> style -> preview -> variant price -> qty -> add-to-cart. */
@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active .row.focus-info {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        /* Zero Foundation/Elessi negative margins — display:contents on columns stops compensating for them; row otherwise sticks 15px past viewport. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.mcc-active .row.focus-info > .product-gallery,
    body.mcc-active .row.focus-info > .product-info,
    body.mcc-active .row.focus-info > .product-info.rtl-left,
    body.mcc-active .row.focus-info > .nasa-product-info-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Promote every non-Woo wrapper to display:contents so leaf controls collapse into siblings of form.cart. */
    body.mcc-active .row.focus-info .product-info,
    body.mcc-active .row.focus-info .product-info.rtl-left,
    body.mcc-active .row.focus-info .nasa-product-info-wrap,
    body.mcc-active .row.focus-info form.variations_form,
    body.mcc-active .row.focus-info form.variations_form .wapf,
    body.mcc-active .row.focus-info form.variations_form .wapf .wapf-wrapper,
    body.mcc-active .row.focus-info form.variations_form .wapf-input-fields,
    body.mcc-active .row.focus-info form.variations_form .wapf .wapf-field-group,
    body.mcc-active .row.focus-info form.variations_form .mcc-form {
        display: contents !important;
    }

    /* NO !important here — Woo sets inline display:none on .single_variation_wrap pre-selection,
       and we want display:contents to apply only AFTER Woo removes that inline style. */
    body.mcc-active .row.focus-info form.variations_form .single_variation_wrap,
    body.mcc-active .row.focus-info form.variations_form .woocommerce-variation-add-to-cart {
        display: contents;
    }

    /* YITH WAPO override defense — YITH ships form.cart:has(#yith-wapo-container .yith-wapo-block){display:block!important} at (1,1,1); we bump to (1,3,1) with our own :has(). */
    body.mcc-active .row.focus-info form.variations_form:has(#yith-wapo-container),
    body.mcc-active .row.focus-info form.cart:has(#yith-wapo-container) {
        display: contents !important;
    }

    body.mcc-active .row.focus-info > .product-gallery,
    body.mcc-active .row.focus-info > .product-gallery.rtl-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Force full-row width on form-field cards across mobile/touch — without these, tablet portrait (600-1023px) shrink-fits to ~50%. */
    body.mcc-active form.variations_form > .variations,
    body.mcc-active .wapf-field-container,
    body.mcc-active .mcc-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.mcc-active .row.focus-info .variations                             { order: 10 !important; }
    body.mcc-active .row.focus-info .wapf-field-select                      { order: 20 !important; }
    body.mcc-active .row.focus-info .wapf-field-image-swatch                { order: 30 !important; }
    body.mcc-active .row.focus-info .mcc-section--upload                    { order: 40 !important; }
    body.mcc-active .row.focus-info .wapf-field-textarea                    { order: 50 !important; }
    body.mcc-active .row.focus-info .mcc-section--textgroup                 { order: 60 !important; }
    body.mcc-active .row.focus-info form.variations_form .single_variation  { order: 80 !important; }
    body.mcc-active .row.focus-info form.variations_form .quantity          { order: 85 !important; }
    body.mcc-active .row.focus-info form.variations_form button.single_add_to_cart_button,
    body.mcc-active .row.focus-info form.variations_form .single_add_to_cart_button { order: 90 !important; }

    body.mcc-active .woocommerce-product-details__short-description {
        font-size: .82rem !important;
        line-height: 1.35 !important;
        margin-top: .25rem !important;
        margin-bottom: .35rem !important;
        opacity: .85 !important;
    }
    body.mcc-active .woocommerce-product-details__short-description p {
        font-size: inherit !important;
        line-height: inherit !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    /* Belt-and-suspenders alongside display:contents — when display:contents fails, this clamp keeps the column edge-to-edge. */
    body.mcc-active .row.focus-info > .product-info,
    body.mcc-active .row.focus-info > .product-info.rtl-left,
    body.mcc-active .row.focus-info > .product-gallery,
    body.mcc-active .row.focus-info > .product-gallery.rtl-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }

    body.mcc-active .mcc-preview-card {
        margin-top: 0;
        margin-bottom: 0;
    }

    body.mcc-active form.variations_form button.single_add_to_cart_button {
        width: 100% !important;
        min-height: 56px;
        font-size: 1.05em;
        font-weight: 600;
        padding: .85rem 1.2rem;
        margin: .5rem 0 1.5rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    }
}

body.mcc-active form.variations_form .mcc-form,
body.mcc-active form.variations_form .wapf,
body.mcc-active form.variations_form .wapf .wapf-wrapper,
body.mcc-active form.variations_form .wapf-input-fields,
body.mcc-active form.variations_form .wapf .wapf-field-group,
body.mcc-active form.variations_form .single_variation_wrap,
body.mcc-active form.variations_form .woocommerce-variation-add-to-cart {
    display: contents !important;
}

body.mcc-active form.variations_form .variations               { order: 10; }  /* Size */
body.mcc-active form.variations_form .wapf-field-select         { order: 20; }  /* Flavor */
body.mcc-active form.variations_form .wapf-field-image-swatch   { order: 30; }  /* Border */
body.mcc-active form.variations_form .mcc-section--upload       { order: 40; }  /* Upload */
body.mcc-active form.variations_form .wapf-field-textarea       { order: 50; }  /* Inscription */
body.mcc-active form.variations_form .mcc-section--textgroup    { order: 60; }  /* Style */

body.mcc-active form.variations_form .single_variation         { order: 89; }
body.mcc-active form.variations_form .quantity                  { order: 90; }
body.mcc-active form.variations_form button.single_add_to_cart_button,
body.mcc-active form.variations_form .single_add_to_cart_button { order: 91; }

body.mcc-active form.variations_form input[type="hidden"] {
    order: 99;
    display: none;
}

body.mcc-active form.variations_form input[name="mcc_state"],
body.mcc-active form.variations_form input[name="mcc_rendered_png"],
body.mcc-active form.variations_form input[name="mcc_overlay_png"],
body.mcc-active form.variations_form input[name="mcc_upload_id"],
body.mcc-active form.variations_form input[name="mcc_upload_url"],
body.mcc-active form.variations_form input[name="mcc_upload_token"] {
    display: none;
}

body.mcc-active form.variations_form > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body.mcc-active form.variations_form .wapf-field-input,
body.mcc-active form.variations_form .wapf-image-swatch-wrapper,
body.mcc-active form.variations_form select,
body.mcc-active form.variations_form textarea,
body.mcc-active form.variations_form input[type="text"],
body.mcc-active form.variations_form input[type="email"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body.mcc-active .wapf-image-swatch-wrapper {
    width: 100%;
    box-sizing: border-box;
}
body.mcc-active .wapf-image-swatch-wrapper > * {
    min-width: 0;
    max-width: 100%;
}
body.mcc-active .wapf-image-swatch-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active .wapf-image-swatch-wrapper {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
        gap: .4rem !important;
    }

    body.mcc-active .product-gallery {
        display: none !important;
    }

    body.mcc-active form.cart .mcc-preview-card--in-form {
        position: static !important;
        top: auto !important;
        margin: 0 0 .9rem !important;
        padding: .5rem 0 .55rem !important;
        background: var(--mcc-bg, #fcf6e9) !important;
        border: none !important;
        border-radius: var(--mcc-radius, 12px) !important;
        box-shadow:
            0 4px 12px -4px rgba(0, 0, 0, .12),
            0 1px 4px rgba(0, 0, 0, .06) !important;
        gap: .35rem !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview-card__title {
        font-size: .9rem !important;
        margin: 0 !important;
        padding: 0 .8rem !important;
        text-align: center !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview-card__subtitle {
        display: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview__stage {
        max-width: 100% !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview__size-info {
        display: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar {
        margin: .4rem .65rem 0 !important;
        padding: .35rem .4rem !important;
        gap: .35rem !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar__nudge,
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar__divider {
        display: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar__iconbtn {
        width: auto !important;
        height: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 4px 6px 3px !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar__iconbtn-icon {
        width: 16px !important;
        height: 16px !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar__iconbtn svg {
        width: 16px !important;
        height: 16px !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar__divider {
        height: 24px !important;
    }

    body.mcc-active form.cart .mcc-preview-card--in-form:not(.is-revealed) {
        opacity: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        box-shadow: none !important;
        transform: translateY(-6px) !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form {
        transition:
            opacity .32s ease,
            transform .32s ease,
            max-height .32s ease,
            margin .32s ease,
            padding .32s ease !important;
        max-height: 1200px;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form.is-revealed {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Drag tip — !important defends against NASA theme styling bare <p> in product info column. */
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview-tip {
        margin: .25rem .9rem 0 !important;
        padding: .35rem .6rem !important;
        font-size: .78rem !important;
        line-height: 1.3 !important;
        color: var(--mcc-muted, rgba(60, 40, 20, .78)) !important;
        background: rgba(255, 255, 255, .55) !important;
        border: 1px solid rgba(0, 0, 0, .08) !important;
        border-radius: 10px !important;
        text-align: center !important;
        opacity: 0;
        transition: opacity .28s ease !important;
        pointer-events: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview-tip.is-visible {
        opacity: 1;
    }
    /* Reduced-motion: skip the fade entirely. */
    @media (prefers-reduced-motion: reduce) {
        body.mcc-active form.cart .mcc-preview-card--in-form,
        body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview-tip {
            transition: none !important;
        }
        body.mcc-active form.cart .mcc-preview-card--in-form:not(.is-revealed) {
            transform: none !important;
        }
    }

    /* Landscape escape hatch — phone in landscape has too little vertical room for a pinned canvas. */
    @media (orientation: landscape) and (max-height: 500px) {
        body.mcc-active form.cart .mcc-preview-card--in-form {
            position: static !important;
            top: auto !important;
        }
        body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview__stage {
            max-width: min(100%, 28vh) !important;
        }
    }

}

@media (max-width: 767px) {
    body.mcc-active form.cart .mcc-preview-card--in-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview__stage-wrap {
        max-width: min(65vw, 260px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview__stage {
        max-width: 100% !important;
        border-radius: var(--mcc-radius, 12px) !important;
        border: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form:not(.is-revealed) {
        opacity: 1 !important;
        max-height: 400px !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        box-shadow: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-toolbar {
        display: none !important;
    }
    body.mcc-active form.cart .mcc-preview-card--in-form .mcc-preview-card__title {
        display: none !important;
    }
}

@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active form.variations_form > .variations,
    body.mcc-active form.variations_form > .variations tbody,
    body.mcc-active form.variations_form > .variations tr,
    body.mcc-active form.variations_form > .variations td,
    body.mcc-active form.variations_form > .variations select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1023px) {
    .elementor-39016 { display: none !important; }
}

/* Tablets/phones (<=1023px): hide product title+short description on steps 2-6 — context chip already surfaces Size/Flavor. */
@media (max-width: 1023px) {
    body.mcc-step-2 .product_title, body.mcc-step-2 .entry-title,
    body.mcc-step-3 .product_title, body.mcc-step-3 .entry-title,
    body.mcc-step-4 .product_title, body.mcc-step-4 .entry-title,
    body.mcc-step-5 .product_title, body.mcc-step-5 .entry-title,
    body.mcc-step-6 .product_title, body.mcc-step-6 .entry-title {
        display: none !important;
    }
    body.mcc-step-2 .woocommerce-product-details__short-description,
    body.mcc-step-3 .woocommerce-product-details__short-description,
    body.mcc-step-4 .woocommerce-product-details__short-description,
    body.mcc-step-5 .woocommerce-product-details__short-description,
    body.mcc-step-6 .woocommerce-product-details__short-description {
        display: none !important;
    }
}

/* width:100% + box-sizing:border-box defend against WAPF inline style="width:100%" being beaten by align-self:auto shrink-fit. */
body.mcc-active form.variations_form > .variations,
body.mcc-active .wapf-field-container {
    background: var(--mcc-surface, rgba(255,255,255,.6));
    border: 1px solid var(--mcc-border, rgba(0,0,0,.14));
    border-radius: var(--mcc-radius-lg, 10px);
    padding: 1rem 1.1rem 1.1rem;
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .025);
}
/* Unconditional width clamp — defeats every observed shrink-fit failure on form-field cards. */
body.mcc-active .wapf-field-container,
body.mcc-active table.variations,
body.mcc-active form.variations_form > .variations {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    flex-basis: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}
/* .variations is a <table> — flatten it to behave like a form row. */
body.mcc-active form.variations_form > .variations,
body.mcc-active form.variations_form > .variations tbody,
body.mcc-active form.variations_form > .variations tr,
body.mcc-active form.variations_form > .variations td,
body.mcc-active form.variations_form > .variations th {
    display: block;
}
body.mcc-active form.variations_form > .variations th.label label {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: .5rem !important;
    display: block;
    color: var(--mcc-fg, currentColor);
}
body.mcc-active form.variations_form > .variations select {
    width: 100%;
    padding: .6rem .7rem;
    min-height: 44px;
    border: 1px solid var(--mcc-border, rgba(0,0,0,.14));
    border-radius: var(--mcc-radius, 6px);
    font: inherit;
    background: #fff;
}
body.mcc-active .wapf-field-label label {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mcc-fg, currentColor);
    display: inline-block;
    margin-bottom: .5rem;
    line-height: 1.25;
}
/* On step 5 the WAPF inscription textarea is the "Bottom text" line — hide WAPF's own label
   (admin-controlled, says "Include an Inscription") and replace it with our own header so the
   wizard reads consistently with the plugin-owned "Top text" card above and "Bottom text colors"
   card below. */
body.mcc-step-5 .wapf-field-container.wapf-field-textarea > .wapf-field-label {
    display: none !important;
}
/* The "Bottom text" heading mirrors the step-5 "Top text (optional)" section title exactly
   (see `form.cart[data-mcc-step="5"] .mcc-section__legend .mcc-section__title` — now 1.1rem / 700).
   (4.6.1) Marked "(optional)" to match Top text — both lines are optional. */
body.mcc-step-5 .wapf-field-container.wapf-field-textarea::before {
    content: "Bottom text (optional)";
    display: block;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--mcc-fg, #222) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin-bottom: .35rem !important;
    line-height: 1.2 !important;
}
@media (max-width: 600px) {
    body.mcc-step-5 .wapf-field-container.wapf-field-textarea::before {
        font-size: 1.02rem !important;
    }
}
body.mcc-active .wapf-field-label .required,
body.mcc-active .wapf-field-label abbr.required {
    color: var(--mcc-danger, #a02622);
    text-decoration: none;
    margin-left: .15rem;
}

body.mcc-active .wapf-field-container select,
body.mcc-active .wapf-field-container textarea,
body.mcc-active .wapf-field-container input[type="text"],
body.mcc-active .wapf-field-container input[type="email"] {
    width: 100%;
    padding: .6rem .7rem;
    min-height: 44px;
    border: 1px solid var(--mcc-border);
    border-radius: var(--mcc-radius, 6px);
    font: inherit;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .12s, box-shadow .12s;
}
body.mcc-active .wapf-field-container select:hover,
body.mcc-active .wapf-field-container textarea:hover,
body.mcc-active .wapf-field-container input[type="text"]:hover,
body.mcc-active .wapf-field-container input[type="email"]:hover {
    border-color: var(--mcc-border-hover);
}
body.mcc-active .wapf-field-container select:focus-visible,
body.mcc-active .wapf-field-container textarea:focus-visible,
body.mcc-active .wapf-field-container input[type="text"]:focus-visible,
body.mcc-active .wapf-field-container input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--mcc-accent);
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25);
}

body.mcc-active form.variations_form .single_variation .price {
    font-size: 1.1rem;
}

body.mcc-active form.variations_form .reset_variations {
    font-size: .8em;
    color: var(--mcc-muted, rgba(0,0,0,.55));
    margin-left: .5rem;
}

.mcc-admin-preview {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    border: 2px dashed #7f54b3;
    border-radius: 8px;
    background: #faf7ff;
    font-size: 14px;
    color: #333;
}
.mcc-admin-preview__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}
.mcc-admin-preview__header strong {
    color: #4a2b7a;
    font-size: 15px;
}
.mcc-admin-preview__badge {
    display: inline-block;
    padding: 2px 8px;
    background: #7f54b3;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.mcc-admin-preview__hint {
    margin: 0 0 .75rem 0;
    color: #555;
    font-size: 13px;
    line-height: 1.4;
}
.mcc-admin-preview__row {
    margin-bottom: .5rem;
}
.mcc-admin-preview__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #4a2b7a;
}
.mcc-admin-preview__label input {
    font-size: 14px;
    padding: .45rem .6rem;
    border: 1px solid #c9b8e4;
    border-radius: 4px;
    background: #fff;
}
.mcc-admin-preview__label input:focus {
    outline: none;
    border-color: #7f54b3;
    box-shadow: 0 0 0 2px rgba(127, 84, 179, .2);
}
.mcc-admin-preview__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}
.mcc-admin-preview__send {
    background: #7f54b3 !important;
    border-color: #6a44a0 !important;
    color: #fff !important;
}
.mcc-admin-preview__send:hover {
    background: #6a44a0 !important;
}
.mcc-admin-preview__send[disabled] {
    opacity: .6;
    cursor: not-allowed;
}
.mcc-admin-preview__status {
    font-size: 13px;
    font-weight: 500;
}
.mcc-admin-preview__status.is-pending { color: #6a44a0; }
.mcc-admin-preview__status.is-ok      { color: #2e7d32; }
.mcc-admin-preview__status.is-error   { color: #b00020; }

/* MULTI-STEP WIZARD — data-mcc-step="N" on form.cart hides [data-mcc-stepof] not matching N. */

form.cart[data-mcc-step] [data-mcc-stepof]      { transition: opacity .15s ease; }
form.cart[data-mcc-step="1"] [data-mcc-stepof]:not([data-mcc-stepof="1"]) { display: none !important; }
form.cart[data-mcc-step="2"] [data-mcc-stepof]:not([data-mcc-stepof="2"]) { display: none !important; }
form.cart[data-mcc-step="3"] [data-mcc-stepof]:not([data-mcc-stepof="3"]) { display: none !important; }
form.cart[data-mcc-step="4"] [data-mcc-stepof]:not([data-mcc-stepof="4"]) { display: none !important; }
form.cart[data-mcc-step="5"] [data-mcc-stepof]:not([data-mcc-stepof="5"]) { display: none !important; }
form.cart[data-mcc-step="6"] [data-mcc-stepof]:not([data-mcc-stepof="6"]) { display: none !important; }

/* DON'T blanket-hide .single_variation_wrap or .woocommerce-variation-add-to-cart on non-final steps.
   WAPF renders Flavor/Border INSIDE those wrappers via woocommerce_before_add_to_cart_button —
   hiding the parent hides WAPF descendants. Hide leaf elements only. */

form.cart .mcc-step-actions { order: 100 !important; }

/* .row.focus-info defaults to align-items:stretch — the right column otherwise stretches to match the tall left preview, leaving phantom empty space above the action row. */
body.mcc-active .row.focus-info {
    align-items: flex-start !important;
}
body.mcc-active .row.focus-info > .product-info,
body.mcc-active .row.focus-info > .summary,
body.mcc-active .row.focus-info > .entry-summary,
body.mcc-active .row.focus-info > .columns {
    align-self: flex-start !important;
}

body.mcc-active form.variations_form {
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
}

body.mcc-active form.variations_form[data-mcc-step="1"],
body.mcc-active form.variations_form[data-mcc-step="2"],
body.mcc-active form.variations_form[data-mcc-step="3"],
body.mcc-active form.variations_form[data-mcc-step="4"] {
    gap: .5rem !important;
}

/* Cart UI only on step 6 (Review). Hide LEAF elements; never .woocommerce-variation-add-to-cart
   or .single_variation_wrap — WAPF renders Flavor/Border inside those wrappers. */
form.cart[data-mcc-step="1"] .quantity,
form.cart[data-mcc-step="1"] .single_add_to_cart_button,
form.cart[data-mcc-step="1"] .single_variation,
form.cart[data-mcc-step="1"] .price,
form.cart[data-mcc-step="1"] .reset_variations,
form.cart[data-mcc-step="1"] .woocommerce-variation-price,
form.cart[data-mcc-step="1"] .woocommerce-variation-availability,
form.cart[data-mcc-step="2"] .quantity,
form.cart[data-mcc-step="2"] .single_add_to_cart_button,
form.cart[data-mcc-step="2"] .single_variation,
form.cart[data-mcc-step="2"] .price,
form.cart[data-mcc-step="2"] .reset_variations,
form.cart[data-mcc-step="2"] .woocommerce-variation-price,
form.cart[data-mcc-step="2"] .woocommerce-variation-availability,
form.cart[data-mcc-step="3"] .quantity,
form.cart[data-mcc-step="3"] .single_add_to_cart_button,
form.cart[data-mcc-step="3"] .single_variation,
form.cart[data-mcc-step="3"] .price,
form.cart[data-mcc-step="3"] .reset_variations,
form.cart[data-mcc-step="3"] .woocommerce-variation-price,
form.cart[data-mcc-step="3"] .woocommerce-variation-availability,
form.cart[data-mcc-step="4"] .quantity,
form.cart[data-mcc-step="4"] .single_add_to_cart_button,
form.cart[data-mcc-step="4"] .single_variation,
form.cart[data-mcc-step="4"] .price,
form.cart[data-mcc-step="4"] .reset_variations,
form.cart[data-mcc-step="4"] .woocommerce-variation-price,
form.cart[data-mcc-step="4"] .woocommerce-variation-availability,
form.cart[data-mcc-step="5"] .quantity,
form.cart[data-mcc-step="5"] .single_add_to_cart_button,
form.cart[data-mcc-step="5"] .single_variation,
form.cart[data-mcc-step="5"] .price,
form.cart[data-mcc-step="5"] .reset_variations,
form.cart[data-mcc-step="5"] .woocommerce-variation-price,
form.cart[data-mcc-step="5"] .woocommerce-variation-availability {
    display: none !important;
}

/* NASA strips native chevrons and styles WAPF selects as borderless cards — force an inline-SVG chevron so "Choose an option" reads as a control. */
form.cart select#pa_size,
form.cart select[name^="attribute_"],
form.cart .wapf-field-container select.wapf-input,
form.cart select.wapf-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px 18px !important;
    border: 1px solid var(--mcc-border, rgba(0, 0, 0, .18)) !important;
    border-radius: var(--mcc-radius, 8px) !important;
    box-shadow: none !important;
    padding: .65rem 42px .65rem .9rem !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--mcc-fg, #222) !important;
    cursor: pointer !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
form.cart select#pa_size:hover,
form.cart select[name^="attribute_"]:hover,
form.cart .wapf-field-container select.wapf-input:hover,
form.cart select.wapf-input:hover {
    border-color: var(--mcc-border-hover, rgba(0, 0, 0, .35)) !important;
}
form.cart select#pa_size:focus,
form.cart select[name^="attribute_"]:focus,
form.cart .wapf-field-container select.wapf-input:focus,
form.cart select.wapf-input:focus {
    outline: none !important;
    border-color: var(--mcc-accent, #222) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) !important;
}

/* NASA .plus/.minus use absolute positioning that resolves to the wrong ancestor here; force position:relative on the wrapper. */
form.cart[data-mcc-step="6"] .quantity {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    margin: 0 .9rem 0 0 !important;
    padding: 0 !important;
    vertical-align: middle;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}
form.cart[data-mcc-step="6"] .quantity input.qty,
form.cart[data-mcc-step="6"] .quantity input[type="number"] {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 .35rem !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--mcc-fg, #222) !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .18) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
form.cart[data-mcc-step="6"] .quantity input.qty::-webkit-inner-spin-button,
form.cart[data-mcc-step="6"] .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Flex order enforces visual [-] [input] [+] regardless of DOM order (NASA renders [+] [input] [-]). */
form.cart[data-mcc-step="6"] .quantity .minus,
form.cart[data-mcc-step="6"] .quantity .qty-down,
form.cart[data-mcc-step="6"] .quantity [data-action="minus"] { order: 1 !important; }
form.cart[data-mcc-step="6"] .quantity input.qty,
form.cart[data-mcc-step="6"] .quantity input[type="number"]   { order: 2 !important; }
form.cart[data-mcc-step="6"] .quantity .plus,
form.cart[data-mcc-step="6"] .quantity .qty-up,
form.cart[data-mcc-step="6"] .quantity [data-action="plus"]   { order: 3 !important; }

form.cart[data-mcc-step="6"] .quantity .plus,
form.cart[data-mcc-step="6"] .quantity .minus,
form.cart[data-mcc-step="6"] .quantity .qty-up,
form.cart[data-mcc-step="6"] .quantity .qty-down,
form.cart[data-mcc-step="6"] .quantity [data-action="plus"],
form.cart[data-mcc-step="6"] .quantity [data-action="minus"],
form.cart[data-mcc-step="6"] .quantity button,
form.cart[data-mcc-step="6"] .quantity a {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, .05) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 6px !important;
    color: var(--mcc-fg, #222) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
form.cart[data-mcc-step="6"] .quantity .plus:hover,
form.cart[data-mcc-step="6"] .quantity .minus:hover,
form.cart[data-mcc-step="6"] .quantity .qty-up:hover,
form.cart[data-mcc-step="6"] .quantity .qty-down:hover {
    background: rgba(0, 0, 0, .1) !important;
    border-color: rgba(0, 0, 0, .25) !important;
}

/* 4.5.3: step-5 text sections are FLAT — no card boxes (kills the border-in-border clutter
   + the 4.5.2 bottom-card seam). Only the inputs/toggles/swatches keep borders; the three
   groups are separated by spacing + headings + subtle full-width dividers (added below). */
form.cart[data-mcc-step="5"] .mcc-section,
form.cart[data-mcc-step="5"] .wapf-field-container,
form.cart[data-mcc-step="5"] .woocommerce-variation-add-to-cart {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
form.cart[data-mcc-step="5"] .mcc-section {
    gap: .55rem !important;
}
form.cart[data-mcc-step="5"] .mcc-section__hint,
form.cart[data-mcc-step="5"] .mcc-helptext {
    font-size: .78em !important;
    margin: -.15rem 0 .1rem !important;
    color: var(--mcc-muted) !important;
}

form.cart[data-mcc-step="5"] .mcc-uploader__dropzone {
    min-height: 84px !important;
    padding: .65rem 1rem !important;
    border-radius: var(--mcc-radius, 8px) !important;
    border-color: rgba(0, 0, 0, .12) !important;
    background: rgba(0, 0, 0, .015) !important;
}
form.cart[data-mcc-step="5"] .mcc-uploader__dropzone.is-done {
    border-style: solid !important;
    border-color: rgba(0, 120, 90, .28) !important;
    background: rgba(0, 120, 90, .04) !important;
    min-height: 0 !important;
}
form.cart[data-mcc-step="5"] .mcc-uploader__prompt {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem .65rem !important;
    line-height: 1.3 !important;
}
form.cart[data-mcc-step="5"] .mcc-uploader__prompt strong {
    font-size: .95em !important;
}
form.cart[data-mcc-step="5"] .mcc-uploader__prompt span,
form.cart[data-mcc-step="5"] .mcc-uploader__prompt small {
    font-size: .82em !important;
    color: var(--mcc-muted) !important;
}
form.cart[data-mcc-step="5"] .mcc-uploader__prompt small::before {
    content: "·";
    margin-right: .45rem;
    color: var(--mcc-muted);
}

form.cart[data-mcc-step="5"] .wapf-field-container textarea.wapf-input,
form.cart[data-mcc-step="5"] textarea.wapf-input {
    min-height: 64px !important;
    max-height: 140px !important;
    padding: .55rem .7rem !important;
    border-radius: var(--mcc-radius, 8px) !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    background: #fff !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
    resize: vertical !important;
}
@media (min-width: 600px) {
    form.cart[data-mcc-step="5"] .mcc-section--textgroup {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 1rem !important;
        row-gap: .65rem !important;
    }
    form.cart[data-mcc-step="5"] .mcc-section--textgroup > .mcc-section__legend,
    form.cart[data-mcc-step="5"] .mcc-section--textgroup > .mcc-section__hint,
    form.cart[data-mcc-step="5"] .mcc-section--textgroup > .mcc-textrow--style {
        grid-column: 1 / -1;
    }
}

form.cart[data-mcc-step="5"] .mcc-section__legend {
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: var(--mcc-fg, #222) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-weight: 700 !important;
    width: auto !important;
}
/* (4.6.1) Text-step headings made clear + bold again. 4.5.2 had shrunk them to 1rem/600 to match the
   WAPF "Bottom text" pseudo-heading; now BOTH are 1.1rem/700 so each section reads as a real heading. */
form.cart[data-mcc-step="5"] .mcc-section__legend .mcc-section__title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--mcc-fg, #222) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
@media (max-width: 600px) {
    form.cart[data-mcc-step="5"] .mcc-section__legend .mcc-section__title {
        font-size: 1.02rem !important;
    }
}
form.cart[data-mcc-step="5"] .mcc-textrow {
    gap: .25rem !important;
}
form.cart[data-mcc-step="5"] .mcc-sublabel {
    font-size: .85rem !important;
    margin: 0 !important;
}
form.cart[data-mcc-step="5"] .mcc-range {
    margin: 0 !important;
}

form.cart[data-mcc-step="5"] .mcc-textstyle {
    border: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: var(--mcc-radius, 6px) !important;
    background: transparent !important;
    overflow: hidden !important;          /* clips the selected fill to the group's rounded corners */
}
form.cart[data-mcc-step="5"] .mcc-textstyle__opt {
    background: transparent !important;
    border-right: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 0 !important;          /* let the GROUP own the rounding */
}
form.cart[data-mcc-step="5"] .mcc-textstyle__opt:last-child {
    border-right: 0 !important;
}
form.cart[data-mcc-step="5"] .mcc-textstyle__opt:hover {
    background: rgba(0, 0, 0, .04) !important;
}
form.cart[data-mcc-step="5"] .mcc-textstyle__opt:has(input:checked) {
    background: var(--mcc-accent, #222) !important;
    color: #fff !important;
}

form.cart[data-mcc-step="5"] .mcc-color-card {
    background: transparent !important;
    border: 0 !important;
    padding: .25rem 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
form.cart[data-mcc-step="5"] .mcc-color-card:hover {
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
}
form.cart[data-mcc-step="5"] .mcc-color-card:focus-within {
    border: 0 !important;
    box-shadow: none !important;
}
form.cart[data-mcc-step="5"] .mcc-color-card:focus-within .mcc-color-card__chip {
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25), inset 0 0 0 1px rgba(255, 255, 255, .6) !important;
    border-color: var(--mcc-accent, #222) !important;
}

form.cart[data-mcc-step="5"] .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: column !important;
    gap: .55rem !important;
    margin-top: 0 !important;
    padding: .75rem .9rem .85rem !important;
    background: var(--mcc-surface, #fff) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: var(--mcc-radius-lg, 10px) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    margin-top: 0 !important;
    padding: .75rem .9rem .85rem !important;
    background: var(--mcc-surface, #fff) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: var(--mcc-radius-lg, 10px) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
form.cart[data-mcc-step="6"] .single_add_to_cart_button {
    flex: 1 1 auto !important;
    min-width: 200px !important;
}

form.cart[data-mcc-step="5"] .mcc-section,
form.cart[data-mcc-step="5"] .wapf-field-container,
form.cart[data-mcc-step="5"] .single_variation_wrap,
form.cart[data-mcc-step="5"] .woocommerce-variation-add-to-cart,
form.cart[data-mcc-step="6"] .single_variation_wrap,
form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.mcc-step-1 .summary > .price,
body.mcc-step-1 .entry-summary > .price,
body.mcc-step-1 .product-summary > .price,
body.mcc-step-1 .product-info > .price,
body.mcc-step-1 .product-info .price,
body.mcc-step-2 .summary > .price,
body.mcc-step-2 .entry-summary > .price,
body.mcc-step-2 .product-summary > .price,
body.mcc-step-2 .product-info > .price,
body.mcc-step-2 .product-info .price,
body.mcc-step-3 .summary > .price,
body.mcc-step-3 .entry-summary > .price,
body.mcc-step-3 .product-summary > .price,
body.mcc-step-3 .product-info > .price,
body.mcc-step-3 .product-info .price,
body.mcc-step-4 .summary > .price,
body.mcc-step-4 .entry-summary > .price,
body.mcc-step-4 .product-summary > .price,
body.mcc-step-4 .product-info > .price,
body.mcc-step-4 .product-info .price,
body.mcc-step-5 .summary > .price,
body.mcc-step-5 .entry-summary > .price,
body.mcc-step-5 .product-summary > .price,
body.mcc-step-5 .product-info > .price,
body.mcc-step-5 .product-info .price {
    display: none !important;
}

/* JS mirrors the resolved price into the theme's top-of-summary block, so the form-bottom copy is redundant. */
form.cart .single_variation,
form.cart .woocommerce-variation,
form.cart .woocommerce-variation-price,
form.cart .woocommerce-variation-availability,
form.cart .woocommerce-variation-description {
    display: none !important;
}

form.cart[data-mcc-step="5"] .single_variation_wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.mcc-active .woocommerce-product-details__short-description,
body.mcc-active .product-info > p,
body.mcc-active .summary > p,
body.mcc-active .entry-summary > p {
    max-width: 56ch;
    line-height: 1.5;
}

.mcc-context-chip {
    display: none !important;
}
@media (max-width: 600px) {
    .mcc-context-chip:not([hidden]) {
        display: none !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: -.25rem auto 1rem !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
    }
    .mcc-context-chip__pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 12px 4px 4px !important;
        background: #fff !important;
        border: 1px solid rgba(127, 84, 179, .25) !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: var(--mcc-fg, #2a2226) !important;
    }
    .mcc-context-chip__label {
        display: inline-block !important;
        padding: 3px 9px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        color: #fff !important;
        background: var(--mcc-accent, #7f54b3) !important;
        border-radius: 999px !important;
    }
    .mcc-context-chip__value {
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
}

.mcc-stepper-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 0 1.25rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
    position: relative;
}

/* Inset = 100/(2N)% so the connecting line ends at first + last badge centres. */
.mcc-stepper-nav::before {
    content: "";
    position: absolute;
    left: 16.67%;                             /* default: 3 steps */
    right: 16.67%;
    top: 18px;                                /* aligns with badge centers */
    height: 2px;
    background: rgba(0, 0, 0, .12);
    z-index: 0;
}
.mcc-stepper-nav[data-step-count="2"]::before { left: 25%;   right: 25%;   }
.mcc-stepper-nav[data-step-count="4"]::before { left: 12.5%; right: 12.5%; }
.mcc-stepper-nav[data-step-count="5"]::before { left: 10%;    right: 10%;   }
.mcc-stepper-nav[data-step-count="6"]::before { left: 8.33%;  right: 8.33%; }

.mcc-step-head {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .4rem !important;
    padding: 0 .35rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    user-select: none;
    color: #5a5a5a !important;
    text-align: center;
    position: relative;
    z-index: 1;                               /* above the connecting line */
    min-width: 0;
}
.mcc-step-head:hover {
    color: var(--mcc-fg, #222) !important;
}
.mcc-step-head:focus-visible {
    outline: 2px solid var(--mcc-accent, #222);
    outline-offset: 4px;
    border-radius: 4px;
}

/* box-shadow: 0 0 0 4px var(--mcc-bg) masks the connecting line at the badge edge. */
.mcc-step-head__num {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--mcc-muted, #888) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(0, 0, 0, .12) !important;
    box-shadow: 0 0 0 4px var(--mcc-bg, #fcf6e9);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mcc-step-head--active .mcc-step-head__num {
    background: var(--mcc-accent, #222) !important;
    color: #fff !important;
    border-color: var(--mcc-accent, #222) !important;
}
.mcc-step-head--complete .mcc-step-head__num {
    background: #2e7d32 !important;
    color: #fff !important;
    border-color: #2e7d32 !important;
    font-size: 0 !important;
}
.mcc-step-head--complete .mcc-step-head__num::before {
    content: "✓";
    font-size: 1.1rem;
    line-height: 1;
}
.mcc-step-head--active   { color: var(--mcc-accent, #222) !important; }
.mcc-step-head--complete { color: var(--mcc-fg, #222) !important; }

.mcc-step-head__main {
    display: flex !important;
    flex-direction: column !important;
    gap: .1rem !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0;
}
.mcc-step-head__title {
    font-weight: 600 !important;
    font-size: .85rem !important;
    line-height: 1.2 !important;
    color: inherit !important;
    background: transparent !important;
    text-decoration: none !important;
}
.mcc-step-head__summary {
    font-size: .75rem !important;
    color: #5a5a5a !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.mcc-step-head__summary--filled {
    color: var(--mcc-fg, #222) !important;
    font-weight: 600 !important;
}
.mcc-step-head--active .mcc-step-head__summary { display: none !important; }
.mcc-step-head__chevron { display: none !important; }

@keyframes mcc-step-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.mcc-step-head--shake .mcc-step-head__num {
    animation: mcc-step-shake .45s ease-in-out;
    border-color: var(--mcc-danger) !important;
    background: rgba(160, 38, 34, .06) !important;
    color: var(--mcc-danger) !important;
}

.mcc-step-head--locked {
    cursor: not-allowed !important;
    opacity: .55 !important;
}
.mcc-step-head--locked:hover {
    color: var(--mcc-muted, #888) !important;
}

/* Anchored to the bottom of form.cart so Previous + Continue stay in the same screen position on every step. */
.mcc-step-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: .5rem 0 .25rem !important;
    padding: 1rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08) !important;
    width: 100%;
}
.mcc-step-actions__spacer { flex: 0 0 auto; width: 1px; }

.mcc-step-continue {
    flex: 0 0 auto !important;
    padding: .75rem 1.5rem !important;
    background: var(--mcc-accent, #222) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--mcc-radius, 8px) !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15) !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mcc-step-continue:hover,
.mcc-step-continue:focus {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22) !important;
}
.mcc-step-continue:active {
    transform: translateY(1px);
    box-shadow: none !important;
    background: #000 !important;
    color: #fff !important;
}
/* Continue stays clickable when the step isn't satisfied — click reveals errors + shakes the head. */
.mcc-step-continue.mcc-cta-disabled,
.mcc-step-continue.mcc-cta-disabled:hover,
.mcc-step-continue.mcc-cta-disabled:focus {
    background: rgba(0, 0, 0, .25) !important;
    color: #fff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: .85;
}

.mcc-step-prev {
    flex: 0 0 auto !important;
    padding: .75rem 1.25rem !important;
    background: transparent !important;
    color: var(--mcc-fg, #222) !important;
    border: 1.5px solid rgba(0, 0, 0, .15) !important;
    border-radius: var(--mcc-radius, 8px) !important;
    font-weight: 500 !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: border-color .12s ease, background .12s ease;
}
.mcc-step-prev:hover,
.mcc-step-prev:focus {
    background: rgba(0, 0, 0, .04) !important;
    color: var(--mcc-fg, #222) !important;
    border-color: rgba(0, 0, 0, .3) !important;
}
.mcc-step-prev:active {
    background: rgba(0, 0, 0, .08) !important;
}

@media (max-width: 600px) {
    .mcc-stepper-nav { margin-bottom: 1rem !important; }
    .mcc-step-head__num   { width: 30px !important; height: 30px !important; font-size: .85rem !important; }
    .mcc-step-head--complete .mcc-step-head__num::before { font-size: .95rem; }
    .mcc-step-head__title   { font-size: .72rem !important; }
    .mcc-step-head__summary { font-size: .68rem !important; }
    .mcc-stepper-nav::before { top: 15px; }
    .mcc-step-actions { flex-wrap: wrap; gap: .65rem !important; }
    .mcc-step-continue { padding: .65rem 1.1rem !important; font-size: .9rem !important; }
    .mcc-step-prev     { padding: .65rem 1rem !important; font-size: .85rem !important; }
}
@media (max-width: 380px) {
    /* Very small phones drop to badge-only — easier to read than crushed labels. */
    .mcc-step-head__title   { display: none !important; }
    .mcc-step-head__summary { display: none !important; }
}

.mcc-stepper-nav[data-step-count="6"] .mcc-step-head__num {
    width: 30px !important; height: 30px !important; font-size: .8rem !important;
}
.mcc-stepper-nav[data-step-count="6"] .mcc-step-head__title {
    font-size: .72rem !important;
}
@media (max-width: 540px) {
    .mcc-stepper-nav[data-step-count="6"] .mcc-step-head__title   { display: none !important; }
    .mcc-stepper-nav[data-step-count="6"] .mcc-step-head__summary { display: none !important; }
    .mcc-stepper-nav[data-step-count="6"]::before { top: 15px; }
}

.mcc-overview-section {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    border-radius: var(--mcc-radius-lg, 10px) !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: var(--mcc-gap, 1.25rem) !important;
}
.mcc-overview-title {
    font-size: .9375rem !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0 !important;
    color: var(--mcc-fg, #222) !important;
    letter-spacing: .01em !important;
}
.mcc-overview-table {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mcc-overview-row {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .45rem .6rem !important;
    border-radius: 6px !important;
    background: rgba(0,0,0,.025) !important;
}
.mcc-overview-row dt {
    min-width: 6.5rem !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    flex-shrink: 0 !important;
}
.mcc-overview-row dd {
    margin: 0 !important;
    font-size: .9375rem !important;
    color: var(--mcc-fg, #222) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    min-width: 0 !important;
    word-break: break-word !important;
}
.mcc-overview-swatch {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    flex-shrink: 0 !important;
}
.mcc-overview-thumb {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    flex-shrink: 0 !important;
}
form.cart[data-mcc-step="6"] .single_variation_wrap {
    margin-top: 0 !important;
}
form.cart[data-mcc-step="6"] .woocommerce-variation-price {
    margin-bottom: .5rem !important;
    font-size: 1.1rem !important;
}
form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
}

/* STEP 3 polish — .wapf-field-textarea is stable across WAPF versions (numeric ID class varies). */

body.mcc-active form.cart .wapf-field-container.wapf-field-textarea {
    border: 1px solid var(--mcc-border, rgba(0, 0, 0, .22)) !important;
    border-radius: var(--mcc-radius-lg, 10px) !important;
    padding: 1rem 1.1rem 1.1rem !important;
    margin: 0 !important;
    background: var(--mcc-surface, rgba(255, 255, 255, .85)) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .025) !important;
}

/* 4.5.3: step-5 bottom inscription is FLAT — no card around the WAPF container; only the
   <textarea> inside keeps its own border. A top hairline divides it from the Top-text group
   above. Supersedes the 4.5.2 two-card merge (equal specificity to the base card rule above,
   later in source, so it wins). */
body.mcc-step-5 form.cart .wapf-field-container.wapf-field-textarea {
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 0 !important;
    padding: 1rem 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.mcc-active form.cart .wapf-field-container.wapf-field-textarea .wapf-field-label {
    margin-bottom: .35rem !important;
}
body.mcc-active form.cart .wapf-field-container.wapf-field-textarea .wapf-field-label label {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--mcc-fg, currentColor) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

body.mcc-active form.cart .wapf-field-container.wapf-field-textarea .wapf-field-description {
    display: none !important;
}

/* Color-picker card — native <input type="color"> stacks invisibly so click opens the OS picker. */
.mcc-color-card {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    position: relative !important;
    padding: .55rem .75rem !important;
    min-height: 44px !important;
    background: #fff !important;
    border: 1px solid var(--mcc-border, rgba(0, 0, 0, .22)) !important;
    border-radius: var(--mcc-radius, 6px) !important;
    cursor: pointer !important;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
    user-select: none;
    width: fit-content;
    max-width: 100%;
}
.mcc-color-card:hover {
    border-color: var(--mcc-border-hover, rgba(0, 0, 0, .42)) !important;
    transform: translateY(-1px);
}
.mcc-color-card:active {
    transform: translateY(0);
}
.mcc-color-card:focus-within {
    outline: none !important;
    border-color: var(--mcc-accent, #222) !important;
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .25) !important;
}
.mcc-color-card__icon {
    display: inline-flex !important;
    align-items: center;
    color: var(--mcc-muted, rgba(0, 0, 0, .55));
    flex: 0 0 auto;
}
.mcc-color-card__chip {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, .25) !important;
    background: #fff;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.mcc-color-card__readout {
    font-size: .85rem !important;
    color: var(--mcc-fg, #222) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    flex: 1 1 auto;
    min-width: 7ch;
}
.mcc-color-card .mcc-color-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    opacity: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    pointer-events: auto;
}

.mcc-textstyle__opt .mcc-opt-icon {
    flex: 0 0 auto;
    margin-right: .35rem !important;
    color: currentColor !important;
    vertical-align: middle;
}

/* (4.6.10) Styled-word style toggle: the option's word IS the demo (Straight on a flat line, Curve on an arc).
   overflow:visible so ascenders/the curve aren't clipped by the viewBox; currentColor follows the selected fill. */
.mcc-textstyle__opt .mcc-textstyle__demo {
    width: 108px !important;
    height: 29px !important;         /* 132×38 viewBox + font-size 18 → ~13.7px glyphs (a touch smaller than "Straight") */
    flex: 0 0 auto !important;
    display: block !important;
    overflow: visible !important;
    color: currentColor !important;
    pointer-events: none;            /* clicks fall through to the label/input */
}
.mcc-textstyle__demoword {
    font-family: inherit;
}
@media (max-width: 600px) {
    .mcc-textstyle__opt .mcc-textstyle__demo { width: 96px !important; height: 26px !important; }
}

.mcc-range-ticks {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    list-style: none !important;
    padding: 0 .25rem !important;
    margin: .15rem 0 0 !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
}
.mcc-range-ticks__tick {
    position: relative !important;
    padding-top: .35rem !important;
    text-align: center !important;
    flex: 0 0 auto !important;
}
.mcc-range-ticks__tick::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 1px !important;
    height: 4px !important;
    background: rgba(0, 0, 0, .22) !important;
    transform: translateX(-.5px) !important;
}
.mcc-range-ticks__tick--mid {
    color: var(--mcc-fg, #222) !important;
    font-weight: 600 !important;
}
.mcc-range-ticks__tick--start { text-align: left !important; }
.mcc-range-ticks__tick--end   { text-align: right !important; }
.mcc-range-ticks__tick--start::before { left: .25rem !important; }
.mcc-range-ticks__tick--end::before   { left: auto !important; right: .25rem !important; }

/* Char counter — amber at 70, red at 80 (server cap from mb_substr in class-order-meta.php). */
.mcc-inscription-counter {
    display: block !important;
    margin-top: .35rem !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    transition: color .12s ease;
}
.mcc-inscription-counter[data-state="warn"] {
    color: #b45309 !important;
    font-weight: 600 !important;
}
.mcc-inscription-counter[data-state="full"] {
    color: var(--mcc-danger, #a02622) !important;
    font-weight: 700 !important;
}

.mcc-error::before {
    content: "⚠" !important;
    margin-right: .4rem !important;
    font-size: 1em !important;
    line-height: 1 !important;
    color: var(--mcc-danger, #a02622) !important;
    font-weight: 700 !important;
}

.mcc-section-tip {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    margin: 0 0 -.15rem !important;        /* compensate for .mcc-form flex gap */
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
    font-style: italic !important;
}
.mcc-section-tip__icon {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
    flex: 0 0 auto;
}

.mcc-cta-disabled-hint {
    display: none !important;
}
/* Failsafe: any hint orphaned outside .woocommerce-variation-add-to-cart stays hidden — WAPF can hot-reload children and orphan it back into .mcc-form. */
form.cart .mcc-cta-disabled-hint[data-mcc-role="cart-disabled-hint"]:not(.woocommerce-variation-add-to-cart .mcc-cta-disabled-hint) {
    display: none !important;
    visibility: hidden !important;
}
/* :has() needs Safari 15.4+. */
form.cart[data-mcc-step="6"]:has(.single_add_to_cart_button.mcc-cta-disabled) .woocommerce-variation-add-to-cart .mcc-cta-disabled-hint[data-mcc-stepof="3"] {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    flex: 1 1 100% !important;
    margin: .35rem 0 0 !important;
    padding: 0 !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
    font-size: .82rem !important;
    font-style: italic !important;
    line-height: 1.35 !important;
    background: transparent !important;
    border: 0 !important;
}
.mcc-cta-disabled-hint__icon {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
    flex: 0 0 auto;
}
form.cart .single_add_to_cart_button.mcc-cta-disabled,
form.cart .single_add_to_cart_button.mcc-cta-disabled:hover,
form.cart .single_add_to_cart_button.mcc-cta-disabled:focus {
    cursor: not-allowed !important;
}

form.cart[data-mcc-step="6"] .quantity input.qty,
form.cart[data-mcc-step="6"] .quantity input[type="number"] {
    height: 48px !important;
    min-height: 48px !important;
}
form.cart[data-mcc-step="6"] .quantity .plus,
form.cart[data-mcc-step="6"] .quantity .minus,
form.cart[data-mcc-step="6"] .quantity .qty-up,
form.cart[data-mcc-step="6"] .quantity .qty-down,
form.cart[data-mcc-step="6"] .quantity [data-action="plus"],
form.cart[data-mcc-step="6"] .quantity [data-action="minus"],
form.cart[data-mcc-step="6"] .quantity button,
form.cart[data-mcc-step="6"] .quantity a {
    width: 44px !important;
    height: 48px !important;
    min-width: 44px !important;
    min-height: 48px !important;
}
form.cart[data-mcc-step="6"] .single_add_to_cart_button {
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Previous button cloned into the cart row by _initStep3PrevRelocate. */
form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart .mcc-step-prev {
    flex: 0 0 auto !important;
    order: -1 !important;                   /* first in row, before qty + cart button */
    height: 40px !important;
    min-height: 40px !important;
    padding: .5rem .9rem !important;
    font-size: .85rem !important;
    border-color: rgba(0, 0, 0, .1) !important;
    margin-right: .25rem !important;
}
@media (max-width: 600px) {
    form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart .mcc-step-prev {
        flex: 1 1 100% !important;
        margin-right: 0 !important;
        margin-bottom: .25rem !important;
    }
}

.mcc-color-palette {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .45rem !important;
    align-items: center !important;
    margin: .15rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.mcc-color-swatch {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25) !important;
    transition: transform .08s ease, box-shadow .12s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: #fff !important;            /* check glyph color (overridden for light fills below) */
    text-shadow: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
}
.mcc-color-swatch:hover {
    transform: translateY(-1px) !important;
}
.mcc-color-swatch:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(127, 84, 179, .35), inset 0 0 0 1px rgba(255, 255, 255, .25) !important;
}
/* box-shadow (not border-width) for selected ring — width swap would re-flow row dimensions. */
.mcc-color-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--mcc-accent, #222), inset 0 0 0 1px rgba(255, 255, 255, .25) !important;
}
/* Light-fill swatches need a dark check glyph; hardcoded slugs (can't :has() on attribute color values). */
.mcc-color-swatch[data-color-slug="white"],
.mcc-color-swatch[data-color-slug="gold"] {
    color: #1a1a1a !important;
}
.mcc-color-swatch__check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: scale(.6) !important;
    transition: opacity .1s ease, transform .12s ease-out !important;
    pointer-events: none !important;
}
.mcc-color-swatch.is-selected .mcc-color-swatch__check {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.mcc-color-swatch--custom {
    background: conic-gradient(from 0deg, #ff3b30, #ffd60a, #34c759, #00c7be, #007aff, #af52de, #ff2d55, #ff3b30) !important;
    color: #1a1a1a !important;
}
.mcc-color-swatch--custom.is-selected {
    color: #fff !important;
}

/* Hide the native <input type="color">; stays focusable + clickable so input.click() opens the OS picker. */
.mcc-color-input--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;       /* JS calls .click() programmatically */
}

.mcc-color-readout {
    margin: .25rem 0 0 !important;
    padding: 0 !important;
    font-size: .82rem !important;
    line-height: 1.3 !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
}
.mcc-color-readout strong {
    color: var(--mcc-fg, #222) !important;
    font-weight: 600 !important;
    margin-left: .15rem;
}

.mcc-opt-icon--text {
    width: 40px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    margin-right: .4rem !important;
    overflow: visible !important;
}
.mcc-opt-icon--cake {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    margin-right: .4rem !important;
    overflow: visible !important;
}
@media (max-width: 380px) {
    .mcc-opt-icon--text { width: 34px !important; height: 18px !important; }
    .mcc-opt-icon--cake { width: 18px !important; height: 18px !important; }
}

/* First-paint pristine gate — defends against a stale touched=true carried over a WAPF re-render. */
body.mcc-pristine .mcc-error,
body.mcc-pristine .mcc-cta-disabled-hint {
    display: none !important;
    visibility: hidden !important;
}

/* De-emphasize qty on step 3 — 99% of cake orders are qty 1; Add-to-cart is the visual primary. */
form.cart[data-mcc-step="6"] .quantity {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: flex-end !important;
    flex: 0 0 auto !important;
    gap: .35rem !important;
    margin: 0 .65rem 0 0 !important;
}
form.cart[data-mcc-step="6"] .quantity::before {
    content: "Qty" !important;
    flex: 1 0 100% !important;
    display: block !important;
    margin-bottom: .15rem !important;
    margin-left: .1rem !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .55)) !important;
}
form.cart[data-mcc-step="6"] .quantity input.qty,
form.cart[data-mcc-step="6"] .quantity input[type="number"] {
    width: 44px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 .25rem !important;
    font-size: .9rem !important;
    border-color: rgba(0, 0, 0, .08) !important;
    background: #fff !important;
}
form.cart[data-mcc-step="6"] .quantity .plus,
form.cart[data-mcc-step="6"] .quantity .minus,
form.cart[data-mcc-step="6"] .quantity .qty-up,
form.cart[data-mcc-step="6"] .quantity .qty-down,
form.cart[data-mcc-step="6"] .quantity [data-action="plus"],
form.cart[data-mcc-step="6"] .quantity [data-action="minus"],
form.cart[data-mcc-step="6"] .quantity button,
form.cart[data-mcc-step="6"] .quantity a {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: rgba(0, 0, 0, .03) !important;
    border-color: rgba(0, 0, 0, .08) !important;
    font-size: .9rem !important;
    color: var(--mcc-muted, rgba(0, 0, 0, .65)) !important;
}
form.cart[data-mcc-step="6"] .quantity .plus:hover,
form.cart[data-mcc-step="6"] .quantity .minus:hover,
form.cart[data-mcc-step="6"] .quantity .qty-up:hover,
form.cart[data-mcc-step="6"] .quantity .qty-down:hover {
    background: rgba(0, 0, 0, .06) !important;
    border-color: rgba(0, 0, 0, .15) !important;
}
.mcc-section.is-complete .mcc-section__title::after,
.wapf-field-container.is-complete .wapf-label-text::after,
.wapf-field-container.is-complete > label::after {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: .4rem !important;
    border-radius: 50% !important;
    background: #2d8c3e !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5.5 8.5 9 4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 10px !important;
    vertical-align: middle !important;
    animation: mcc-complete-in .22s ease-out !important;
}
@keyframes mcc-complete-in {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active form.cart > .variations,
    body.mcc-active form.cart .wapf-field-container {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body.mcc-active form.cart[data-mcc-step="1"] > .variations,
    body.mcc-active form.cart[data-mcc-step="1"] .wapf-field-container,
    body.mcc-active form.cart[data-mcc-step="2"] .wapf-field-container {
        background-color: transparent !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}


@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active form.cart .mcc-preview-card--in-form,
    body.mcc-active form.cart .mcc-preview-card--in-form:not(.is-revealed) {
        opacity: 1 !important;
        max-height: 1200px !important;
        margin: 0 0 .9rem !important;
        padding: .5rem 0 .55rem !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /* (4.8.0) Show the live preview on ALL six mobile steps — customer asked for it on every step so you
       always feel you're inside the editor. The step-6 hide that used to sit here is gone: the Review
       overview only shows a small thumbnail of the raw uploaded image (.mcc-overview-thumb), NOT the
       rendered cake, so the live in-form preview doesn't duplicate it. This supersedes the old 4.6.10
       step-1/2-only intent and the step-1/2/6 hide block further down. */

    /* (4.8.0) Horizontal inset for the currently-flush text/nav so the column reads uniform on mobile.
       The product title (h1.product_title) + short description (.woocommerce-product-details__short-description)
       are NASA/Elessi theme markup, not ours; the stepper nav is ours. The size table + WAPF cards already
       carry their own .75rem margin, so we DON'T touch them here — that would double-inset. Margin (not
       padding) on the stepper nav keeps its ::before connecting line aligned with the badge centres. */
    body.mcc-active .product-info .product_title.entry-title,
    body.mcc-active .product-info .woocommerce-product-details__short-description {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
    body.mcc-active form.cart .mcc-stepper-nav {
        width: auto !important;
        margin-left: .75rem !important;
        margin-right: .75rem !important;
    }
}

@media (max-width: 600px) {
    .mcc-preview__stage { max-width: min(100%, 38vh) !important; }
}
@media (max-width: 440px) {
    .mcc-preview__stage { max-width: min(100%, 34vh) !important; }
}

@media (max-width: 600px) {
    body.mcc-active form.variations_form table.variations,
    body.mcc-active form.variations_form table.variations tbody,
    body.mcc-active form.variations_form table.variations tr {
        display: block !important;
        width: 100% !important;
    }
    body.mcc-active form.variations_form table.variations th.label,
    body.mcc-active form.variations_form table.variations td.value {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }
    body.mcc-active form.variations_form table.variations th.label {
        margin-bottom: 0 !important;
    }
    body.mcc-active form.variations_form table.variations th.label label {
        margin-bottom: .5rem !important;
        font-weight: 700 !important;
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
    }
    body.mcc-active form.variations_form[data-mcc-step="1"] {
        gap: .65rem !important;
    }
}
@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active .row.focus-info .price.nasa-single-product-price {
        order: 79 !important;
        margin: .25rem 0 !important;
    }
}

@media (max-width: 600px), (pointer: coarse) {
    .mcc-toolbar__iconbtn {
        min-height: 52px !important;
        padding: 4px 4px 3px !important;
    }
    .mcc-toolbar__nudge,
    .mcc-toolbar__destructive {
        gap: 2px !important;
    }
}

@media (max-width: 600px) {
    /* (4.6.3) Compact segmented toggle on mobile — was a full-width grid with a phantom 3rd column (only 2
       styles exist now), which stretched the two buttons and read as two separate big buttons. Now it sizes to
       its content like desktop, so Straight | Curve reads clearly as ONE pick-one toggle. */
    form.cart[data-mcc-step="5"] .mcc-textstyle {
        display: inline-flex !important;
        width: fit-content !important;      /* explicit width so the flex-column parent can't stretch it */
        max-width: 100% !important;
        align-self: flex-start !important;  /* left-align the compact toggle in the column */
        gap: 0 !important;
    }
    form.cart[data-mcc-step="5"] .mcc-textstyle__opt {
        flex: 0 0 auto !important;          /* don't stretch — overrides the generic mobile flex:1 1 auto */
        padding: .5rem 1rem !important;
        min-height: 44px !important;
        font-size: .82em !important;
    }
    form.cart[data-mcc-step="5"] .mcc-textstyle__opt .mcc-opt-icon {
        width: 28px !important;
        height: 16px !important;
    }
}


body.mcc-step-4 .mcc-toolbar {
    display: flex !important;
}
body.mcc-step-4 .mcc-toolbar__nudge,
body.mcc-step-4 .mcc-toolbar__destructive {
    display: inline-flex !important;
}
body.mcc-step-4 .mcc-toolbar__divider {
    display: inline-block !important;
}

/* Tablet+touch: match the (0,4,2) specificity of the in-form preview card hide rule so display:inline-flex wins on source order. */
@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-step-4 form.cart .mcc-preview-card--in-form .mcc-toolbar {
        display: flex !important;
    }
    body.mcc-step-4 form.cart .mcc-preview-card--in-form .mcc-toolbar__nudge,
    body.mcc-step-4 form.cart .mcc-preview-card--in-form .mcc-toolbar__destructive {
        display: inline-flex !important;
    }
    body.mcc-step-4 form.cart .mcc-preview-card--in-form .mcc-toolbar__divider {
        display: inline-block !important;
    }
}

/* Phone: match the (0,4,2) specificity of the in-form toolbar hide rule. */
@media (max-width: 767px) {
    body.mcc-step-4 form.cart .mcc-preview-card--in-form .mcc-toolbar {
        display: flex !important;
    }
}


@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active.mcc-step-3 form.cart .mcc-preview-card--in-form,
    body.mcc-active.mcc-step-5 form.cart .mcc-preview-card--in-form {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* B5 (4.5.0): keep the cake pinned while the customer scrolls the Text-step controls,
       so inscription edits are seen live. Overrides the global `position: static` above
       (higher specificity via .mcc-step-5). --mcc-header-bottom is tracked on <body>. */
    body.mcc-active.mcc-step-5 form.cart .mcc-preview-card--in-form {
        position: sticky !important;
        top: calc(var(--mcc-header-bottom, 0px) + 2px) !important;   /* 4.5.6: sit snug under the header (was +6) */
        z-index: 30 !important;
        background: #fff !important;
        padding-top: .15rem !important;   /* 4.5.6: trim the gap above the cake */
        box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .25) !important;
    }
}

/* Short landscape phones: revert to static so the pinned cake doesn't swallow the viewport. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
    body.mcc-active.mcc-step-5 form.cart .mcc-preview-card--in-form {
        position: static !important;
        box-shadow: none !important;
    }
}

@media (max-width: 600px) {
    body.mcc-step-4 .mcc-toolbar {
        flex-wrap: nowrap !important;
        gap: 2px !important;
        padding: .2rem 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    body.mcc-step-4 .mcc-toolbar__nudge,
    body.mcc-step-4 .mcc-toolbar__destructive {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        gap: 2px !important;
    }
    body.mcc-step-4 .mcc-toolbar__divider {
        width: 0 !important;
        margin: 0 .15rem !important;
    }
    body.mcc-step-4 .mcc-toolbar__iconbtn,
    body.mcc-step-4 form.cart .mcc-preview-card--in-form .mcc-toolbar__iconbtn {
        min-width: 40px !important;
        padding: 4px 2px !important;
    }
    body.mcc-step-4 .mcc-toolbar__iconbtn-caption {
        font-size: .55rem !important;
    }
}

@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active .mcc-step-actions {
        margin-left: .75rem !important;
        margin-right: .75rem !important;
        max-width: calc(100% - 1.5rem) !important;
        box-sizing: border-box !important;
    }
}

body.mcc-active form.cart .mcc-step-actions .mcc-step-continue {
    background: var(--mcc-accent, #222) !important;
    background-color: var(--mcc-accent, #222) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15) !important;
    text-shadow: none !important;
}
body.mcc-active form.cart .mcc-step-actions .mcc-step-continue:hover,
body.mcc-active form.cart .mcc-step-actions .mcc-step-continue:focus {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
}
body.mcc-active form.cart .mcc-step-actions .mcc-step-prev {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--mcc-fg, #222) !important;
    border: 1.5px solid rgba(0, 0, 0, .15) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.mcc-active form.cart .mcc-step-actions .mcc-step-prev:hover,
body.mcc-active form.cart .mcc-step-actions .mcc-step-prev:focus {
    background: rgba(0, 0, 0, .04) !important;
    background-color: rgba(0, 0, 0, .04) !important;
    border-color: rgba(0, 0, 0, .3) !important;
    color: var(--mcc-fg, #222) !important;
}

body.mcc-active form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart .mcc-step-prev {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--mcc-fg, #222) !important;
    border: 1.5px solid rgba(0, 0, 0, .15) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.mcc-active form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart .mcc-step-prev:hover,
body.mcc-active form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart .mcc-step-prev:focus {
    background: rgba(0, 0, 0, .04) !important;
    background-color: rgba(0, 0, 0, .04) !important;
    border-color: rgba(0, 0, 0, .3) !important;
    color: var(--mcc-fg, #222) !important;
}

@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active form.cart .nasa-color-radio,
    body.mcc-active .row.focus-info form.variations_form .nasa-color-radio {
        display: contents !important;
    }
}

/* (4.8.0) The step-1/2/6 mobile preview hide that used to live here has been removed — the customer
   wants the live preview visible on EVERY mobile step. The v4.6.10 "show" block above (opacity/max-height
   restore for .mcc-preview-card--in-form) now governs visibility unopposed on all six steps. */

@media (max-width: 1023px), (pointer: coarse) {
    /* v4.1.4: viewport-based width instead of 100% so the dropdown actually fills the row.
       The previous 100% rule lost the cascade race against shrink-fit flex parents on Step 2
       (Flavor's WAPF select rendered ~65% width even though everything else was full-width).
       calc(100vw - 1.5rem) matches the action-row + size-table math from v3.2.12 so the three
       form sections line up edge-to-edge. */
    body.mcc-active form.cart .wapf .wapf-wrapper .wapf-field-group > .wapf-field-container,
    body.mcc-active form.cart .wapf-wrapper > .wapf-field-group > .wapf-field-container {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        margin-left: .75rem !important;
        margin-right: .75rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.mcc-active form.cart .wapf-field-container > .wapf-field-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    body.mcc-active form.cart .wapf-field-container > .wapf-field-input > select,
    body.mcc-active form.cart .wapf-field-container select.wapf-input {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

body.mcc-active.mcc-step-6 .row.focus-info .woocommerce-variation-add-to-cart,
body.mcc-active form.cart[data-mcc-step="6"] .woocommerce-variation-add-to-cart {
    order: 95 !important;
}

@media (max-width: 1023px), (pointer: coarse) {
    body.mcc-active form.cart .wapf-field-container,
    body.mcc-active form.cart table.variations,
    body.mcc-active form.cart > .variations,
    body.mcc-active form.cart .nasa-color-radio > .variations {
        margin-left: .75rem !important;
        margin-right: .75rem !important;
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
    }
}


.mcc-section--inscription-top {
    border: 1px solid var(--mcc-border, rgba(0, 0, 0, .22)) !important;
    border-radius: var(--mcc-radius-lg, 10px) !important;
    padding: 1rem 1.1rem 1.1rem !important;
    background: var(--mcc-surface, rgba(255, 255, 255, .85)) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .025) !important;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.mcc-section--inscription-top > .mcc-section__legend {
    margin: 0 0 .35rem !important;
    padding: 0 !important;
}
.mcc-section--inscription-top > .mcc-section__legend .mcc-section__title {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--mcc-fg, currentColor) !important;
    line-height: 1.2 !important;
}
.mcc-section--inscription-top .mcc-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 60px !important;
    max-height: 140px !important;
    padding: .55rem .7rem !important;
    border-radius: var(--mcc-radius, 8px) !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    background: #fff !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
    resize: vertical !important;
}

.mcc-section--inscription-top .mcc-line-colors,
.mcc-section--inscription-bottom-style {
    display: flex !important;
    flex-direction: column !important;
    gap: .55rem !important;
    margin: .35rem 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
/* 4.5.3: bottom-line style toggle — FLAT, pulled up close under the bottom textarea so the
   two read as one group (no card, no seam). -.45rem cancels most of the 1rem form flex gap,
   leaving ~.55rem to match the Top-text section's internal textarea→toggle spacing. */
.mcc-section--inscription-bottom-style {
    margin-top: -.45rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* 4.5.3: full-width divider above the shared "Text style" group (flat layout, no box). */
form.cart[data-mcc-step="5"] .mcc-section--textgroup {
    border-top: 1px solid rgba(0, 0, 0, .08) !important;
    padding-top: 1rem !important;
}
.mcc-line-colors__row,
.mcc-bottom-colors__row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .85rem !important;
}
.mcc-line-colors__col,
.mcc-bottom-colors__col {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}
.mcc-line-colors .mcc-sublabel,
.mcc-bottom-colors .mcc-sublabel {
    font-size: .85rem !important;
    margin: 0 !important;
}
.mcc-line-colors .mcc-color-palette .mcc-color-swatch,
.mcc-bottom-colors .mcc-color-palette .mcc-color-swatch {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}
.mcc-line-colors .mcc-color-readout,
.mcc-bottom-colors .mcc-color-readout {
    font-size: .78rem !important;
    margin: .15rem 0 0 !important;
}

@media (max-width: 600px) {
    .mcc-line-colors__row,
    .mcc-bottom-colors__row {
        flex-direction: column;
        gap: .65rem !important;
    }
    .mcc-line-colors__col,
    .mcc-bottom-colors__col {
        flex: 1 1 100%;
    }
}

body.mcc-active form.cart .mcc-section--inscription-top { order: 40 !important; }
body.mcc-active form.cart .wapf-field-container.wapf-field-textarea { order: 50 !important; }
body.mcc-active form.cart .mcc-section--inscription-bottom-style    { order: 55 !important; }
body.mcc-active form.cart .mcc-section--textgroup { order: 60 !important; }

/* ------------------------------------------------------------------ *
 * Print-orientation toggle (Upload / step 4, sheet cakes only)
 * Theme-defensive: NASA/Elessi + WAPF inject onto shared class names,
 * so every visual property here carries !important (see v2.9.2 pattern).
 * ------------------------------------------------------------------ */
.mcc-section--upload .mcc-textrow--orientation {
    display: flex !important;
    flex-direction: column !important;
    gap: .3rem !important;
    margin-top: 1.1rem !important;            /* clear separation from the dropzone / upload error */
    padding-top: 1rem !important;
    border-top: 1px solid rgba(0, 0, 0, .1) !important;   /* reads as its own labelled sub-section */
}
/* The `display:flex !important` above out-ranks the UA `[hidden]{display:none}`, so JS-hiding (round
   cakes) needs an explicit, higher-specificity override or the toggle leaks onto circle cakes. */
.mcc-section--upload .mcc-textrow--orientation[hidden] {
    display: none !important;
}
.mcc-section--upload .mcc-orientation__title {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--mcc-fg, currentColor) !important;
    margin: 0 !important;
    text-transform: none !important;
}
.mcc-section--upload .mcc-orientation__hint {
    margin: 0 0 .15rem !important;
    font-size: .85em !important;
    line-height: 1.35 !important;
    color: var(--mcc-muted) !important;
}
.mcc-section--upload .mcc-orientation__options {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: var(--mcc-radius, 6px) !important;
    background: transparent !important;
    overflow: hidden !important;
}
.mcc-section--upload .mcc-orientation__opt {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    padding: .6rem 1rem !important;
    min-height: 48px !important;
    background: transparent !important;
    color: var(--mcc-fg, currentColor) !important;
    border: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}
.mcc-section--upload .mcc-orientation__opt:last-child { border-right: 0 !important; }
.mcc-section--upload .mcc-orientation__opt:hover { background: rgba(0, 0, 0, .04) !important; }
.mcc-section--upload .mcc-orientation__opt:has(input:checked) {
    background: var(--mcc-accent, #222) !important;
    color: #fff !important;
}
.mcc-section--upload .mcc-orientation__opt:has(input:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--mcc-accent, #7f54b3) !important;
    z-index: 1 !important;
}
.mcc-section--upload .mcc-orientation__opt .mcc-opt-icon--orient {
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    color: currentColor !important;
    margin: 0 !important;
}
.mcc-section--upload .mcc-orientation__optlabel {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
}
.mcc-section--upload .mcc-orientation__optname {
    font-weight: 600 !important;
    font-size: .95rem !important;
}
.mcc-section--upload .mcc-orientation__opthint {
    font-size: .72rem !important;
    opacity: .8 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}
@media (max-width: 600px) {
    .mcc-section--upload .mcc-orientation__options {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }
    .mcc-section--upload .mcc-orientation__opt {
        justify-content: center !important;
        padding: .55rem .5rem !important;
    }
}