/* =============================================================
   Fridge Magnet Custom — Frontend CSS
   Styles: upload drop-zones, color swatches, song dropdown
   Design: premium, mobile-first, matches rootsandroutesmagnets.com aesthetic
   ============================================================= */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --fmc-primary      : #1E3A5F;   /* Deep navy */
    --fmc-accent       : #C9973A;   /* Warm gold */
    --fmc-success      : #16A34A;
    --fmc-error        : #DC2626;
    --fmc-border       : #E2E8F0;
    --fmc-bg           : #FAFAF8;   /* Warm off-white */
    --fmc-text         : #1E293B;
    --fmc-text-muted   : #64748B;
    --fmc-radius       : 12px;
    --fmc-shadow       : 0 2px 12px rgba(0,0,0,0.08);
    --fmc-transition   : 0.2s ease;
    --fmc-font         : 'Inter', system-ui, sans-serif;
}

/* ── Section Wrapper ──────────────────────────────────────── */
.fmc-custom-fields {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Field Block ─────────────────────────────────────────── */
.fmc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fmc-label {
    font-family: var(--fmc-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--fmc-text);
    letter-spacing: 0.01em;
}

.fmc-required {
    color: var(--fmc-error);
    margin-left: 3px;
}

/* ── Drop Zone ───────────────────────────────────────────── */
.fmc-dropzone {
    position: relative;
    border: 2px dashed var(--fmc-border);
    border-radius: var(--fmc-radius);
    background: var(--fmc-bg);
    cursor: pointer;
    transition: border-color var(--fmc-transition),
                background   var(--fmc-transition),
                box-shadow   var(--fmc-transition);
    min-height: 100px;
    overflow: hidden;
}

.fmc-dropzone:hover {
    border-color: var(--fmc-accent);
    background: #FFFDF7;
    box-shadow: var(--fmc-shadow);
}

.fmc-dropzone--drag {
    border-color: var(--fmc-primary);
    background: #EEF2FF;
    box-shadow: 0 0 0 4px rgba(30,58,95,0.1);
}

.fmc-dropzone--done {
    border-color: var(--fmc-success);
    border-style: solid;
    background: #F0FDF4;
}

.fmc-dropzone--error {
    border-color: var(--fmc-error);
    border-style: solid;
    background: #FEF2F2;
}

/* Inner prompt */
.fmc-dropzone-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.fmc-drop-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.fmc-drop-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fmc-drop-text strong {
    font-family: var(--fmc-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--fmc-text);
}

.fmc-drop-text span {
    font-family: var(--fmc-font);
    font-size: 12px;
    color: var(--fmc-text-muted);
}

/* Progress bar */
.fmc-progress-wrap {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fmc-progress-bar {
    height: 6px;
    background: var(--fmc-border);
    border-radius: 99px;
    overflow: hidden;
}

.fmc-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--fmc-primary), var(--fmc-accent));
    border-radius: 99px;
    width: 0;
    transition: width 0.1s linear;
}

.fmc-progress-label {
    font-size: 12px;
    font-family: var(--fmc-font);
    color: var(--fmc-text-muted);
    text-align: right;
}

/* Preview area */
.fmc-preview {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fmc-preview-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: var(--fmc-shadow);
}

.fmc-preview-icon {
    font-size: 36px;
    line-height: 1;
}

.fmc-icon-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.fmc-magnet-icon {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

.fmc-magnet-icon__glyph {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.fmc-preview-name {
    font-family: var(--fmc-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fmc-success);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fmc-remove-upload {
    background: none;
    border: 1px solid var(--fmc-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--fmc-error);
    cursor: pointer;
    transition: background var(--fmc-transition), color var(--fmc-transition);
    white-space: nowrap;
}

.fmc-remove-upload:hover {
    background: var(--fmc-error);
    color: #fff;
    border-color: var(--fmc-error);
}

/* Field error message */
.fmc-field-error {
    font-family: var(--fmc-font);
    font-size: 12px;
    color: var(--fmc-error);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fmc-field-error::before {
    content: '⚠';
}


/* ============================================================
   COLOR SWATCHES
   ============================================================ */

.fmc-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 6px 0 10px;
}

/* Each swatch is a vertical stack: colour chip + name label */
.fmc-swatch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* The visible colour chip */
.fmc-swatch-chip {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 14px;                 /* rounded square swatch */
    border: 2px solid rgba(16,57,72,0.12);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--fmc-transition),
                border-color var(--fmc-transition),
                box-shadow var(--fmc-transition);
}

.fmc-swatch--light .fmc-swatch-chip {
    border-color: rgba(16,57,72,0.22);
}

/* Checkmark — hidden until selected */
.fmc-swatch-check {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--fmc-transition), transform var(--fmc-transition);
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    pointer-events: none;
}

/* Light chips need a dark checkmark so it stays visible */
.fmc-swatch--light .fmc-swatch-check {
    color: var(--fmc-primary, #103948);
    text-shadow: none;
}

/* Name label under the chip */
.fmc-swatch-name {
    font-family: var(--fmc-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--fmc-text-muted);
    letter-spacing: .02em;
    transition: color var(--fmc-transition);
}

/* Hover / focus states */
.fmc-swatch:hover:not(.fmc-swatch--oos) .fmc-swatch-chip,
.fmc-swatch:focus-visible .fmc-swatch-chip {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 18px -8px rgba(16,57,72,.4), inset 0 0 0 2px rgba(255,255,255,0.55);
}

/* Selected state — accent ring + checkmark + bold label */
.fmc-swatch--active .fmc-swatch-chip {
    border-color: var(--fmc-accent, #1C6B7D);
    box-shadow: 0 0 0 3px rgba(28,107,125,0.28), inset 0 0 0 2px rgba(255,255,255,0.45);
    transform: scale(1.05);
}

.fmc-swatch--active .fmc-swatch-check {
    opacity: 1;
    transform: scale(1);
}

.fmc-swatch--active .fmc-swatch-name {
    color: var(--fmc-text, #103948);
    font-weight: 700;
}

/* Out-of-stock: diagonal strikethrough overlay + dimmed */
.fmc-swatch--oos {
    cursor: not-allowed;
}

.fmc-swatch--oos .fmc-swatch-chip {
    opacity: 0.4;
}

.fmc-swatch--oos .fmc-swatch-chip::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.5) 4px,
        rgba(0,0,0,0.5) 6px
    );
    border-radius: 13px;
}

/* "Selected: Black" text below swatches */
.fmc-selected-color-name {
    font-family: var(--fmc-font);
    font-size: 13px;
    color: var(--fmc-text-muted);
    min-height: 1.4em;
    margin-top: 2px;
}

.fmc-selected-color-name:not(:empty)::before {
    content: 'Selected: ';
    font-weight: 600;
    color: var(--fmc-text);
}

/* Touch-friendly sizing on small screens */
@media (max-width: 767px) {
    .fmc-swatch-chip {
        width: 52px;
        height: 52px;
    }
    .fmc-color-swatches {
        gap: 16px;
    }
}


/* ============================================================
   SONG / SELECT2 OVERRIDES
   ============================================================ */

select.select2-hidden-accessible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
}

.fmc-song-select + .select2-container {
    width: 100% !important;
}

.fmc-song-field {
    overflow: visible;
    position: relative;
    z-index: 1;
}

.fmc-song-field.is-open {
    z-index: 50;
}

body > .select2-container.fmc-song-dropdown {
    z-index: 100000 !important;
}

.select2-container--open .select2-dropdown.fmc-song-dropdown {
    border-color: rgba(28, 107, 125, .22);
    box-shadow: 0 12px 32px rgba(16, 57, 72, .14);
}

.fmc-song-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fmc-song-option img {
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.fmc-song-preview-panel {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(28, 107, 125, .18);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fcfd 0%, #f3f8fa 100%);
}

.fmc-song-preview-panel__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fmc-song-preview-artwork {
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(16, 57, 72, .12);
}

.fmc-song-preview-panel__meta {
    flex: 1;
    min-width: 0;
}

.fmc-song-preview-panel__meta strong {
    display: block;
    font-size: 14px;
    color: #103948;
    margin-bottom: 4px;
}

.fmc-song-preview-hint {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #5a6b75;
}

.fmc-song-preview-audio {
    width: 100%;
    height: 36px;
}

/* ── Quantity & Add to Cart ──────────────────────────────── */
/* The entire variations_button div stacks vertically (FMC fields, then action row) */
.fmc-single-container .woocommerce-variation-add-to-cart {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* The qty+button row sits at the bottom, side by side */
.fmc-single-container .fmc-action-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 20px !important;
}

.fmc-single-container .quantity {
    width: 120px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.fmc-single-container .fmc-qty-wrapper {
    width: 100% !important;
}

.fmc-single-container .select2-container--default .select2-selection--single {
    height: 46px !important;
    border: 2px solid var(--fmc-border) !important;
    border-radius: var(--fmc-radius) !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--fmc-bg) !important;
    transition: border-color var(--fmc-transition) !important;
}

.fmc-single-container .select2-container--default.select2-container--open .select2-selection--single,
.fmc-single-container .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--fmc-accent) !important;
    box-shadow: 0 0 0 3px rgba(201,151,58,0.15) !important;
}

.fmc-single-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: var(--fmc-font) !important;
    font-size: 14px !important;
    color: var(--fmc-text) !important;
    line-height: 42px !important;
    padding-left: 0 !important;
}

.fmc-single-container .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--fmc-text-muted) !important;
}

.fmc-single-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

.select2-dropdown {
    border: 2px solid var(--fmc-accent);
    border-radius: var(--fmc-radius);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;
}

.select2-search--dropdown {
    padding: 8px;
    border-bottom: 1px solid var(--fmc-border);
}

.select2-search--dropdown .select2-search__field {
    font-family: var(--fmc-font);
    font-size: 13px;
    border: 1px solid var(--fmc-border);
    border-radius: 8px;
    padding: 6px 10px;
    width: 100%;
    outline: none;
    transition: border-color var(--fmc-transition);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--fmc-primary);
}

.select2-results__option {
    font-family: var(--fmc-font);
    font-size: 14px;
    padding: 10px 14px;
    color: var(--fmc-text);
    transition: background var(--fmc-transition);
}

.select2-results__option--highlighted[aria-selected] {
    background: var(--fmc-primary) !important;
    color: #fff !important;
}

/* Custom song text input */
.fmc-text-input {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--fmc-font);
    font-size: 14px;
    color: var(--fmc-text);
    border: 2px solid var(--fmc-border);
    border-radius: var(--fmc-radius);
    background: var(--fmc-bg);
    outline: none;
    transition: border-color var(--fmc-transition), box-shadow var(--fmc-transition);
    box-sizing: border-box;
}

.fmc-text-input:focus {
    border-color: var(--fmc-accent);
    box-shadow: 0 0 0 3px rgba(201,151,58,0.15);
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */

@media ( max-width: 480px ) {
    .fmc-dropzone-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .fmc-swatch-chip {
        width: 48px;
        height: 48px;
    }

    .fmc-preview-img {
        width: 52px;
        height: 52px;
    }
}


/* ============================================================
   INLINE ONE-PAGE CHECKOUT
   ============================================================ */

/* Loading spinner keyframe */
@keyframes fmc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Two-column checkout grid */
.fmc-ic-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: start;
}

@media ( max-width: 860px ) {
    .fmc-ic-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Billing column ─────────────────────────────────────── */
.fmc-ic-billing-col {
    /* Container handled by inline card style */
}

/* WC billing field label */
#fmc-ic-billing-fields label {
    font-family: 'Jost', sans-serif;
    font-size: 11.5px !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #6E7180 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* WC billing inputs */
#fmc-ic-billing-fields input.input-text,
#fmc-ic-billing-fields select,
#fmc-ic-billing-fields textarea {
    width: 100% !important;
    border: 1.5px solid #E2D5C2 !important;
    background: #FAFAF8 !important;
    border-radius: 11px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: 'Jost', sans-serif !important;
    color: #103948 !important;
    outline: none !important;
    transition: border .18s, box-shadow .18s !important;
    box-shadow: none !important;
    height: auto !important;
    box-sizing: border-box !important;
}

#fmc-ic-billing-fields input.input-text:focus,
#fmc-ic-billing-fields select:focus {
    border-color: #1C6B7D !important;
    box-shadow: 0 0 0 3px rgba(28,107,125,.12) !important;
    background: #fff !important;
}

#fmc-ic-billing-fields .form-row {
    margin-bottom: 14px !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
}

/* First name / last name side-by-side */
#fmc-ic-billing-fields .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media ( max-width: 480px ) {
    #fmc-ic-billing-fields .col2-set {
        grid-template-columns: 1fr;
    }
}

/* ── Order summary panel ─────────────────────────────────── */
.fmc-ic-right-col {
    position: sticky;
    top: 96px;
}

.fmc-ic-summary-panel {
    background: #fff;
    border: 1px solid #efe7da;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 24px 50px -40px rgba(16,57,72,.5);
}

/* WC order review table */
#fmc-ic-order-review .woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 0 !important;
    margin-bottom: 16px !important;
}

#fmc-ic-order-review .woocommerce-checkout-review-order-table thead {
    display: none;
}

#fmc-ic-order-review .woocommerce-checkout-review-order-table th,
#fmc-ic-order-review .woocommerce-checkout-review-order-table td {
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #F0E9DC !important;
    font-size: 14px !important;
    color: #103948 !important;
    font-family: 'Jost', sans-serif !important;
}

#fmc-ic-order-review .woocommerce-checkout-review-order-table td.product-total {
    text-align: right !important;
    font-weight: 600 !important;
}

#fmc-ic-order-review .woocommerce-checkout-review-order-table tr.order-total th,
#fmc-ic-order-review .woocommerce-checkout-review-order-table tr.order-total td {
    border-bottom: 0 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

#fmc-ic-order-review .woocommerce-checkout-review-order-table tr.order-total td {
    text-align: right !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
}

/* ── Payment methods ──────────────────────────────────────── */
#fmc-ic-order-review #payment {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-top: 14px !important;
}

#fmc-ic-order-review #payment ul.payment_methods {
    border: 1.5px solid #E2D5C2 !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    padding: 0 !important;
    list-style: none !important;
    background: #fff !important;
    margin-bottom: 16px !important;
}

#fmc-ic-order-review #payment ul.payment_methods li {
    padding: 12px 16px !important;
    border-bottom: 1px solid #E2D5C2 !important;
    margin: 0 !important;
}

#fmc-ic-order-review #payment ul.payment_methods li:last-child {
    border-bottom: 0 !important;
}

#fmc-ic-order-review #payment ul.payment_methods li label {
    display: inline-block !important;
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #103948 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

#fmc-ic-order-review #payment div.payment_box {
    background: #F8F9FA !important;
    border: 1px solid #E2D5C2 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    margin: 10px 0 0 !important;
    font-size: 13px !important;
    color: #6E7180 !important;
    line-height: 1.5 !important;
}

#fmc-ic-order-review #payment div.payment_box::before {
    display: none !important;
}

/* ── Place Order button ───────────────────────────────────── */
#fmc-ic-order-review button#place_order,
#fmc-inline-checkout-form button#place_order {
    width: 100% !important;
    background: #1C6B7D !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 13px !important;
    padding: 17px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Jost', sans-serif !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    box-shadow: 0 14px 30px -12px rgba(28,107,125,.5) !important;
    display: block !important;
    margin-top: 14px !important;
    transition: background .2s, transform .2s !important;
}

#fmc-ic-order-review button#place_order:hover,
#fmc-inline-checkout-form button#place_order:hover {
    background: #15515F !important;
    transform: translateY(-1px) !important;
}

/* ── Required field mark ─────────────────────────────────── */
#fmc-ic-billing-fields .required {
    color: #DC2626;
    margin-left: 2px;
}

/* ── WC validation errors inside inline checkout ─────────── */
#fmc-ic-billing-fields .woocommerce-invalid input {
    border-color: #DC2626 !important;
}

/* ── Back button hover ───────────────────────────────────── */
#fmc-back-to-product:hover {
    background: #F0E9DC !important;
}

/* ── Template picker (trendingcustom-style) ───────────────── */
.fmc-template-field {
    margin-bottom: 8px;
}

.fmc-template-hint {
    font-size: 13px;
    color: var(--fmc-text-muted);
    margin: 0 0 12px;
    line-height: 1.5;
}

.fmc-template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .fmc-template-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fmc-template-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border: 2px solid var(--fmc-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--fmc-transition), box-shadow var(--fmc-transition), transform var(--fmc-transition);
    text-align: left;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fmc-template-card:hover {
    border-color: #A9C9CA;
    box-shadow: var(--fmc-shadow);
    transform: translateY(-2px);
}

.fmc-template-card.is-active {
    border-color: #1C6B7D;
    box-shadow: 0 0 0 3px rgba(28, 107, 125, 0.15);
}

.fmc-template-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #E9E2D6;
}

.fmc-template-card-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fmc-text);
    line-height: 1.3;
    text-align: center;
}

.fmc-tpl-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}

#fmc-photo-window {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible;
    isolation: isolate;
}

#fmc-photo-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.fmc-tpl-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center center;
    pointer-events: none;
    z-index: 4;
}

#fmc-tpl-stage[data-artwork="1"] #fmc-preview-text-layer .fmc-text-slot {
    z-index: 7;
}

.fmc-field.is-hidden-by-template {
    display: none !important;
}

.fmc-product-size-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 22px;
    border-radius: 14px;
    border: 2px solid rgba(28, 107, 125, .25);
    background: linear-gradient(135deg, #E9EFEC 0%, #fff 100%);
    margin-bottom: 18px;
    box-shadow: 0 10px 24px -16px rgba(16, 57, 72, .35);
}

.fmc-product-size-badge .fmc-size-dim {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1C6B7D;
    background: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(28, 107, 125, .2);
}

.fmc-product-size-badge .fmc-size-desc {
    font-weight: 500;
    color: #55596A;
    font-size: 14px;
}

.fmc-template-card-img--custom {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #E9EFEC, #FAF4EA) !important;
    font-size: 32px;
    color: #1C6B7D;
}

.fmc-custom-template-panel {
    margin-top: 16px;
    padding: 18px;
    border: 1.5px dashed rgba(28, 107, 125, .35);
    border-radius: 14px;
    background: rgba(233, 239, 236, .4);
}

.fmc-custom-template-panel.is-hidden {
    display: none;
}

/* ── Background chooser (colour or photo) ──────────────────── */

.fmc-bg-panel {
    margin-top: 16px;
    padding: 16px 18px 18px;
    border: 1.5px solid rgba(28, 107, 125, .18);
    border-radius: 14px;
    background: rgba(233, 239, 236, .35);
}

.fmc-bg-panel.is-hidden {
    display: none;
}

.fmc-bg-mode-tabs {
    display: inline-flex;
    gap: 4px;
    background: #fff;
    border: 1px solid rgba(28, 107, 125, .22);
    border-radius: 999px;
    padding: 4px;
    margin: 6px 0 14px;
}

.fmc-bg-mode-tab {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #55596A;
    cursor: pointer;
    transition: all .15s ease;
}

.fmc-bg-mode-tab.is-active {
    background: #1C6B7D;
    color: #fff;
}

.fmc-bg-mode-body.is-hidden {
    display: none;
}

.fmc-bg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fmc-bg-swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .12);
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, box-shadow .12s ease;
    position: relative;
}

.fmc-bg-swatch:hover {
    transform: scale(1.1);
}

.fmc-bg-swatch.is-active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1C6B7D;
}

.fmc-bg-swatch--picker {
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#f66 0 25%, #6c6 25% 50%, #66f 50% 75%, #fc6 75% 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.fmc-bg-swatch--picker input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Customize flow steps ──────────────────────────────────── */

.fmc-customize-step {
    margin-bottom: 28px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(16, 57, 72, .08);
}

.fmc-customize-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.fmc-customize-step-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1C6B7D;
    margin-bottom: 8px;
}

.fmc-customize-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1C6B7D;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
}

.fmc-customize-step-hint,
.fmc-template-hint {
    font-size: 13.5px;
    line-height: 1.5;
    color: #6E7180;
    margin: 0 0 14px;
}

/* ── Design studio modal (enlarged editor on template select) ─ */

body.fmc-studio-modal-open {
    overflow: hidden;
}

.fmc-design-studio {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

.fmc-design-studio.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fmc-design-studio__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 57, 72, .62);
    backdrop-filter: blur(4px);
}

.fmc-design-studio__dialog {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    max-height: min(94vh, 920px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #f7faf9, #e8f0ed);
    border-radius: 22px;
    border: 1.5px solid rgba(28, 107, 125, .22);
    box-shadow: 0 40px 100px -24px rgba(16, 57, 72, .55);
    overflow: hidden;
    outline: none;
}

.fmc-design-studio__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(28, 107, 125, .14);
    background: rgba(255, 255, 255, .72);
}

.fmc-design-studio__eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1C6B7D;
}

.fmc-design-studio__title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 600;
    color: #103948;
    line-height: 1.15;
}

.fmc-design-studio__close {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #103948;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(16, 57, 72, .45);
    transition: background .2s ease, transform .2s ease;
}

.fmc-design-studio__close:hover {
    background: #E9EFEC;
    transform: scale(1.04);
}

.fmc-design-studio__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 0;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.fmc-design-studio__preview-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 24px 28px;
    background: linear-gradient(160deg, #DEEAE7, #C5DDD8);
    overflow-y: auto;
}

.fmc-design-studio__preview-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fmc-design-studio__preview-slot .fmc-preview-mount-inner {
    width: min(100%, 520px);
}

.fmc-design-studio__preview-slot #magnet-preview-frame {
    box-shadow: 0 52px 90px -30px rgba(16, 57, 72, .65) !important;
}

.fmc-design-studio__preview-slot .fmc-studio-callout {
    width: min(100%, 520px);
}

.fmc-design-studio__sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 20px 20px;
    background: #fff;
    border-left: 1px solid rgba(28, 107, 125, .12);
    overflow: hidden;
}

.fmc-design-studio__sidebar-lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6E7180;
    flex: none;
}

.fmc-design-studio__fields-slot {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fmc-design-studio__fields-slot .fmc-customize-step--details {
    margin: 0;
    padding: 0;
    border: none;
}

.fmc-design-studio__fields-slot .fmc-customize-step-label {
    margin-bottom: 10px;
}

.fmc-design-studio__actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(28, 107, 125, .12);
}

.fmc-design-studio__cta {
    width: 100%;
    text-align: center;
}

.fmc-design-studio__ghost {
    width: 100%;
    text-align: center;
}

.fmc-preview-placeholder {
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
}

.fmc-preview-placeholder__card {
    text-align: center;
    max-width: 320px;
    padding: 28px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    border: 1.5px dashed rgba(28, 107, 125, .28);
}

.fmc-preview-placeholder__icon {
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
}

.fmc-preview-placeholder__title {
    margin: 0 0 8px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    color: #103948;
}

.fmc-preview-placeholder__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6E7180;
}

/* ── Studio mode (sidebar highlight when template selected) ──────── */

.fmc-studio-callout {
    display: none;
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    border: 1.5px solid rgba(28, 107, 125, .28);
    font-size: 13px;
    line-height: 1.45;
    color: #103948;
    box-shadow: 0 12px 28px -20px rgba(16, 57, 72, .45);
}

.fmc-studio-callout.is-visible {
    display: block;
}

.fmc-studio-callout strong {
    color: #1C6B7D;
}

#fmc-photo-window.fmc-photo-window--pulse {
    outline: 3px solid rgba(91, 185, 126, .85);
    outline-offset: 2px;
    animation: fmc-pulse-frame 1.1s ease 2;
}

@keyframes fmc-pulse-frame {
    0%, 100% { outline-color: rgba(91, 185, 126, .85); }
    50% { outline-color: rgba(28, 107, 125, .5); }
}

.fmc-preview-col.fmc-studio-active .fmc-preview-card-wrap {
    background: linear-gradient(160deg, #DEEAE7, #C5DDD8);
    box-shadow: inset 0 0 0 2px rgba(28, 107, 125, .18);
}

@media (max-width: 980px) {
    .fmc-design-studio {
        padding: 0;
        align-items: stretch;
    }

    .fmc-design-studio__dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .fmc-design-studio__layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
    }

    .fmc-design-studio__preview-col {
        padding: 16px 16px 12px;
        flex: none;
    }

    .fmc-design-studio__preview-slot .fmc-preview-mount-inner {
        width: min(100%, 400px);
    }

    .fmc-design-studio__sidebar {
        border-left: none;
        border-top: 1px solid rgba(28, 107, 125, .12);
        min-height: 280px;
    }

    .fmc-preview-col.fmc-studio-active {
        order: -1;
    }

    /* Tablet only — keep 2 columns on phones (3 fixed cols overflow ~390px). */
    .fmc-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (min-width: 600px) and (max-width: 980px) {
    .fmc-template-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ── Template text colour pickers ──────────────────────────── */

.fmc-text-color-panel {
    margin-top: 18px;
    padding: 16px 18px 18px;
    border: 1.5px solid rgba(28, 107, 125, .2);
    border-radius: 14px;
    background: rgba(233, 239, 236, .45);
}

.fmc-text-color-panel.is-hidden {
    display: none;
}

.fmc-text-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.fmc-text-color-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(16, 57, 72, .1);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #103948;
}

.fmc-text-color-field input[type="color"] {
    width: 42px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(16, 57, 72, .15);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

.fmc-template-card[data-template="music-baby-shower-pink"] .fmc-template-card-label::after,
.fmc-template-card[data-template="music-baby-shower-blue"] .fmc-template-card-label::after {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #6E7180;
    margin-top: 2px;
}

.fmc-template-card[data-template="music-baby-shower-pink"] .fmc-template-card-label::after {
    content: 'Pink theme';
}

.fmc-template-card[data-template="music-baby-shower-blue"] .fmc-template-card-label::after {
    content: 'Blue theme';
}

/* ── Modern background colour panel (step 1) ─────────────────── */

.fmc-bg-panel--modern {
    margin-top: 12px;
    padding: 18px 20px 20px;
    border-radius: 16px;
    border: 1.5px solid rgba(28, 107, 125, .16);
    background: linear-gradient(165deg, #fff 0%, #f3f8f6 100%);
    box-shadow: 0 14px 36px -24px rgba(16, 57, 72, .35);
}

.fmc-bg-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fmc-bg-panel__label {
    font-size: 13.5px;
    font-weight: 600;
    color: #103948;
}

.fmc-bg-panel__hex {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #1C6B7D;
    font-family: ui-monospace, 'Cascadia Code', monospace;
}

.fmc-bg-panel__where {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #6E7180;
}

.fmc-magnet-shell__hint strong {
    font-weight: 600;
    color: #103948;
}

.fmc-bg-swatches--modern {
    gap: 12px;
}

.fmc-bg-swatches--modern .fmc-bg-swatch {
    width: 42px;
    height: 42px;
    box-shadow: 0 4px 14px -6px rgba(16, 57, 72, .35);
}

.fmc-magnet-color-slot {
    margin-bottom: 4px;
}

.fmc-magnet-color-slot .fmc-color-swatches {
    margin: 0;
}

.fmc-magnet-color-slot .label,
.fmc-magnet-color-slot label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #103948;
    margin-bottom: 10px;
}

/* ── Edge-to-edge print layout options ───────────────────────── */

.fmc-print-layout-options {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(28, 107, 125, .14);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fmc-print-layout-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #6E7180;
    cursor: pointer;
}

.fmc-print-layout-option input {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #1C6B7D;
}

.fmc-print-layout-option strong {
    color: #103948;
}

.fmc-print-layout-option--shell {
    padding-top: 10px;
    border-top: 1px solid rgba(16, 57, 72, .08);
}

.fmc-customize-step--bg .fmc-print-layout-hidden {
    display: none !important;
}

.fmc-magnet-shell__hint[data-mode="edge"] strong {
    color: #1C6B7D;
}

.fmc-magnet-shell__hint[data-mode="border"] strong {
    color: #103948;
}

/* ── Photo positioning studio (modal) ────────────────────────── */

.fmc-design-studio--photo-only .fmc-design-studio__dialog {
    width: min(720px, 100%);
    max-height: min(92vh, 820px);
}

.fmc-design-studio__layout--photo-only {
    display: block;
    grid-template-columns: none;
}

.fmc-design-studio__guide {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4a5568;
    text-align: center;
    max-width: 520px;
}

.fmc-design-studio__footer {
    padding: 14px 22px 20px;
    border-top: 1px solid rgba(28, 107, 125, .12);
    background: rgba(255, 255, 255, .72);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fmc-studio-tools-slot {
    width: 100%;
    max-width: 520px;
}

.fmc-studio-tools-slot .fmc-photo-tools {
    margin-top: 0;
}

.fmc-studio-tools-slot .fmc-photo-tools[hidden] {
    display: none !important;
}

.fmc-design-studio__preview-slot #fmc-photo-window.is-editable {
    z-index: 6;
    pointer-events: auto;
    cursor: grab;
}

.fmc-design-studio__preview-slot #fmc-photo-window.is-dragging {
    cursor: grabbing;
}

.fmc-design-studio__footer .fmc-design-studio__cta {
    width: auto;
    min-width: 240px;
}

.fmc-studio-launch-wrap.is-hidden {
    display: none;
}

.fmc-studio-launch-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ── Upload-triggered photo crop modal ───────────────────────── */

.fmc-photo-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.fmc-photo-crop-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.fmc-crop-modal-open {
    overflow: hidden;
}

.fmc-photo-crop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 39, 48, .55);
    backdrop-filter: blur(4px);
}

.fmc-photo-crop-modal__dialog {
    position: relative;
    width: min(480px, 100%);
    max-height: min(94vh, 720px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 80px -24px rgba(16, 39, 48, .45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fmc-photo-crop-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(28, 107, 125, .1);
}

.fmc-photo-crop-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #103948;
}

.fmc-photo-crop-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: #f3f6f8;
    color: #4a5568;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.fmc-photo-crop-modal__close:hover {
    background: #e8edf0;
    color: #103948;
}

.fmc-photo-crop-modal__preview-slot {
    padding: 18px 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

.fmc-photo-crop-modal__preview-slot .fmc-magnet-outer {
    width: min(360px, 100%);
    margin: 0 auto;
}

.fmc-photo-crop-modal__preview-slot .fmc-magnet-shell__hint {
    display: none;
}

.fmc-photo-crop-modal__preview-slot #fmc-photo-window.is-crop-editing {
    z-index: 6;
    pointer-events: auto;
    cursor: grab;
}

.fmc-photo-crop-modal__preview-slot #fmc-photo-window.is-dragging {
    cursor: grabbing;
}

.fmc-photo-crop-toolbar {
    padding: 0 20px 8px;
}

.fmc-photo-crop-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.fmc-photo-crop-toolbar .fmc-photo-tool {
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: #334155;
}

.fmc-photo-crop-toolbar .fmc-photo-tool:hover {
    border-color: #1C6B7D;
    background: #fff;
    color: #1C6B7D;
}

.fmc-photo-crop-replace {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px);
    margin: 4px 20px 12px;
    padding: 12px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fmc-photo-crop-replace:hover {
    border-color: #1C6B7D;
    color: #1C6B7D;
    background: #fff;
}

.fmc-photo-crop-modal__footer {
    display: flex;
    gap: 12px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(28, 107, 125, .1);
}

.fmc-photo-crop-btn {
    flex: 1;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.fmc-photo-crop-btn--ghost {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #334155;
}

.fmc-photo-crop-btn--ghost:hover {
    border-color: #94a3b8;
}

.fmc-photo-crop-btn--apply {
    background: linear-gradient(135deg, #1C6B7D 0%, #2a8a9e 100%);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(28, 107, 125, .65);
}

.fmc-photo-crop-btn--apply:hover {
    filter: brightness(1.05);
}

/* Transform handles (crop modal) */
.fmc-crop-handles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

.fmc-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px;
    border: 2px solid #1C6B7D;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 39, 48, .25);
    pointer-events: auto;
    cursor: pointer;
    touch-action: none;
}

.fmc-crop-handle--nw { top: 0; left: 0; cursor: nwse-resize; }
.fmc-crop-handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.fmc-crop-handle--sw { bottom: 0; left: 0; cursor: nesw-resize; }
.fmc-crop-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }

.fmc-crop-handle--rotate {
    top: -28px;
    left: 50%;
    margin-left: -7px;
    cursor: grab;
}

.fmc-crop-handle--rotate::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    background: #1C6B7D;
    pointer-events: none;
}

.fmc-crop-handle.is-dragging {
    cursor: grabbing;
}

.fmc-preview-placeholder__title--crop {
    font-size: 15px;
}

/* ── Checkout design preview (inline + standalone checkout) ─── */
.fmc-checkout-design-preview {
    background: #fff;
    border: 1px solid #efe7da;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px -15px rgba(16, 57, 72, 0.15);
}

.fmc-checkout-design-preview__title {
    font-size: 22px;
    margin: 0 0 8px;
    color: #103948;
}

.fmc-checkout-design-preview__hint {
    font-size: 13px;
    color: #6e7180;
    margin: 0 0 16px;
    line-height: 1.5;
}

.fmc-checkout-design-preview__image {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(16, 57, 72, 0.08);
    background: linear-gradient(160deg, #e9efec, #deeae7);
}

.fmc-checkout-design-preview__image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.fmc-checkout-design-preview__qr {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(16, 57, 72, 0.08);
}

.fmc-checkout-design-preview__qr img {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--fmc-border);
    background: #fff;
}

.fmc-checkout-design-preview__qr-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #55596a;
    line-height: 1.5;
}

.fmc-checkout-design-preview__qr-meta strong {
    color: #103948;
    font-size: 14px;
}

.fmc-cart-design-thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--fmc-border);
}

.fmc-cart-design-preview-link {
    display: block;
}

/* ============================================================
   PRODUCT / CUSTOMIZER / CHECKOUT — RESPONSIVE HARDENING
   Prevents horizontal overflow on phone & tablet viewports.
   ============================================================ */

.fmc-single-container,
.fmc-product-grid,
.fmc-content-col,
.fmc-preview-col,
.fmc-customizer-form-wrap,
.fmc-custom-fields,
.fmc-step-panel,
.fmc-field,
form.cart,
form.variations_form,
.single_variation_wrap,
.woocommerce-variation-add-to-cart,
.fmc-magnet-color-slot,
.fmc-upload-field,
.fmc-song-field,
.fmc-dropzone,
.fmc-action-row,
.fmc-ic-grid,
.fmc-ic-preview-col,
.fmc-ic-billing-col,
.fmc-ic-right-col,
.fmc-checkout-design-preview {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fmc-custom-fields {
    width: 100%;
}

.fmc-template-card-label {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fmc-song-select + .select2-container,
.fmc-song-select + .select2-container .select2-selection {
    max-width: 100% !important;
}

@media (max-width: 980px) {
    .fmc-content-col,
    .fmc-customizer-form-wrap,
    .fmc-custom-fields {
        width: 100%;
        overflow-x: clip;
    }

    .fmc-preview-card-wrap {
        max-width: min(100%, 440px);
        margin-left: auto;
        margin-right: auto;
    }

    .fmc-magnet-outer,
    .fmc-magnet-shell,
    #fmc-tpl-stage {
        max-width: 100%;
    }

    .fmc-text-color-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .fmc-checkout-design-preview {
        padding: 18px;
    }

    .fmc-checkout-design-preview__qr {
        flex-wrap: wrap;
    }

    .fmc-checkout-design-preview__qr img {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 767px) {
    .fmc-customize-step-label {
        flex-wrap: wrap;
        letter-spacing: .08em;
        font-size: 11px;
        gap: 8px;
    }

    .fmc-customize-step-hint,
    .fmc-template-hint {
        font-size: 12.5px;
    }

    .fmc-template-card {
        padding: 6px;
        gap: 6px;
    }

    .fmc-template-card-label {
        font-size: 10.5px;
    }

    .fmc-text-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .fmc-text-color-field {
        flex-direction: column;
        align-items: flex-start;
    }

    .fmc-print-layout-options {
        padding: 12px;
    }

    .fmc-print-layout-option {
        font-size: 12.5px;
    }

    .fmc-dropzone-inner {
        padding: 18px 14px;
    }

    .fmc-action-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .fmc-action-row .quantity,
    .fmc-action-row button.single_add_to_cart_button {
        width: 100%;
        max-width: 100%;
    }

    .fmc-song-preview-panel__inner {
        flex-wrap: wrap;
    }

    .fmc-checkout-design-preview__title {
        font-size: 18px;
    }

    .fmc-checkout-design-preview__qr {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fmc-checkout-design-preview__qr img {
        width: 96px;
        height: 96px;
    }

    #fmc-ic-billing-fields .form-row,
    #fmc-ic-billing-fields input.input-text,
    #fmc-ic-billing-fields select,
    #fmc-ic-billing-fields textarea {
        max-width: 100%;
    }

    #fmc-ic-order-review .woocommerce-checkout-review-order-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #fmc-inline-checkout-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 480px) {
    .fmc-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .fmc-swatch-chip {
        width: 44px;
        height: 44px;
    }

    .fmc-color-swatches {
        gap: 12px;
    }

    .fmc-ic-summary-panel {
        padding: 18px !important;
    }
}