/*
 * Superroute Marketplace — dedicated consumer-frontend design system.
 *
 * Standalone skin on top of vanilla Bootstrap 5.3 (NOT the V1 stylesheet,
 * NOT the Phoenix admin theme). Visual language follows mainstream food
 * delivery apps: monochrome black/white base, orange (#fd7e14) accent
 * (project rule: never yellow), large radii, soft shadows, mobile-first.
 *
 * Scope: every page on the marketplace storefront layout and the
 * store-console layout adds .mp-body on <body>; all overrides are scoped
 * under it so this file can never leak into the TMS.
 */

:root {
    --mp-ink: #16191d;            /* near-black primary */
    --mp-ink-soft: #3d434b;
    --mp-muted: #767d86;
    --mp-line: #e8eaed;
    --mp-bg: #f7f7f8;
    --mp-card: #ffffff;
    --mp-accent: #fd7e14;         /* brand accent (merchant-overridable per store) */
    --mp-accent-dark: #e76b00;    /* hover shade of the accent */
    --mp-accent-soft: #fff3e8;
    --mp-success: #1d8a4e;
    --mp-danger: #d0312d;
    --mp-radius: 14px;
    --mp-radius-sm: 10px;
    --mp-shadow: 0 1px 2px rgba(22, 25, 29, .05), 0 4px 16px rgba(22, 25, 29, .06);
    --mp-shadow-lift: 0 4px 10px rgba(22, 25, 29, .08), 0 12px 32px rgba(22, 25, 29, .12);
    --mp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- Base ---------- */

body.mp-body {
    font-family: var(--mp-font);
    background: var(--mp-bg);
    color: var(--mp-ink);
    -webkit-font-smoothing: antialiased;
}

body.mp-body h1, body.mp-body h2, body.mp-body h3,
body.mp-body h4, body.mp-body h5, body.mp-body h6 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mp-ink);
}

body.mp-body a { color: var(--mp-ink); }
body.mp-body a:hover { color: var(--mp-accent); }

.mp-container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.mp-container-narrow { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* ---------- Compat aliases (Phoenix-era classes used in templates) ---------- */

body.mp-body .fs-7 { font-size: 1.1rem !important; }
body.mp-body .fs-9 { font-size: .85rem !important; }
body.mp-body .alert-phoenix-info {
    background: #eef4fb; border: 1px solid #d6e4f5; color: #29527a;
    border-radius: var(--mp-radius-sm);
}
body.mp-body .alert-phoenix-success {
    background: #e9f7ef; border: 1px solid #cdebd9; color: #14633a;
    border-radius: var(--mp-radius-sm);
}
body.mp-body .alert-phoenix-danger {
    background: #fdecec; border: 1px solid #f7d2d1; color: #8f211e;
    border-radius: var(--mp-radius-sm);
}
body.mp-body .fs-10 { font-size: .75rem !important; }
body.mp-body .btn-phoenix-secondary {
    background: #fff; border: 1px solid var(--mp-line); color: var(--mp-ink);
}
body.mp-body .btn-phoenix-secondary:hover { border-color: var(--mp-ink); background: #fff; }
body.mp-body .btn-phoenix-primary {
    background: var(--mp-ink); border: 1px solid var(--mp-ink); color: #fff;
}
body.mp-body .btn-phoenix-primary:hover { background: #000; border-color: #000; color: #fff; }
body.mp-body .btn-phoenix-success {
    background: #e9f7ef; border: 1px solid #cdebd9; color: var(--mp-success);
}
body.mp-body .btn-phoenix-success:hover { background: var(--mp-success); border-color: var(--mp-success); color: #fff; }
body.mp-body .btn-phoenix-danger {
    background: #fdecec; border: 1px solid #f7d2d1; color: var(--mp-danger);
}
body.mp-body .btn-phoenix-danger:hover { background: var(--mp-danger); border-color: var(--mp-danger); color: #fff; }
body.mp-body .btn-phoenix-info {
    background: #eef4fb; border: 1px solid #d6e4f5; color: #29527a;
}
body.mp-body .btn-phoenix-info:hover { background: #29527a; border-color: #29527a; color: #fff; }

/* ---------- Buttons ---------- */

body.mp-body .btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .55rem 1.25rem;
}
body.mp-body .btn-sm { padding: .3rem .9rem; }
body.mp-body .btn-primary {
    background: var(--mp-ink);
    border-color: var(--mp-ink);
    color: #fff;
}
body.mp-body .btn-primary:hover,
body.mp-body .btn-primary:focus {
    background: #000;
    border-color: #000;
    color: #fff;
}
body.mp-body .btn-primary:disabled {
    background: #b9bdc3; border-color: #b9bdc3;
}
body.mp-body .btn-outline-primary {
    color: var(--mp-ink); border-color: var(--mp-ink);
}
body.mp-body .btn-outline-primary:hover {
    background: var(--mp-ink); border-color: var(--mp-ink); color: #fff;
}
body.mp-body .btn-outline-secondary {
    color: var(--mp-ink); border-color: var(--mp-line); background: #fff;
}
body.mp-body .btn-outline-secondary:hover {
    background: #fff; color: var(--mp-ink); border-color: var(--mp-ink);
}
body.mp-body .btn-accent {
    background: var(--mp-accent); border-color: var(--mp-accent); color: #fff;
}
body.mp-body .btn-accent:hover { background: var(--mp-accent-dark); border-color: var(--mp-accent-dark); color: #fff; }

/* ---------- Cards & forms ---------- */

body.mp-body .card {
    border: none;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
}
body.mp-body .card .card-header {
    background: #fff;
    border-bottom: 1px solid var(--mp-line);
    border-radius: var(--mp-radius) var(--mp-radius) 0 0;
    font-weight: 700;
}
body.mp-body .form-control, body.mp-body .form-select {
    border-radius: var(--mp-radius-sm);
    border-color: var(--mp-line);
    padding: .55rem .85rem;
}
body.mp-body .form-control:focus, body.mp-body .form-select:focus {
    border-color: var(--mp-ink);
    box-shadow: 0 0 0 .2rem rgba(22, 25, 29, .08);
}
body.mp-body .form-label { font-weight: 600; font-size: .85rem; color: var(--mp-ink-soft); }
body.mp-body .form-check-input:checked { background-color: var(--mp-ink); border-color: var(--mp-ink); }

/* ---------- Header ---------- */

.mp-header {
    background: #fff;
    border-bottom: 1px solid var(--mp-line);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.mp-header-inner { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.mp-brand {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
}
.mp-brand i { color: var(--mp-accent); }
.mp-header .form-select {
    border-radius: 999px;
    font-size: .85rem;
    padding: .35rem 1.9rem .35rem .9rem;
    width: auto;
}
.mp-header-link {
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}

/* Store-branded header (store-scoped pages carry the store's own identity) */
.mp-brand-store { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
/* Deferred: the page below already shows the logo and the name (storefront
   hero), so the bar stays quiet until that hero has scrolled out of sight. */
.mp-brand-deferred {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mp-brand-deferred.mp-brand-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease;
}
.mp-brand-logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}
.mp-brand-monogram {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-dark));
    flex: 0 0 auto;
}
.mp-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Account dropdown (plain-jQuery; no bootstrap JS needed on storefront) */
.mp-header .dropdown-menu {
    border: none;
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow-lift);
    margin-top: 8px;
}
.mp-header .dropdown-item { font-weight: 500; padding: .5rem 1.1rem; }
.mp-header .dropdown-item:hover { background: var(--mp-bg); color: var(--mp-ink); }

/* ---------- Discover: hero + store cards ---------- */

.mp-hero {
    background: var(--mp-ink);
    color: #fff;
    border-radius: var(--mp-radius);
    padding: 48px 24px;
    margin: 20px 0 28px;
    text-align: center;
}
.mp-hero h1 { color: #fff; font-size: 1.7rem; margin-bottom: 6px; }
.mp-hero p { color: rgba(255, 255, 255, .72); margin-bottom: 22px; }
.mp-hero-search { max-width: 560px; margin: 0 auto; display: flex; gap: 8px; }
.mp-hero-search .form-control {
    border: none;
    border-radius: 999px;
    padding: .8rem 1.3rem;
    font-size: 1rem;
}
.mp-hero-search .btn { padding: .8rem 1.6rem; white-space: nowrap; }
.mp-hero-search .btn-primary { background: var(--mp-accent); border-color: var(--mp-accent); }
.mp-hero-search .btn-primary:hover { background: var(--mp-accent-dark); border-color: var(--mp-accent-dark); }

.mp-store-card {
    display: block;
    text-decoration: none;
    background: var(--mp-card);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.mp-store-card:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lift); }
.mp-store-cover {
    height: 150px;
    width: 100%;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #23272d, #4a525c);
}
.mp-store-cover-placeholder {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #23272d, #4a525c);
    color: rgba(255, 255, 255, .45);
    font-size: 2rem;
}
.mp-store-card-body { padding: 14px 16px 16px; }
.mp-store-card-body h5 { margin-bottom: 4px; font-size: 1.05rem; }
.mp-store-tags { color: var(--mp-muted); font-size: .82rem; margin-bottom: 10px; }
.mp-store-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-meta-chip {
    background: var(--mp-bg);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--mp-ink-soft);
    padding: 3px 10px;
    white-space: nowrap;
}
.mp-meta-chip i { color: var(--mp-accent); margin-right: 4px; }

/* ---------- Storefront (menu) ---------- */

.mp-store-hero {
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow);
    background: var(--mp-card);
    margin-bottom: 20px;
}
.mp-store-page .mp-container.mt-4 { margin-top: 0 !important; }
.mp-store-page .mp-store-hero {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--mp-line);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-bottom: 20px;
}
/* 100vw includes the vertical scrollbar; clip so the full-bleed hero never
   adds a horizontal page scroll (clip keeps sticky bars working). */
body.mp-store-page { overflow-x: clip; }
.mp-store-page .mp-store-hero-body {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}
.mp-store-hero-cover { height: 220px; width: 100%; object-fit: cover; display: block; }
.mp-store-hero-cover-fallback {
    height: 120px;
    background:
        radial-gradient(ellipse 60% 120% at 85% 0%, rgba(253, 126, 20, .28), transparent 60%),
        radial-gradient(ellipse 50% 100% at 15% 100%, rgba(253, 126, 20, .12), transparent 55%),
        linear-gradient(120deg, #1b1f24, #2c333b 55%, #3a424c);
}
.mp-store-hero-body { padding: 0 20px 18px; }
.mp-store-hero-body h1 { font-size: 1.6rem; margin-bottom: 4px; }

/* Store identity: logo (or monogram) overlapping the cover band. */
.mp-store-logo {
    width: 76px; height: 76px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--mp-card);
    border: 3px solid var(--mp-card);
    box-shadow: var(--mp-shadow);
    margin-top: -30px;
    flex: 0 0 auto;
    align-self: flex-start;
}
.mp-store-logo-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-dark));
}
.mp-store-hero-body > div:last-child { padding-top: 14px; }
.mp-store-hero-body .me-auto { padding-top: 14px; }

/* Merchant announcement bar (appearance settings) */
.mp-announcement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--mp-accent-soft);
    color: var(--mp-ink);
    border-left: 4px solid var(--mp-accent);
    border-radius: var(--mp-radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: .9rem;
}
.mp-announcement i { color: var(--mp-accent); margin-top: 3px; }

/* Home banner carousel: pure CSS scroll-snap, no JS */
.mp-banner-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--mp-radius);
}
.mp-banner-strip::-webkit-scrollbar { display: none; }
.mp-banner {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: block;
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow);
}
.mp-banner-strip .mp-banner:not(:only-child) { flex-basis: min(88%, 920px); }
.mp-banner img {
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    display: block;
}

/* Featured products: horizontal scroll of compact cards */
.mp-featured-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.mp-featured-row::-webkit-scrollbar { display: none; }
.mp-featured-card { flex: 0 0 168px; }

/* Merchant page (/s/{store}/p/{page}) */
.mp-page-title { font-size: 1.5rem; margin-bottom: 16px; }
.mp-page-body p { color: var(--mp-ink-soft); line-height: 1.75; }
.mp-page-body p:last-child { margin-bottom: 0; }

/* Storefront footer links (merchant pages) */
.mp-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 10px;
}
.mp-footer-links a {
    color: var(--mp-muted);
    text-decoration: none;
    font-weight: 600;
}
.mp-footer-links a:hover, .mp-footer-links a.active { color: var(--mp-accent); }

/* Console: appearance page helpers */
.mp-console-banner-thumb {
    width: 168px;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
}
.mp-console-product-picker {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    padding: 10px 14px;
}

/* Store social links (hero meta row) */
.mp-social-link {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-bg);
    color: var(--mp-ink-soft);
    font-size: .85rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.mp-social-link:hover { background: var(--mp-accent); color: #fff; }

.mp-status-pill {
    display: inline-block;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    padding: 3px 12px;
}
.mp-status-pill.open { background: #e9f7ef; color: var(--mp-success); }
.mp-status-pill.closed { background: #fdecec; color: var(--mp-danger); }

.mp-category-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: none;
    position: sticky;
    top: 60px;
    background: var(--mp-bg);
    z-index: 1010;
}
.mp-category-nav::-webkit-scrollbar { display: none; }
.mp-category-pill {
    border: 1px solid var(--mp-line);
    background: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mp-ink-soft);
}
.mp-category-pill:hover, .mp-category-pill.active {
    background: var(--mp-ink);
    border-color: var(--mp-ink);
    color: #fff;
}

/* Category bar wrappers (public/js/mp-category-nav.js): the outer bar is the
   sticky row [all categories] [<] [scrolling pills] [>]. Every control in the
   row has the pill height and border, so the row reads as one strip. The
   arrows appear only while the pills overflow and dim at either end. */
.mp-category-bar {
    --mp-cat-h: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 60px;
    background: var(--mp-bg);
    z-index: 1010;
    max-width: 100%;
    padding: 4px 0 10px;
}
.mp-category-bar .mp-category-nav {
    position: static;
    z-index: auto;
    padding: 0;
    align-items: center;
}
.mp-category-bar .mp-category-pill {
    height: var(--mp-cat-h);
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
}
.mp-category-scroll {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.mp-category-scroll::before,
.mp-category-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
}
.mp-category-scroll::before { left: 0; background: linear-gradient(to right, var(--mp-bg), rgba(247, 247, 248, 0)); }
.mp-category-scroll::after { right: 0; background: linear-gradient(to left, var(--mp-bg), rgba(247, 247, 248, 0)); }
.mp-category-scroll.can-prev::before,
.mp-category-scroll.can-next::after { opacity: 1; }
.mp-category-arrow,
.mp-category-all-btn {
    flex: 0 0 auto;
    height: var(--mp-cat-h);
    border: 1px solid var(--mp-line);
    background: #fff;
    border-radius: 999px;
    color: var(--mp-ink-soft);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.mp-category-arrow {
    width: var(--mp-cat-h);
    padding: 0;
    font-size: .75rem;
}
.mp-category-arrow[hidden] { display: none; }
.mp-category-arrow:disabled { opacity: .35; cursor: default; }
.mp-category-all-btn { padding: 0 14px; white-space: nowrap; gap: 6px; }
.mp-category-arrow:not(:disabled):hover,
.mp-category-all-btn:hover,
.mp-category-all-btn[aria-expanded="true"] {
    border-color: var(--mp-ink);
    color: var(--mp-ink);
}
.mp-category-arrow:focus-visible,
.mp-category-all-btn:focus-visible {
    outline: 2px solid var(--mp-accent);
    outline-offset: 2px;
}

/* All categories sheet (reuses the menu item sheet's frame): the categories
   wrap as the same pills as the bar, the current one filled. */
.mp-cat-sheet { max-width: 560px; }
.mp-cat-sheet .mp-sheet-title { padding-right: 40px; margin-bottom: 14px; }
.mp-cat-sheet .mp-sheet-body { padding-bottom: 20px; }
.mp-cat-sheet-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mp-cat-sheet-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 36px;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--mp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mp-ink-soft);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mp-cat-sheet-name { min-width: 0; overflow-wrap: anywhere; }
.mp-cat-sheet-count {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mp-muted);
    background: var(--mp-bg);
    border-radius: 999px;
    padding: 2px 7px;
}
.mp-cat-sheet-item:hover,
.mp-cat-sheet-item.active {
    background: var(--mp-ink);
    border-color: var(--mp-ink);
    color: #fff;
}
.mp-cat-sheet-item:hover .mp-cat-sheet-count,
.mp-cat-sheet-item.active .mp-cat-sheet-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.mp-menu-section h4 {
    font-size: 1.1rem;
    margin: 22px 0 10px;
}
.mp-menu-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    background: var(--mp-card);
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.mp-menu-item-info { min-width: 0; }
.mp-menu-item-name { font-weight: 700; margin-bottom: 2px; }
.mp-menu-item-desc {
    color: var(--mp-muted);
    font-size: .83rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mp-menu-item-price { font-weight: 700; margin-top: 6px; }
.mp-menu-item-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.mp-menu-item-img {
    width: 84px; height: 84px;
    border-radius: var(--mp-radius-sm);
    object-fit: cover;
}
.mp-menu-item {
    transition: transform .15s ease, box-shadow .15s ease;
}
.mp-menu-item:hover { transform: translateY(-2px); box-shadow: var(--mp-shadow-lift); }
.mp-add-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--mp-ink);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mp-shadow);
    transition: background .15s ease, transform .1s ease;
}
.mp-add-btn:hover { background: var(--mp-accent); transform: scale(1.08); }

/* ---------- Storefront (retail product grid) ---------- */

.mp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.mp-product-card {
    background: var(--mp-card);
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mp-product-card:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lift); }
.mp-product-card.is-soldout .mp-product-media { opacity: .55; }
.mp-product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--mp-bg);
}
.mp-product-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mp-img-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #c3c8cf;
    background: linear-gradient(160deg, #f3f4f6, #e8eaee);
}
.mp-product-flag {
    position: absolute;
    top: 8px; left: 8px;
}
.mp-product-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.mp-product-name {
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mp-product-desc {
    color: var(--mp-muted);
    font-size: .78rem;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mp-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}
.mp-product-price { font-weight: 800; }
.mp-product-compare {
    color: var(--mp-muted);
    text-decoration: line-through;
    font-size: .78rem;
    font-weight: 400;
    margin-left: 3px;
}

/* Buyer review rows */
.mp-review-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4a525c, #23272d);
    flex: 0 0 auto;
}

/* ---------- Cart ---------- */

.mp-cart-panel { position: sticky; top: 76px; }
.mp-cart-line { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; margin-bottom: 8px; }
.mp-qty-group { display: inline-flex; align-items: center; gap: 8px; }
.mp-qty-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--mp-line);
    background: #fff;
    color: var(--mp-ink);
    font-size: .8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mp-qty-btn:hover { border-color: var(--mp-ink); }

/* Mobile sticky checkout bar */
.mp-cart-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--mp-ink);
    color: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1030;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
}
.mp-cart-bar .btn { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }

/* ---------- Order status timeline ---------- */

.mp-order-head {
    text-align: center;
    padding: 30px 16px;
}
.mp-order-head .mp-order-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 14px;
}
.mp-order-icon.ok { background: #e9f7ef; color: var(--mp-success); }
.mp-order-icon.wait { background: var(--mp-accent-soft); color: var(--mp-accent); }

.mp-timeline { list-style: none; margin: 0; padding: 0; }
.mp-timeline li {
    position: relative;
    padding: 0 0 18px 26px;
}
.mp-timeline li::before {
    content: "";
    position: absolute;
    left: 7px; top: 6px; bottom: -6px;
    width: 2px;
    background: var(--mp-line);
}
.mp-timeline li:last-child::before { display: none; }
.mp-timeline li::after {
    content: "";
    position: absolute;
    left: 2px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mp-ink);
}
.mp-timeline li:first-child::after { border-color: var(--mp-accent); }
.mp-timeline-time { color: var(--mp-muted); font-size: .8rem; }

/* ---------- Badges ---------- */

body.mp-body .badge { border-radius: 999px; font-weight: 600; padding: .4em .9em; }
body.mp-body .badge.bg-success { background: var(--mp-success) !important; }
body.mp-body .badge.bg-danger { background: var(--mp-danger) !important; }
body.mp-body .badge.bg-info { background: var(--mp-ink-soft) !important; }
body.mp-body .badge.bg-secondary { background: var(--mp-muted) !important; }
.mp-warning { background-color: #fd7e14; color: #fff; } /* warning orange, never follows store accent */
/* Informational note (open tab, "nothing to pay yet"): the store's own accent. */
.mp-info { background: var(--mp-accent-soft); color: var(--mp-ink); border: 1px solid var(--mp-line); }

/* ---------- Dine-in open tab ---------- */

/* The round icon is used outside .mp-order-head on the tab page too. */
.mp-order-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex: 0 0 auto;
}

/* ---------- Account area ---------- */

body.mp-body .nav-pills .nav-link {
    border-radius: 999px;
    color: var(--mp-ink-soft);
    font-weight: 600;
}
body.mp-body .nav-pills .nav-link.active { background: var(--mp-ink); color: #fff; }
body.mp-body .table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mp-muted);
    font-weight: 700;
}
body.mp-body .pagination .page-link { color: var(--mp-ink); border-color: var(--mp-line); }
body.mp-body .pagination .page-item.active .page-link {
    background: var(--mp-ink); border-color: var(--mp-ink); color: #fff;
}

/* ---------- Store console ---------- */

.sc-topbar { background: var(--mp-ink); color: #fff; }
.sc-topbar a, .sc-topbar .dropdown-toggle { color: #fff; text-decoration: none; }
.sc-topbar .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.35); }
.sc-container { max-width: 1720px; margin: 0 auto; padding: 0 16px; }
.sc-badge-warning { background-color: #fd7e14; color: #fff; } /* warning orange, never follows store accent */

/*
    Console page width.

    The console is a back-office, not a storefront page: it is read on the
    shop's own desk monitor, so the width belongs to the content. Settings
    pages used to stack their cards down a centred two-thirds column, which
    left half of a 1920 screen empty and pushed every page twice as long as
    it needed to be. Independent cards now sit side by side as soon as there
    is room for two of them.

    .sc-cards      - grid of independent cards; 1 up, then 2 up from 1400px.
    .sc-cards-3    - same, but 3 up from 1800px (short, repeated blocks).
    .sc-card-wide  - a card in that grid that keeps the full row (tables,
                     galleries, anything that reads badly at half width).
    .sc-form       - a form too small to fill the console. It is capped and
                     left-aligned rather than centred: whitespace all on one
                     side reads as layout, whitespace on both reads as a bug.
*/
.sc-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
}
.sc-cards > .sc-card-wide { grid-column: 1 / -1; }
.sc-form { max-width: 1180px; }

@media (min-width: 1400px) {
    .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
    .sc-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.mp-body .nav-tabs { border-bottom: 1px solid var(--mp-line); gap: 4px; }
body.mp-body .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    color: var(--mp-muted);
    padding: .6rem 1rem;
}
body.mp-body .nav-tabs .nav-link:hover { color: var(--mp-ink); }
body.mp-body .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--mp-ink);
    border-bottom-color: var(--mp-accent);
}
/* Grouped console tabs: the strip stays one row, the pages sit in dropdowns. */
body.mp-body .nav-tabs .nav-link.dropdown-toggle { display: inline-flex; align-items: center; }
body.mp-body .nav-tabs .dropdown-menu {
    border: 1px solid var(--mp-line);
    border-radius: 10px;
    padding: 6px;
    margin-top: 2px;
}
body.mp-body .nav-tabs .dropdown-item { border-radius: 7px; padding: .5rem .75rem; font-weight: 500; }
body.mp-body .nav-tabs .dropdown-item:hover { background: var(--mp-bg); color: var(--mp-ink); }
body.mp-body .nav-tabs .dropdown-item.active {
    background: var(--mp-accent-soft);
    color: var(--mp-ink);
    font-weight: 700;
}

/* Order board columns */
.sc-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sc-col-title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mp-muted);
    margin-bottom: 10px;
}
.sc-order-card {
    background: #fff;
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
    padding: 12px 14px;
    margin-bottom: 10px;
}

/* ---------- Footer ---------- */

.mp-footer {
    color: var(--mp-muted);
    font-size: .85rem;
    padding: 40px 0 32px;
    text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
    .mp-hero { padding: 34px 16px; }
    .mp-hero h1 { font-size: 1.35rem; }
    .mp-hero-search { flex-direction: column; }
    .mp-store-hero-cover { height: 150px; }
    .mp-store-hero-cover-fallback { height: 96px; }
    .mp-store-logo { width: 60px; height: 60px; margin-top: -24px; border-radius: 14px; }
    .mp-store-logo-monogram { font-size: 1.5rem; }
    .mp-store-hero-body h1 { font-size: 1.3rem; }
    .mp-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .mp-category-nav, .mp-category-bar { top: 56px; }
    .mp-header-inner { min-height: 54px; }
}

/* ---------- Menu item sheet (option picker, design §3.4/§9) ---------- */
/* Desktop: centered dialog. Mobile: bottom sheet, food-app style. */

.mp-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1060;
    background: rgba(22, 25, 29, .55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s ease;
}
.mp-sheet-backdrop.show { opacity: 1; }

.mp-sheet {
    position: relative;
    width: min(520px, 94vw);
    max-height: 88vh;
    background: var(--mp-card);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow-lift);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(12px); transition: transform .18s ease;
}
.mp-sheet-backdrop.show .mp-sheet { transform: translateY(0); }

.mp-sheet-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: rgba(255, 255, 255, .92); color: var(--mp-ink);
    box-shadow: var(--mp-shadow); cursor: pointer;
}
.mp-sheet-close:hover { color: var(--mp-accent); }

.mp-sheet-cover { width: 100%; height: 190px; object-fit: cover; }

.mp-sheet-body { padding: 18px 20px 8px; overflow-y: auto; }
.mp-sheet-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 2px; }
.mp-sheet-desc { color: var(--mp-muted); font-size: .85rem; margin-bottom: 4px; }
.mp-sheet-base-price { font-weight: 700; margin-bottom: 10px; }

.mp-option-group { padding: 10px 0 2px; }
.mp-option-group + .mp-option-group { border-top: 1px solid var(--mp-line); }
.mp-option-group-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px;
}
.mp-option-group-title { font-weight: 700; }
.mp-option-rule { font-size: .75rem; color: var(--mp-muted); }
.mp-required-tag {
    font-size: .7rem; font-weight: 700; color: #fff;
    background-color: #fd7e14; /* project orange, never yellow */
    border-radius: 6px; padding: 2px 7px;
}

.mp-option-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; cursor: pointer;
}
.mp-option-row + .mp-option-row { border-top: 1px dashed var(--mp-line); }
.mp-option-row input { cursor: pointer; flex: 0 0 auto; }
.mp-option-row .form-check-input:checked {
    background-color: var(--mp-accent); border-color: var(--mp-accent);
}
.mp-option-row-label { flex: 1 1 auto; min-width: 0; }
.mp-option-row-delta { font-size: .82rem; color: var(--mp-success); font-weight: 600; white-space: nowrap; }
/* Optional images of an option group and of its values (option library). */
.mp-option-group-img {
    width: 40px; height: 40px; flex: 0 0 auto;
    object-fit: cover; border-radius: 8px; border: 1px solid var(--mp-line);
}
.mp-option-row-img {
    width: 36px; height: 36px; flex: 0 0 auto;
    object-fit: cover; border-radius: 6px; border: 1px solid var(--mp-line);
}

.mp-sheet-footer {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--mp-line);
    background: var(--mp-card);
}
.mp-sheet-add {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: space-between;
    border: none; border-radius: 999px;
    background: var(--mp-ink); color: #fff;
    padding: 12px 22px; font-weight: 700;
    transition: background .15s ease;
}
.mp-sheet-add:hover:not(:disabled) { background: var(--mp-accent); color: #fff; }
.mp-sheet-add:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 575.98px) {
    .mp-sheet-backdrop { align-items: flex-end; }
    .mp-sheet {
        width: 100%; max-height: 92vh;
        border-radius: var(--mp-radius) var(--mp-radius) 0 0;
        transform: translateY(40px);
    }
    /* Phone: the all categories button keeps its icon; the label stays as
       aria-label. Swiping scrolls the pills, so the arrows step aside. */
    .mp-category-all-btn { width: var(--mp-cat-h); padding: 0; }
    .mp-category-all-label { display: none; }
    .mp-category-arrow { display: none; }
}


/* Ordering context (table QR / kiosk) ------------------------------------ */
.mp-ctx-bar { font-size: .95rem; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.mp-ctx-dinein { background: var(--mp-accent-soft, #eef2ff); color: #1f2937; }
.mp-ctx-kiosk { background: #111827; color: #fff; }
.mp-ctx-kiosk a { color: #fbbf24; }
/* Running bill line, under the context line it belongs to. */
.mp-ctx-tab { font-size: .88rem; opacity: .9; padding-top: 4px; }
.mp-ctx-kiosk .mp-ctx-tab { font-size: 1.05rem; opacity: 1; }
body.mp-kiosk { font-size: 1.15rem; }
body.mp-kiosk .mp-header .mp-header-link, body.mp-kiosk .mp-header #mpLangSwitcher, body.mp-kiosk .mp-header .btn-primary.btn-sm { display: none; }
body.mp-kiosk .btn { padding: .8rem 1.3rem; font-size: 1.15rem; }
body.mp-kiosk .form-control, body.mp-kiosk .form-select { font-size: 1.15rem; padding: .7rem .9rem; }
body.mp-kiosk .mp-menu-item, body.mp-kiosk .card { border-radius: 14px; }
.mp-kiosk-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; border: 2px solid #e5e7eb; border-radius: 20px; background: #fff; font-size: 1.6rem; font-weight: 600; cursor: pointer; transition: border-color .15s, transform .15s; }
.mp-kiosk-choice i { font-size: 3rem; color: var(--mp-accent, #0d6efd); }
.mp-kiosk-choice:hover, .mp-kiosk-choice.active { border-color: var(--mp-accent, #0d6efd); transform: translateY(-2px); }
.mp-kiosk-done { text-align: center; padding: 48px 16px; }
.mp-kiosk-done .mp-order-no { font-size: 4rem; font-weight: 800; letter-spacing: 2px; }
body.mp-kiosk .mp-kiosk-restart { margin-right: 200px; }

/* ---------- Kiosk mode on a mounted panel ----------
 *
 * A terminal sends customers into these pages, and terminals ship on both
 * 1080x1920 and 1920x1080. Both panels share a 1080 px SHORT edge, so vmin is
 * the one unit that means the same physical length whichever way the hardware
 * is mounted — a button that fits a thumb on a tall panel must not halve on a
 * wide one. What differs is the LONG edge budget: portrait has 178 vmin of
 * height, landscape only 100, so landscape trades type scale for room and
 * spends its spare width on more columns.
 *
 * Scoped to body.mp-kiosk throughout: the same pages are browsed on phones,
 * where vmin would be meaningless.
 */

body.mp-kiosk {
    --mp-kt: 1.45;   /* type scale */
    --mp-kv: 1.45;   /* vertical rhythm */
    --mp-ktile: 30vmin;
    font-size: calc(1.6vmin * var(--mp-kt));
}

@media screen and (orientation: landscape) {
    body.mp-kiosk {
        --mp-kt: 1.3;
        --mp-kv: 1.1;
        --mp-ktile: 26vmin;
    }
    /* Width to spare: keep the reading column sane rather than stretching a
       menu across 1920 px, and give the choice tiles a second row of columns. */
    body.mp-kiosk .mp-container { max-width: 150vmin; }
}

body.mp-kiosk .mp-container { padding: 0 3vmin; }
body.mp-kiosk .mp-header-inner { min-height: calc(7vmin * var(--mp-kv)); }
body.mp-kiosk h1 { font-size: calc(3.4vmin * var(--mp-kt)); }
body.mp-kiosk h2 { font-size: calc(2.9vmin * var(--mp-kt)); }
body.mp-kiosk h3 { font-size: calc(2.5vmin * var(--mp-kt)); }
body.mp-kiosk .fs-5 { font-size: calc(1.9vmin * var(--mp-kt)); }

body.mp-kiosk .btn {
    padding: calc(1.2vmin * var(--mp-kv)) 2.2vmin;
    font-size: calc(1.6vmin * var(--mp-kt));
    border-radius: 1.4vmin;
}
body.mp-kiosk .btn-lg {
    padding: calc(1.6vmin * var(--mp-kv)) 3vmin;
    font-size: calc(1.9vmin * var(--mp-kt));
}
body.mp-kiosk .form-control,
body.mp-kiosk .form-select {
    font-size: calc(1.8vmin * var(--mp-kt));
    padding: calc(1.1vmin * var(--mp-kv)) 1.4vmin;
    border-radius: 1.2vmin;
}
body.mp-kiosk .card,
body.mp-kiosk .mp-menu-item { border-radius: 1.8vmin; }

/* Eat in / take away, and any tile row of the same shape. */
body.mp-kiosk .mp-kiosk-choice {
    min-height: var(--mp-ktile);
    gap: 1.4vmin;
    border-radius: 2.2vmin;
    font-size: calc(2.2vmin * var(--mp-kt));
    border-width: 0.3vmin;
}
body.mp-kiosk .mp-kiosk-choice i { font-size: calc(4vmin * var(--mp-kt)); }

body.mp-kiosk .mp-kiosk-done { padding: calc(5vmin * var(--mp-kv)) 3vmin; }
body.mp-kiosk .mp-kiosk-done .mp-order-no { font-size: calc(6vmin * var(--mp-kt)); }
body.mp-kiosk .mp-order-no { font-size: calc(6vmin * var(--mp-kt)); }
/* The restart button used to reserve a fixed 200px for the floating language
   chooser; the chooser now sits in the bar, so nothing needs reserving. */
body.mp-kiosk .mp-kiosk-restart { margin-right: 0; }

/* Menu, cart and bill lists have to scroll inside the panel rather than push
   the buttons below its bottom edge — the same lesson the device screens
   learned. */
body.mp-kiosk .mp-menu-list,
body.mp-kiosk .mp-product-grid,
body.mp-kiosk .kiosk-scroll {
    max-height: calc(100vh - 26vmin);
    overflow-y: auto;
}

/* ---------- Group buys on the store page and in the mall (docs/CLIENT-MALL-DESIGN.md M2) ---------- */

.mp-groupbuy-section { margin-bottom: 1rem; }
.mp-groupbuy-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.mp-groupbuy-row::-webkit-scrollbar { display: none; }
.mp-groupbuy-card {
    flex: 0 0 min(80%, 280px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--mp-card);
    border: 1px solid var(--mp-line);
    border-left: 4px solid var(--mp-accent);
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
    text-decoration: none;
}
body.mp-body a.mp-groupbuy-card { color: var(--mp-ink); }
body.mp-body a.mp-groupbuy-card:hover { box-shadow: var(--mp-shadow-lift); color: var(--mp-ink); }
.mp-groupbuy-store { font-size: .8rem; color: var(--mp-muted); }
.mp-groupbuy-title { font-weight: 700; line-height: 1.3; }
.mp-groupbuy-cutoff { font-size: .85rem; color: var(--mp-ink-soft); }
.mp-groupbuy-go { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--mp-accent-dark); }
.mp-groupbuy-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--mp-accent-soft);
    border-radius: var(--mp-radius-sm);
    font-size: .9rem;
}
.mp-groupbuy-price strong { font-size: 1.1rem; }

/* ---------- Client mall pages (docs/CLIENT-MALL-DESIGN.md §4) ---------- */

.mp-mall-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.mp-mall-category {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--mp-card);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    text-decoration: none;
}
.mp-mall-category:hover { border-color: var(--mp-accent); }
a.mp-mall-product { text-decoration: none; color: var(--mp-ink); }
.mp-mall-coupon { border-left-style: dashed; }
.mp-mall-coupon-code { font-size: .9rem; }
.mp-mall-coupon-code strong { letter-spacing: .05em; color: var(--mp-accent-dark); }

/* Item photo carousel (js/mp-photo-carousel.js): the cover first, swipe or arrows for the rest */
.mp-photo-carousel { position: relative; }
.mp-photo-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--mp-radius);
}
.mp-photo-track::-webkit-scrollbar { display: none; }
.mp-photo-slide { flex: 0 0 100%; scroll-snap-align: start; }
.mp-photo-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mp-photo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #333;
    box-shadow: var(--mp-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-photo-prev { left: 8px; }
.mp-photo-next { right: 8px; }
.mp-photo-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.mp-photo-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}
.mp-photo-dots button.active { background: #fff; }
.mp-sheet .mp-photo-slide img { aspect-ratio: auto; height: 190px; }
.mp-sheet .mp-photo-track { border-radius: 0; }
@media (hover: none) { .mp-photo-arrow { display: none; } }

/* ---------- Store styles: page blocks and the multi-page style (docs/STORE-STYLES-DESIGN.md) ---------- */

.mp-sd-block { margin-bottom: 24px; }
.mp-sd-title { font-size: 1.15rem; margin-bottom: 12px; }
.mp-sd-text { color: var(--mp-ink-soft); line-height: 1.75; }

.mp-sd-banner-small .mp-banner img { aspect-ratio: 16 / 4; }
.mp-sd-banner-medium .mp-banner img { aspect-ratio: 16 / 6; }
.mp-sd-banner-large .mp-banner img { aspect-ratio: 16 / 8; }
.mp-sd-block-announcement .mp-announcement { margin-bottom: 0; }
.mp-sd-tone-neutral { background: var(--mp-card); border-left-color: var(--mp-ink-soft); }
.mp-sd-tone-neutral i { color: var(--mp-ink-soft); }
.mp-sd-tone-warning { background: #fff1e6; border-left-color: #fd7e14; }
.mp-sd-tone-warning i { color: #fd7e14; }

.mp-sd-grid {
    display: grid;
    grid-template-columns: repeat(var(--mp-sd-cols, 4), minmax(0, 1fr));
    gap: 14px;
}
.mp-sd-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--mp-sd-cols, 4) - 1) * 14px) / var(--mp-sd-cols, 4));
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.mp-sd-scroll::-webkit-scrollbar { display: none; }
.mp-sd-scroll > * { scroll-snap-align: start; }

.mp-sd-cats {
    display: grid;
    grid-template-columns: repeat(var(--mp-sd-cols, 4), minmax(0, 1fr));
    gap: 12px;
}
.mp-sd-cat {
    display: flex;
    flex-direction: column;
    background: var(--mp-card);
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
    overflow: hidden;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mp-sd-cat:hover { transform: translateY(-2px); box-shadow: var(--mp-shadow-lift); }
.mp-sd-cat-media { display: block; aspect-ratio: 1 / 1; background: var(--mp-bg); }
.mp-sd-cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-sd-cat-name { padding: 10px 12px; font-weight: 700; font-size: .9rem; text-align: center; }
.mp-sd-cats-text .mp-sd-cat-name { padding: 16px 12px; }

.mp-sd-image-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    background: var(--mp-card);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    overflow: hidden;
}
.mp-sd-image-text-media img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; display: block; }
.mp-sd-image-text-body { padding: 24px; }
.mp-sd-image-right .mp-sd-image-text-media { order: 2; }
.mp-sd-image-top, .mp-sd-image-none { grid-template-columns: 1fr; }
.mp-sd-image-top .mp-sd-image-text-body { padding-top: 0; }
.mp-sd-image-none .mp-sd-image-text-body { padding-top: 24px; }

.mp-sd-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--mp-radius);
    overflow: hidden;
    background: #000;
}
.mp-sd-video iframe, .mp-sd-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mp-sd-reviews { display: grid; gap: 10px; }
.mp-sd-review { background: var(--mp-card); border-radius: var(--mp-radius-sm); box-shadow: var(--mp-shadow); padding: 12px 14px; }

.mp-sd-category-header { display: flex; align-items: center; gap: 16px; }
.mp-sd-category-header.has-image { background: var(--mp-card); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 12px; }
.mp-sd-category-image { width: 120px; height: 120px; object-fit: cover; border-radius: var(--mp-radius-sm); flex: 0 0 auto; }

.mp-sd-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-sd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-sd-chip {
    border: 1px solid var(--mp-line);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .85rem;
    background: var(--mp-card);
    cursor: pointer;
}
.mp-sd-chip input { display: none; }
.mp-sd-chip.active { background: var(--mp-ink); border-color: var(--mp-ink); color: #fff; }

.mp-sd-gallery-main { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--mp-radius); background: var(--mp-bg); display: flex; align-items: center; justify-content: center; }
.mp-sd-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.mp-sd-thumb { flex: 0 0 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--mp-radius-sm); overflow: hidden; background: none; }
.mp-sd-thumb.active { border-color: var(--mp-accent); }
.mp-sd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-sd-details { background: var(--mp-card); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 20px; }
.mp-sd-details-image { width: 100%; display: block; margin-top: 12px; border-radius: var(--mp-radius-sm); }
.mp-sd-specs { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 6px 16px; background: var(--mp-card); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 16px 20px; margin: 0; }
.mp-sd-specs dt { font-weight: 600; }
.mp-sd-specs dd { margin: 0; color: var(--mp-ink-soft); }

/* Multi-page store bar and cart drawer */
.mp-sd-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mp-sd-nav-search { display: flex; gap: 6px; flex: 1 1 auto; max-width: 560px; margin-left: auto; }
.mp-sd-block .mp-product-name a, .mp-sd-cat { text-decoration: none; }
.mp-sd-cart-btn {
    position: relative;
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--mp-ink);
    color: #fff;
    flex: 0 0 auto;
}
.mp-sd-cart-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--mp-muted);
    color: #fff;
    font-size: .72rem;
    line-height: 20px;
    font-weight: 700;
}
.mp-sd-cart-count.has-items { background: var(--mp-accent); }
.mp-sd-catbar { margin-bottom: 20px; }
.mp-sd-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(22, 25, 29, .45);
    z-index: 1060;
    opacity: 0;
    transition: opacity .18s ease;
}
.mp-sd-drawer-backdrop.show { opacity: 1; }
.mp-sd-drawer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--mp-card);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .18s ease;
}
.mp-sd-drawer-backdrop.show .mp-sd-drawer { transform: translateX(0); }
.mp-sd-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--mp-line); }
.mp-sd-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; }
.mp-sd-drawer-foot { padding: 16px 20px; border-top: 1px solid var(--mp-line); }

@media (max-width: 767.98px) {
    .mp-sd-grid, .mp-sd-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-sd-scroll { grid-auto-columns: 46%; }
    .mp-sd-image-text { grid-template-columns: 1fr; }
    .mp-sd-image-right .mp-sd-image-text-media { order: 0; }
    .mp-sd-nav-search { max-width: none; }
    .mp-sd-category-image { width: 80px; height: 80px; }
}