/* Base */
.kpreorder-banner{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:.875rem;
    align-items:center;
    padding:0 .75rem;
    margin:0 0 .75rem;
    min-height:56px;
    font-weight:600;
    line-height:1.25;
    border-radius:3px;
    color:var(--ks-badge-text);
    width:100%;
    box-shadow:inset 0 1px 0 rgba(0,0,0,.03);
    font-size:clamp(.80rem, 1.8vw, .95rem);
    text-transform: uppercase;
}

/* Colonne icône : taille maîtrisée, centrée */
.kpreorder-banner__icon{
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.kpreorder-banner__icon svg{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Colonne texte : une seule phrase, wrap autorisé mais jamais entre ":" et la valeur (géré via  ) */
.kpreorder-banner__text{
    grid-column: 2;
    display: block;     /* pas d'empilement d’items, c’est une phrase unique */
    min-width: 0;
    word-break: break-word; /* si très long, on casse proprement, mais pas sur   */
}

/* Mini pill centrée (listing) */
.kpreorder-banner.kpreorder-banner--mini{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.25rem .6rem;
    margin:.4rem 0 .55rem;
    min-height:34px;
    font-size:clamp(.78rem, 1.9vw, .90rem);
    font-weight:700;
    line-height:1.2;
    border-radius:3px;
    text-align:center;
}

/* Texte multi-ligne possible (on enlève l’ellipsis) */
.kpreorder-banner--mini .kpreorder-banner__text{
    display:block;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}

/* --- PALETTES UNIFORMES (alpha = 0.18 partout) --- */

/* PREORDER (orange) */
.kpreorder-banner.kpreorder-banner--mini:not(.kpreorder-banner--special):not(.kpreorder-banner--ended):not(.kpreorder-banner--instock):not(.kpreorder-banner--oos){
    background-color: var(--ks-badge-preorder-bg);
}

/* SUPPLIER (vert) */
.kpreorder-banner.kpreorder-banner--special{
    background-color: var(--ks-badge-supplier-bg);
}

/* PREORDER ENDED (gris) */
.kpreorder-banner.kpreorder-banner--ended{
    background-color: var(--ks-badge-preorder-ended-bg);
}

/* IN STOCK (vert) */
.kpreorder-banner.kpreorder-banner--instock{
    background-color: var(--ks-badge-instock-bg);
}

/* OUT OF STOCK (rouge) */
.kpreorder-banner.kpreorder-banner--oos{
    background-color: var(--ks-badge-outofstock-bg);
}