/* =========================================================
   Muzinga Market — Styles publics
   ========================================================= */

body.market-body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #F5EFE0;
    color: #2E2E2E;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* HEADER */
.market-header {
    background: #0A1F44;
    color: #FAF6EC;
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(10,31,68,.2);
    border-bottom: 3px solid #C9A227;
}
.market-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.market-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FAF6EC;
    text-decoration: none;
    flex: 0 0 auto;
}
.market-brand-logo { height: 38px; width: auto; filter: brightness(0) invert(1); }
.market-brand strong { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; }
.market-brand small { font-size: 10px; color: #C9A227; text-transform: uppercase; letter-spacing: 1.5px; }

.market-search {
    flex: 1;
    max-width: 500px;
    display: flex;
    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
}
.market-search input {
    flex: 1;
    border: none;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.market-search button {
    background: #C9A227;
    color: #0A1F44;
    border: none;
    padding: 0 18px;
    cursor: pointer;
    font-size: 16px;
}
.market-search button:hover { background: #f0d76d; }

.market-nav { display: flex; align-items: center; gap: 8px; }
.market-nav-btn {
    position: relative;
    background: transparent;
    color: #FAF6EC;
    border: 1.5px solid rgba(250,246,236,.3);
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.market-nav-btn:hover { background: rgba(201,162,39,.15); border-color: #C9A227; }
.market-nav-btn.login-btn { font-size: 12.5px; font-weight: 600; letter-spacing: .3px; }
.cart-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: #C9A227;
    color: #0A1F44;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    font-family: sans-serif;
}
.market-user { font-size: 12px; color: #C9A227; }

/* HERO */
.market-hero {
    background: linear-gradient(135deg, #132E5C, #0A1F44);
    color: #FAF6EC;
    padding: 40px 20px;
    text-align: center;
}
.market-hero-inner { max-width: 800px; margin: 0 auto; }
.market-hero h1 { font-family: 'Poppins', sans-serif; font-size: 28px; margin-bottom: 10px; }
.market-hero p { font-size: 14px; opacity: .85; line-height: 1.6; }

/* LAYOUT */
.market-layout {
    flex: 1;
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    width: 100%;
}

/* SIDEBAR */
.market-sidebar { display: flex; flex-direction: column; gap: 16px; }
.market-sidebar-block {
    background: #FAF6EC;
    border: 1px solid #E0D5B7;
    border-radius: 12px;
    padding: 16px;
}
.market-sidebar-block h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #0A1F44;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.market-cat-list { list-style: none; padding: 0; margin: 0; }
.market-cat-list li { margin-bottom: 2px; }
.market-cat-list a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: #2E2E2E;
    text-decoration: none;
    font-size: 13px;
    transition: background .15s;
}
.market-cat-list a:hover { background: #FFF; }
.market-cat-list a.active { background: #0A1F44; color: #C9A227; font-weight: 600; }

.market-price-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.market-price-form input {
    flex: 1;
    min-width: 60px;
    padding: 8px;
    border: 1.5px solid #E0D5B7;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
}
.market-price-form span { color: #999; }

.market-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

/* MAIN */
.market-main { min-width: 0; }
.market-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.market-toolbar p { font-size: 14px; color: #666; }

/* GRID */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.market-grid-small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.market-card {
    background: #FFF;
    border: 1px solid #E0D5B7;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.market-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(10,31,68,.12);
}
.market-card-img-link {
    display: block;
    aspect-ratio: 1;
    background: #F5EFE0;
    overflow: hidden;
    position: relative;
}
.market-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.market-card:hover .market-card-img { transform: scale(1.05); }
.market-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: #C9A227;
    background: linear-gradient(135deg, #F5EFE0, #FAF6EC);
}
.market-card-tag {
    position: absolute;
    top: 8px; left: 8px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.tag-featured { background: #C9A227; color: #0A1F44; }
.tag-out { background: #B3261E; color: #FFF; }
.tag-low { background: #FFF6E5; color: #8a6e0f; border: 1px solid #C9A227; }

.market-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.market-card-cat {
    font-size: 10px;
    color: #C9A227;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
    margin-bottom: 4px;
}
.market-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0A1F44;
    margin: 0 0 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.market-card-title a { color: inherit; text-decoration: none; }
.market-card-title a:hover { color: #C9A227; }
.market-card-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 10px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.market-card-price {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
}
.market-card-price strong {
    font-size: 20px;
    color: #0A1F44;
    font-weight: 700;
}
.market-card-price span {
    font-size: 11px;
    color: #C9A227;
    margin-left: 4px;
}
.market-card-actions { display: flex; gap: 6px; }
.market-card-actions .btn-primary,
.market-card-actions .btn-secondary {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 8px 10px;
}

/* PRODUCT PAGE */
.market-product-page {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 20px;
    width: 100%;
}
.market-breadcrumb {
    font-size: 12.5px;
    color: #888;
    margin-bottom: 20px;
}
.market-breadcrumb a { color: #0A1F44; text-decoration: none; }
.market-breadcrumb a:hover { color: #C9A227; }

.market-product-detail {
    background: #FFF;
    border-radius: 16px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(10,31,68,.08);
}

.market-gallery-main {
    aspect-ratio: 1;
    background: #F5EFE0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.market-gallery-main img,
.market-gallery-main > div {
    width: 100%; height: 100%;
    object-fit: cover;
}
.market-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.gallery-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 2px solid #E0D5B7;
    background: #F5EFE0;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    flex: 0 0 auto;
}
.gallery-thumb.active { border-color: #C9A227; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.market-product-vendor {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}
.market-product-vendor strong { color: #0A1F44; }

.market-product-info h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #0A1F44;
    margin: 0 0 10px;
    line-height: 1.3;
}
.market-product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    margin-bottom: 10px;
}
.market-product-rating span { color: #888; font-size: 12px; margin-left: 6px; }
.market-product-short {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
}
.market-product-price-box {
    background: #F5EFE0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.market-product-price {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0A1F44;
}
.market-product-price span {
    font-size: 14px;
    color: #C9A227;
    margin-left: 6px;
}
.market-product-stock {
    font-size: 13px;
    margin-top: 6px;
    color: #666;
}
.market-product-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}
.market-product-meta strong { color: #0A1F44; margin-right: 6px; }
.market-product-meta .mono { font-family: ui-monospace, monospace; }

.market-product-qty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.market-product-qty label { font-size: 13px; color: #0A1F44; font-weight: 600; }
.qty-control {
    display: flex;
    border: 1.5px solid #E0D5B7;
    border-radius: 8px;
    overflow: hidden;
}
.qty-control button {
    background: #F5EFE0;
    border: none;
    padding: 8px 14px;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
}
.qty-control button:hover { background: #E0D5B7; }
.qty-control input {
    width: 60px;
    border: none;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    -moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; }

.market-product-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.market-product-actions .btn-primary { flex: 2; padding: 14px; font-size: 15px; }
.market-product-actions .btn-secondary { flex: 1; padding: 14px; text-align: center; }

.market-out-of-stock {
    padding: 16px;
    background: #fdeceb;
    color: #B3261E;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.market-product-section {
    background: #FFF;
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(10,31,68,.06);
}
.market-product-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #0A1F44;
    margin: 0 0 16px;
}
.market-product-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}

.market-reviews { display: flex; flex-direction: column; gap: 12px; }
.market-review {
    background: #FAF6EC;
    border-radius: 10px;
    padding: 14px;
    border-left: 3px solid #C9A227;
}
.market-review-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}
.market-review-head strong { color: #0A1F44; }
.market-review-head span { color: #999; font-size: 11px; }
.market-review-stars { font-size: 14px; margin-bottom: 4px; }
.market-review-title { font-weight: 600; color: #0A1F44; margin-bottom: 4px; }
.market-review-body { font-size: 13px; color: #555; line-height: 1.6; }

/* CART */
.market-cart-page,
.market-checkout-page {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 20px;
    width: 100%;
    flex: 1;
}
.market-cart-page h1,
.market-checkout-page h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    color: #0A1F44;
    margin-bottom: 20px;
}

.market-cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}
.market-cart-items {
    background: #FFF;
    border-radius: 12px;
    padding: 8px;
}
.market-cart-item {
    display: grid;
    grid-template-columns: 70px 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #F0E9D8;
}
.market-cart-item:last-child { border-bottom: none; }
.market-cart-item-img {
    width: 70px; height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #F5EFE0;
}
.market-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.market-cart-item-info h3 { font-size: 14px; margin: 0 0 4px; }
.market-cart-item-info h3 a { color: #0A1F44; text-decoration: none; }
.market-cart-item-info h3 a:hover { color: #C9A227; }
.market-cart-item-info p { font-size: 12px; margin: 0; }
.market-cart-item-unit { color: #888; font-family: ui-monospace, monospace; }
.market-cart-item-qty { display: flex; align-items: center; }
.market-cart-item-qty .qty-btn {
    background: #F5EFE0;
    border: 1px solid #E0D5B7;
    width: 30px; height: 30px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}
.market-cart-item-qty .qty-btn:first-child { border-radius: 6px 0 0 6px; }
.market-cart-item-qty .qty-btn:last-child { border-radius: 0 6px 6px 0; }
.cart-qty-input {
    width: 50px;
    border: 1px solid #E0D5B7;
    border-left: none;
    border-right: none;
    text-align: center;
    font-family: inherit;
    font-size: 13px;
    height: 30px;
}
.market-cart-item-price {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: #0A1F44;
    min-width: 100px;
    text-align: right;
}
.market-cart-item-remove {
    background: transparent;
    border: none;
    color: #B3261E;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.market-cart-item-remove:hover { background: #fdeceb; }

.market-cart-summary {
    background: #FAF6EC;
    border: 1px solid #E0D5B7;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 80px;
}
.market-cart-summary h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #0A1F44;
    margin: 0 0 16px;
}
.market-cart-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: #555;
}
.market-cart-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 2px solid #E0D5B7;
    margin-top: 8px;
    font-family: 'Poppins', sans-serif;
}
.market-cart-total span { font-size: 14px; color: #0A1F44; font-weight: 600; }
.market-cart-total strong { font-size: 20px; color: #0A1F44; }

/* CHECKOUT */
.market-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}
.market-checkout-block {
    background: #FFF;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.market-checkout-block h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #0A1F44;
    margin: 0 0 16px;
}
.market-pay-methods { display: flex; flex-direction: column; gap: 10px; }
.market-pay-option {
    display: block;
    cursor: pointer;
    border: 1.5px solid #E0D5B7;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, background .15s;
}
.market-pay-option:hover { border-color: #0A1F44; }
.market-pay-option input { position: absolute; opacity: 0; }
.market-pay-option-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #FFF;
}
.market-pay-option input:checked + .market-pay-option-content {
    background: #F5EFE0;
    border-left: 4px solid #C9A227;
}
.market-pay-option-icon { font-size: 26px; }
.market-pay-option-content strong { display: block; color: #0A1F44; font-size: 14px; }
.market-pay-option-content p { margin: 2px 0 0; font-size: 12px; color: #666; }

.market-checkout-side {
    background: #FAF6EC;
    border: 1px solid #E0D5B7;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 80px;
}
.market-checkout-side h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #0A1F44;
    margin: 0 0 14px;
}
.market-checkout-items { display: flex; flex-direction: column; gap: 8px; }
.market-checkout-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #F0E9D8;
}
.market-checkout-item:last-child { border-bottom: none; }
.market-checkout-item strong { font-family: ui-monospace, monospace; color: #0A1F44; }

/* PAY */
.market-pay-summary {
    background: #FFF;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.market-pay-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.market-pay-form { max-width: 500px; }

/* EMPTY STATE */
.market-empty {
    text-align: center;
    padding: 60px 20px;
    background: #FAF6EC;
    border-radius: 16px;
    border: 1px dashed #E0D5B7;
}
.market-empty h3 {
    font-family: 'Poppins', sans-serif;
    color: #0A1F44;
    margin: 12px 0 6px;
}
.market-empty p { color: #888; font-size: 14px; }

/* PAGINATION */
.market-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E0D5B7;
}

/* FOOTER */
.market-footer {
    background: #0A1F44;
    color: #FAF6EC;
    padding: 30px 20px 14px;
    margin-top: 40px;
    border-top: 3px solid #C9A227;
}
.market-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    padding-bottom: 20px;
}
.market-footer-inner strong {
    display: block;
    color: #C9A227;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}
.market-footer-inner p,
.market-footer-inner ul { font-size: 12.5px; opacity: .85; line-height: 1.7; }
.market-footer-inner ul { list-style: none; padding: 0; }
.market-footer-inner a { color: inherit; text-decoration: none; }
.market-footer-inner a:hover { color: #C9A227; }
.market-footer-bottom {
    text-align: center;
    font-size: 11.5px;
    opacity: .7;
    padding-top: 14px;
    border-top: 1px solid rgba(250,246,236,.15);
    max-width: 1280px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 900px) {
    .market-layout { grid-template-columns: 1fr; }
    .market-sidebar { order: 2; }
    .market-product-detail { grid-template-columns: 1fr; padding: 16px; }
    .market-cart-layout { grid-template-columns: 1fr; }
    .market-checkout-layout { grid-template-columns: 1fr; }
    .market-cart-summary,
    .market-checkout-side { position: static; }
}
@media (max-width: 640px) {
    .market-header-inner { gap: 10px; }
    .market-search { order: 3; flex: 1 1 100%; max-width: none; }
    .market-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .market-card-body { padding: 10px; }
    .market-card-title { font-size: 12.5px; }
    .market-card-price strong { font-size: 16px; }
    .market-card-desc { display: none; }
    .market-cart-item {
        grid-template-columns: 55px 1fr;
        grid-template-areas: "img info" "qty price" ". remove";
        row-gap: 8px;
    }
    .market-cart-item-img { grid-area: img; width: 55px; height: 55px; }
    .market-cart-item-info { grid-area: info; }
    .market-cart-item-qty { grid-area: qty; justify-self: start; }
    .market-cart-item-price { grid-area: price; min-width: 0; }
    .market-cart-item-remove { grid-area: remove; justify-self: end; }
    .market-hero h1 { font-size: 20px; }
    .market-brand strong { font-size: 13px; }
}

/* Navbar market — nouveaux boutons de navigation croisée */
.market-nav-btn {
    font-size: 17px;
    min-width: 42px;
    text-align: center;
}
@media (max-width: 900px) {
    .market-header-inner { gap: 10px; padding: 10px 16px; }
    .market-search { flex: 1 1 100%; order: 3; }
    .market-nav { gap: 6px; }
    .market-nav-btn { padding: 6px 8px; font-size: 15px; }
}