/* 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 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);
}
/* (4.10.0) Step 1 (Size) must read as the SAME bordered card as step 2 (Flavor). Size is the
native Woo `table.variations`, which the NASA theme styles and was overriding our card frame
(Flavor's WAPF .wapf-field-container isn't theme-contested, so it needs no !important). Force it. */
body.mcc-active form.variations_form > .variations {
background: var(--mcc-surface, rgba(255,255,255,.6)) !important;
border: 1px solid var(--mcc-border, rgba(0,0,0,.14)) !important;
border-radius: var(--mcc-radius-lg, 10px) !important;
padding: 1rem 1.1rem 1.1rem !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, .025) !important;
}
/* Unconditional width clamp — defeats every observed shrink-fit failure on form-field cards.
(4.10.0) .mcc-section added so the Upload card spans the FULL column width on every size —
round sizes lack the Print-orientation sub-section and were shrink-fitting to ~half on desktop. */
body.mcc-active .wapf-field-container,
body.mcc-active table.variations,
body.mcc-active .mcc-section,
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
— 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,") !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