/* ============================================================================
   MobileUza Storefront — Design System (single source of truth)
   Original amber/gold brand. Borrows standard e-commerce UX CONCEPTS only.
   Used by Views/Shop/Index.cshtml, Product.cshtml, Cart.cshtml, Checkout.cshtml,
   OrderConfirmation.cshtml and the _ProductCard.cshtml partial.
   Framework-light: vanilla CSS, Bootstrap may coexist but the look is driven here.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS --- */
:root {
    /* brand */
    --mu-gold: #F5A800;
    --mu-gold-600: #E09600;
    --mu-gold-100: #FEF3D7;
    --mu-gold-50: #FFFBF0;

    /* neutrals */
    --mu-ink: #0f172a;
    --mu-muted: #64748b;
    --mu-line: #e2e8f0;
    --mu-surface: #ffffff;
    --mu-bg: #f8fafc;

    /* status */
    --mu-success: #16a34a;
    --mu-success-bg: #dcfce7;
    --mu-danger: #dc2626;
    --mu-danger-bg: #fee2e2;
    --mu-star: #f59e0b;

    /* radius */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* shadow */
    --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-2: 0 4px 14px rgba(15, 23, 42, .10);
    --sh-focus: 0 0 0 3px var(--mu-gold-100);

    /* spacing scale (4pt) */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    /* type scale */
    --fz-xs: .75rem;
    --fz-sm: .875rem;
    --fz-base: 1rem;
    --fz-lg: 1.125rem;
    --fz-xl: 1.375rem;
    --fz-2xl: 1.75rem;
    --fz-3xl: 2.25rem;

    --tr: all .18s ease;
}

/* ------------------------------------------------------------ BASE RESET --- */
*,
*::before,
*::after { box-sizing: border-box; }

body.mu {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    color: var(--mu-ink);
    background: var(--mu-bg);
    line-height: 1.55;
    font-size: var(--fz-base);
    -webkit-font-smoothing: antialiased;
}

.mu h1, .mu h2, .mu h3, .mu h4, .mu h5 { line-height: 1.2; margin: 0 0 var(--s3); font-weight: 700; color: var(--mu-ink); }
.mu a { color: var(--mu-gold-600); text-decoration: none; transition: var(--tr); }
.mu a:hover { color: var(--mu-gold); }
.mu img { max-width: 100%; display: block; }

/* container */
.mu-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
.mu-main { padding: var(--s5) 0 var(--s7); }

/* focus ring on EVERYTHING interactive (a11y) */
.mu a:focus-visible,
.mu button:focus-visible,
.mu input:focus-visible,
.mu select:focus-visible,
.mu .mu-btn:focus-visible,
.mu .mu-chip:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }

/* --------------------------------------------------------------- HEADER --- */
.mu-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--mu-surface);
    border-bottom: 1px solid var(--mu-line);
    box-shadow: var(--sh-1);
}
.mu-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s4);
    height: 64px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--s4);
}
.mu-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fz-xl);
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--mu-ink);
}
.mu-brand:hover { color: var(--mu-ink); }
.mu-brand .mu-brand__mark { color: var(--mu-gold); }
.mu-brand .mu-brand__a { color: var(--mu-gold); }
.mu-brand .mu-brand__b { color: var(--mu-ink); }

.mu-header__search { flex: 1; min-width: 0; }
.mu-search { display: flex; align-items: stretch; width: 100%; }
.mu-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--mu-line);
    border-right: 0;
    border-radius: var(--r-pill) 0 0 var(--r-pill);
    padding: 0 var(--s4);
    height: 42px;
    font-size: var(--fz-sm);
    background: var(--mu-bg);
    color: var(--mu-ink);
}
.mu-search input::placeholder { color: var(--mu-muted); }
.mu-search button {
    border: 0;
    background: var(--mu-gold);
    color: var(--mu-ink);
    font-weight: 700;
    padding: 0 var(--s5);
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    cursor: pointer;
    transition: var(--tr);
    white-space: nowrap;
}
.mu-search button:hover { background: var(--mu-gold-600); }

.mu-header__actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }

/* cart pill in the header */
.mu-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid var(--mu-line);
    border-radius: var(--r-pill);
    background: var(--mu-surface);
    color: var(--mu-ink);
    font-weight: 600;
    font-size: var(--fz-sm);
    transition: var(--tr);
}
.mu-cart:hover { border-color: var(--mu-gold); color: var(--mu-ink); background: var(--mu-gold-50); }
.mu-cart__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--fz-xs);
    font-weight: 700;
    color: var(--mu-ink);
    background: var(--mu-gold);
    border-radius: var(--r-pill);
}
.mu-link-login {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 600;
    font-size: var(--fz-sm);
    color: var(--mu-muted);
}
.mu-link-login:hover { color: var(--mu-ink); }
.mu-hamburger { display: none; background: none; border: 0; font-size: 1.25rem; color: var(--mu-ink); cursor: pointer; }

/* ------------------------------------------------------------- BUTTONS --- */
.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--fz-sm);
    line-height: 1;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
    white-space: nowrap;
}
.mu-btn--gold { background: var(--mu-gold); color: var(--mu-ink); }
.mu-btn--gold:hover { background: var(--mu-gold-600); color: var(--mu-ink); }
.mu-btn--ghost { background: var(--mu-surface); color: var(--mu-ink); border-color: var(--mu-line); }
.mu-btn--ghost:hover { background: var(--mu-bg); border-color: var(--mu-muted); color: var(--mu-ink); }
.mu-btn--block { width: 100%; }
.mu-btn--lg { padding: var(--s4) var(--s6); font-size: var(--fz-base); border-radius: var(--r-md); }
.mu-btn--sm { padding: var(--s2) var(--s3); font-size: var(--fz-xs); }
.mu-btn[disabled],
.mu-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* keep buttons that are inline alias of bootstrap btn-primary on-brand */
.mu .btn-primary, .mu .btn-primary-y { background: var(--mu-gold); border-color: var(--mu-gold); color: var(--mu-ink); }
.mu .btn-primary:hover, .mu .btn-primary-y:hover { background: var(--mu-gold-600); border-color: var(--mu-gold-600); color: var(--mu-ink); }

/* --------------------------------------------------------------- CARDS --- */
.mu-card {
    background: var(--mu-surface);
    border: 1px solid var(--mu-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}
.mu-card--pad { padding: var(--s5); }
.mu-card--hover { transition: var(--tr); }
.mu-card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

/* ----------------------------------------------------------------- GRID --- */
.mu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s4);
}
.mu-grid--tight { gap: var(--s3); }

/* ------------------------------------------------------- PRODUCT CARD --- */
.mu-product-card {
    display: flex;
    flex-direction: column;
    background: var(--mu-surface);
    border: 1px solid var(--mu-line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: var(--tr);
}
.mu-product-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #d7dde6; }
.mu-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--mu-bg);
    overflow: hidden;
}
.mu-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.mu-product-card:hover .mu-product-card__media img { transform: scale(1.04); }
.mu-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mu-gold-50);
    color: #e7c98c;
    font-size: 2.6rem;
}
.mu-product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s4);
    flex: 1;
}
.mu-product-card__code { font-size: var(--fz-xs); color: var(--mu-muted); letter-spacing: .02em; text-transform: uppercase; }
.mu-product-card__name {
    font-weight: 600;
    font-size: var(--fz-sm);
    color: var(--mu-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.mu-product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.mu-product-card__actions { display: flex; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }
.mu-product-card__actions .mu-btn { flex: 1; }
.mu-product-card__actions form { flex: 1; margin: 0; }
.mu-product-card__store { font-size: var(--fz-xs); color: var(--mu-muted); display: inline-flex; align-items: center; gap: 6px; }

/* ----------------------------------------------------------------- PRICE --- */
.mu-price { font-weight: 700; font-size: var(--fz-lg); color: var(--mu-gold-600); }
.mu-price--lg { font-size: var(--fz-2xl); }
.mu-price__cur { font-size: .7em; font-weight: 600; opacity: .85; margin-right: 2px; }

/* ----------------------------------------------------------- STOCK PILL --- */
.mu-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fz-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.mu-pill--in { color: var(--mu-success); background: var(--mu-success-bg); }
.mu-pill--out { color: var(--mu-danger); background: var(--mu-danger-bg); }
.mu-pill--neutral { color: var(--mu-muted); background: var(--mu-bg); border: 1px solid var(--mu-line); }

/* --------------------------------------------------------------- STARS --- */
.mu-stars { display: inline-flex; align-items: center; gap: 1px; color: var(--mu-star); font-size: var(--fz-sm); }
.mu-stars i { line-height: 1; }

/* --------------------------------------------------------------- CHIPS --- */
.mu-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    border: 1px solid var(--mu-line);
    background: var(--mu-surface);
    color: var(--mu-ink);
    font-size: var(--fz-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
}
.mu-chip:hover { border-color: var(--mu-gold); background: var(--mu-gold-50); color: var(--mu-ink); }
.mu-chip.is-active { background: var(--mu-gold); border-color: var(--mu-gold); color: var(--mu-ink); font-weight: 700; }

/* --------------------------------------------------------- BREADCRUMB --- */
.mu-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fz-sm); color: var(--mu-muted); margin-bottom: var(--s4); }
.mu-breadcrumb a { color: var(--mu-muted); }
.mu-breadcrumb a:hover { color: var(--mu-gold-600); }
.mu-breadcrumb .sep { color: var(--mu-line); }
.mu-breadcrumb [aria-current="page"] { color: var(--mu-ink); font-weight: 600; }

/* ----------------------------------------------------------------- HERO --- */
.mu-hero {
    background: linear-gradient(135deg, var(--mu-gold) 0%, var(--mu-gold-100) 100%);
    border-radius: var(--r-lg);
    padding: var(--s7) var(--s6);
    text-align: center;
    color: var(--mu-ink);
    box-shadow: var(--sh-1);
}
.mu-hero h1 { font-size: var(--fz-3xl); margin-bottom: var(--s3); letter-spacing: -.02em; }
.mu-hero p { font-size: var(--fz-lg); margin: 0 0 var(--s5); color: rgba(15, 23, 42, .8); }
.mu-hero__search { max-width: 640px; margin: 0 auto; }
.mu-hero__search .mu-search input { height: 52px; border-color: transparent; background: var(--mu-surface); box-shadow: var(--sh-1); }
.mu-hero__search .mu-search button { height: 52px; }

/* --------------------------------------------------------- STORE HEADER --- */
.mu-storehead {
    display: flex;
    align-items: center;
    gap: var(--s5);
    background: var(--mu-gold-50);
    border: 1px solid var(--mu-gold-100);
    border-radius: var(--r-lg);
    padding: var(--s5) var(--s6);
}
.mu-monogram {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--r-md);
    background: var(--mu-gold);
    color: var(--mu-ink);
    font-size: var(--fz-2xl);
    font-weight: 800;
    box-shadow: var(--sh-1);
}
.mu-monogram--sm { width: 48px; height: 48px; font-size: var(--fz-lg); border-radius: var(--r-sm); }
.mu-storehead__body { min-width: 0; }
.mu-storehead__body h1 { margin: 0 0 var(--s1); font-size: var(--fz-2xl); }
.mu-storehead__tag { color: var(--mu-muted); font-size: var(--fz-sm); margin: 0 0 var(--s3); }
.mu-metachips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mu-metachip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--mu-surface);
    border: 1px solid var(--mu-gold-100);
    font-size: var(--fz-xs);
    color: var(--mu-muted);
    font-weight: 500;
}

/* ----------------------------------------------------- FACET / SIDEBAR --- */
.mu-layout { display: grid; grid-template-columns: 248px 1fr; gap: var(--s5); align-items: start; }
.mu-facets { position: sticky; top: 84px; padding: var(--s4); }
.mu-facets h3 { font-size: var(--fz-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--mu-muted); margin-bottom: var(--s3); }
.mu-facets__list { display: flex; flex-direction: column; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.mu-facets__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    color: var(--mu-ink);
    font-size: var(--fz-sm);
    transition: var(--tr);
}
.mu-facets__list a:hover { background: var(--mu-gold-50); color: var(--mu-ink); }
.mu-facets__list a.is-active { background: var(--mu-gold-100); color: var(--mu-ink); font-weight: 700; }
.mu-facets__list a .count { font-size: var(--fz-xs); color: var(--mu-muted); }

/* toolbar above the grid (sort + count) */
.mu-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.mu-toolbar__count { color: var(--mu-muted); font-size: var(--fz-sm); }
.mu-select {
    height: 40px;
    border: 1px solid var(--mu-line);
    border-radius: var(--r-md);
    padding: 0 var(--s4);
    background: var(--mu-surface);
    color: var(--mu-ink);
    font-size: var(--fz-sm);
    cursor: pointer;
}
.mu-filters-toggle { display: none; }
/* The storefront does NOT load Bootstrap, so the mobile facet drawer can't rely on
   Bootstrap's .collapse to hide. Hide it here by default (all widths); the mobile media
   query below reveals it only when toggled open (.mu-open via a tiny vanilla-JS handler). */
#muFacetDrawer { display: none; }

/* ---------------------------------------------------------------- INFO --- */
.mu-infobar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    background: var(--mu-surface);
    border: 1px solid var(--mu-line);
    border-radius: var(--r-md);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    font-size: var(--fz-sm);
    color: var(--mu-muted);
    flex-wrap: wrap;
}
.mu-infobar strong { color: var(--mu-ink); }

.mu-alert {
    display: flex;
    align-items: center;
    gap: var(--s2);
    border-radius: var(--r-md);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    font-size: var(--fz-sm);
    border: 1px solid transparent;
}
.mu-alert--success { background: var(--mu-success-bg); color: var(--mu-success); border-color: #bbf7d0; }
.mu-alert--danger { background: var(--mu-danger-bg); color: var(--mu-danger); border-color: #fecaca; }

/* --------------------------------------------------------- EMPTY STATE --- */
.mu-empty {
    text-align: center;
    padding: var(--s7) var(--s5);
    background: var(--mu-surface);
    border: 1px dashed var(--mu-line);
    border-radius: var(--r-lg);
}
.mu-empty__icon { font-size: 3rem; color: #cbd5e1; margin-bottom: var(--s4); }
.mu-empty h3 { font-size: var(--fz-xl); margin-bottom: var(--s2); }
.mu-empty p { color: var(--mu-muted); margin: 0 auto var(--s4); max-width: 460px; }

/* --------------------------------------------------------- PAGINATION --- */
.mu-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.mu-pagination a,
.mu-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--s3);
    border: 1px solid var(--mu-line);
    border-radius: var(--r-md);
    background: var(--mu-surface);
    color: var(--mu-ink);
    font-size: var(--fz-sm);
    font-weight: 500;
    transition: var(--tr);
}
.mu-pagination a:hover { border-color: var(--mu-gold); background: var(--mu-gold-50); color: var(--mu-ink); }
.mu-pagination .is-active { background: var(--mu-gold); border-color: var(--mu-gold); color: var(--mu-ink); font-weight: 700; }

/* --------------------------------------------------------------- TABS --- */
.mu-tabs { display: flex; gap: var(--s1); border-bottom: 2px solid var(--mu-line); margin-bottom: var(--s5); }
.mu-tabs button {
    appearance: none;
    background: none;
    border: 0;
    padding: var(--s3) var(--s4);
    margin-bottom: -2px;
    font-size: var(--fz-sm);
    font-weight: 600;
    color: var(--mu-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--tr);
}
.mu-tabs button:hover { color: var(--mu-ink); }
.mu-tabs button.is-active { color: var(--mu-ink); border-bottom-color: var(--mu-gold); }
.mu-tabpanel[hidden] { display: none; }

/* spec table */
.mu-spec { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); }
.mu-spec th, .mu-spec td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--mu-line); }
.mu-spec th { width: 38%; color: var(--mu-muted); font-weight: 600; background: var(--mu-bg); }
.mu-spec tr:last-child th, .mu-spec tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------- DELIVERY / INFO --- */
.mu-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.mu-info-list li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fz-sm); color: var(--mu-muted); }
.mu-info-list i { color: var(--mu-gold-600); margin-top: 2px; }
.mu-info-list strong { color: var(--mu-ink); display: block; font-weight: 600; }

/* quantity stepper */
.mu-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--mu-line); border-radius: var(--r-md); overflow: hidden; }
.mu-qty button { width: 40px; border: 0; background: var(--mu-bg); color: var(--mu-ink); font-size: 1.1rem; cursor: pointer; transition: var(--tr); }
.mu-qty button:hover { background: var(--mu-gold-50); }
.mu-qty input { width: 56px; border: 0; border-left: 1px solid var(--mu-line); border-right: 1px solid var(--mu-line); text-align: center; font-size: var(--fz-base); -moz-appearance: textfield; }
.mu-qty input::-webkit-outer-spin-button,
.mu-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------- FOOTER --- */
.mu-footer { background: var(--mu-ink); color: #cbd5e1; margin-top: var(--s7); }
.mu-footer__inner { max-width: 1200px; margin: 0 auto; padding: var(--s6) var(--s4); }
.mu-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s6); }
.mu-footer .mu-brand { color: #fff; margin-bottom: var(--s3); }
.mu-footer .mu-brand__b { color: #fff; }
.mu-footer h5 { color: #fff; font-size: var(--fz-sm); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s3); }
.mu-footer p { color: #94a3b8; font-size: var(--fz-sm); margin: 0 0 var(--s3); max-width: 360px; }
.mu-footer ul { list-style: none; margin: 0; padding: 0; }
.mu-footer li { margin-bottom: var(--s2); }
.mu-footer a { color: #94a3b8; font-size: var(--fz-sm); }
.mu-footer a:hover { color: var(--mu-gold); }
.mu-footer__bar { border-top: 1px solid #1e293b; margin-top: var(--s6); padding-top: var(--s4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: var(--fz-xs); color: #64748b; }

/* sticky mobile action bar (product detail) — visible only on small screens */
.mu-sticky-bar { display: none; }

/* utilities */
.mu-stack > * + * { margin-top: var(--s4); }
.mu-flex { display: flex; }
.mu-gap-3 { gap: var(--s3); }
.mu-section-title { display: flex; align-items: center; gap: var(--s2); font-size: var(--fz-xl); margin: var(--s6) 0 var(--s4); }
.mu-section-title i { color: var(--mu-gold); }
.mu-muted { color: var(--mu-muted); }
.mu-hscroll { display: flex; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s3); scroll-snap-type: x mandatory; }
.mu-hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* business / store discover card */
.mu-store-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s2);
    width: 180px;
    padding: var(--s5) var(--s4);
    background: var(--mu-surface);
    border: 1px solid var(--mu-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    transition: var(--tr);
    color: var(--mu-ink);
}
.mu-store-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--mu-gold); color: var(--mu-ink); }
.mu-store-card__name { font-weight: 700; font-size: var(--fz-base); }
.mu-store-card__sub { font-size: var(--fz-xs); color: var(--mu-muted); }

/* ===================================================== RESPONSIVE ======== */
@media (max-width: 992px) {
    .mu-layout { grid-template-columns: 1fr; }
    .mu-facets { position: static; }
    .mu-facets-desktop { display: none; }
    .mu-filters-toggle { display: inline-flex; }
    #muFacetDrawer.mu-open { display: block; }
    .mu-header__search { order: 3; flex-basis: 100%; }
    .mu-header__inner { flex-wrap: wrap; height: auto; padding-top: var(--s3); padding-bottom: var(--s3); gap: var(--s3); }
    .mu-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .mu-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); }
    .mu-hero { padding: var(--s6) var(--s4); }
    .mu-hero h1 { font-size: var(--fz-2xl); }
    .mu-hero p { font-size: var(--fz-base); }
    .mu-storehead { flex-direction: column; align-items: flex-start; text-align: left; padding: var(--s4); }
    .mu-detail-grid { grid-template-columns: 1fr !important; }
    .mu-footer__grid { grid-template-columns: 1fr; gap: var(--s5); }
    /* sticky add-to-cart on product detail */
    .mu-sticky-bar {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 150;
        gap: var(--s3);
        align-items: center;
        background: var(--mu-surface);
        border-top: 1px solid var(--mu-line);
        box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
        padding: var(--s3) var(--s4);
        margin: var(--s5) calc(var(--s4) * -1) 0;
    }
    .mu-sticky-bar .mu-price { white-space: nowrap; }
    .mu-sticky-bar .mu-btn { flex: 1; }
    .mu-hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
    .mu-grid { grid-template-columns: 1fr; }
    .mu-product-card__media { aspect-ratio: 4 / 3; }
    .mu-brand { font-size: var(--fz-lg); }
    .mu-hero h1 { font-size: var(--fz-xl); }
    .mu-store-card { width: 100%; }
}

/* ============================================================
   Cookie consent banner (first-party, no external CMP)
   ============================================================ */
.mu-cookiebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    background: var(--mu-ink); color: #fff;
    border-top: 3px solid var(--mu-gold);
    box-shadow: 0 -4px 20px rgba(0,0,0,.18);
}
.mu-cookiebar__inner {
    max-width: 1200px; margin: 0 auto; padding: var(--s3) var(--s4);
    display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.mu-cookiebar__text { margin: 0; flex: 1 1 320px; font-size: var(--fz-sm); line-height: 1.5; }
.mu-cookiebar__text i { color: var(--mu-gold); margin-right: var(--s2); }
.mu-cookiebar__text a { color: var(--mu-gold); text-decoration: underline; }
.mu-cookiebar__text a:hover { color: var(--mu-gold-100); }
.mu-cookiebar__actions { display: flex; gap: var(--s2); margin-left: auto; }
@media (max-width: 640px) {
    .mu-cookiebar__actions { width: 100%; }
    .mu-cookiebar__actions .mu-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Legal / trust pages (Privacy, Terms, Cookies, Safety, etc.)
   ============================================================ */
.mu-legal { max-width: 860px; margin: 0 auto; }
.mu-legal__head { margin-bottom: var(--s5); }
.mu-legal__head h1 { font-size: var(--fz-3xl); margin-bottom: var(--s2); }
.mu-legal__updated { color: var(--mu-muted); font-size: var(--fz-sm); }
.mu-legal__body { background: var(--mu-surface); border: 1px solid var(--mu-line); border-radius: var(--r-lg); padding: var(--s6); }
.mu-legal__body h2 { font-size: var(--fz-xl); margin-top: var(--s6); padding-bottom: var(--s2); border-bottom: 1px solid var(--mu-line); }
.mu-legal__body h2:first-of-type { margin-top: 0; }
.mu-legal__body h3 { font-size: var(--fz-lg); margin-top: var(--s5); }
.mu-legal__body p, .mu-legal__body li { color: var(--mu-ink); line-height: 1.7; font-size: var(--fz-base); }
.mu-legal__body ul, .mu-legal__body ol { padding-left: var(--s5); margin: var(--s3) 0; }
.mu-legal__body li { margin-bottom: var(--s2); }
.mu-legal__toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }
.mu-legal__toc a {
    display: inline-block; padding: var(--s1) var(--s3); border: 1px solid var(--mu-line);
    border-radius: var(--r-pill); font-size: var(--fz-xs); background: var(--mu-bg); color: var(--mu-ink);
}
.mu-legal__toc a:hover { border-color: var(--mu-gold); background: var(--mu-gold-50); color: var(--mu-ink); }
.mu-fill {
    /* Was a gold "fill me in" marker; now wraps the real owner details, so render as plain emphasis. */
    font-weight: 600;
}
.mu-callout {
    background: var(--mu-gold-50); border: 1px solid var(--mu-gold-100); border-left: 4px solid var(--mu-gold);
    border-radius: var(--r-md); padding: var(--s4); margin: var(--s4) 0;
}
.mu-callout p:last-child { margin-bottom: 0; }
.mu-callout--danger { background: var(--mu-danger-bg); border-color: #fbb; border-left-color: var(--mu-danger); }
.mu-callout--success { background: var(--mu-success-bg); border-color: #bbf3cc; border-left-color: var(--mu-success); }
.mu-tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); margin: var(--s4) 0; }
.mu-tip {
    background: var(--mu-bg); border: 1px solid var(--mu-line); border-radius: var(--r-md);
    padding: var(--s4); display: flex; gap: var(--s3); align-items: flex-start;
}
.mu-tip__icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill);
    background: var(--mu-gold-100); color: var(--mu-gold-600);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.mu-tip h3 { margin: 0 0 var(--s1); font-size: var(--fz-base); }
.mu-tip p { margin: 0; font-size: var(--fz-sm); color: var(--mu-muted); }
.mu-contact-card {
    display: flex; gap: var(--s3); align-items: center; padding: var(--s4);
    border: 1px solid var(--mu-line); border-radius: var(--r-md); background: var(--mu-bg); margin-bottom: var(--s3);
}
.mu-contact-card i { font-size: 1.4rem; color: var(--mu-gold-600); width: 32px; text-align: center; }
.mu-contact-card .lbl { font-size: var(--fz-xs); color: var(--mu-muted); text-transform: uppercase; letter-spacing: .04em; }
.mu-contact-card .val { font-size: var(--fz-base); font-weight: 600; color: var(--mu-ink); }