/* =====================================================================
   Boutique d'un vendeur — styles propres à la page.
   Couleurs, boutons, grille, fenêtres et états : /static/css/localhub-design.css
   ===================================================================== */

body { background: var(--lh-bg); padding-bottom: 76px; }

/* En-tête de la page : bouton panier */
.shop-cart-btn { position: relative; }
.shop-cart-btn .cart-count {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: var(--lh-orange); color: #fff; font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.shop-cart-btn .cart-count:empty, .shop-cart-btn .cart-count[data-zero="1"] { display: none; }

/* Bannière sobre : image du vendeur si elle existe, sinon aplat de la couleur de la marque */
.shop-banner { height: 120px; background: #f4e2d4; overflow: hidden; }
.shop-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .shop-banner { height: 180px; } }

.shop-identity { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--lh-space-4); margin-top: -40px; margin-bottom: var(--lh-space-5); }
.shop-logo {
    width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    border: 4px solid var(--lh-bg); background: var(--lh-bg-soft); box-shadow: var(--lh-shadow);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--lh-font-display); font-size: 2rem; font-weight: 700; color: var(--lh-text-muted);
}
.shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.shop-info { flex: 1; min-width: 200px; padding-top: 44px; }
.shop-name { font-family: var(--lh-font-display); font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 4px; overflow-wrap: anywhere; }
.shop-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--lh-text-muted); font-size: 0.92rem; }
.shop-meta i { margin-right: 4px; }
.shop-actions { display: flex; flex-wrap: wrap; gap: var(--lh-space-2); width: 100%; }
.shop-actions .lh-btn { flex: 1 1 0; min-width: 0; }
@media (min-width: 760px) { .shop-actions { width: auto; } .shop-actions .lh-btn { flex: 0 0 auto; } }

.shop-toolbar { display: flex; flex-direction: column; gap: var(--lh-space-3); margin-bottom: var(--lh-space-4); }
.shop-toolbar__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lh-space-3); flex-wrap: wrap; }
.shop-toolbar h2 { font-size: 1.25rem; margin: 0; }

.shop-panel { border: 1px solid var(--lh-border); border-radius: var(--lh-radius-lg); padding: var(--lh-space-5) var(--lh-space-4); margin-top: var(--lh-space-5); background: var(--lh-bg); }
.shop-panel h2 { font-size: 1.15rem; margin-bottom: var(--lh-space-3); }
.shop-columns { display: grid; grid-template-columns: 1fr; gap: 0 var(--lh-space-5); }
@media (min-width: 900px) { .shop-columns { grid-template-columns: 1fr 1fr; } }

.job-item { padding: var(--lh-space-3) 0; border-bottom: 1px solid var(--lh-border); }
.job-item:last-child { border-bottom: 0; }

.track-form { display: flex; gap: var(--lh-space-2); margin-bottom: var(--lh-space-3); }
.track-form .lh-input { flex: 1; min-width: 0; }
.track-order { border: 1px solid var(--lh-border); border-radius: var(--lh-radius); padding: var(--lh-space-3); margin-bottom: var(--lh-space-2); }
.track-order__head { display: flex; justify-content: space-between; align-items: center; gap: var(--lh-space-2); margin-bottom: 4px; }

/* Barre panier collante (téléphone) */
.sticky-cart {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: var(--lh-space-3);
    padding: 10px var(--lh-space-4) calc(10px + env(safe-area-inset-bottom));
    background: var(--lh-bg); border-top: 1px solid var(--lh-border); box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.sticky-cart .cart-count { font-weight: 700; }

/* Panier */
.cart-line { display: flex; justify-content: space-between; align-items: center; gap: var(--lh-space-3); padding: var(--lh-space-3) 0; border-bottom: 1px solid var(--lh-border); }
.cart-line__name { min-width: 0; overflow-wrap: anywhere; }
.cart-line__price { font-weight: 700; white-space: nowrap; }
.cart-summary { background: var(--lh-bg-soft); border-radius: var(--lh-radius); padding: var(--lh-space-3); margin: var(--lh-space-4) 0; }
.cart-summary div { display: flex; justify-content: space-between; gap: var(--lh-space-3); }
.cart-summary .cart-summary__total { font-weight: 700; font-size: 1.05rem; margin-top: var(--lh-space-2); padding-top: var(--lh-space-2); border-top: 1px solid var(--lh-border); }
.cart-suggest { margin-top: var(--lh-space-4); }
.cart-suggest__item { display: flex; justify-content: space-between; align-items: center; gap: var(--lh-space-3); padding: var(--lh-space-2) 0; }

/* Fiche produit */
.product-sheet__media { aspect-ratio: 1 / 1; border-radius: var(--lh-radius-lg); overflow: hidden; background: var(--lh-placeholder); margin-bottom: var(--lh-space-4); }
.product-sheet__media img { width: 100%; height: 100%; object-fit: cover; }
.product-sheet__price { font-size: 1.5rem; font-weight: 700; margin: var(--lh-space-1) 0 var(--lh-space-2); }
.qty-selector { display: inline-flex; align-items: center; border: 1px solid var(--lh-border-strong); border-radius: var(--lh-radius-pill); overflow: hidden; }
.qty-btn { width: var(--lh-tap); height: var(--lh-tap); border: 0; background: var(--lh-bg); font-size: 1.2rem; }
.qty-btn:hover { background: var(--lh-bg-soft); }
.qty-input { width: 52px; height: var(--lh-tap); border: 0; text-align: center; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Messagerie client ↔ vendeur */
.chat-modal {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 1100; display: none; flex-direction: column;
    height: min(78vh, 560px); background: var(--lh-bg); border-top: 1px solid var(--lh-border);
    border-radius: var(--lh-radius-lg) var(--lh-radius-lg) 0 0; box-shadow: var(--lh-shadow-lg);
}
.chat-modal.open { display: flex; }
@media (min-width: 640px) { .chat-modal { left: auto; right: 16px; bottom: 16px; width: 380px; border: 1px solid var(--lh-border); border-radius: var(--lh-radius-lg); } }
.chat-header { display: flex; justify-content: space-between; align-items: center; gap: var(--lh-space-2); padding: var(--lh-space-2) var(--lh-space-2) var(--lh-space-2) var(--lh-space-4); border-bottom: 1px solid var(--lh-border); font-weight: 700; }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--lh-space-3); background: var(--lh-bg-soft); }
.chat-msg { display: flex; margin-bottom: var(--lh-space-2); }
.chat-msg--me { justify-content: flex-end; }
.chat-msg__bubble { max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--lh-bg); border: 1px solid var(--lh-border); font-size: 0.92rem; overflow-wrap: anywhere; }
.chat-msg--me .chat-msg__bubble { background: var(--lh-orange-soft); border-color: #f6d7c3; }
.chat-msg__date { font-size: 0.72rem; color: var(--lh-text-muted); margin-top: 2px; text-align: right; }
.chat-input { display: flex; gap: var(--lh-space-2); padding: var(--lh-space-2); border-top: 1px solid var(--lh-border); }
.chat-input input { flex: 1; min-width: 0; }

/* Message bref (ajout au panier, erreurs) */
.lh-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 1200; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--lh-radius); background: var(--lh-text); color: #fff; font-size: 0.92rem; box-shadow: var(--lh-shadow-lg); }