/* ============================================================================
   MixBox — komponenty design systému.
   Přepis z cdDesign/_ds/mixbox-new-0e04a215-…/_ds_bundle.js (Button.jsx,
   Badge.jsx, PriceTag.jsx, ProductCard.jsx) z inline stylů do CSS tříd.
   Hodnoty odpovídají zdroji 1:1 — při změně design systému srovnat s ním.
   ========================================================================== */

/* --- Button (components/core/Button.jsx) ---------------------------------- */
.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

    .mb-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* velikosti */
.mb-btn--sm {
    padding: 8px 16px;
    font-size: 14px;
}

.mb-btn--md {
    padding: 11px 22px;
    font-size: 15px;
}

.mb-btn--lg {
    padding: 14px 28px;
    font-size: 16px;
}

/* varianty */
.mb-btn--primary {
    background: var(--primary-500);
    color: var(--text-on-primary);
}

    .mb-btn--primary:hover:not(:disabled) {
        background: var(--primary-600);
        color: var(--text-on-primary);
    }

.mb-btn--accent {
    background: var(--saffron-400);
    color: var(--text-on-accent);
}

    .mb-btn--accent:hover:not(:disabled) {
        background: var(--saffron-500);
        color: var(--text-on-accent);
    }

.mb-btn--secondary {
    background: transparent;
    border-color: var(--primary-300);
    color: var(--primary-600);
}

.mb-btn--ghost {
    background: transparent;
    color: var(--primary-600);
}

    .mb-btn--secondary:hover:not(:disabled),
    .mb-btn--ghost:hover:not(:disabled) {
        background: var(--primary-50);
        color: var(--primary-600);
    }

/* --- Badge (components/product/Badge.jsx) --------------------------------- */
.mb-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.mb-badge--new {
    background: var(--primary-500);
    color: var(--text-on-primary);
}

.mb-badge--sale {
    background: var(--discount-500);
    color: #fff;
}

.mb-badge--lastcall {
    background: var(--saffron-400);
    color: var(--text-on-accent);
}

.mb-badge--soldout {
    background: var(--ink-300);
    color: #fff;
}

/* --- PriceTag (components/product/PriceTag.jsx) --------------------------- */
.mb-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
}

.mb-price__value {
    font-weight: 600;
    color: var(--price-color);
}

.mb-price--sm .mb-price__value {
    font-size: 18px;
}

.mb-price--md .mb-price__value {
    font-size: 24px;
}

.mb-price--lg .mb-price__value {
    font-size: 34px;
}

.mb-price__old {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.mb-price__unit {
    font-size: 12px;
    color: var(--text-secondary);
}

/* --- ProductCard (components/product/ProductCard.jsx) --------------------- */
.mb-card {
    width: 220px;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    font-family: var(--font-body);
    transition: box-shadow .18s ease, transform .18s ease;
}

    .mb-card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
    }

.mb-card__media {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--surface-sunken);
}

    .mb-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mb-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}

.mb-card__origin {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-card__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.mb-card__price {
    margin-top: auto;
    padding-top: 8px;
}

/* Štítky produktů (Vegan, Bez lepku, Náš tip…) — obrysová mono pilulka, redakční akcentově. */
.mb-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mb-tag--accent {
    border-color: var(--saffron-400);
    background: var(--saffron-400);
    color: var(--text-on-accent);
}

.mb-detail__tags,
.mb-shelf__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mb-shelf__tags .mb-tag {
    padding: 2px 7px;
    font-size: 9.5px;
}