/* pmk_customfields — styles front */
.pmkcf-control {
    margin-bottom: .5rem;
}

/* Combobox « creatable » (mode combo) */
.pmkcf-combo {
    position: relative;
}
.pmkcf-combo-list {
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.pmkcf-combo-option {
    padding: .45rem .6rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmkcf-combo-option:hover,
.pmkcf-combo-option.is-active {
    background: #f2f2f2;
}

/* État requis non rempli */
.pmkcf-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .25);
}
.pmkcf-invalid-section {
    border: 1px solid #dc3545;
    border-radius: .25rem;
    padding: .75rem;
}
.pmkcf-error-msg {
    color: #dc3545;
    font-size: .875rem;
    margin-top: .25rem;
}

/* Anti-flash : pendant le re-rendu d'une déclinaison, on masque la section de
   personnalisation pmk (le temps que le scope soit recalculé), puis fondu doux.
   Scopé via .pmkcf-updating (posé par front.js uniquement si une perso pmk est
   active) → aucune incidence sans JS ni sur d'autres modules. */
.js-product-customization {
    transition: opacity .12s ease;
}
html.pmkcf-updating .js-product-customization {
    opacity: 0;
}

/* Prévisualisation live (gabarit SVG/HTML) — mode « sous l'image » */
.pmkcf-preview {
    margin: 1rem 0;
    max-width: 100%;
    transition: opacity .15s ease;
}
/* État transitoire : masqué (fondu) le temps que la nouvelle image charge. */
.pmkcf-preview--loading {
    opacity: 0;
}
.pmkcf-preview svg,
.pmkcf-preview img {
    max-width: 100%;
    height: auto;
}

/* Mode « superposition » : calque transparent par-dessus l'image produit native.
   Le conteneur parent (cover) est passé en position:relative par preview.js. */
.pmkcf-preview--overlay {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 3;
    pointer-events: none; /* laisse passer zoom/clic vers l'image native */
}
/* Un gabarit SVG remplit le calque ; les gabarits HTML gèrent leur propre
   positionnement (souvent en % par rapport au calque, qui est position:absolute). */
.pmkcf-preview--overlay > svg {
    width: 100%;
    height: 100%;
}