/* ==========================================================
   BLOODMOON MARKETPLACE
   Feuille de style principale
   Référence visuelle : maquette BloodMoon Marketplace
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
    --bm-red: #a31313;
    --bm-red-dark: #7f0d0d;
    --bm-red-light: #c43a3a;

    --bm-text: #252525;
    --bm-text-soft: #666666;
    --bm-text-light: #8a8a8a;

    --bm-bg: #ffffff;
    --bm-bg-soft: #f7f7f7;
    --bm-bg-page: #fafafa;

    --bm-border: #e2e2e2;
    --bm-border-dark: #cccccc;

    --bm-green-bg: #e4f1df;
    --bm-green-text: #35752e;

    --bm-warning-bg: #fff5f3;

    --bm-star: #f4a000;

    --bm-paypal: #1769aa;

    --bm-radius: 9px;
    --bm-radius-small: 6px;

    --bm-shadow:
        0 2px 10px rgba(0, 0, 0, 0.05);

    --bm-header-height: 88px;
    --bm-nav-height: 56px;

    --bm-sidebar-width: 245px;

    --bm-container-width: 1560px;
}


/* ==========================================================
   RESET
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bm-bg-page);
    color: var(--bm-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    line-height: 1.45;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}


/* ==========================================================
   CONTENEUR GLOBAL
   ========================================================== */

.bm-container {
    width: calc(100% - 40px);
    max-width: var(--bm-container-width);
    margin: 0 auto;
}


/* ==========================================================
   HEADER PRINCIPAL
   ========================================================== */

.bm-header {
    height: var(--bm-header-height);

    background: #ffffff;
    border-bottom: 1px solid var(--bm-border);
}

.bm-header-inner {
    height: 100%;

    display: grid;

    grid-template-columns:
        310px
        minmax(320px, 620px)
        1fr;

    align-items: center;
    gap: 30px;
}


/* ==========================================================
   LOGO
   ========================================================== */

.bm-logo {
    display: flex;
    align-items: center;

    min-width: 0;
}

.bm-logo img {
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}


/* ==========================================================
   RECHERCHE
   ========================================================== */

.bm-search {
    position: relative;
    width: 100%;
}

.bm-search input {
    width: 100%;
    height: 46px;

    padding:
        0
        54px
        0
        17px;

    background: #ffffff;

    border: 1px solid #d7d7d7;
    border-radius: 9px;

    color: var(--bm-text);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bm-search input::placeholder {
    color: #909090;
}

.bm-search input:focus {
    border-color: var(--bm-red);

    box-shadow:
        0 0 0 3px rgba(163, 19, 19, 0.08);
}

.bm-search-button {
    position: absolute;

    top: 0;
    right: 0;

    width: 52px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    color: var(--bm-red);

    font-size: 22px;

    cursor: pointer;
}


/* ==========================================================
   ACTIONS HEADER
   ========================================================== */

.bm-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 29px;

    white-space: nowrap;
}

.bm-header-action {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #202020;

    cursor: pointer;
}

.bm-header-action:hover {
    color: var(--bm-red);
}

.bm-header-action-icon {
    font-size: 24px;
    line-height: 1;
}

.bm-cart-badge {
    position: absolute;

    top: -11px;
    left: 17px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: var(--bm-red);

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
}


/* ==========================================================
   NAVIGATION PRINCIPALE
   ========================================================== */

.bm-nav {
    height: var(--bm-nav-height);

    background: #ffffff;
    border-bottom: 1px solid var(--bm-border);
}

.bm-nav-inner {
    height: 100%;

    display: flex;
    align-items: stretch;
    justify-content: center;

    gap: 18px;
}

.bm-nav-item {
    min-width: 115px;

    padding: 0 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    position: relative;

    color: #282828;

    font-size: 14px;
}

.bm-nav-item:hover {
    color: var(--bm-red);
}

.bm-nav-item.active {
    color: var(--bm-red);
}

.bm-nav-item.active::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 0;

    height: 2px;

    background: var(--bm-red);
}

.bm-nav-icon {
    font-size: 19px;
}


/* ==========================================================
   LAYOUT MARKETPLACE
   ========================================================== */

.bm-marketplace-layout {
    display: grid;

    grid-template-columns:
        var(--bm-sidebar-width)
        minmax(0, 1fr);

    gap: 20px;

    padding-top: 20px;
    padding-bottom: 40px;
}


/* ==========================================================
   SIDEBAR / FILTRES
   ========================================================== */

.bm-sidebar {
    background: #ffffff;

    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);

    padding: 15px;

    align-self: start;

    box-shadow: var(--bm-shadow);
}

.bm-sidebar-title {
    margin:
        0
        0
        10px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--bm-border);

    font-size: 16px;
    font-weight: 700;
}

.bm-filter-section {
    padding: 10px 0 14px;

    border-bottom: 1px solid var(--bm-border);
}

.bm-filter-section:last-child {
    border-bottom: 0;
}

.bm-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;

    font-weight: 700;
}

.bm-category-list {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.bm-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #454545;

    font-size: 12px;
}

.bm-category-link:hover {
    color: var(--bm-red);
}

.bm-category-count {
    color: #777777;
}


/* ==========================================================
   CHECKBOX
   ========================================================== */

.bm-check {
    display: flex;
    align-items: center;

    gap: 6px;

    margin: 6px 0;

    color: #484848;

    font-size: 12px;

    cursor: pointer;
}

.bm-check input {
    width: 14px;
    height: 14px;

    accent-color: var(--bm-red);
}


/* ==========================================================
   FILTRE PRIX
   ========================================================== */

.bm-price-range {
    margin-top: 12px;
}

.bm-price-slider {
    width: 100%;
    accent-color: var(--bm-red);
}

.bm-price-fields {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    gap: 7px;

    align-items: center;

    margin-top: 8px;
}

.bm-price-input {
    width: 100%;
    min-width: 0;

    height: 30px;

    border: 1px solid var(--bm-border);
    border-radius: 4px;

    text-align: center;

    font-size: 12px;
}

/* ==========================================================
   CONTENU PRINCIPAL
   ========================================================== */

.bm-main {
    min-width: 0;
}


/* ==========================================================
   HERO / BANDEAU WELCOME
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEUR PRINCIPAL DU HERO

   Le hero est séparé en 2 parties :
   - gauche : le texte
   - droite : l'image

   55% pour le texte
   45% pour l'image
   ---------------------------------------------------------- */

.bm-hero {

    display: grid;

    /* Colonne gauche = texte / colonne droite = image */
    grid-template-columns: 55% 45%;

    align-items: stretch;

    /* Fond général blanc */
    background: #ffffff;

    /* Fine bordure comme sur la maquette */
    border: 1px solid #e7e2df;

    /* Coins arrondis */
    border-radius: 14px;

    /*
       Empêche l'image de dépasser
       des coins arrondis du cadre
    */
    overflow: hidden;

    /* Hauteur minimum du bandeau */
    min-height: 320px;

    /* Espace sous le hero */
    margin-bottom: 18px;
}



/* ----------------------------------------------------------
   PARTIE GAUCHE : TEXTE
   ---------------------------------------------------------- */

.bm-hero-content {

    /* Espace intérieur autour du texte */
    padding: 34px 30px;

    display: flex;
    flex-direction: column;

    /* Centre verticalement le contenu */
    justify-content: center;

    position: relative;

    /*
       Le texte doit rester au-dessus
       de l'effet de fondu
    */
    z-index: 2;


    /*
       Léger dégradé blanc vers la droite.

       Il permet de faire une transition douce
       entre le texte et l'image.
    */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0.98) 70%,
            rgba(255,255,255,0.82) 100%
        );
}



/* ----------------------------------------------------------
   PETIT TEXTE "WELCOME TO"
   ---------------------------------------------------------- */

.bm-hero-small-title {

    font-size: 18px;

    color: #3c332f;

    margin-bottom: 10px;

    font-weight: 500;
}



/* ----------------------------------------------------------
   TITRE "BLOODMOON MARKETPLACE"
   ---------------------------------------------------------- */

.bm-hero-title {

    margin: 0 0 14px;

    font-size: 56px;

    line-height: 1.02;

    font-weight: 700;

    /* Rouge BloodMoon */
    color: #7e0f12;

    letter-spacing: -0.02em;
}



/* ----------------------------------------------------------
   DESCRIPTION SOUS LE TITRE
   ---------------------------------------------------------- */

.bm-hero-description {

    font-size: 16px;

    line-height: 1.6;

    color: #4f4541;

    max-width: 640px;

    margin-bottom: 28px;
}



/* ----------------------------------------------------------
   LES 3 PETITS AVANTAGES
   Quality Content / Secure Shopping / OpenSimulator
   ---------------------------------------------------------- */

.bm-hero-features {

    display: flex;

    /* Permet de passer à la ligne si nécessaire */
    flex-wrap: wrap;

    gap: 22px;
}



/* ----------------------------------------------------------
   CHAQUE AVANTAGE
   ---------------------------------------------------------- */

.bm-hero-feature {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 180px;

    max-width: 220px;
}



/* ----------------------------------------------------------
   ICÔNE D'UN AVANTAGE
   ---------------------------------------------------------- */

.bm-hero-feature-icon {

    font-size: 23px;

    line-height: 1;

    color: #9f1717;

    margin-top: 2px;
}



/* ----------------------------------------------------------
   TITRE D'UN AVANTAGE
   ---------------------------------------------------------- */

.bm-hero-feature-title {

    font-size: 14px;

    font-weight: 700;

    color: #332b28;

    margin-bottom: 3px;
}



/* ----------------------------------------------------------
   PETITE DESCRIPTION D'UN AVANTAGE
   ---------------------------------------------------------- */

.bm-hero-feature-text {

    font-size: 14px;

    line-height: 1.4;

    color: #6d615c;
}



/* ==========================================================
   PARTIE DROITE : IMAGE DU CHÂTEAU
   ========================================================== */

.bm-hero-visual {

    /*
       Sert de cadre pour l'image
    */
    position: relative;

    min-height: 320px;

    /*
       On cache uniquement ce qui pourrait
       dépasser du cadre.
    */
    overflow: hidden;
}



/* ----------------------------------------------------------
   IMAGE HERO
   ---------------------------------------------------------- */

.bm-hero-visual img {

    /*
       L'image prend toute la largeur
       de sa partie du hero
    */
    width: 100%;

    /*
       Et toute la hauteur
    */
    height: 100%;

    display: block;


    /*
       COVER :
       l'image remplit complètement le cadre.

       Certaines parties peuvent donc être coupées
       lorsque le ratio image/cadre est différent.
    */
    object-fit: cover;


    /*
       IMPORTANT :

       Auparavant le navigateur centrait l'image.
       Il coupait donc une partie à gauche ET à droite.

       Ici on lui demande de conserver en priorité
       LA PARTIE DROITE de l'image.

       Comme le château et la lune sont à droite,
       ils doivent maintenant rester visibles.

       Si quelque chose doit être coupé,
       ce sera principalement la zone vide à gauche.
    */
    object-position: right center;
}



/* ----------------------------------------------------------
   FONDU BLANC ENTRE LE TEXTE ET L'IMAGE

   Ce dégradé est posé PAR-DESSUS l'image,
   uniquement sur son côté gauche.
   ---------------------------------------------------------- */

.bm-hero-visual::before {

    content: "";

    position: absolute;

    inset: 0;


    /*
       Blanc à gauche puis progressivement transparent.

       Cela évite une séparation brutale entre
       la zone texte et le château.
    */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.45) 15%,
            rgba(255,255,255,0) 38%
        );


    /*
       Place le fondu au-dessus de l'image.
    */
    z-index: 1;


    /*
       Le fondu ne doit jamais empêcher
       un éventuel clic.
    */
    pointer-events: none;
}



/* ==========================================================
   VERSION TABLETTE
   ========================================================== */

@media (max-width: 1100px) {


    /*
       Sur un écran plus petit,
       texte et image ne sont plus côte à côte.

       Ils passent l'un au-dessus de l'autre.
    */
    .bm-hero {

        grid-template-columns: 1fr;
    }


    /*
       L'image passe au-dessus du texte.
    */
    .bm-hero-visual {

        min-height: 240px;

        order: -1;
    }


    /*
       Le texte retrouve un fond complètement blanc.
    */
    .bm-hero-content {

        background: #ffffff;
    }


    /*
       Sur tablette, le fondu devient vertical
       au lieu d'être horizontal.
    */
    .bm-hero-visual::before {

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0) 65%,
                rgba(255,255,255,0.90) 100%
            );
    }

}



/* ==========================================================
   VERSION MOBILE
   ========================================================== */

@media (max-width: 768px) {


    /*
       Un peu moins d'espace autour du texte.
    */
    .bm-hero-content {

        padding: 24px 20px;
    }


    /*
       Le gros titre devient plus petit
       pour tenir sur téléphone.
    */
    .bm-hero-title {

        font-size: 38px;
    }


    .bm-hero-description {

        font-size: 15px;
    }


    /*
       Les 3 avantages passent les uns
       sous les autres sur téléphone.
    */
    .bm-hero-features {

        flex-direction: column;

        gap: 16px;
    }


    .bm-hero-feature {

        max-width: none;
    }

}


/* ==========================================================
   INFO COMPTE
   ========================================================== */

.bm-account-notice {
    min-height: 49px;

    margin-top: 10px;

    padding:
        8px
        14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: var(--bm-warning-bg);

    border: 1px solid #f5dfdc;
    border-radius: var(--bm-radius);
}

.bm-account-notice-message {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #81322d;

    font-size: 12px;
}

.bm-account-notice-right {
    display: flex;
    align-items: center;

    gap: 17px;

    color: #655a57;

    font-size: 11px;
}


/* ==========================================================
   BOUTONS
   ========================================================== */

.bm-button {
    min-height: 34px;

    padding:
        7px
        14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--bm-red);
    border-radius: var(--bm-radius-small);

    background: #ffffff;

    color: var(--bm-red);

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.bm-button:hover {
    background: var(--bm-red);
    color: #ffffff;
}

.bm-button-primary {
    background: var(--bm-red);
    color: #ffffff;
}

.bm-button-primary:hover {
    background: var(--bm-red-dark);
}


/* ==========================================================
   BARRE RÉSULTATS
   ========================================================== */

.bm-results-toolbar {
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.bm-results-count {
    color: #666666;

    font-size: 12px;
}

.bm-sort-tools {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #555555;

    font-size: 12px;
}

.bm-sort-select {
    min-width: 180px;
    height: 36px;

    padding:
        0
        12px;

    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-small);

    background: #ffffff;
}

.bm-view-button {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--bm-border);
    border-radius: 6px;

    background: #ffffff;

    cursor: pointer;
}

.bm-view-button.active {
    border-color: var(--bm-red);

    color: var(--bm-red);
}


/* ==========================================================
   GRILLE PRODUITS
   ========================================================== */

.bm-product-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 18px;
}


/* ==========================================================
   CARTE PRODUIT
   ========================================================== */

.bm-product-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.bm-product-card:hover {
    transform: translateY(-2px);

    border-color: #d1d1d1;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   IMAGE PRODUIT
   ========================================================== */

.bm-product-image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 1.35 / 1;

    overflow: hidden;

    background: #eeeeee;
}

.bm-product-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}

.bm-product-card:hover .bm-product-image {
    transform: scale(1.025);
}


/* ==========================================================
   FAVORI
   ========================================================== */

.bm-favorite-button {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: rgba(20, 20, 20, 0.72);

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;
}

.bm-favorite-button:hover {
    background: var(--bm-red);
}


/* ==========================================================
   CONTENU CARTE
   ========================================================== */

.bm-product-content {
    padding:
        10px
        10px
        12px;
}

.bm-product-title {
    margin-bottom: 3px;

    overflow: hidden;

    color: #252525;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.bm-product-store {
    margin-bottom: 4px;

    color: var(--bm-red);

    font-size: 11px;
    font-weight: 600;
}


/* ==========================================================
   ÉTOILES
   ========================================================== */

.bm-rating {
    display: flex;
    align-items: center;

    gap: 5px;

    min-height: 20px;
}

.bm-stars {
    color: var(--bm-star);

    font-size: 14px;
    letter-spacing: -1px;
}

.bm-rating-count {
    color: #777777;

    font-size: 10px;
}


/* ==========================================================
   PERMISSIONS
   ========================================================== */

.bm-permissions {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin:
        5px
        0
        8px;
}

.bm-permission {
    padding:
        3px
        9px;

    border-radius: 999px;

    background: var(--bm-green-bg);

    color: var(--bm-green-text);

    font-size: 9px;
}


/* ==========================================================
   PRIX
   ========================================================== */

.bm-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 5px;
}

.bm-price-bm {
    color: var(--bm-red);

    font-size: 15px;
    font-weight: 700;
}

.bm-price-euro {
    color: #777777;

    font-size: 11px;
}

.bm-price-paypal {
    width: 100%;

    color: var(--bm-paypal);

    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.bm-footer {
    margin-top: 40px;

    padding:
        35px
        0;

    background: #ffffff;

    border-top: 1px solid var(--bm-border);

    color: #6a6a6a;

    font-size: 12px;
}


/* ==========================================================
   FORMULAIRES
   ========================================================== */

.bm-form-card {
    max-width: 520px;

    margin:
        35px
        auto;

    padding: 28px;

    background: #ffffff;

    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);

    box-shadow: var(--bm-shadow);
}

.bm-form-title {
    margin:
        0
        0
        8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--bm-red-dark);

    font-size: 27px;
}

.bm-form-subtitle {
    margin-bottom: 24px;

    color: var(--bm-text-soft);
}

.bm-form-group {
    margin-bottom: 16px;
}

.bm-form-label {
    display: block;

    margin-bottom: 6px;

    font-weight: 600;
}

.bm-form-control {
    width: 100%;
    height: 42px;

    padding:
        0
        12px;

    border: 1px solid var(--bm-border-dark);
    border-radius: var(--bm-radius-small);

    background: #ffffff;

    outline: none;
}

.bm-form-control:focus {
    border-color: var(--bm-red);

    box-shadow:
        0 0 0 3px rgba(163, 19, 19, 0.07);
}


/* ==========================================================
   MESSAGES
   ========================================================== */

.bm-alert {
    padding:
        11px
        13px;

    margin-bottom: 15px;

    border-radius: var(--bm-radius-small);

    font-size: 12px;
}

.bm-alert-error {
    background: #fff1f1;

    border: 1px solid #efc3c3;

    color: #8f1717;
}

.bm-alert-success {
    background: #f0f8ed;

    border: 1px solid #cfe4c8;

    color: #397033;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1350px) {

    .bm-product-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .bm-header-inner {
        grid-template-columns:
            270px
            minmax(280px, 1fr)
            auto;
    }
}


@media (max-width: 1100px) {

    .bm-marketplace-layout {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .bm-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .bm-header-action span:not(.bm-header-action-icon) {
        display: none;
    }

    .bm-hero-content {
        width: 68%;
    }
}


@media (max-width: 800px) {

    :root {
        --bm-header-height: auto;
    }

    .bm-header {
        height: auto;
    }

    .bm-header-inner {
        padding:
            12px
            0;

        grid-template-columns:
            1fr
            auto;

        gap: 12px;
    }

    .bm-logo {
        grid-column:
            1
            /
            2;
    }

    .bm-header-actions {
        grid-column:
            2
            /
            3;

        gap: 13px;
    }

    .bm-search {
        grid-column:
            1
            /
            3;
    }

    .bm-nav {
        height: auto;
    }

    .bm-nav-inner {
        overflow-x: auto;

        justify-content: flex-start;
    }

    .bm-nav-item {
        height: 50px;
    }

    .bm-marketplace-layout {
        grid-template-columns: 1fr;
    }

    .bm-sidebar {
        display: none;
    }

    .bm-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bm-hero {
        min-height: 330px;
    }

    .bm-hero-content {
        width: 100%;
    }

    .bm-hero-overlay {
        background:
            rgba(255, 255, 255, 0.88);
    }
}


@media (max-width: 520px) {

    .bm-container {
        width: calc(100% - 22px);
    }

    .bm-product-grid {
        grid-template-columns: 1fr;
    }

    .bm-hero-title {
        font-size: 31px;
    }

    .bm-hero-features {
        flex-direction: column;

        gap: 12px;
    }

    .bm-account-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .bm-results-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   PRODUCT DETAIL PAGE
   ========================================================== */


/* ----------------------------------------------------------
   MAIN PRODUCT PAGE
   ---------------------------------------------------------- */

.bm-product-page {
    margin-top: 24px;
    margin-bottom: 50px;
}



/* ----------------------------------------------------------
   BACK TO MARKETPLACE LINK
   ---------------------------------------------------------- */

.bm-product-back {
    margin-bottom: 18px;
}

.bm-product-back a {
    color: #7e0f12;
    text-decoration: none;
    font-weight: 600;
}

.bm-product-back a:hover {
    text-decoration: underline;
}



/* ----------------------------------------------------------
   MAIN PRODUCT CARD

   Left  = image
   Right = product information
   ---------------------------------------------------------- */

.bm-product-detail {
    display: grid;

    grid-template-columns:
        minmax(320px, 45%)
        1fr;

    gap: 36px;

    background: #ffffff;

    border: 1px solid #e7e2df;

    border-radius: 14px;

    padding: 28px;
}



/* ----------------------------------------------------------
   PRODUCT IMAGE AREA
   ---------------------------------------------------------- */

.bm-product-detail-image {
    background: #f4f1ef;

    border-radius: 10px;

    overflow: hidden;

    /*
       La zone image ne s'étire plus automatiquement
       jusqu'à la hauteur de la colonne d'informations.
    */
    align-self: start;

    display: flex;

    align-items: center;

    justify-content: center;
}



/*
   CONTAIN is intentional here.

   On a product detail page we prefer displaying
   the complete seller image rather than cropping it.
*/

.bm-product-detail-image img {
    display: block;

    width: 100%;

    /*
       On conserve le ratio original de l'image.
       Le cadre prend donc naturellement sa hauteur.
    */
    height: auto;

    object-fit: contain;
}



/* Placeholder when product has no image */

.bm-product-detail-placeholder {
    width: 100%;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #242424,
            #6d1919
        );

    color: #ffffff;

    font-size: 80px;
}



/* ----------------------------------------------------------
   PRODUCT INFORMATION
   ---------------------------------------------------------- */

.bm-product-detail-info {
    min-width: 0;
}



/* Category above title */

.bm-product-detail-category {
    font-size: 14px;

    color: #81746e;

    margin-bottom: 8px;
}



/* Product title */

.bm-product-detail-title {
    margin: 0 0 14px;

    color: #302825;

    font-size: 34px;

    line-height: 1.15;
}



/* Product description */

.bm-product-detail-description {
    color: #5c514c;

    line-height: 1.7;

    margin-bottom: 24px;
}



/* ----------------------------------------------------------
   PRICE
   ---------------------------------------------------------- */

.bm-product-detail-price {
    display: flex;

    align-items: baseline;

    gap: 12px;

    margin-bottom: 26px;
}



/* BM$ price */

.bm-product-detail-price-bm {
    color: #8f1115;

    font-size: 28px;

    font-weight: 700;
}



/* PayPal / Euro price */

.bm-product-detail-price-paypal {
    color: #746964;

    font-size: 16px;
}



/* ----------------------------------------------------------
   PRODUCT INFORMATION BLOCKS
   Permissions / Style / Physics Engine / etc.
   ---------------------------------------------------------- */

.bm-product-detail-block {
    padding: 18px 0;

    border-top: 1px solid #eee8e5;
}



.bm-product-detail-block-title {
    font-weight: 700;

    color: #39302c;

    margin-bottom: 10px;
}



/* Tags container */

.bm-product-detail-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}



/* Individual tag */

.bm-product-detail-tag {
    background: #f5efed;

    border: 1px solid #e6d9d5;

    border-radius: 20px;

    padding: 6px 11px;

    font-size: 13px;

    color: #594b46;
}



/* ----------------------------------------------------------
   BUY BUTTON

   It remains disabled until real purchase security
   is implemented.
   ---------------------------------------------------------- */

.bm-product-buy-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 190px;

    margin-top: 24px;

    padding: 13px 22px;

    background: #8d1115;

    color: #ffffff;

    border: 0;

    border-radius: 6px;

    font-weight: 700;

    font-size: 16px;

    /*
       Bouton actif :
       aspect normal et curseur cliquable.
    */
    cursor: pointer;

    opacity: 1;
}

.bm-product-buy-button:not(:disabled):hover {
    background: #721014;
}

/*
   Uniquement lorsqu'un bouton possède réellement
   l'attribut HTML "disabled".
*/
.bm-product-buy-button:disabled {
    cursor: not-allowed;

    opacity: 0.75;
}



/* ----------------------------------------------------------
   PRODUCT NOT FOUND
   ---------------------------------------------------------- */

.bm-product-not-found {
    margin: 40px 0;

    padding: 50px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e7e2df;

    border-radius: 12px;
}



/* ==========================================================
   PRODUCT CARDS - REAL IMAGES / PLACEHOLDER
   ========================================================== */


/*
   Real image displayed on homepage cards.
*/

.bm-product-card-image {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}



/*
   Default BloodMoon placeholder if the seller
   has not uploaded an image yet.
*/

.bm-product-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #242424,
            #6d1919
        );

    color: #ffffff;

    font-size: 42px;
}



/* ----------------------------------------------------------
   EMPTY MARKETPLACE
   ---------------------------------------------------------- */

.bm-empty-products {
    grid-column: 1 / -1;

    padding: 40px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e7e2df;

    border-radius: 8px;
}



/* ==========================================================
   PRODUCT PAGE - RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    /*
       On mobile/tablet the image moves above
       the product information.
    */

    .bm-product-detail {
        grid-template-columns: 1fr;
    }





    .bm-product-detail-placeholder {
        min-height: 300px;
    }

}



/* ==========================================================
   LOGIN PAGE
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEUR GENERAL DE LA PAGE LOGIN
   ---------------------------------------------------------- */

.bm-login-page {
    max-width: 620px;
    margin: 45px auto 60px;
}



/* ----------------------------------------------------------
   CARTE BLANCHE PRINCIPALE
   ---------------------------------------------------------- */

.bm-login-card {
    background: #ffffff;

    border: 1px solid #e7e2df;

    border-radius: 14px;

    padding: 32px;

    box-shadow:
        0 8px 24px
        rgba(50, 35, 30, 0.06);
}



/* ----------------------------------------------------------
   TITRE
   ---------------------------------------------------------- */

.bm-login-title {
    margin: 0 0 10px;

    font-size: 28px;

    color: #7e0f12;
}



/* ----------------------------------------------------------
   TEXTE D'INTRODUCTION
   ---------------------------------------------------------- */

.bm-login-intro {
    color: #6d615c;

    line-height: 1.6;

    margin-bottom: 26px;
}



/* ----------------------------------------------------------
   GROUPE LABEL + CHAMP
   ---------------------------------------------------------- */

.bm-login-field {
    margin-bottom: 18px;
}


.bm-login-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    font-weight: 700;

    color: #3f3531;
}



/* ----------------------------------------------------------
   CHAMPS DE SAISIE
   ---------------------------------------------------------- */

.bm-login-input {
    width: 100%;

    box-sizing: border-box;

    height: 44px;

    padding: 0 12px;

    border: 1px solid #d8cfcb;

    border-radius: 6px;

    background: #ffffff;

    font-size: 15px;

    color: #302825;
}


.bm-login-input:focus {
    outline: none;

    border-color: #8d1115;

    box-shadow:
        0 0 0 3px
        rgba(141, 17, 21, 0.08);
}



/* ----------------------------------------------------------
   BOUTON DE CONNEXION
   ---------------------------------------------------------- */

.bm-login-button {
    width: 100%;

    height: 46px;

    border: 0;

    border-radius: 6px;

    background: #8d1115;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}


.bm-login-button:hover {
    background: #721014;
}



/* ----------------------------------------------------------
   MESSAGE D'ERREUR
   ---------------------------------------------------------- */

.bm-login-error {
    margin-bottom: 20px;

    padding: 13px 15px;

    border: 1px solid #e6b8b8;

    border-radius: 6px;

    background: #fff2f2;

    color: #8b1818;

    line-height: 1.5;
}



/* ----------------------------------------------------------
   UTILISATEUR CONNECTE
   ---------------------------------------------------------- */

.bm-login-user {
    margin-bottom: 22px;

    padding: 16px;

    background: #f7f4f2;

    border-radius: 7px;

    color: #403632;
}



/* ----------------------------------------------------------
   COMPTE ECONOMY ACTIF
   ---------------------------------------------------------- */

.bm-economy-ready {
    padding: 18px;

    border: 1px solid #cfdccf;

    border-radius: 7px;

    background: #f4faf4;

    line-height: 1.6;
}


.bm-economy-balance {
    margin-top: 8px;

    font-size: 25px;

    font-weight: 700;

    color: #7e0f12;
}



/* ----------------------------------------------------------
   COMPTE ECONOMY PAS ENCORE INITIALISE
   ---------------------------------------------------------- */

.bm-economy-warning {
    padding: 18px;

    border: 1px solid #e4d4ae;

    border-radius: 7px;

    background: #fff9ea;

    color: #5f5132;

    line-height: 1.6;
}


.bm-economy-warning strong {
    display: block;

    margin-bottom: 6px;

    color: #5a4614;
}



/* ----------------------------------------------------------
   LIEN CREATION DE COMPTE
   ---------------------------------------------------------- */

.bm-login-create-account {
    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid #eee8e5;

    text-align: center;
}


.bm-login-create-account a {
    color: #8d1115;

    font-weight: 700;

    text-decoration: none;
}


.bm-login-create-account a:hover {
    text-decoration: underline;
}


/* ==========================================================
   MY ACCOUNT / DASHBOARD
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEUR GENERAL
   ---------------------------------------------------------- */

.bm-account-page {
    margin-top: 28px;
    margin-bottom: 55px;
}



/* ----------------------------------------------------------
   TITRE DE LA PAGE
   ---------------------------------------------------------- */

.bm-account-page-header {
    margin-bottom: 20px;
}


.bm-account-page-header h1 {
    margin: 0;

    font-size: 30px;

    color: #302825;
}



/* ----------------------------------------------------------
   PANNEAUX DU TABLEAU DE BORD

   Exemple :
   - compte BloodMoon
   - espace vendeur
   ---------------------------------------------------------- */

.bm-account-panel {
    margin-bottom: 24px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e7e2df;

    border-radius: 12px;
}


.bm-account-panel h2 {
    margin: 0 0 20px;

    color: #7e0f12;

    font-size: 21px;
}



/* ----------------------------------------------------------
   INFORMATIONS GENERALES DU COMPTE
   ---------------------------------------------------------- */

.bm-account-summary {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 18px;
}



/* Chaque petite carte d'information */

.bm-account-summary-item {
    min-width: 220px;

    padding: 15px 17px;

    background: #f7f4f2;

    border-radius: 7px;
}



/* Petit libellé au-dessus de l'information */

.bm-account-summary-label {
    display: block;

    margin-bottom: 5px;

    color: #746964;

    font-size: 12px;
}



/* Solde BM$ */

.bm-account-balance {
    color: #8d1115;

    font-size: 20px;
}



/* ----------------------------------------------------------
   TITRE D'UNE SOUS-SECTION
   ---------------------------------------------------------- */

.bm-account-section-title {
    margin: 0 0 15px;

    font-size: 17px;

    color: #403632;
}



/* ----------------------------------------------------------
   MESSAGE QUAND IL N'Y A AUCUNE MAGIC BOX
   ---------------------------------------------------------- */

.bm-account-empty {
    padding: 20px;

    background: #f7f4f2;

    border-radius: 7px;

    color: #746964;
}



/* ----------------------------------------------------------
   TABLE MAGIC BOX

   Le wrapper permet un défilement horizontal
   sur les petits écrans.
   ---------------------------------------------------------- */

.bm-account-table-wrap {
    width: 100%;

    overflow-x: auto;
}



/* Tableau */

.bm-account-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 820px;

    font-size: 13px;
}



/* Entêtes */

.bm-account-table th {
    padding: 11px 12px;

    background: #f4f1ef;

    border-bottom: 1px solid #ddd4d0;

    text-align: left;

    color: #4a3e39;
}



/* Cellules */

.bm-account-table td {
    padding: 12px;

    border-bottom: 1px solid #eee8e5;

    color: #544944;

    vertical-align: middle;
}



/* Survol d'une ligne */

.bm-account-table tbody tr:hover {
    background: #faf8f7;
}



/* ----------------------------------------------------------
   ETAT DE LA MAGIC BOX
   ---------------------------------------------------------- */

.bm-box-status {
    display: inline-block;

    padding: 4px 8px;

    border-radius: 12px;

    background: #f0e8e6;

    color: #6f302f;

    font-weight: 600;

    font-size: 11px;
}



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

@media (max-width: 768px) {

    .bm-account-panel {
        padding: 18px;
    }


    .bm-account-summary {
        flex-direction: column;
    }


    .bm-account-summary-item {
        min-width: 0;
    }

}


/* ==========================================================
   CONNECTED USER MENU
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEUR DU MENU

   Position relative = le menu flottant sera positionné
   par rapport à ce bloc.
   ---------------------------------------------------------- */

.bm-user-menu {
    position: relative;

    margin: 0;

    padding: 0;
}



/* ----------------------------------------------------------
   SUPPRESSION TOTALE DE LA FLECHE NATIVE <details>

   On utilise notre propre chevron.
   ---------------------------------------------------------- */

.bm-user-menu > summary {
    list-style: none !important;
}


.bm-user-menu > summary::marker {
    content: "";
    display: none;
}


.bm-user-menu > summary::-webkit-details-marker {
    display: none !important;
}



/* ----------------------------------------------------------
   BOUTON COMPTE VISIBLE DANS LE HEADER
   ---------------------------------------------------------- */

.bm-user-menu-button {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 160px;

    padding: 7px 10px;

    box-sizing: border-box;

    border-radius: 7px;

    cursor: pointer;

    user-select: none;

    transition:
        background 0.15s ease;
}


.bm-user-menu-button:hover {
    background: #f7f4f2;
}



/* ----------------------------------------------------------
   ICONE UTILISATEUR
   ---------------------------------------------------------- */

.bm-user-menu-icon {
    flex: 0 0 auto;

    font-size: 18px;

    color: #6b5d57;
}



/* ----------------------------------------------------------
   NOM + SOLDE
   ---------------------------------------------------------- */

.bm-user-menu-identity {
    display: flex;

    flex: 1;

    min-width: 0;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.15;
}



/* Avatar name */

.bm-user-menu-name {
    max-width: 145px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #302825;

    font-size: 13px;

    font-weight: 700;
}



/* Balance */

.bm-user-menu-balance {
    margin-top: 3px;

    color: #a3161a;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}



/* ----------------------------------------------------------
   NOTRE PETITE FLECHE
   ---------------------------------------------------------- */

.bm-user-menu-chevron {
    flex: 0 0 auto;

    color: #746964;

    font-size: 11px;

    transition:
        transform 0.18s ease;
}



/* Rotate when open */

.bm-user-menu[open]
.bm-user-menu-chevron {
    transform: rotate(180deg);
}



/* ==========================================================
   DROPDOWN
   ========================================================== */

.bm-user-dropdown {

    /*
       IMPORTANT :
       absolute empêche le menu de pousser le header.
    */

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    z-index: 9999;

    width: 245px;

    padding: 8px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #ddd4d0;

    border-radius: 10px;

    box-shadow:
        0 12px 35px
        rgba(40, 28, 23, 0.18);
}



/* ----------------------------------------------------------
   PETIT RAPPEL DU COMPTE EN HAUT DU MENU
   ---------------------------------------------------------- */

.bm-user-dropdown-header {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 10px 11px;
}


.bm-user-dropdown-header strong {
    color: #332b28;

    font-size: 13px;
}


.bm-user-dropdown-header span {
    color: #a3161a;

    font-size: 12px;

    font-weight: 700;
}



/* ----------------------------------------------------------
   SEPARATEURS
   ---------------------------------------------------------- */

.bm-user-dropdown-divider {
    height: 1px;

    margin: 5px 4px;

    background: #eee8e5;
}



/* ----------------------------------------------------------
   CHAQUE LIGNE DU MENU
   ---------------------------------------------------------- */

.bm-user-dropdown-item {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    min-height: 38px;

    padding: 8px 10px;

    box-sizing: border-box;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #403632;

    font-family: inherit;

    font-size: 13px;

    text-decoration: none;

    text-align: left;

    cursor: pointer;
}



/* Hover */

.bm-user-dropdown-item:hover {
    background: #f7f3f1;

    color: #911317;
}



/* ----------------------------------------------------------
   PETITE ICONE DE CHAQUE LIGNE
   ---------------------------------------------------------- */

.bm-user-dropdown-item-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    flex: 0 0 20px;

    color: #991418;

    font-size: 14px;
}



/* ----------------------------------------------------------
   LOGOUT
   ---------------------------------------------------------- */

.bm-user-dropdown-logout-form {
    margin: 0;

    padding: 0;
}


.bm-user-dropdown-logout {
    color: #7a3333;
}



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

@media (max-width: 768px) {

    .bm-user-menu-name {
        max-width: 100px;
    }


    .bm-user-dropdown {
        width: 220px;
    }

}

/* ==========================================================
   SELLER AREA
   ========================================================== */

/* Main seller dashboard container */
.bm-seller-page {
    margin-top: 28px;
    margin-bottom: 55px;
}

/* Page heading */
.bm-seller-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.bm-seller-page-header h1 {
    margin: 0;
    font-size: 30px;
    color: #302825;
}

.bm-seller-page-header p {
    margin: 6px 0 0;
    color: #746964;
}

/* Seller eligibility banner */
.bm-seller-access {
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 10px;
    line-height: 1.6;
}

.bm-seller-access-ready {
    background: #f4faf4;
    border: 1px solid #cfdccf;
    color: #365f34;
}

.bm-seller-access-blocked {
    background: #fff9ea;
    border: 1px solid #e4d4ae;
    color: #5f5132;
}

.bm-seller-access strong {
    display: block;
    margin-bottom: 4px;
}

/* Generic seller panel */
.bm-seller-panel {
    margin-bottom: 24px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 12px;
}

.bm-seller-panel h2 {
    margin: 0 0 18px;
    color: #7e0f12;
    font-size: 21px;
}

.bm-seller-panel-intro {
    margin: -8px 0 20px;
    color: #746964;
    line-height: 1.6;
}

/* Two-column area used for shop creation + shop list */
.bm-seller-columns {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: start;
}

/* Seller form */
.bm-seller-form-field {
    margin-bottom: 16px;
}

.bm-seller-form-field label {
    display: block;
    margin-bottom: 6px;
    color: #403632;
    font-size: 13px;
    font-weight: 700;
}

.bm-seller-input,
.bm-seller-textarea,
.bm-seller-file {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8cfcb;
    border-radius: 7px;
    background: #ffffff;
    color: #302825;
    font: inherit;
}

.bm-seller-input {
    height: 42px;
    padding: 0 12px;
}

.bm-seller-textarea {
    min-height: 130px;
    padding: 11px 12px;
    resize: vertical;
}

.bm-seller-file {
    padding: 9px;
}

.bm-seller-input:focus,
.bm-seller-textarea:focus,
.bm-seller-file:focus {
    outline: none;
    border-color: #8d1115;
    box-shadow: 0 0 0 3px rgba(141, 17, 21, 0.08);
}

.bm-seller-help {
    margin-top: 5px;
    color: #8a7e79;
    font-size: 11px;
    line-height: 1.5;
}

.bm-seller-submit {
    width: 100%;
    min-height: 44px;
}

/* Form feedback */
.bm-seller-message {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 7px;
    line-height: 1.5;
}

.bm-seller-message-success {
    background: #f0f8ed;
    border: 1px solid #cfe4c8;
    color: #397033;
}

.bm-seller-message-error {
    background: #fff1f1;
    border: 1px solid #efc3c3;
    color: #8f1717;
}

/* Shop cards */
.bm-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bm-shop-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid #e5ddda;
    border-radius: 9px;
    background: #ffffff;
}

.bm-shop-logo {
    width: 76px;
    height: 76px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f5f1ef;
    color: #8d1115;
    font-size: 26px;
    font-weight: 700;
}

.bm-shop-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-shop-name {
    margin-bottom: 4px;
    color: #302825;
    font-size: 15px;
    font-weight: 700;
}

.bm-shop-description {
    max-height: 42px;
    overflow: hidden;
    margin-bottom: 8px;
    color: #746964;
    font-size: 12px;
    line-height: 1.45;
}

.bm-shop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: #7f746f;
    font-size: 11px;
}

.bm-shop-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f1e9e7;
    color: #7e2525;
    font-weight: 700;
}

.bm-seller-empty {
    padding: 22px;
    border-radius: 8px;
    background: #f7f4f2;
    color: #746964;
    text-align: center;
}

/* Magic boxes / inventory tables */
.bm-seller-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bm-seller-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 12px;
}

.bm-seller-table th {
    padding: 11px 12px;
    background: #f4f1ef;
    border-bottom: 1px solid #ddd4d0;
    color: #4a3e39;
    text-align: left;
}

.bm-seller-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #eee8e5;
    color: #544944;
    vertical-align: middle;
}

.bm-seller-table tbody tr:hover {
    background: #faf8f7;
}

.bm-seller-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.bm-seller-pill-ok {
    background: #e4f1df;
    color: #35752e;
}

.bm-seller-pill-warning {
    background: #fff1df;
    color: #8b5a17;
}

.bm-seller-pill-no {
    background: #f8e5e5;
    color: #8a2525;
}

.bm-seller-box-title {
    margin: 22px 0 10px;
    color: #403632;
    font-size: 15px;
}

/* Seller area responsive */
@media (max-width: 1050px) {
    .bm-seller-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .bm-seller-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bm-seller-panel {
        padding: 18px;
    }

    .bm-shop-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   SELLER PRODUCT ACTIONS
   ========================================================== */

/* Small action buttons used inside seller inventory/product tables. */
.bm-seller-small-button {
    min-height: 31px;
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
}

/* Keeps action links aligned cleanly in table cells. */
.bm-seller-product-action {
    white-space: nowrap;
}

/* Text shown when an inventory object cannot be sold. */
.bm-seller-action-disabled {
    color: #9a8f8a;
    font-size: 11px;
}

/* Public product link displayed beside the Edit button. */
.bm-seller-public-link {
    display: inline-block;
    margin-left: 8px;
    color: var(--bm-red);
    font-size: 11px;
    font-weight: 700;
}

.bm-seller-public-link:hover {
    text-decoration: underline;
}


/* ==========================================================
   CREATE / EDIT PRODUCT PAGE
   ========================================================== */

/* Main page spacing. */
.bm-product-form-page {
    margin-top: 28px;
    margin-bottom: 60px;
}

/* Header line containing page title and current product status. */
.bm-product-form-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.bm-product-form-topbar h1 {
    margin: 7px 0 0;
    color: #302825;
    font-size: 30px;
}

/* Back link to Seller Area. */
.bm-product-form-back {
    color: var(--bm-red);
    font-size: 12px;
    font-weight: 700;
}

.bm-product-form-back:hover {
    text-decoration: underline;
}

/* Current status badge when editing an existing product. */
.bm-product-form-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1e9e7;
    color: #7e2525;
    font-size: 11px;
    font-weight: 700;
}

.bm-product-form-status-published {
    background: #e4f1df;
    color: #35752e;
}

.bm-product-form-status-draft,
.bm-product-form-status-paused {
    background: #fff1df;
    color: #8b5a17;
}

.bm-product-form-status-archived {
    background: #f8e5e5;
    color: #8a2525;
}

/* Success / error feedback. */
.bm-product-form-message {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 7px;
    line-height: 1.5;
}

.bm-product-form-message-success {
    background: #f0f8ed;
    border: 1px solid #cfe4c8;
    color: #397033;
}

.bm-product-form-message-error {
    background: #fff1f1;
    border: 1px solid #efc3c3;
    color: #8f1717;
}


/* ==========================================================
   PRODUCT SOURCE SUMMARY
   ========================================================== */

/* Read-only block showing the exact Magic Box inventory source. */
.bm-product-form-source {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-left: 4px solid var(--bm-red);
    border-radius: 10px;
}

.bm-product-form-source-title {
    margin-bottom: 12px;
    color: #7e0f12;
    font-size: 15px;
    font-weight: 700;
}

/* Four compact source information cells. */
.bm-product-form-source-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bm-product-form-source-grid > div {
    padding: 10px 12px;
    background: #f7f4f2;
    border-radius: 7px;
}

.bm-product-form-source-grid span {
    display: block;
    margin-bottom: 4px;
    color: #81746e;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bm-product-form-source-grid strong {
    color: #403632;
    font-size: 12px;
}

.bm-product-form-source-note {
    margin: 11px 0 0;
    color: #8a7e79;
    font-size: 11px;
}


/* ==========================================================
   PRODUCT FORM LAYOUT
   ========================================================== */

/* Left side = product data. Right side = shops and publication. */
.bm-product-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.bm-product-form-main,
.bm-product-form-side {
    min-width: 0;
}

/* Right column stays visible while editing long descriptions/filters. */
.bm-product-form-side {
    position: sticky;
    top: 18px;
}

/* Reusable white form panel. */
.bm-product-form-card {
    margin-bottom: 18px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 11px;
}

.bm-product-form-card h2 {
    margin: 0 0 18px;
    color: #7e0f12;
    font-size: 19px;
}

.bm-product-form-card-intro {
    margin: -8px 0 16px;
    color: #746964;
    font-size: 12px;
    line-height: 1.55;
}

/* Two fields side by side when enough width is available. */
.bm-product-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
    gap: 16px;
}

/* Label + input group. */
.bm-product-form-field {
    margin-bottom: 17px;
}

.bm-product-form-field:last-child {
    margin-bottom: 0;
}

.bm-product-form-field label {
    display: block;
    margin-bottom: 6px;
    color: #403632;
    font-size: 13px;
    font-weight: 700;
}

/* Text inputs, select and textarea share the same visual language. */
.bm-product-form-field input[type="text"],
.bm-product-form-field input[type="number"],
.bm-product-form-field select,
.bm-product-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8cfcb;
    border-radius: 7px;
    background: #ffffff;
    color: #302825;
    font: inherit;
}

.bm-product-form-field input[type="text"],
.bm-product-form-field input[type="number"],
.bm-product-form-field select {
    height: 42px;
    padding: 0 12px;
}

.bm-product-form-field textarea {
    min-height: 190px;
    padding: 11px 12px;
    resize: vertical;
}

.bm-product-form-field input[type="file"] {
    width: 100%;
}

.bm-product-form-field input:focus,
.bm-product-form-field select:focus,
.bm-product-form-field textarea:focus {
    outline: none;
    border-color: var(--bm-red);
    box-shadow: 0 0 0 3px rgba(141, 17, 21, 0.08);
}

.bm-product-form-help {
    margin-top: 6px;
    color: #8a7e79;
    font-size: 11px;
    line-height: 1.45;
}

/* Existing primary image preview while editing. */
.bm-product-form-current-image {
    width: 220px;
    max-width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #e4dcda;
    border-radius: 8px;
    background: #f5f1ef;
}

.bm-product-form-current-image img {
    width: 100%;
    aspect-ratio: 1.35 / 1;
    object-fit: contain;
}


/* ==========================================================
   PRODUCT ATTRIBUTES / FILTERS
   ========================================================== */

.bm-product-form-filter-group {
    padding: 15px 0;
    border-top: 1px solid #eee8e5;
}

.bm-product-form-filter-group:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.bm-product-form-filter-group h3 {
    margin: 0 0 10px;
    color: #403632;
    font-size: 14px;
}

.bm-product-form-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Filter option rendered as a compact selectable chip. */
.bm-product-form-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #e1d8d4;
    border-radius: 999px;
    background: #faf8f7;
    color: #554944;
    font-size: 12px;
    cursor: pointer;
}

.bm-product-form-check:hover {
    border-color: #c8aaa7;
}

.bm-product-form-check input {
    accent-color: var(--bm-red);
}


/* ==========================================================
   SHOP SELECTION
   ========================================================== */

.bm-product-form-shop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bm-product-form-shop-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e5ddda;
    border-radius: 7px;
    background: #faf8f7;
    cursor: pointer;
}

.bm-product-form-shop-choice:hover {
    border-color: #c8aaa7;
    background: #ffffff;
}

.bm-product-form-shop-choice input {
    margin-top: 2px;
    accent-color: var(--bm-red);
}

.bm-product-form-shop-choice span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.bm-product-form-shop-choice strong {
    overflow: hidden;
    color: #403632;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-product-form-shop-choice small {
    margin-top: 2px;
    color: #8a7e79;
    font-size: 10px;
}

.bm-product-form-empty {
    padding: 15px;
    border-radius: 7px;
    background: #f7f4f2;
    color: #746964;
    font-size: 12px;
}


/* ==========================================================
   PUBLICATION BUTTONS
   ========================================================== */

.bm-product-form-publish-card .bm-button {
    width: 100%;
    min-height: 42px;
}

.bm-product-form-draft-button {
    margin-bottom: 9px;
}

.bm-product-form-publish-button {
    font-weight: 700;
}


/* ==========================================================
   PRODUCT FORM RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {
    .bm-product-form-layout {
        grid-template-columns: 1fr;
    }

    .bm-product-form-side {
        position: static;
    }

    .bm-product-form-source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .bm-product-form-topbar {
        flex-direction: column;
    }

    .bm-product-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bm-product-form-source-grid {
        grid-template-columns: 1fr;
    }

    .bm-product-form-card {
        padding: 18px;
    }
}


/* ==========================================================
   PUBLIC SHOP PAGE
   ========================================================== */

/* Main public shop page spacing. */
.bm-public-shop-page {
    margin-top: 26px;
    margin-bottom: 55px;
}

/* Back link displayed above the shop. */
.bm-public-shop-back {
    margin-bottom: 18px;
}

.bm-public-shop-back a {
    color: var(--bm-red);
    font-weight: 700;
}

.bm-public-shop-back a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------
   PUBLIC SHOP HEADER
   Logo + shop name + description.
   ---------------------------------------------------------- */

.bm-public-shop-header {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 14px;
    box-shadow: var(--bm-shadow);
}

/* Fixed logo frame keeps all shop pages visually consistent. */
.bm-public-shop-logo {
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    overflow: hidden;
    border: 1px solid #e5ddda;
    border-radius: 12px;
    background: #f6f3f1;
}

.bm-public-shop-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bm-public-shop-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #242424, #6d1919);
    color: #ffffff;
    font-size: 48px;
}

.bm-public-shop-info {
    min-width: 0;
}

.bm-public-shop-kicker {
    margin-bottom: 4px;
    color: var(--bm-red);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bm-public-shop-info h1 {
    margin: 0 0 10px;
    color: #302825;
    font-size: 32px;
    line-height: 1.15;
}

.bm-public-shop-description {
    max-width: 850px;
    color: #655a55;
    line-height: 1.65;
}

.bm-public-shop-meta {
    margin-top: 15px;
    color: #7a6e69;
    font-size: 12px;
}

.bm-public-shop-meta strong {
    color: var(--bm-red);
}

/* ----------------------------------------------------------
   PRODUCT LIST INSIDE A SHOP
   ---------------------------------------------------------- */

.bm-public-shop-products {
    margin-top: 24px;
}

.bm-public-shop-products-heading {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.bm-public-shop-products-heading h2 {
    margin: 0;
    color: #302825;
    font-size: 22px;
}

.bm-public-shop-products-heading span {
    min-width: 30px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f0e8e6;
    color: var(--bm-red-dark);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

/* The complete product card is clickable on a shop page. */
.bm-shop-product-link {
    display: block;
    min-width: 0;
}

/* ----------------------------------------------------------
   SHOP NOT FOUND
   ---------------------------------------------------------- */

.bm-public-shop-not-found {
    padding: 55px 30px;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 12px;
    text-align: center;
}

.bm-public-shop-not-found h1 {
    margin: 0 0 10px;
    color: #302825;
}

.bm-public-shop-not-found p {
    margin: 0;
    color: #746964;
}

/* ----------------------------------------------------------
   RESPONSIVE PUBLIC SHOP
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .bm-public-shop-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .bm-public-shop-logo {
        width: 105px;
        height: 105px;
        flex-basis: 105px;
    }

    .bm-public-shop-info h1 {
        font-size: 27px;
    }
}

/* ==========================================================
   PRODUCT PAGE - SHOPS WHERE THE PRODUCT IS SOLD
   Add this block at the VERY END of marketplace.css
   ========================================================== */


/* List containing one or several shop cards. */
.bm-product-shop-list {
    display: grid;
    gap: 10px;
}


/* Clickable shop card. */
.bm-product-shop-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    padding: 10px 12px;

    background: #faf8f7;

    border: 1px solid #e7ded9;
    border-radius: 8px;

    color: #403632;
    text-decoration: none;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}


/* Small hover effect. */
.bm-product-shop-card:hover {
    background: #ffffff;
    border-color: #c9aba5;
    transform: translateY(-1px);
}


/* Shop logo area. */
.bm-product-shop-logo {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f1ece9;

    border: 1px solid #e2d8d4;
    border-radius: 7px;
}


/* Real uploaded logo. */
.bm-product-shop-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Placeholder if a shop has no logo. */
.bm-product-shop-logo-placeholder {
    color: #8d1115;
    font-size: 22px;
}


/* Shop name + small action text. */
.bm-product-shop-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.bm-product-shop-name {
    overflow: hidden;
    color: #302825;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.bm-product-shop-view {
    margin-top: 3px;
    color: #8d1115;
    font-size: 11px;
    font-weight: 600;
}


/* Arrow at the right side of the card. */
.bm-product-shop-arrow {
    color: #8d1115;
    font-size: 18px;
}


/* ==========================================================
   SELLER AREA - MAGIC BOX ACTIVATION

   A coller TOUT EN BAS de marketplace.css,
   en dehors de tout bloc @media existant.
   ========================================================== */


/* ----------------------------------------------------------
   Panneau principal d'activation.
   Une légère teinte rouge permet de le distinguer des autres
   blocs du Seller Area sans rendre la page trop sombre.
   ---------------------------------------------------------- */

.bm-activation-panel {
    border-color: #ead3cf;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffafa 100%
        );
}


/* ----------------------------------------------------------
   Deux colonnes :
   - explications à gauche
   - générateur de code à droite
   ---------------------------------------------------------- */

.bm-activation-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 420px);

    gap: 34px;

    align-items: center;
}


/* ----------------------------------------------------------
   Petit libellé rouge au-dessus du titre.
   ---------------------------------------------------------- */

.bm-activation-eyebrow {
    margin-bottom: 5px;

    color: #9a1519;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   Titre du panneau.
   ---------------------------------------------------------- */

.bm-activation-info h2 {
    margin: 0 0 8px;
}


/* ----------------------------------------------------------
   Liste des étapes in-world.
   ---------------------------------------------------------- */

.bm-activation-steps {
    margin: 18px 0 0;

    padding-left: 21px;

    color: #514641;
}


.bm-activation-steps li {
    margin: 8px 0;

    padding-left: 4px;
}


/* ----------------------------------------------------------
   Note de sécurité : code 10 minutes / usage unique.
   ---------------------------------------------------------- */

.bm-activation-note {
    margin-top: 18px;

    padding: 11px 13px;

    border: 1px solid #ecd8c5;
    border-radius: 7px;

    background: #fff8ef;

    color: #6a4c2f;

    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================
   CARTE DU CODE
   ========================================================== */

.bm-activation-code-card {
    padding: 22px;

    border: 1px solid #e4d8d4;
    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(60, 38, 30, 0.07);
}


/* Petit titre "Your activation code" */

.bm-activation-code-label {
    margin-bottom: 8px;

    color: #746964;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ----------------------------------------------------------
   Le code lui-même doit être immédiatement lisible et facile
   à recopier dans la Magic Box in-world.
   ---------------------------------------------------------- */

.bm-activation-code-value {
    margin: 4px 0 12px;

    padding: 13px 15px;

    border: 1px dashed #cda6a2;
    border-radius: 8px;

    background: #fff8f7;

    color: #8d1115;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-align: center;
}


/* Informations sous le code. */

.bm-activation-code-meta {
    margin-top: 6px;

    color: #655a55;

    font-size: 12px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   Etat avant la génération d'un code.
   ---------------------------------------------------------- */

.bm-activation-code-placeholder {
    min-height: 105px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 18px;

    border: 1px dashed #d8cbc6;
    border-radius: 8px;

    background: #faf8f7;

    color: #6b5f5a;

    text-align: center;
}


.bm-activation-code-placeholder strong {
    color: #403632;
}


/* ----------------------------------------------------------
   Formulaire / bouton de génération.
   ---------------------------------------------------------- */

.bm-activation-form {
    margin-top: 17px;
}


.bm-activation-button {
    width: 100%;
}


/* ----------------------------------------------------------
   Avertissement lorsque le vendeur demande un nouveau code.
   ---------------------------------------------------------- */

.bm-activation-replace-note {
    margin-top: 12px;

    color: #8a6a50;

    font-size: 11px;
    line-height: 1.45;

    text-align: center;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .bm-activation-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .bm-activation-code-card {
        padding: 17px;
    }


    .bm-activation-code-value {
        font-size: 23px;
    }

}




/* ==========================================================
   PRODUCT CATALOG - LIST VIEW
   ========================================================== */


/* ----------------------------------------------------------
   En mode liste, une seule fiche produit par ligne.
   ---------------------------------------------------------- */

.bm-product-grid.bm-product-grid-list {

    grid-template-columns: 1fr;

    gap: 12px;
}



/* ----------------------------------------------------------
   La carte devient horizontale.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-product-card {

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);

    min-height: 155px;
}



/* ----------------------------------------------------------
   Image du produit en mode liste.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-product-image-wrap {

    width: 220px;

    height: 100%;

    min-height: 155px;

    aspect-ratio: auto;

    border-radius:
        var(--bm-radius)
        0
        0
        var(--bm-radius);
}



/* ----------------------------------------------------------
   Contenu texte.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-product-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 18px 22px;
}



/* ----------------------------------------------------------
   Titre plus visible en mode liste.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-product-title {

    margin-bottom: 5px;

    font-size: 17px;
}



/* ----------------------------------------------------------
   Catégorie.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-product-store {

    margin-bottom: 8px;

    font-size: 12px;
}



/* ----------------------------------------------------------
   Permissions.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-permissions {

    margin:
        5px
        0
        10px;
}



/* ----------------------------------------------------------
   Prix plus visible.
   ---------------------------------------------------------- */

.bm-product-grid-list
.bm-price-bm {

    font-size: 18px;
}



/* ==========================================================
   LIST VIEW - MOBILE
   ========================================================== */

@media (max-width: 700px) {

    /*
       Sur téléphone, même si l'utilisateur avait choisi
       la vue liste, on revient à une présentation verticale
       pour éviter une carte trop étroite.
    */

    .bm-product-grid-list
    .bm-product-card {

        grid-template-columns: 1fr;
    }


    .bm-product-grid-list
    .bm-product-image-wrap {

        width: 100%;

        height: auto;

        aspect-ratio: 1.35 / 1;

        border-radius:
            var(--bm-radius)
            var(--bm-radius)
            0
            0;
    }

}


/* ==========================================================
   HEADER NAVIGATION - CATEGORIES DROPDOWN
   ========================================================== */


/* ----------------------------------------------------------
   Conteneur du menu Categories.
   ---------------------------------------------------------- */

.bm-nav-dropdown {
    position: relative;

    height: 100%;

    margin: 0;

    padding: 0;
}



/* ----------------------------------------------------------
   Suppression de la flèche native de <details>.
   ---------------------------------------------------------- */

.bm-nav-dropdown > summary {
    list-style: none;
}


.bm-nav-dropdown > summary::marker {
    content: "";
    display: none;
}


.bm-nav-dropdown > summary::-webkit-details-marker {
    display: none;
}



/* ----------------------------------------------------------
   Le bouton Categories conserve exactement l'apparence
   des autres éléments de navigation.
   ---------------------------------------------------------- */

.bm-nav-dropdown-button {
    height: 100%;

    cursor: pointer;

    user-select: none;
}



/* ----------------------------------------------------------
   Petite flèche.
   ---------------------------------------------------------- */

.bm-nav-dropdown-arrow {
    margin-left: -6px;

    font-size: 10px;

    color: #696969;

    transition:
        transform 0.18s ease;
}



/* Rotation de la flèche quand le menu est ouvert. */

.bm-nav-dropdown[open]
.bm-nav-dropdown-arrow {
    transform: rotate(180deg);
}



/* ==========================================================
   MENU FLOTTANT
   ========================================================== */

.bm-nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 1px);

    left: 50%;

    transform: translateX(-50%);

    z-index: 9999;

    width: 230px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid var(--bm-border);

    border-radius: 8px;

    box-shadow:
        0 12px 30px
        rgba(30, 20, 15, 0.14);
}



/* ----------------------------------------------------------
   Une catégorie.
   ---------------------------------------------------------- */

.bm-nav-dropdown-link {
    display: block;

    padding: 9px 12px;

    border-radius: 5px;

    color: #343434;

    font-size: 13px;

    text-decoration: none;
}



/* Survol */

.bm-nav-dropdown-link:hover {
    background: #f7f3f1;

    color: var(--bm-red);
}



/* ==========================================================
   CATEGORIE ACTIVE DANS LA NAVIGATION
   ========================================================== */

.bm-nav-dropdown.active
.bm-nav-dropdown-button {
    color: var(--bm-red);
}


.bm-nav-dropdown.active::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 0;

    height: 2px;

    background: var(--bm-red);
}


/* ==========================================================
   PUBLIC STORES DIRECTORY
   ========================================================== */

.bm-stores-page {
    margin-top: 28px;
    margin-bottom: 55px;
}

.bm-stores-header {
    margin-bottom: 20px;
}

.bm-stores-header h1 {
    margin: 0 0 6px;
    font-size: 30px;
    color: #302825;
}

.bm-stores-header p {
    margin: 0;
    color: #746964;
}

.bm-stores-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 10px;
}

.bm-stores-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.bm-stores-search input[type="search"] {
    width: min(520px, 100%);
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d8cfcb;
    border-radius: 6px;
    outline: none;
}

.bm-stores-search input[type="search"]:focus {
    border-color: var(--bm-red);
    box-shadow: 0 0 0 3px rgba(163, 19, 19, 0.07);
}

.bm-stores-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555555;
    font-size: 12px;
}

.bm-stores-results-count {
    margin-bottom: 12px;
    color: #666666;
    font-size: 12px;
}

.bm-stores-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bm-store-directory-card {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    min-height: 145px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 10px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bm-store-directory-card:hover {
    transform: translateY(-2px);
    border-color: #d6cac5;
    box-shadow: 0 6px 18px rgba(40, 28, 23, 0.08);
}

.bm-store-directory-logo {
    width: 105px;
    min-height: 145px;
    overflow: hidden;
    background: #f4f1ef;
}

.bm-store-directory-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-store-directory-placeholder {
    width: 100%;
    height: 100%;
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #242424, #6d1919);
    color: #ffffff;
    font-size: 34px;
}

.bm-store-directory-content {
    min-width: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.bm-store-directory-content h2 {
    margin: 0 0 7px;
    overflow: hidden;
    color: #302825;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bm-store-directory-content p {
    margin: 0 0 12px;
    display: -webkit-box;
    overflow: hidden;
    color: #746964;
    font-size: 12px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.bm-store-directory-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.bm-store-directory-meta span {
    color: #746964;
}

.bm-store-directory-meta strong {
    color: var(--bm-red);
}

.bm-stores-empty {
    padding: 45px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 10px;
    color: #746964;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.bm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
}

.bm-pagination-link {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #ddd4d0;
    border-radius: 6px;
    color: #544944;
    font-size: 13px;
}

.bm-pagination-link:hover {
    border-color: var(--bm-red);
    color: var(--bm-red);
}

.bm-pagination-link.active {
    background: var(--bm-red);
    border-color: var(--bm-red);
    color: #ffffff;
}

@media (max-width: 1100px) {
    .bm-stores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bm-stores-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-stores-search {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-stores-search input[type="search"] {
        width: 100%;
    }

    .bm-stores-sort {
        justify-content: space-between;
    }

    .bm-stores-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   NEW ARRIVALS PAGE
   ========================================================== */


/* ----------------------------------------------------------
   Main page spacing.
   ---------------------------------------------------------- */

.bm-new-arrivals-page {
    margin-top: 28px;
    margin-bottom: 55px;
}


/* ----------------------------------------------------------
   Page heading.
   ---------------------------------------------------------- */

.bm-new-arrivals-header {
    margin-bottom: 22px;
}


.bm-new-arrivals-header h1 {
    margin: 0 0 6px;

    font-size: 30px;

    color: #302825;
}


.bm-new-arrivals-header p {
    margin: 0;

    color: #746964;
}


/* ==========================================================
   FAVORITES - ACTIVE STATE
   ========================================================== */


/* Produit déjà présent dans les favoris */

.bm-favorite-button.is-favorite {
    background: var(--bm-red);

    color: #ffffff;
}


/* Pendant l'écriture dans la base */

.bm-favorite-button:disabled {
    opacity: 0.65;

    cursor: wait;
}



.bm-favorites-page {
    margin-top: 28px;
    margin-bottom: 55px;
}

.bm-favorites-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.bm-favorites-header h1 {
    margin: 0 0 6px;
    font-size: 30px;
    color: #302825;
}

.bm-favorites-header p,
.bm-favorites-count {
    margin: 0;
    color: #746964;
}

.bm-favorites-count {
    font-size: 12px;
}

.bm-favorites-empty {
    padding: 55px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e7e2df;
    border-radius: 10px;
}

.bm-favorites-empty[hidden] {
    display: none;
}

.bm-favorites-empty-icon {
    margin-bottom: 12px;
    color: var(--bm-red);
    font-size: 42px;
}

.bm-favorites-empty h2 {
    margin: 0 0 8px;
    color: #302825;
    font-size: 21px;
}

.bm-favorites-empty p {
    margin: 0 0 20px;
    color: #746964;
}

@media (max-width: 700px) {
    .bm-favorites-header {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================
   SELLER AREA - DANGEROUS ACTIONS
   ========================================================== */

/* Used for actions that permanently disable a Marketplace source. */
.bm-button-danger {
    border-color: #b42318;
    background: #ffffff;
    color: #b42318;
}

.bm-button-danger:hover {
    background: #fff1f0;
}

/* Keep the Remove button compact inside the Magic Box table. */
.bm-magic-box-remove-form {
    margin: 0;
}


/* ==========================================================
   PRODUCT DETAIL PAGE - FAVORITE BUTTON
   ========================================================== */


/*
   The product image becomes the positioning reference
   for the favorite heart displayed on the detail page.
*/

.bm-product-detail-image {
    position: relative;
}


/*
   Larger favorite button used ONLY on the product detail page.

   The generic .bm-favorite-button class still handles:
   - empty / filled heart
   - favorite state
   - hover
   - disabled state while saving
*/

.bm-product-detail-favorite-button {
    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;

    z-index: 5;

    font-size: 25px;

    border: 1px solid rgba(255, 255, 255, 0.65);

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.18);
}


/* ==========================================================
   CARTS PAGE
   ========================================================== */

.bm-carts-page {
    margin-top: 28px;
    margin-bottom: 60px;
}


/* ==========================================================
   PAGE HEADER
   ========================================================== */

.bm-carts-header {
    margin-bottom: 22px;
}

.bm-carts-header h1 {
    margin: 0 0 6px;

    color: #302825;

    font-size: 30px;
}

.bm-carts-header p {
    margin: 0;

    color: #746964;
}


/* ==========================================================
   EMPTY CART
   ========================================================== */

.bm-carts-empty {
    padding: 55px 25px;

    background: #ffffff;

    border: 1px solid #e7e2df;
    border-radius: 12px;

    text-align: center;
}

.bm-carts-empty-icon {
    margin-bottom: 12px;

    color: var(--bm-red);

    font-size: 44px;
}

.bm-carts-empty h2 {
    margin: 0 0 8px;

    color: #302825;

    font-size: 22px;
}

.bm-carts-empty p {
    margin: 0 0 22px;

    color: #746964;
}


/* ==========================================================
   CART PANEL
   ========================================================== */

.bm-cart-panel {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e7e2df;
    border-radius: 12px;

    box-shadow: var(--bm-shadow);
}


/* ==========================================================
   CART HEADER
   ========================================================== */

.bm-cart-panel-header {
    padding: 18px 22px;

    background: #faf8f7;

    border-bottom: 1px solid #eee8e5;
}

.bm-cart-panel-header > div {
    display: flex;

    align-items: center;

    gap: 12px;
}

.bm-cart-payment-icon {
    width: 38px;
    height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    border-radius: 50%;

    background: #f3e6e5;

    color: var(--bm-red);

    font-size: 20px;
}

.bm-cart-panel-header h2 {
    margin: 0;

    color: #302825;

    font-size: 20px;
}

.bm-cart-item-count {
    display: block;

    margin-top: 2px;

    color: #81746e;

    font-size: 11px;
}


/* ==========================================================
   CART ITEMS
   ========================================================== */

.bm-cart-items {
    display: flex;

    flex-direction: column;
}

.bm-cart-item {
    display: grid;

    grid-template-columns:
        105px
        minmax(0, 1fr)
        150px
        150px;

    gap: 18px;

    align-items: center;

    padding: 18px 22px;

    border-bottom: 1px solid #eee8e5;
}

.bm-cart-item:last-child {
    border-bottom: 0;
}

.bm-cart-item-unavailable {
    background: #fffafa;
}


/* ==========================================================
   PRODUCT IMAGE
   ========================================================== */

.bm-cart-item-image {
    width: 105px;
    height: 82px;

    overflow: hidden;

    background: #f4f1ef;

    border: 1px solid #e6ddda;
    border-radius: 8px;
}

.bm-cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.bm-cart-item-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #242424,
            #6d1919
        );

    color: #ffffff;

    font-size: 30px;
}


/* ==========================================================
   PRODUCT INFORMATION
   ========================================================== */

.bm-cart-item-main {
    min-width: 0;
}

.bm-cart-item-title {
    display: inline-block;

    margin-bottom: 8px;

    color: #302825;

    font-size: 16px;
    font-weight: 700;
}

.bm-cart-item-title:hover {
    color: var(--bm-red);
}

.bm-cart-item-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px 18px;

    color: #81746e;

    font-size: 11px;
}

.bm-cart-item-meta strong {
    color: #544944;
}

.bm-cart-item-warning {
    margin-bottom: 8px;

    color: #a04436;

    font-size: 11px;
    font-weight: 700;
}


/* ==========================================================
   PRICES
   ========================================================== */

.bm-cart-item-price,
.bm-cart-item-total {
    display: flex;

    flex-direction: column;

    gap: 4px;

    text-align: right;
}

.bm-cart-item-price span,
.bm-cart-item-total span {
    color: #81746e;

    font-size: 10px;
}

.bm-cart-item-price strong {
    color: #544944;

    font-size: 14px;
}

.bm-cart-item-total strong {
    color: var(--bm-red);

    font-size: 16px;
}


/* ==========================================================
   SUMMARY
   ========================================================== */

.bm-cart-summary {
    margin-left: auto;

    width: min(100%, 420px);

    padding: 20px 22px;

    border-top: 1px solid #eee8e5;
}

.bm-cart-summary-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 7px 0;

    color: #544944;
}

.bm-cart-summary-total {
    color: var(--bm-red);

    font-size: 23px;
}

.bm-cart-summary-balance {
    margin-top: 5px;

    padding-top: 12px;

    border-top: 1px solid #eee8e5;

    color: #746964;

    font-size: 12px;
}


/* ==========================================================
   RESPONSIVE CART
   ========================================================== */

@media (max-width: 900px) {

    .bm-cart-item {
        grid-template-columns:
            90px
            minmax(0, 1fr)
            120px;
    }


    .bm-cart-item-image {
        width: 90px;
        height: 72px;
    }


    .bm-cart-item-price {
        display: none;
    }

}


@media (max-width: 620px) {

    .bm-cart-item {
        grid-template-columns:
            78px
            minmax(0, 1fr);

        gap: 12px;

        padding: 15px;
    }


    .bm-cart-item-image {
        width: 78px;
        height: 68px;
    }


    .bm-cart-item-total {
        grid-column:
            2
            /
            3;

        text-align: left;
    }


    .bm-cart-summary {
        width: 100%;
    }

}


/* ==========================================================
   CART - QUANTITY MANAGEMENT
   ========================================================== */

.bm-cart-item-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;
}


.bm-cart-quantity-control {
    display: inline-flex;
    align-items: center;

    overflow: hidden;

    border: 1px solid #ddd4d0;
    border-radius: 6px;

    background: #ffffff;
}


.bm-cart-quantity-control form {
    margin: 0;
}


.bm-cart-quantity-button {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: #ffffff;

    color: var(--bm-red);

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;
}


.bm-cart-quantity-button:hover:not(:disabled) {
    background: #f7f3f1;
}


.bm-cart-quantity-button:disabled {
    color: #c8c0bc;

    cursor: not-allowed;
}


.bm-cart-quantity-value {
    min-width: 38px;

    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-left: 1px solid #eee8e5;
    border-right: 1px solid #eee8e5;

    color: #302825;

    font-weight: 700;
}


.bm-cart-stock {
    padding: 4px 8px;

    border-radius: 999px;

    background: #f4f1ef;

    color: #746964;

    font-size: 10px;
}


.bm-cart-remove-form {
    margin: 0;
}


.bm-cart-remove-button {
    padding: 4px 7px;

    border: 0;

    background: transparent;

    color: var(--bm-red);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


.bm-cart-remove-button:hover {
    text-decoration: underline;
}


/* ==========================================================
   CART CHECKOUT
   ========================================================== */

.bm-cart-checkout-form {
    margin-top: 16px;
}


.bm-cart-checkout-button {
    width: 100%;
    min-height: 44px;

    font-size: 15px;
    font-weight: 700;
}


.bm-cart-checkout-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


.bm-cart-checkout-warning {
    margin-top: 12px;
    margin-bottom: 0;
}


/* ==========================================================
   HELP CENTER
   ========================================================== */


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

.bm-help-page {
    margin-top: 28px;
    margin-bottom: 60px;
}


/* ----------------------------------------------------------
   PAGE HEADER
   ---------------------------------------------------------- */

.bm-help-header {
    margin-bottom: 24px;
}

.bm-help-header h1 {
    margin: 0 0 7px;

    color: #302825;

    font-size: 30px;
}

.bm-help-header p {
    margin: 0;

    color: #746964;

    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================================
   COMMON HELP SECTIONS
   ========================================================== */

.bm-help-start,
.bm-help-guide,
.bm-help-faq {
    margin-bottom: 24px;

    padding: 26px;

    background: #ffffff;

    border: 1px solid #e7e2df;
    border-radius: 12px;

    box-shadow: var(--bm-shadow);
}


/* ----------------------------------------------------------
   SECTION HEADING
   ---------------------------------------------------------- */

.bm-help-section-heading {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 22px;
}

.bm-help-section-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f4e8e6;

    color: var(--bm-red);

    font-size: 21px;
    font-weight: 700;
}

.bm-help-section-heading h2 {
    margin: 0 0 5px;

    color: #7e0f12;

    font-size: 22px;
}

.bm-help-section-heading p {
    margin: 0;

    color: #746964;

    line-height: 1.55;
}


/* ==========================================================
   BEFORE YOU START
   ========================================================== */


/* ----------------------------------------------------------
   REQUIREMENTS GRID
   ---------------------------------------------------------- */

.bm-help-requirements {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* ----------------------------------------------------------
   REQUIREMENT CARD
   ---------------------------------------------------------- */

.bm-help-requirement-card {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 20px;

    background: #faf8f7;

    border: 1px solid #e7ded9;
    border-radius: 10px;
}


/*
   The Magic Box Hub information uses the full width.
*/

.bm-help-requirement-wide {
    grid-column: 1 / -1;
}


/* ----------------------------------------------------------
   REQUIREMENT ICON
   ---------------------------------------------------------- */

.bm-help-requirement-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #ffffff;

    border: 1px solid #eadeda;

    font-size: 22px;
}


/* ----------------------------------------------------------
   REQUIREMENT CONTENT
   ---------------------------------------------------------- */

.bm-help-requirement-content {
    min-width: 0;

    flex: 1;
}

.bm-help-requirement-content h3 {
    margin: 0 0 7px;

    color: #403632;

    font-size: 16px;
}

.bm-help-requirement-content p {
    margin: 0 0 14px;

    color: #6c605b;

    line-height: 1.6;
}


/* ==========================================================
   MAGIC BOX HUB HIGHLIGHT
   ========================================================== */

.bm-help-map-hint {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 2px;

    padding: 9px 12px;

    background: #fff7ef;

    border: 1px solid #ecd8c5;
    border-radius: 7px;

    color: #694d35;

    font-size: 12px;
}

.bm-help-map-hint span {
    font-size: 18px;
}

.bm-help-map-hint strong {
    color: #5b402b;
}


/* ==========================================================
   BEFORE START ACTIONS
   ========================================================== */

.bm-help-start-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid #eee8e5;
}


/* ==========================================================
   MAGIC BOX GUIDE
   ========================================================== */


/* ----------------------------------------------------------
   STEPS GRID
   ---------------------------------------------------------- */

.bm-help-steps {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* ----------------------------------------------------------
   ONE STEP
   ---------------------------------------------------------- */

.bm-help-step {
    position: relative;

    display: grid;

    grid-template-columns:
        42px
        42px
        minmax(0, 1fr);

    gap: 12px;

    align-items: flex-start;

    padding: 18px;

    background: #faf8f7;

    border: 1px solid #e6ddda;
    border-radius: 10px;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.bm-help-step:hover {
    transform: translateY(-1px);

    background: #ffffff;

    border-color: #d5c5c0;

    box-shadow:
        0 5px 16px
        rgba(40, 28, 23, 0.06);
}


/* ----------------------------------------------------------
   STEP NUMBER
   ---------------------------------------------------------- */

.bm-help-step-number {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--bm-red);

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
}


/* ----------------------------------------------------------
   STEP ICON
   ---------------------------------------------------------- */

.bm-help-step-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #ffffff;

    border: 1px solid #eadfdb;

    font-size: 21px;
}


/* ----------------------------------------------------------
   STEP TEXT
   ---------------------------------------------------------- */

.bm-help-step-content {
    min-width: 0;
}

.bm-help-step-content h3 {
    margin: 1px 0 6px;

    color: #403632;

    font-size: 15px;
}

.bm-help-step-content p {
    margin: 0;

    color: #70635e;

    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================
   ACTIVATION NOTE
   ========================================================== */

.bm-help-activation-note {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;

    padding: 13px 15px;

    background: #fff8ef;

    border: 1px solid #ecd8c5;
    border-radius: 8px;

    color: #674b31;

    line-height: 1.5;
}

.bm-help-activation-note-icon {
    flex: 0 0 auto;

    font-size: 21px;
}


/* ==========================================================
   GUIDE ACTIONS
   ========================================================== */

.bm-help-guide-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid #eee8e5;
}


/* ==========================================================
   FAQ
   ========================================================== */

.bm-help-faq-list {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


/* ----------------------------------------------------------
   FAQ ITEM
   ---------------------------------------------------------- */

.bm-help-faq-item {
    overflow: hidden;

    background: #faf8f7;

    border: 1px solid #e5ddda;
    border-radius: 8px;

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.bm-help-faq-item[open] {
    background: #ffffff;

    border-color: #d6c5c0;
}


/* ----------------------------------------------------------
   REMOVE NATIVE DETAILS ARROW
   ---------------------------------------------------------- */

.bm-help-faq-question {
    list-style: none;
}

.bm-help-faq-question::marker {
    content: "";
    display: none;
}

.bm-help-faq-question::-webkit-details-marker {
    display: none;
}


/* ----------------------------------------------------------
   QUESTION
   ---------------------------------------------------------- */

.bm-help-faq-question {
    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 15px;

    color: #403632;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    user-select: none;
}

.bm-help-faq-question:hover {
    color: var(--bm-red);
}


/* ----------------------------------------------------------
   QUESTION ICON
   ---------------------------------------------------------- */

.bm-help-faq-question-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1e5e3;

    color: var(--bm-red);

    font-size: 13px;
    font-weight: 700;
}


/* ----------------------------------------------------------
   QUESTION TEXT
   ---------------------------------------------------------- */

.bm-help-faq-question-text {
    min-width: 0;

    flex: 1;
}


/* ----------------------------------------------------------
   CHEVRON
   ---------------------------------------------------------- */

.bm-help-faq-chevron {
    flex: 0 0 auto;

    color: #8a7e79;

    font-size: 12px;

    transition:
        transform 0.18s ease;
}

.bm-help-faq-item[open]
.bm-help-faq-chevron {
    transform: rotate(180deg);

    color: var(--bm-red);
}


/* ----------------------------------------------------------
   ANSWER
   ---------------------------------------------------------- */

.bm-help-faq-answer {
    padding:
        0
        54px
        16px;

    color: #6d615c;

    font-size: 13px;
    line-height: 1.65;
}


/* ==========================================================
   HELP RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .bm-help-requirements {
        grid-template-columns: 1fr;
    }


    .bm-help-requirement-wide {
        grid-column: auto;
    }


    .bm-help-steps {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    .bm-help-start,
    .bm-help-guide,
    .bm-help-faq {
        padding: 18px;
    }


    .bm-help-header h1 {
        font-size: 27px;
    }


    .bm-help-section-heading {
        gap: 11px;
    }


    .bm-help-section-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 18px;
    }


    .bm-help-section-heading h2 {
        font-size: 19px;
    }


    .bm-help-requirement-card {
        padding: 16px;
    }


    .bm-help-requirement-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 19px;
    }


    .bm-help-step {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        gap: 10px;

        padding: 15px;
    }


    .bm-help-step-number {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }


    /*
       On mobile the decorative icon is moved
       inside the content area visually.
    */

    .bm-help-step-icon {
        display: none;
    }


    .bm-help-step-content h3 {
        margin-top: 0;
    }


    .bm-help-start-actions,
    .bm-help-guide-actions {
        flex-direction: column;
    }


    .bm-help-start-actions .bm-button,
    .bm-help-guide-actions .bm-button {
        width: 100%;
    }


    .bm-help-faq-answer {
        padding:
            0
            15px
            16px
            54px;
    }

}


@media (max-width: 420px) {

    .bm-help-requirement-card {
        flex-direction: column;
    }


    .bm-help-map-hint {
        width: 100%;

        align-items: flex-start;
    }


    .bm-help-faq-question {
        padding: 11px 12px;

        gap: 9px;
    }


    .bm-help-faq-answer {
        padding:
            0
            12px
            15px;
    }

}