/* FloraCrochet : configurateur de bouquet. Charge sur la seule fiche configurateur. */

/* ---- Colonne image : l'apercu remplace la galerie ---- */
.flora-bb-page .p-thumbs,
.flora-bb-page .p-track,
.flora-bb-page .pg-nav,
.flora-bb-page .p-main .badge,
.flora-bb-page .p-benefits,
.flora-bb-page .sdc-urgency,
.flora-bb-page .p-buy .quantity { display: none !important; }

@media (min-width: 900px) {
  .flora-bb-page main.product { align-items: start; }
  .flora-bb-page .p-media { position: sticky; top: 96px; align-self: start; }
}
.flora-bb-page .p-main { width: 100%; aspect-ratio: 1 / 1; height: auto; }
.bb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bb-svg { width: 92%; height: 92%; overflow: visible; }
.bb-head { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bb-hint {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center;
  font: italic 15px/1.4 var(--font-serif, Georgia, serif); color: #8a8378; pointer-events: none;
}

/* ---- Idees de depart ---- */
.bb-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 22px; }
.bb-ideas-l { width: 100%; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #626879; }
.bb-idea {
  border: 1px solid #e8e6e2; background: #fff; color: #000; padding: 8px 12px; cursor: pointer;
  font: 500 13px/1 var(--font-main, Inter, sans-serif); border-radius: 999px; transition: border-color .15s, background .15s;
}
.bb-idea:hover { border-color: #000; background: #f6f5f3; }

/* ---- Etapes ---- */
.bb-step { border-top: 1px solid #e8e6e2; padding: 18px 0 20px; }
.bb-step-t {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font: 700 13px/1.3 var(--font-main, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase;
}
.bb-n {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #000; color: #fff;
  align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0;
}
.bb-step-s { margin: 0 0 12px; color: #626879; font-size: 13px; line-height: 1.5; }

/* ---- Compteur de tiges ---- */
.bb-meter { background: #f6f5f3; padding: 12px 14px; margin-bottom: 12px; transition: background .2s; }
.bb-meter-top { display: flex; justify-content: space-between; align-items: baseline; }
.bb-count { font-size: 14px; }
.bb-reset { border: 0; background: none; padding: 0; font: 12px var(--font-main, Inter, sans-serif); color: #626879; text-decoration: underline; cursor: pointer; }
.bb-bar { position: relative; height: 4px; background: #e2dfd9; margin: 10px 0 8px; }
.bb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #b9b2a6; transition: width .3s, background .3s; }
.bb-bar b { position: absolute; top: -3px; width: 2px; height: 10px; background: #000; }
.bb-meter.is-ok .bb-bar i { background: #000; }
.bb-meter-msg { margin: 0; font-size: 12px; color: #626879; min-height: 1.4em; }
.bb-meter.is-alert { background: #fbe9e9; }
.bb-meter.is-alert .bb-meter-msg { color: #a12626; font-weight: 600; }

/* ---- Liste des fleurs ---- */
.bb-flowers { display: flex; flex-direction: column; }
.bb-fl { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0eeea; }
.bb-fl:last-child { border-bottom: 0; }
.bb-fl-ico { flex: 0 0 52px; height: 52px; background: #f6f5f3; display: flex; align-items: center; justify-content: center; }
.bb-fl-ico svg { width: 44px; height: 44px; }
.bb-fl-body { flex: 1; min-width: 0; }
.bb-fl-name { font-weight: 600; font-size: 14px; margin: 2px 0 7px; }
.bb-fl-n { color: #626879; font-weight: 500; }
.bb-sw { display: flex; flex-wrap: wrap; gap: 7px; }
.bb-swatch {
  position: relative; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw); border: 1px solid rgba(0, 0, 0, .14); box-shadow: inset 0 0 0 2px #fff;
  transition: transform .12s, box-shadow .12s;
}
.bb-swatch:hover { transform: scale(1.1); }
.bb-swatch:active { transform: scale(.92); }
.bb-swatch.has-n { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px #000; }
.bb-swatch-n {
  position: absolute; top: -6px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #000; color: #fff; font: 600 10px/16px var(--font-main, Inter, sans-serif); display: none;
}
.bb-swatch.has-n .bb-swatch-n { display: block; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-chips:not(:empty) { margin-top: 9px; }
.bb-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e8e6e2; padding: 3px 4px 3px 8px;
  font-size: 12px; background: #fff;
}
.bb-chip i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.bb-chip b { min-width: 14px; text-align: center; }
.bb-chip button {
  width: 22px; height: 22px; border: 0; background: #f6f5f3; cursor: pointer; padding: 0;
  font: 600 14px/22px var(--font-main, Inter, sans-serif); color: #000;
}
.bb-chip button:hover { background: #e8e6e2; }

/* ---- Emballage ---- */
.bb-wraps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bb-wrap {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #e8e6e2; background: #fff;
  cursor: pointer; font: 500 13px var(--font-main, Inter, sans-serif); color: #000; text-align: left;
}
.bb-wrap i { flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.bb-wrap.is-on { border-color: #000; box-shadow: inset 0 0 0 1px #000; }

/* ---- Options ---- */
.bb-extras { display: flex; flex-direction: column; gap: 8px; }
.bb-extra { display: flex; align-items: center; gap: 10px; border: 1px solid #e8e6e2; padding: 11px 12px; cursor: pointer; font-size: 14px; }
.bb-extra input { width: 16px; height: 16px; accent-color: #000; margin: 0; }
.bb-extra-n { flex: 1; }
.bb-extra-p { color: #626879; font-size: 13px; }
.bb-extra.is-on { border-color: #000; }

/* ---- Carte ---- */
.bb-card {
  width: 100%; box-sizing: border-box; border: 1px solid #e8e6e2; padding: 10px 12px; resize: vertical;
  font: 14px/1.5 var(--font-main, Inter, sans-serif); background: #fff;
}
.bb-card:focus { outline: none; border-color: #000; }
.bb-card-note { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; color: #626879; }

/* ---- Total et bouton ---- */
.bb-total {
  display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #000;
  padding: 14px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
}
.bb-total strong { font-size: 20px; letter-spacing: 0; }
.flora-bb-page .p-buy form.cart { display: block; }
.flora-bb-page .p-buy .single_add_to_cart_button { width: 100%; }
.flora-bb-page .p-buy .single_add_to_cart_button.bb-not-ready { opacity: .45; }
.flora-bb-from { font-size: .8em; font-weight: 500; color: #626879; }

/* ---- Barre mobile ---- */
.bb-mbar { display: none; }
@media (max-width: 899px) {
  .bb-mbar {
    display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    background: #fff; border-top: 1px solid #e8e6e2; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    transition: transform .25s;
  }
  .bb-mbar.is-hidden { transform: translateY(110%); }
  .bb-mbar-mini { flex: 0 0 48px; height: 58px; background: #f6f5f3; cursor: pointer; }
  .bb-mbar-mini svg { width: 100%; height: 100%; display: block; }
  .bb-mbar-info { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .bb-mbar-info strong { font-size: 16px; }
  .bb-mbar-info span { font-size: 12px; color: #626879; }
  .bb-mbar-btn {
    border: 0; background: #000; color: #fff; padding: 14px 16px; cursor: pointer;
    font: 600 12px var(--font-main, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase;
  }
  .flora-bb-page { padding-bottom: 76px; }
  .bb-wraps { grid-template-columns: repeat(2, 1fr); }
}