/*
 * ES-ONLINE — corrections d'interface et de compatibilité écran.
 * BATCH-P1-CATALOG-FRONTEND-TYPES-AND-RESPONSIVE
 *
 * Fichier dédié plutôt qu'un bloc <style> de plus dans un layout de 1200 lignes :
 * une règle se trouve, se relit et se remplace ici.
 */

/* ---------------------------------------------------------------- badges type
 * Un kit était présenté exactement comme un composant seul. Le badge le dit,
 * dans la grille comme sur la fiche.
 */
.badge-type-bundle,
.badge-type-variable {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 4px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .02em;
    white-space: nowrap;
}

.badge-type-bundle  { background: #0d6efd; color: #fff; }
.badge-type-variable{ background: #6c757d; color: #fff; }

.badge-type-bundle--lg {
    font-size: 13px;
    padding: 4px 12px;
}

/* ------------------------------------------------------- tableaux et petits écrans
 * Quatre tableaux du parcours client (caractéristiques techniques, deux grilles
 * de prix, récapitulatif de commande) n'avaient aucun conteneur scrollable :
 * sur un téléphone ils poussaient la page entière en débordement horizontal.
 *
 * La règle : le tableau défile DANS sa boîte, la page ne défile jamais
 * lateralement.
 */
.es-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.es-table-scroll > table {
    width: 100%;
    min-width: 320px;
}

/* Le corps ne doit jamais deborder, quel que soit le contenu injecte. */
html, body { overflow-x: hidden; }

/* ------------------------------------------------------------------- images
 * Filet de securite : une image sans contrainte casse toute grille fluide.
 */
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------- composition d'un kit */
.kit-composition-empty {
    color: #6c757d;
    font-style: italic;
}

/* --------------------------------------------------------- noms de produits
 * Le recapitulatif de commande limitait le nom a 51px, ce qui le rendait
 * illisible. Il s'enroule desormais au lieu d'etre ampute.
 */
.product-name-wrap {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ------------------------------------------- recapitulatif de confirmation
 * BATCH-P1-CHECKOUT-CONFIRMATION-AND-MAIL
 * Le client repartait sans numero ni montant. Ce bloc les lui donne.
 */
.order-recap {
    max-width: 560px;
    margin: 24px auto 28px;
    text-align: left;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: 18px 20px;
    background: #fff;
}

.order-recap__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f3f5;
    font-size: 14px;
}

.order-recap__row:last-child { border-bottom: 0; }
.order-recap__row span      { color: #6c757d; }
.order-recap__row strong    { text-align: right; overflow-wrap: anywhere; }

.order-recap__row--discount strong { color: #28a745; }

.order-recap__row--total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 2px solid #dee2e6;
    font-size: 17px;
}

.order-recap__items          { width: 100%; margin: 12px 0; font-size: 13px; }
.order-recap__items th       { text-align: left; color: #6c757d; font-weight: 600; padding: 6px 8px; }
.order-recap__items td       { padding: 6px 8px; border-top: 1px solid #f1f3f5; }
.order-recap__items td:nth-child(n+2),
.order-recap__items th:nth-child(n+2) { text-align: right; white-space: nowrap; }

.order-recap__mail { font-size: 14px; color: #6c757d; }

@media (max-width: 575px) {
    .order-recap        { padding: 14px; }
    .order-recap__row   { font-size: 13px; }
}