/* ==========================================================================
   Marketplace — mobile-first layer ("m2"), part 2: shared UI and flows
   --------------------------------------------------------------------------
   Loaded after marketplace-m2.css. Holds everything that is not a browsing
   screen: the sheet every dialog opens in, form controls, buttons, toasts,
   the menu drawer, search, filters, the product page, listings, checkout,
   sign-in and the account screens.

   Legacy dialogs are restyled rather than rewritten where their markup is
   sound: MP.showModal() renders `.modal-overlay > .modal > .modal-header`, and
   the rules below turn that into a bottom sheet on phones and a dialog on
   desktop, so all twenty-odd callers change at once.
   ========================================================================== */

/* ---- Sheet / dialog ------------------------------------------------------- */

body.mp2.m2 .modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 800 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(15, 23, 20, .5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0;
    transition: opacity .18s ease;
}
body.mp2.m2 .modal-overlay.open { opacity: 1; }

body.mp2.m2 .modal-overlay .modal {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .12) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translateY(24px);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
body.mp2.m2 .modal-overlay.open .modal { transform: translateY(0); }

/* drag handle (the older stylesheet draws one on the header; one is enough) */
body.mp2.m2 .modal-overlay .modal-header::before { display: none !important; }
body.mp2.m2 .modal-overlay .modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 4px;
    background: #d6d9de;
}

body.mp2.m2 .modal-overlay .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 8px 16px 10px !important;
    margin: 0 0 4px !important;
    border: 0 !important;
    background: #fff !important;
}
body.mp2.m2 .modal-overlay .modal-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #000 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}
body.mp2.m2 .modal-overlay .modal-close {
    width: 32px !important;
    height: 32px !important;
    flex: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f2f4 !important;
    color: #000 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    padding: 0 !important;
}
/* the body: whatever the caller rendered, padded like a sheet */
body.mp2.m2 .modal-overlay .modal > :not(.modal-header) {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

@media (min-width: 700px) {
    body.mp2.m2 .modal-overlay { align-items: center !important; padding: 24px !important; }
    body.mp2.m2 .modal-overlay .modal {
        width: min(520px, 100%) !important;
        max-height: 86vh !important;
        border-radius: 16px !important;
        padding-bottom: 18px !important;
        transform: translateY(8px) scale(.98);
    }
    body.mp2.m2 .modal-overlay.open .modal { transform: none; }
    body.mp2.m2 .modal-overlay .modal::before { display: none; }
    body.mp2.m2 .modal-overlay .modal-header { padding-top: 14px !important; }
    body.mp2.m2 .modal-overlay.m2-wide .modal { width: min(760px, 100%) !important; }
}

/* ---- Form controls (new screens and every legacy form in a sheet) ---------- */

body.mp2.m2 .input-group,
body.m2 .m2-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 0 12px !important;
}
body.mp2.m2 .input-group > label,
body.m2 .m2-field > label,
body.m2 .m2-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #373d47 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}
body.mp2.m2 .input-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.mp2.m2 .input-group select,
body.mp2.m2 .input-group textarea,
body.m2 .m2-input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid #dfe2e6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s;
}
body.mp2.m2 .input-group textarea,
body.m2 textarea.m2-input { height: auto !important; min-height: 88px !important; padding: 10px 12px !important; resize: vertical; }
body.mp2.m2 .input-group input:focus,
body.mp2.m2 .input-group select:focus,
body.mp2.m2 .input-group textarea:focus,
body.m2 .m2-input:focus {
    border-color: var(--m2-brand) !important;
    box-shadow: 0 0 0 3px rgba(14, 107, 80, .14) !important;
}
body.mp2.m2 .input-group input::placeholder,
body.m2 .m2-input::placeholder { color: #8a9099 !important; font-weight: 500 !important; }

/* iOS zooms the page into any field under 16px — keep typed text at 16px on phones */
@media (max-width: 899px) {
    body.mp2.m2 input:not([type=checkbox]):not([type=radio]):not([type=range]),
    body.mp2.m2 select,
    body.mp2.m2 textarea { font-size: 16px !important; }
}

body.mp2.m2 .form-stack { display: flex !important; flex-direction: column !important; gap: 2px !important; }

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

body.mp2.m2 .modal .btn,
body.mp2.m2 .m2-page .btn,
body.m2 .m2-b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
body.mp2.m2 .modal .btn-sm,
body.mp2.m2 .m2-page .btn-sm { min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
body.mp2.m2 .modal .btn-block,
body.mp2.m2 .m2-page .btn-block { display: flex !important; width: 100% !important; }
body.mp2.m2 .modal .btn-primary,
body.mp2.m2 .m2-page .btn-primary,
body.m2 .m2-b.primary {
    background: var(--m2-brand) !important;
    border: 1px solid var(--m2-brand) !important;
    color: #fff !important;
}
body.mp2.m2 .modal .btn-primary:active,
body.m2 .m2-b.primary:active { background: var(--m2-brand-2) !important; }
body.mp2.m2 .modal .btn-outline,
body.mp2.m2 .m2-page .btn-outline,
body.m2 .m2-b.ghost {
    background: #fff !important;
    border: 1px solid #d9dce1 !important;
    color: #000 !important;
}
body.m2 .m2-b.deal { background: var(--m2-deal) !important; border: 1px solid var(--m2-deal) !important; color: #fff !important; }
body.m2 .m2-b.dark-ok { background: #fff !important; border: 1px solid var(--m2-brand) !important; color: var(--m2-brand) !important; }
body.m2 .m2-b[disabled], body.mp2.m2 .modal .btn[disabled] { opacity: .5 !important; cursor: not-allowed; }
body.m2 .m2-b.block { width: 100% !important; display: flex !important; }
body.m2 .m2-b.lg { min-height: 48px !important; font-size: 14px !important; }

body.m2 .m2-linkbtn {
    border: 0;
    background: transparent;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--m2-brand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.m2 .m2-linkbtn.muted { color: #5c636e; }
body.m2 .m2-linkbtn.danger { color: var(--m2-deal); }

/* ---- Toast ---------------------------------------------------------------------- */
/* MP.toast (marketplace-m2.js): white cards that stack above the bottom bar on
   phones and in the bottom-right corner on wide screens. The old #toast pill is
   kept in the page but never shown. */
body.mp2.m2 #toast { display: none !important; }
body.m2 .m2-toasts {
    position: fixed; z-index: 10060;
    left: 12px; right: 12px;
    bottom: calc(var(--m2-bnav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none;
}
body.m2.m2-has-cartbar .m2-toasts,
body.m2.m2-has-actionbar .m2-toasts { bottom: calc(var(--m2-bnav-h) + env(safe-area-inset-bottom, 0px) + 80px); }
body.m2 .m2-toast {
    position: relative; overflow: hidden;
    pointer-events: auto;
    width: min(440px, 100%);
    display: flex; align-items: center; gap: 11px;
    padding: 11px 8px 12px 11px;
    border-radius: 16px;
    background: #fff;
    color: #000;
    box-shadow: 0 18px 40px -14px rgba(16, 24, 40, .38), 0 2px 6px rgba(16, 24, 40, .08), 0 0 0 1px rgba(16, 24, 40, .06);
    animation: m2-toast-in .32s cubic-bezier(.2, .9, .3, 1.15) both;
    touch-action: pan-y;
}
body.m2 .m2-toast.out { animation: m2-toast-out .2s ease forwards; }
@keyframes m2-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes m2-toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
body.m2 .m2-toast .ic {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border-radius: 11px;
    font-size: 17px;
}
body.m2 .m2-toast.success .ic { background: #e3f6ec; color: #0f9158; }
body.m2 .m2-toast.error .ic { background: #fdecec; color: #d92d20; }
body.m2 .m2-toast.warning .ic { background: #fff3dc; color: #c26b00; }
body.m2 .m2-toast.info .ic { background: #e8f0fe; color: #1d4ed8; }
body.m2 .m2-toast .tx { flex: 1; min-width: 0; }
body.m2 .m2-toast .tx b {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; font-weight: 700; line-height: 1.35; color: #000; overflow-wrap: anywhere;
}
body.m2 .m2-toast .tx small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: #4b5260; }
body.m2 .m2-toast .act {
    flex: none;
    height: 34px; padding: 0 13px;
    border: 0; border-radius: 999px;
    background: var(--m2-brand); color: #fff;
    font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
    cursor: pointer;
}
body.m2 .m2-toast .x {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: #6b7280;
    font-size: 12px;
    cursor: pointer;
}
body.m2 .m2-toast .x:hover { background: #f2f3f5; color: #000; }
body.m2 .m2-toast .bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    transform-origin: left center;
    animation-name: m2-toast-timer; animation-timing-function: linear; animation-fill-mode: forwards;
    opacity: .85;
}
@media (hover: hover) and (pointer: fine) { body.m2 .m2-toast:hover .bar { animation-play-state: paused; } }
body.m2 .m2-toast.success .bar { background: #12b76a; }
body.m2 .m2-toast.error .bar { background: #f04438; }
body.m2 .m2-toast.warning .bar { background: #f59e0b; }
body.m2 .m2-toast.info .bar { background: #2e6be6; }
@keyframes m2-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    body.m2 .m2-toast, body.m2 .m2-toast.out { animation-duration: .01ms; }
    /* The timer still runs (in JS); a bar that cannot move would only look stuck. */
    body.m2 .m2-toast .bar { display: none; }
}
@media (max-width: 899px) {
    body.m2.m2-focus .m2-toasts { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
    /* Phones: one compact toast at a time (MP.toast replaces the last one);
       the outgoing one leaves in place instead of pushing the new one up. */
    body.m2 .m2-toasts { left: 10px; right: 10px; }
    body.m2 .m2-toast { gap: 9px; min-height: 48px; padding: 7px 5px 8px 8px; border-radius: 14px; }
    body.m2 .m2-toast.out { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
    body.m2 .m2-toast .ic { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
    body.m2 .m2-toast .tx b { font-size: 13.5px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; }
    body.m2 .m2-toast .tx small { font-size: 11.5px; }
    body.m2 .m2-toast .act { height: 30px; padding: 0 11px; font-size: 12.5px; }
    body.m2 .m2-toast .x { width: 28px; height: 28px; font-size: 11px; }
    body.m2 .m2-toast .bar { height: 2px; }
}
@media (min-width: 900px) {
    body.m2 .m2-toasts { left: auto; right: 24px; bottom: 24px; align-items: flex-end; }
    body.m2 .m2-toast { width: 400px; }
}

/* ---- Shopper activity (real data only; admin can switch each off) ------------ */
/* Product page: "N other people are looking at this right now". */
body.m2 .m2-pp-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 11px 5px 9px; border-radius: 999px; background: #fff1ee; color: #000; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
body.m2 .m2-pp-live[hidden] { display: none; }
body.m2 .m2-pp-live .dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #e0402a; }
body.m2 .m2-pp-live .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #e0402a; opacity: 0; animation: m2-live-ping 1.8s ease-out infinite; }
@keyframes m2-live-ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.m2 .m2-pp-live .dot::after { animation: none; } }
/* Purchase pop-ups carry the product's picture instead of an icon. */
body.m2 .m2-toast .ic.img { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: #f2f3f5; padding: 0; }
body.m2 .m2-toast .ic.img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Rate items of a delivered order (MP.m2RateOrder) -------------------------- */
body.m2 .m2-rate-lead { margin: 0 0 10px; font-size: 13.5px; color: #1f2329; }
body.m2 .m2-rate-list { display: flex; flex-direction: column; gap: 8px; }
body.m2 .m2-rate-row {
    width: 100%; display: flex; align-items: center; gap: 11px;
    padding: 8px 10px 8px 8px; border: 1px solid #e6e8eb; border-radius: 14px;
    background: #fff; color: #000; font: inherit; text-align: left; cursor: pointer;
}
body.m2 .m2-rate-row .im { width: 48px; height: 48px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #f2f3f5; color: #9aa1aa; }
body.m2 .m2-rate-row .im img { width: 100%; height: 100%; object-fit: cover; }
body.m2 .m2-rate-row .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.m2 .m2-rate-row .go { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: #fff3dc; color: #8a4b00; font-size: 12.5px; font-weight: 700; }
@media (hover: hover) { body.m2 .m2-rate-row:hover { border-color: #cfd4da; } }

/* ---- Notifications (/stores/notifications) ------------------------------------ */
/* The header bell shows for signed-in shoppers only; [hidden] has to beat the
   icon buttons' display rules (m2-desk-only is !important on wide screens). */
body.m2 .m2-bell[hidden], body.m2 .m2-notif-badge[hidden] { display: none !important; }
body.m2 .m2-topline .m2-bell .m2-notif-badge { left: auto; right: 2px; top: 3px; min-width: 12px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 10px; }
body.m2 .m2-notifs { max-width: 760px; margin: 0 auto; padding: 16px var(--m2-pad) 28px; box-sizing: border-box; }
body.m2 .m2-notifs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
body.m2 .m2-notifs-head h1 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: #000; }
body.m2 .m2-notifs-head .m2-linkbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
body.m2 .m2-notif-day { margin: 14px 2px 7px; font-size: 12px; font-weight: 700; color: #4b5260; }
body.m2 .m2-notif-day:first-child { margin-top: 2px; }
body.m2 .m2-notif {
    position: relative;
    width: 100%;
    display: flex; align-items: flex-start; gap: 11px;
    margin: 0 0 8px; padding: 12px 12px 12px 11px;
    border: 1px solid #e6e8eb; border-radius: 14px;
    background: #fff; color: #000;
    font: inherit; text-align: left; cursor: pointer;
}
body.m2 .m2-notif.unread { background: var(--m2-brand-soft); border-color: transparent; }
body.m2 .m2-notif.unread .tx { padding-right: 14px; }
body.m2 .m2-notif .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; }
body.m2 .m2-notif .ic.green { background: #e3f6ec; color: #0f7a4a; }
body.m2 .m2-notif .ic.blue { background: #e8f0fe; color: #1d4ed8; }
body.m2 .m2-notif .ic.purple { background: #f1ebfe; color: #6d28d9; }
body.m2 .m2-notif .ic.red { background: #fdecec; color: #c0262d; }
body.m2 .m2-notif .ic.amber { background: #fff3dc; color: #b45309; }
body.m2 .m2-notif .ic.teal { background: #e0f5f3; color: #0f766e; }
body.m2 .m2-notif.unread .ic { background: #fff; }
body.m2 .m2-notif .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.m2 .m2-notif .tx b { font-size: 14px; font-weight: 700; line-height: 1.3; color: #000; }
body.m2 .m2-notif .tx span { font-size: 13px; line-height: 1.45; color: #1f2329; overflow-wrap: anywhere; }
body.m2 .m2-notif .tx small { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #4b5260; }
body.m2 .m2-notif .dot { position: absolute; top: 15px; right: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--m2-brand); }
@media (hover: hover) { body.m2 .m2-notif:not(.unread):hover { border-color: #cfd4da; } }

/* ---- Confirm sheet body -------------------------------------------------------- */

body.m2 .m2-confirm { text-align: center; padding: 4px 0 2px; }
body.m2 .m2-confirm i.lead { font-size: 27.5px; display: block; margin: 4px 0 8px; }
body.m2 .m2-confirm p { font-size: 12px; color: #373d47; margin: 0 0 16px; line-height: 1.45; }
body.m2 .m2-confirm .m2-row { display: flex; gap: 10px; }
body.m2 .m2-confirm .m2-row .m2-b { flex: 1; }

/* ---- Menu drawer ------------------------------------------------------------------ */

body.mp2.m2 .mk-nav-drawer-panel {
    width: min(320px, 86vw) !important;
    background: #fff !important;
    border-radius: 0 18px 18px 0 !important;
    padding: 0 !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .14) !important;
}
body.mp2.m2 .mk-nav-drawer-overlay { background: rgba(15, 23, 20, .45) !important; backdrop-filter: none !important; }
body.mp2.m2 .mk-nav-drawer-head {
    background: #fff !important;
    color: #000 !important;
    padding: 16px 16px 10px !important;
    border-bottom: 1px solid #f0f1f3 !important;
}
body.mp2.m2 .mk-nav-drawer-head .mk-brand-mark { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--m2-brand) !important; color: #fff !important; }
body.mp2.m2 .mk-nav-drawer-head .mk-brand-text { color: #000 !important; font-size: 16.5px !important; font-weight: 800 !important; display: inline !important; }
body.mp2.m2 .mk-nav-drawer-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #f1f2f4 !important; border: 0 !important; color: #000 !important; }
body.mp2.m2 .mk-nav-drawer-body { padding: 8px 8px 20px !important; }
body.mp2.m2 .mk-nav-drawer-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #000 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
}
body.mp2.m2 .mk-nav-drawer-item i { font-size: 15.5px !important; width: 22px !important; color: #373d47 !important; }
body.mp2.m2 .mk-nav-drawer-item:active { background: #f4f5f7 !important; }
body.mp2.m2 .mk-nav-drawer-item.highlight { background: var(--m2-brand-soft) !important; color: var(--m2-brand) !important; margin: 6px 0 !important; }
body.mp2.m2 .mk-nav-drawer-item.highlight i { color: var(--m2-brand) !important; }
body.mp2.m2 .mk-nav-drawer-item.danger, body.mp2.m2 .mk-nav-drawer-item.danger i { color: var(--m2-deal) !important; }
body.mp2.m2 .mk-nav-drawer-divider { height: 1px !important; margin: 8px 12px !important; background: #f0f1f3 !important; }

/* ==========================================================================
   Search overlay
   ========================================================================== */

body.m2 .m2-srch {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: flex;
    flex-direction: column;
    background: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease;
}
body.m2 .m2-srch.open { opacity: 1; transform: none; }
body.m2 .m2-srch-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 8px 4px;
    border-bottom: 1px solid #f0f1f3;
}
body.m2 .m2-srch-back {
    width: 40px; height: 40px; flex: none;
    border: 0; background: transparent; border-radius: 50%;
    font-size: 17.5px; color: #000; display: grid; place-items: center; cursor: pointer;
}
body.m2 .m2-srch-field {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 6px 0 12px;
    border: 1.5px solid #000; border-radius: 999px;
}
body.m2 .m2-srch-field i { color: #5c636e; font-size: 13px; }
body.m2 .m2-srch-field input {
    flex: 1; min-width: 0; height: 100%;
    border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; font-size: 14px !important; color: #000;
}
body.m2 .m2-srch-field input::-webkit-search-cancel-button { display: none; }
body.m2 .m2-srch-clear {
    width: 28px; height: 28px; border: 0; background: #f1f2f4; border-radius: 50%;
    display: none; place-items: center; font-size: 11px; color: #000; cursor: pointer; flex: none;
}
body.m2 .m2-srch-clear.show { display: grid; }
body.m2 .m2-srch-go {
    flex: none; height: 40px; padding: 0 14px;
    border: 0; border-radius: 999px; background: var(--m2-brand); color: #fff;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
}
body.m2 .m2-srch-body { flex: 1; overflow-y: auto; padding: 6px 16px 24px; overscroll-behavior: contain; }
body.m2 .m2-srch-h {
    display: flex; align-items: center; justify-content: space-between;
    margin: 14px 0 8px; font-size: 12.5px; font-weight: 800; color: #000;
}
body.m2 .m2-srch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.m2 .m2-srch-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    padding: 7px 12px; border: 0; border-radius: 999px;
    background: #f3f4f6; color: #000; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.m2 .m2-srch-chip i { color: #5c636e; font-size: 11.5px; }
body.m2 .m2-srch-chip.hot { background: var(--m2-deal-soft); color: var(--m2-deal); }
body.m2 .m2-srch-chip.hot i { color: var(--m2-deal); }
body.m2 .m2-srch-list { display: flex; flex-direction: column; }
body.m2 .m2-srch-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 48px; padding: 6px 0;
    border: 0; border-bottom: 1px solid #f4f5f7; background: transparent;
    text-align: left; cursor: pointer; color: #000;
}
body.m2 .m2-srch-row .ic {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: grid; place-items: center; background: #f3f4f6; color: #373d47; font-size: 14px;
}
body.m2 .m2-srch-row .thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; overflow: hidden; background: #f5f6f7; }
body.m2 .m2-srch-row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.m2 .m2-srch-row .txt { flex: 1; min-width: 0; }
body.m2 .m2-srch-row .t { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-srch-row .t mark { background: none; color: var(--m2-brand); font-weight: 800; }
body.m2 .m2-srch-row .s { display: block; font-size: 11px; color: #5c636e; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-srch-row .p { flex: none; font-size: 12px; font-weight: 800; }
body.m2 .m2-srch-row .p.sale { color: var(--m2-deal); }
body.m2 .m2-srch-row .go { color: #9aa1aa; font-size: 12px; flex: none; }
body.m2 .m2-srch-all {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 14px; min-height: 44px;
    border: 1px solid #dfe2e6; border-radius: 999px; background: #fff;
    font-size: 12.5px; font-weight: 700; color: #000; cursor: pointer;
}
body.m2 .m2-srch-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
@media (min-width: 900px) {
    body.m2 .m2-srch { inset: 0; background: rgba(15, 23, 20, .4); align-items: center; padding-top: 72px; }
    body.m2 .m2-srch-panel { width: min(720px, calc(100% - 40px)); max-height: calc(100vh - 110px); background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
    body.m2 .m2-srch-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    body.m2 .m2-srch-panel { display: flex; flex-direction: column; height: 100%; }
}

/* ==========================================================================
   Listing pages (all products, category, deals, search results)
   ========================================================================== */

body.m2 .m2-lhead {
    background: #fff;
    padding: 12px var(--m2-pad) 10px;
}
body.m2 .m2-lhead h1 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; color: #000; display: flex; align-items: center; gap: 8px; }
body.m2 .m2-lhead p { margin: 2px 0 0; font-size: 11.5px; color: #5c636e; }
body.m2 .m2-lhead.deal { background: linear-gradient(135deg, #e1251b, #ff6a3d); color: #fff; padding: 16px var(--m2-pad) 14px; }
body.m2 .m2-lhead.deal h1, body.m2 .m2-lhead.deal p { color: #fff; }
body.m2 .m2-lhead.deal p { opacity: .9; }
body.m2 .m2-lhead .m2-lhead-ic {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: var(--m2-brand-soft); color: var(--m2-brand); font-size: 14px;
}
body.m2 .m2-lhead.deal .m2-lhead-ic { background: rgba(255, 255, 255, .2); color: #fff; }

body.m2 .m2-ltools {
    position: sticky;
    top: 96px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--m2-pad);
    background: #fff;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
body.m2 .m2-ltools::-webkit-scrollbar { display: none; }
body.m2 .m2-tool {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
body.m2 .m2-tool i { font-size: 12px; }
body.m2 .m2-tool.on { border-color: var(--m2-brand); background: var(--m2-brand-soft); color: var(--m2-brand); }
body.m2 .m2-tool.deal.on { border-color: var(--m2-deal); background: var(--m2-deal-soft); color: var(--m2-deal); }
body.m2 .m2-tool .n {
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: var(--m2-brand); color: #fff; font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
body.m2 .m2-tool-sep { width: 1px; height: 20px; background: #e6e8eb; flex: none; }

body.m2 .m2-lactive { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--m2-pad) 8px; }
body.m2 .m2-lactive span {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 6px 4px 10px; border-radius: 999px; background: #eef0f2; font-size: 11.5px; font-weight: 600; color: #000;
}
body.m2 .m2-lactive button { border: 0; background: transparent; padding: 0 2px; font-size: 12px; color: #5c636e; cursor: pointer; }
body.m2 .m2-lcount { padding: 0 12px 6px; font-size: 11.5px; color: #5c636e; }
body.m2 .m2-lstores { background: #fff; padding: 12px var(--m2-pad); margin-bottom: 8px; }
body.m2 .m2-lstore {
    display: flex; align-items: center; gap: 8px; flex: none;
    padding: 6px 12px 6px 6px; border: 1px solid #eceef1; border-radius: 999px; background: #fff; cursor: pointer;
    font-size: 12px; font-weight: 700; color: #000; white-space: nowrap;
}
body.m2 .m2-lstore img, body.m2 .m2-lstore .m2-letter { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 11.5px; }

/* Sort sheet options */
body.m2 .m2-opt {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 48px; padding: 0 2px;
    border: 0; border-bottom: 1px solid #f2f3f5; background: transparent;
    font-size: 13px; font-weight: 600; color: #000; cursor: pointer; text-align: left;
}
body.m2 .m2-opt i { color: var(--m2-brand); font-size: 15.5px; visibility: hidden; }
body.m2 .m2-opt.on { color: var(--m2-brand); font-weight: 800; }
body.m2 .m2-opt.on i { visibility: visible; }

/* Filter sheet */
body.m2 .m2-fsec { padding: 4px 0 14px; border-bottom: 1px solid #f2f3f5; margin-bottom: 12px; }
body.m2 .m2-fsec:last-of-type { border-bottom: 0; }
body.m2 .m2-fsec h4 { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: #000; }
body.m2 .m2-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
body.m2 .m2-fchip {
    padding: 7px 12px; border: 1px solid #e3e6ea; border-radius: 999px; background: #fff;
    font-size: 12px; font-weight: 600; color: #000; cursor: pointer;
}
body.m2 .m2-fchip.on { border-color: var(--m2-brand); background: var(--m2-brand-soft); color: var(--m2-brand); font-weight: 700; }
body.m2 .m2-frange { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
body.m2 .m2-frange span { color: #8a9099; font-size: 12px; }
body.m2 .m2-ftoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; font-size: 12.5px; font-weight: 600; color: #000; cursor: pointer;
}
body.m2 .m2-ftoggle small { display: block; font-size: 11px; color: #5c636e; font-weight: 500; }
body.m2 .m2-switch { position: relative; width: 42px; height: 24px; flex: none; }
body.m2 .m2-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
body.m2 .m2-switch span {
    position: absolute; inset: 0; border-radius: 999px; background: #d6d9de; transition: background .15s; pointer-events: none;
}
body.m2 .m2-switch span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s;
}
body.m2 .m2-switch input:checked + span { background: var(--m2-brand); }
body.m2 .m2-switch input:checked + span::after { transform: translateX(18px); }
body.m2 .m2-sheetbar {
    position: sticky; bottom: -16px; z-index: 5;
    display: flex; gap: 10px;
    margin: 6px -16px -16px !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #f0f1f3;
}
body.m2 .m2-sheetbar .m2-b { flex: 1; }
@media (min-width: 700px) { body.m2 .m2-sheetbar { bottom: -18px; margin-bottom: -18px !important; padding-bottom: 14px; } }

/* ==========================================================================
   Product page
   ========================================================================== */

body.m2 .m2-pp { padding-bottom: 8px; }
body.m2 .m2-pp-gal {
    position: relative;
    background: #f5f6f7;
    aspect-ratio: 1;
    overflow: hidden;
}
body.m2 .m2-pp-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
body.m2 .m2-pp-track::-webkit-scrollbar { display: none; }
body.m2 .m2-pp-track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    display: block;
    cursor: zoom-in;
}
body.m2 .m2-pp-count {
    position: absolute; right: 12px; bottom: 12px;
    padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
    font-size: 11px; font-weight: 700;
}
body.m2 .m2-pp-fab {
    position: absolute; top: 12px;
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .92); color: #000; display: grid; place-items: center;
    font-size: 14.5px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
body.m2 .m2-pp-fab.back { left: 12px; }
body.m2 .m2-pp-fab.share { right: 56px; }
body.m2 .m2-pp-fab.wish { right: 12px; }
body.m2 .m2-pp-fab.wish.wished { color: var(--m2-deal); }
body.m2 .m2-pp-thumbs { display: flex; gap: 8px; padding: 10px var(--m2-pad) 0; background: #fff; overflow-x: auto; scrollbar-width: none; }
body.m2 .m2-pp-thumbs::-webkit-scrollbar { display: none; }
body.m2 .m2-pp-thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #f5f6f7; cursor: pointer; padding: 0; }
body.m2 .m2-pp-thumb.active { border-color: var(--m2-brand); }
body.m2 .m2-pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.m2 .m2-pp-price { background: #fff; padding: 12px var(--m2-pad) 4px; }
body.m2 .m2-pp-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
body.m2 .m2-pp-now { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: #000; }
body.m2 .m2-pp-now.sale { color: var(--m2-deal); }
body.m2 .m2-pp-was { font-size: 12px; color: #6b7280; text-decoration: line-through; }
body.m2 .m2-pp-bulk { margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #7a4b00; background: #fff7e6; display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; border-radius: 6px; }
body.m2 .m2-pp-title { background: #fff; padding: 6px var(--m2-pad) 10px; }
body.m2 .m2-pp-title h1 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #000; }
body.m2 .m2-pp-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 11.5px; color: #5c636e; }
body.m2 .m2-pp-sub .star { color: var(--m2-star); }
body.m2 .m2-pp-sub b { color: #000; font-weight: 700; }
body.m2 .m2-pp-sub button { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
body.m2 .m2-pp-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: #b3b9c1; }
body.m2 .m2-pp-stock { font-weight: 700; }
body.m2 .m2-pp-stock.in { color: #047857; }
body.m2 .m2-pp-stock.low { color: #b45309; }
body.m2 .m2-pp-stock.out { color: var(--m2-deal); }

body.m2 .m2-pp-card { background: #fff; padding: 12px var(--m2-pad); margin-top: 8px; }
body.m2 .m2-pp-card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #000; display: flex; justify-content: space-between; align-items: center; }
body.m2 .m2-pp-var { margin-bottom: 12px; }
body.m2 .m2-pp-var:last-child { margin-bottom: 0; }
body.m2 .m2-pp-var-l { font-size: 12px; color: #5c636e; margin-bottom: 7px; }
body.m2 .m2-pp-var-l b { color: #000; font-weight: 700; }
body.m2 .m2-pp-qty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
body.m2 .m2-pp-qty span { font-size: 12px; color: #5c636e; }

body.m2 .m2-pp-store { display: flex; align-items: center; gap: 12px; }
body.m2 .m2-pp-store-logo { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17.5px; }
body.m2 .m2-pp-store-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.m2 .m2-pp-store .txt { flex: 1; min-width: 0; }
body.m2 .m2-pp-store b { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; }
body.m2 .m2-pp-store small { font-size: 11px; color: #5c636e; }

body.m2 .m2-pp-desc { font-size: 12px; line-height: 1.6; color: #1f2329; white-space: pre-line; }
body.m2 .m2-pp-desc.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body.m2 .m2-pp-spec { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin-top: 12px; font-size: 12px; }
body.m2 .m2-pp-spec dt { color: #5c636e; }
body.m2 .m2-pp-spec dd { margin: 0; color: #000; font-weight: 600; }

body.m2 .m2-rv-sum { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
body.m2 .m2-rv-sum b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
body.m2 .m2-rv-sum .stars { color: var(--m2-star); font-size: 12px; letter-spacing: 1px; }
body.m2 .m2-rv-sum small { display: block; font-size: 11px; color: #5c636e; }
/* legacy review list items (loadProductReviewPreview fills #mp-product-review-list) */
body.mp2.m2 .m2-pp #mp-product-review-list { display: flex; flex-direction: column; gap: 10px; }
body.mp2.m2 .m2-pp #mp-product-review-list > * { border: 0 !important; background: #f7f8f9 !important; border-radius: 10px !important; padding: 10px 12px !important; box-shadow: none !important; font-size: 12px !important; }

/* sticky action bar */
body.m2 .m2-pp-bar {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--m2-bnav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 395;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: #fff; border-top: 1px solid #eceef1;
    box-shadow: 0 -6px 16px rgba(16, 24, 40, .06);
}
body.m2 .m2-pp-bar .m2-b { flex: 1; min-height: 42px !important; font-size: 13px !important; padding: 0 10px !important; }
body.m2 .m2-pp-bar .m2-b.cart { background: #fff4e5 !important; border: 1px solid #fde1b8 !important; color: #b45309 !important; }
@media (min-width: 900px) {
    body.m2 .m2-pp-bar { display: none; }
    body.m2 .m2-pp-gal { border-radius: 14px; }
    body.m2 .m2-pp-thumbs { background: transparent; padding-left: 0; }
    body.m2 .m2-pp-head { background: #fff; border-radius: 14px; padding: 16px; }
    body.m2 .m2-pp-head .m2-pp-price, body.m2 .m2-pp-head .m2-pp-title { padding-left: 0; padding-right: 0; }
    body.m2 .m2-pp-head .m2-pp-now { font-size: 24px; }
    body.m2 .m2-pp-head .m2-pp-title h1 { font-size: 15.5px; }
    body.m2 .m2-pp-desk-actions { display: flex !important; gap: 10px; margin-top: 16px; }
    body.m2 .m2-pp-card { border-radius: 14px; }
}
body.m2 .m2-pp-desk-actions { display: none; }
body.m2 .m2-pp-desk-actions .m2-b { flex: 1; }

/* ==========================================================================
   Checkout
   ========================================================================== */

body.m2.m2-focus .m2-bnav,
body.mp2.m2.m2-focus #mp-top-cats.m2-tabs,
body.m2.m2-focus .mk-global-footer,
body.m2.m2-focus #mp-recent-section { display: none !important; }
@media (max-width: 899px) {
    body.mp2.m2.m2-focus { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important; }
}

body.m2 .m2-co { max-width: 760px; margin: 0 auto; padding-bottom: 20px; }
body.m2 .m2-co-top {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 8px 4px; background: #fff; margin-bottom: 8px;
}
body.m2 .m2-co-top h1 { margin: 0; font-size: 15.5px; font-weight: 800; flex: 1; }
body.m2 .m2-co-top .secure { font-size: 11px; color: #047857; font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }

body.m2 .m2-co-card { background: #fff; padding: 14px var(--m2-pad); margin-bottom: 8px; scroll-margin-top: 64px; }
@media (min-width: 760px) { body.m2 .m2-co-card, body.m2 .m2-co-top { border-radius: 14px; } }
body.m2 .m2-co-h {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 0 12px; font-size: 13px; font-weight: 800; color: #000;
}
body.m2 .m2-co-h .step {
    width: 22px; height: 22px; border-radius: 50%; background: var(--m2-brand); color: #fff;
    display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; margin-right: 8px;
}
body.m2 .m2-co-h .step.done { background: #047857; }
body.m2 .m2-co-h > span { display: inline-flex; align-items: center; }

body.m2 .m2-co-signin {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px; background: var(--m2-brand-soft); font-size: 12px; color: #0a3d2e;
}
body.m2 .m2-co-signin i { font-size: 15.5px; color: var(--m2-brand); }
body.m2 .m2-co-signin span { flex: 1; }
@media (min-width: 760px) { body.m2 .m2-co-signin { border-radius: 12px; } }

body.m2 .m2-co-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.m2 .m2-co-2 .input-group { margin-bottom: 10px !important; }

/* saved addresses as tappable cards */
body.m2 .m2-addr-pick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding-bottom: 2px; }
body.m2 .m2-addr-pick::-webkit-scrollbar { display: none; }
body.m2 .m2-addr-opt {
    flex: none; width: 200px; text-align: left;
    padding: 10px 12px; border: 1.5px solid #e3e6ea; border-radius: 12px; background: #fff; cursor: pointer;
}
body.m2 .m2-addr-opt b { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #000; }
body.m2 .m2-addr-opt small { display: block; margin-top: 3px; font-size: 11px; color: #5c636e; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.m2 .m2-addr-opt.on { border-color: var(--m2-brand); background: var(--m2-brand-soft); }
body.m2 .m2-addr-opt.new { display: grid; place-items: center; text-align: center; width: 120px; color: var(--m2-brand); font-size: 12px; font-weight: 700; }
body.m2 .m2-addr-opt.new i { font-size: 16.5px; display: block; margin-bottom: 2px; }

body.m2 .m2-loc-row { display: flex; gap: 8px; }
body.m2 .m2-loc-row .m2-input { flex: 1; }
body.m2 .m2-loc-actions { display: flex; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
body.m2 .m2-loc-actions .m2-b { min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
body.mp2.m2 .m2-co #mp2-co-location-results {
    border: 1px solid #e3e6ea !important; border-radius: 12px !important; overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .1) !important; background: #fff !important;
}
body.mp2.m2 .m2-co #mp2-co-location-results button { font-size: 12px !important; }
body.mp2.m2 .m2-co .mp-selected-location {
    display: flex !important; align-items: flex-start !important; gap: 8px !important;
    margin: 10px 0 0 !important; padding: 10px 12px !important;
    border-radius: 10px !important; background: #f6f7f8 !important; border: 0 !important;
    font-size: 12px !important; color: #373d47 !important;
}
body.mp2.m2 .m2-co .mp-selected-location.is-set { background: var(--m2-brand-soft) !important; color: #0a3d2e !important; }
body.mp2.m2 .m2-co .mp-selected-location i { color: var(--m2-brand) !important; font-size: 14px !important; }
body.mp2.m2 .m2-co .mp-selected-location small { display: block !important; font-size: 11px !important; color: #5c636e !important; margin-top: 2px !important; }
body.m2 .m2-co-map { margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid #eceef1; }
body.mp2.m2 .m2-co #mp2-checkout-map { height: 170px !important; min-height: 0 !important; border-radius: 0 !important; }
body.m2 .m2-co-map small { display: block; padding: 6px 10px; font-size: 11px; color: #5c636e; background: #fafafa; }
body.m2 .m2-co-more summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--m2-brand); list-style: none; padding: 4px 0; }
body.m2 .m2-co-more summary::-webkit-details-marker { display: none; }
body.m2 .m2-co-more[open] summary { margin-bottom: 8px; }

/* store groups */
body.m2 .m2-co-store { padding: 10px 0; border-top: 1px solid #f2f3f5; }
body.m2 .m2-co-store:first-of-type { border-top: 0; padding-top: 0; }
body.m2 .m2-co-store-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
body.m2 .m2-co-store-h .n { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #5c636e; }

/* payment methods — the legacy tiles, as radio rows */
body.mp2.m2 .m2-co #mp2-pay-methods { display: flex !important; flex-direction: column !important; gap: 8px !important; }
body.mp2.m2 .m2-co .mp2-pay-btn {
    display: flex !important; align-items: center !important; gap: 12px !important;
    width: 100% !important; min-height: 56px !important; padding: 10px 12px !important;
    border: 1.5px solid #e3e6ea !important; border-radius: 12px !important; background: #fff !important;
    text-align: left !important; box-shadow: none !important; position: relative !important;
}
body.mp2.m2 .m2-co .mp2-pay-btn.active { border-color: var(--m2-brand) !important; background: var(--m2-brand-soft) !important; }
body.mp2.m2 .m2-co .mp2-pay-btn > i:first-child { font-size: 18.5px !important; width: 26px !important; text-align: center !important; }
body.mp2.m2 .m2-co .mp2-pay-img { width: 34px !important; height: 34px !important; object-fit: contain !important; border-radius: 6px !important; }
body.mp2.m2 .m2-co .mp2-pay-label { font-size: 12.5px !important; font-weight: 700 !important; color: #000 !important; }
body.mp2.m2 .m2-co .mp2-pay-desc { font-size: 11px !important; color: #5c636e !important; margin-top: 1px !important; }
body.mp2.m2 .m2-co .mp2-pay-check {
    margin-left: auto !important; font-size: 16.5px !important; color: #d0d4d9 !important; position: static !important; opacity: 1 !important;
}
body.mp2.m2 .m2-co .mp2-pay-btn.active .mp2-pay-check { color: var(--m2-brand) !important; }
body.mp2.m2 .m2-co .mp2-pay-note {
    display: flex !important; gap: 8px !important; padding: 10px 12px !important; border-radius: 10px !important;
    background: #fff7e6 !important; color: #7a4b00 !important; font-size: 11.5px !important; border: 0 !important; line-height: 1.45 !important;
}
body.mp2.m2 .m2-co .mp2-pay-note-btn { display: block !important; margin-top: 6px !important; border: 0 !important; background: none !important; padding: 0 !important; color: var(--m2-brand) !important; font-weight: 700 !important; font-size: 11.5px !important; text-decoration: underline !important; }

/* coupon */
body.m2 .m2-co-coupon { display: flex; gap: 8px; }
body.m2 .m2-co-coupon .m2-input { flex: 1; text-transform: uppercase; }
body.m2 .m2-co-coupon .m2-input::placeholder { text-transform: none; }
body.mp2.m2 .m2-co #mp2-co-coupon-note { margin-top: 6px !important; font-size: 11.5px !important; min-height: 0 !important; }

/* summary */
body.m2 .m2-co-sum > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 4px 0; font-size: 12px; color: #373d47;
}
body.mp2.m2 .m2-co .mp-tax-lines > div {
    display: flex !important; justify-content: space-between !important; gap: 12px !important;
    padding: 4px 0 !important; font-size: 12px !important; color: #373d47 !important;
}
body.m2 .m2-co-sum > div span:last-child { color: #000; font-weight: 600; }
body.mp2.m2 .m2-co .mp-tax-lines > div { font-size: 11px !important; color: #5c636e !important; padding: 2px 0 2px 10px !important; }
body.m2 .m2-co-sum .grand { margin-top: 6px; padding-top: 10px; border-top: 1px dashed #dfe2e6; font-size: 14px; color: #000; font-weight: 800; }
body.m2 .m2-co-sum .grand span:last-child { font-size: 16.5px; font-weight: 800; }
body.m2 .m2-co-sum .disc span:last-child { color: var(--m2-deal); }
body.m2 .m2-co-notes { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
body.m2 .m2-co-notes div { display: flex; gap: 6px; font-size: 11px; color: #5c636e; line-height: 1.4; }

/* sticky place-order bar */
body.m2 .m2-co-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 395;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #eceef1; box-shadow: 0 -6px 16px rgba(16, 24, 40, .06);
}
body.m2 .m2-co-bar .sum { flex: 1; min-width: 0; line-height: 1.2; }
body.m2 .m2-co-bar .sum small { display: block; font-size: 11px; color: #5c636e; }
body.m2 .m2-co-bar .sum b { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
body.mp2.m2 .m2-co-bar #mp2-place-order {
    min-height: 46px !important; padding: 0 24px !important; border-radius: 999px !important; border: 0 !important;
    background: var(--m2-brand) !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(14, 107, 80, .25) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
body.mp2.m2 .m2-co-bar #mp2-place-order[disabled] { opacity: .7 !important; }
@media (min-width: 900px) {
    body.m2 .m2-co-bar { left: 50%; right: auto; width: min(760px, 100% - 40px); transform: translateX(-50%); bottom: 16px; border-radius: 16px; border: 1px solid #eceef1; }
}

/* ==========================================================================
   Sign in (OTP)
   ========================================================================== */

body.m2 .m2-auth { padding: 2px 0 4px; }
body.m2 .m2-auth-lead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
body.m2 .m2-auth-lead .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--m2-brand-soft); color: var(--m2-brand); display: grid; place-items: center; font-size: 17.5px; flex: none; }
body.m2 .m2-auth-lead b { display: block; font-size: 14px; font-weight: 800; color: #000; }
body.m2 .m2-auth-lead small { display: block; font-size: 12px; color: #5c636e; margin-top: 2px; line-height: 1.4; }
body.m2 .m2-phone {
    display: flex; align-items: center; height: 48px;
    border: 1px solid #dfe2e6; border-radius: 12px; overflow: hidden; background: #fff;
}
body.m2 .m2-phone:focus-within { border-color: var(--m2-brand); box-shadow: 0 0 0 3px rgba(14, 107, 80, .14); }
body.m2 .m2-phone .cc { padding: 0 12px; height: 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #000; background: #f6f7f8; border-right: 1px solid #eceef1; }
body.m2 .m2-phone input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 12px !important; font-size: 16px !important; letter-spacing: .02em; background: transparent !important; }
body.m2 .m2-otp {
    display: block; width: 100%; height: 54px;
    border: 1px solid #dfe2e6 !important; border-radius: 12px !important;
    text-align: center; font-size: 22px !important; font-weight: 800 !important; letter-spacing: .55em !important;
    padding: 0 0 0 .55em !important; font-variant-numeric: tabular-nums; outline: none !important; background: #fff !important;
}
body.m2 .m2-otp:focus { border-color: var(--m2-brand) !important; box-shadow: 0 0 0 3px rgba(14, 107, 80, .14) !important; }
body.m2 .m2-auth-meta { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 14px; font-size: 12px; color: #5c636e; }
body.m2 .m2-auth-foot { margin-top: 12px; text-align: center; font-size: 11px; color: #6b7280; line-height: 1.45; }

/* ==========================================================================
   Account screens
   ========================================================================== */

body.m2 .m2-acct-out { max-width: 520px; margin: 0 auto; }
body.m2 .m2-acct-out .m2-sec { padding: 16px; }
body.m2 .m2-acct-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
body.m2 .m2-acct-perks div { text-align: center; font-size: 11px; color: #373d47; font-weight: 600; }
body.m2 .m2-acct-perks i { display: block; font-size: 17.5px; color: var(--m2-brand); margin-bottom: 4px; }

body.m2 .m2-orders { display: flex; flex-direction: column; gap: 10px; }
body.m2 .m2-order { border: 1px solid #eceef1; border-radius: 12px; padding: 12px; background: #fff; }
body.m2 .m2-order-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
body.m2 .m2-order-h .st { margin-left: auto; }
body.m2 .m2-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 800; background: #eef0f2; color: #373d47; white-space: nowrap;
}
body.m2 .m2-pill.ok { background: #e6f6ee; color: #047857; }
body.m2 .m2-pill.warn { background: #fff4e0; color: #b45309; }
body.m2 .m2-pill.bad { background: #fdecec; color: #b91c1c; }
body.m2 .m2-pill.info { background: #e8f0fe; color: #1d4ed8; }
body.m2 .m2-order-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.m2 .m2-order-b .ref { font-size: 11px; color: #5c636e; }
body.m2 .m2-order-b .ref b { display: block; font-size: 12px; color: #000; letter-spacing: .02em; }
body.m2 .m2-order-b .amt { font-size: 14px; font-weight: 800; }
body.m2 .m2-order-f { display: flex; gap: 8px; margin-top: 10px; }
body.m2 .m2-order-f .m2-b { flex: 1; min-height: 36px !important; font-size: 12px !important; }

/* status stepper (tracking + order details) */
body.m2 .m2-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0 6px; position: relative; }
body.m2 .m2-steps div { position: relative; text-align: center; font-size: 10.5px; color: #8a9099; font-weight: 600; }
body.m2 .m2-steps div::before {
    content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 6px;
    background: #fff; border: 2px solid #d6d9de; position: relative; z-index: 1;
}
body.m2 .m2-steps div::after { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #e3e6ea; }
body.m2 .m2-steps div:first-child::after { display: none; }
body.m2 .m2-steps div.done { color: #000; }
body.m2 .m2-steps div.done::before { background: var(--m2-brand); border-color: var(--m2-brand); }
body.m2 .m2-steps div.done::after { background: var(--m2-brand); }
body.m2 .m2-steps div.now { color: var(--m2-brand); font-weight: 800; }
body.m2 .m2-steps div.now::before { box-shadow: 0 0 0 4px rgba(14, 107, 80, .18); }
body.m2 .m2-steps.cancelled div.done::before { background: #b91c1c; border-color: #b91c1c; }

body.m2 .m2-od-lines { display: flex; flex-direction: column; }
body.m2 .m2-od-line { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #f2f3f5; }
body.m2 .m2-od-line:first-child { border-top: 0; }
body.m2 .m2-od-line .im { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #f5f6f7; flex: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: #b3b9c1; }
body.m2 .m2-od-line .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.m2 .m2-od-line .txt { flex: 1; min-width: 0; font-size: 12px; }
body.m2 .m2-od-line .txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-od-line .txt small { color: #5c636e; font-size: 11px; }
body.m2 .m2-od-line .amt { font-size: 12px; font-weight: 800; }
body.m2 .m2-kvs > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; color: #373d47; }
body.m2 .m2-kvs > div b { color: #000; font-weight: 600; text-align: right; }
body.m2 .m2-kvs > div.grand { border-top: 1px dashed #dfe2e6; margin-top: 4px; padding-top: 8px; font-size: 13px; font-weight: 800; color: #000; }
body.m2 .m2-kvs > div.grand b { font-weight: 800; }
body.m2 .m2-od-sec { margin-bottom: 16px; }
body.m2 .m2-od-sec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #000; text-transform: uppercase; letter-spacing: .04em; }
body.m2 .m2-od-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px; margin-bottom: 14px; border-radius: 12px; background: #f6f7f8; }
body.m2 .m2-od-head small { display: block; font-size: 11px; color: #5c636e; }
body.m2 .m2-od-head b { font-size: 14px; letter-spacing: .02em; }
body.m2 .m2-od-head .amt { font-size: 16.5px; font-weight: 800; }

/* addresses */
body.m2 .m2-addrs { display: flex; flex-direction: column; gap: 10px; }
body.m2 .m2-addr { border: 1px solid #eceef1; border-radius: 12px; padding: 12px; }
body.m2 .m2-addr.def { border-color: var(--m2-brand); background: #fbfefd; }
body.m2 .m2-addr-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; }
body.m2 .m2-addr-h i { color: var(--m2-brand); }
body.m2 .m2-addr p { margin: 4px 0 0; font-size: 12px; color: #373d47; line-height: 1.45; }
body.m2 .m2-addr small { display: block; margin-top: 2px; font-size: 11px; color: #5c636e; }
body.m2 .m2-addr-f { display: flex; gap: 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #f2f3f5; }

body.m2 .m2-empty-cta { text-align: center; padding: 28px 12px 20px; }
body.m2 .m2-empty-cta i { font-size: 33px; color: #b3b9c1; display: block; margin-bottom: 8px; }
body.m2 .m2-empty-cta b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
body.m2 .m2-empty-cta p { margin: 0 0 14px; font-size: 12px; color: #5c636e; }

/* placed-order confirmation */
body.m2 .m2-done { text-align: center; padding: 26px 16px 18px; background: #fff; margin-bottom: 8px; }
body.m2 .m2-done .ok { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: #e6f6ee; color: #047857; font-size: 27.5px; }
body.m2 .m2-done h1 { margin: 0; font-size: 17.5px; font-weight: 800; }
body.m2 .m2-done p { margin: 6px 0 0; font-size: 12px; color: #5c636e; }
body.m2 .m2-done .ref { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: #f3f4f6; font-size: 12px; font-weight: 800; letter-spacing: .04em; }

/* verified info / policy sheets etc. keep their markup; just calmer type */
body.mp2.m2 .modal .mk-trust-hero,
body.mp2.m2 .modal .mk-auth-hero,
body.mp2.m2 .modal .mk-checkout-identity-hero { border-radius: 12px !important; background: #f6f7f8 !important; border: 0 !important; box-shadow: none !important; }
body.mp2.m2 .modal .mk-trust-list > div { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; font-size: 12px !important; }
body.mp2.m2 .modal strong, body.mp2.m2 .modal b { color: #000; }

/* ==========================================================================
   Additions for the rebuilt flows
   ========================================================================== */

/* room for the product page's action bar above the bottom nav */
@media (max-width: 899px) {
    body.mp2.m2.m2-has-actionbar { padding-bottom: calc(var(--m2-bnav-h) + env(safe-area-inset-bottom, 0px) + 70px) !important; }
}

/* checkout is a focused page on phones: its own top bar, no store header */
@media (max-width: 899px) {
    body.m2.m2-focus .m2-topline,
    body.m2.m2-focus .m2-header { display: none !important; }
    body.m2 .m2-co-top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid #f0f1f3; }
}
body.m2 .m2-co-h .step i { font-size: 12px; line-height: 1; }
body.m2 .m2-co-sum > .mp-tax-lines { display: block; padding: 0; }
body.m2 .m2-co-sum .muted { color: #6b7280 !important; font-weight: 500 !important; }

/* a field that needs attention */
body.m2 .m2-invalid,
body.mp2.m2 .input-group input.m2-invalid,
body.m2 .m2-phone.m2-invalid { border-color: var(--m2-deal) !important; box-shadow: 0 0 0 3px rgba(225, 37, 27, .12) !important; }
@keyframes m2-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
body.m2 .m2-shake { animation: m2-shake .4s ease; }
@media (prefers-reduced-motion: reduce) { body.m2 .m2-shake { animation: none; } }

/* order and payment states */
body.m2 .m2-order-h .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.m2 .m2-order-h > i { color: #5c636e; }
body.m2 .m2-pay { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; color: #5c636e; }
body.m2 .m2-pay.ok { color: #047857; }
body.m2 .m2-pay.warn { color: #b45309; }
body.m2 .m2-pay.bad { color: #b91c1c; }
body.m2 .m2-pay.info { color: #1d4ed8; }
body.m2 .m2-od-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; background: #f6f7f8; color: #373d47; }
body.m2 .m2-od-note.bad { background: #fdecec; color: #991b1b; }
body.m2 .m2-order .m2-steps { margin: 12px 0 2px; }

/* address sheet: map pin status */
body.m2 .m2-a-pin { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: #fff7e6; color: #7a4b00; font-size: 11.5px; font-weight: 600; }
body.m2 .m2-a-pin.on { background: var(--m2-brand-soft); color: #0a3d2e; }
body.m2 .m2-a-pin i { font-size: 14px; }

/* read-only value with an action (profile phone) */
body.m2 .m2-ro { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: #f6f7f8; font-size: 13px; font-weight: 600; color: #000; }

/* menu drawer: who you are, or a sign-in prompt */
body.m2 .m2-drawer-me {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin: 0 0 8px; padding: 12px; border: 0; border-radius: 14px;
    background: #f6f7f8; text-align: left; cursor: pointer; color: #000;
}
body.m2 .m2-drawer-me .m2-avatar { width: 42px; height: 42px; font-size: 15.5px; flex: none; }
body.m2 .m2-drawer-me .txt { flex: 1; min-width: 0; }
body.m2 .m2-drawer-me .txt b { display: block; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-drawer-me .txt small { font-size: 11px; color: #5c636e; }
body.m2 .m2-drawer-me > .bi-chevron-right { color: #9aa1aa; font-size: 11.5px; }
body.m2 .m2-drawer-me.out { display: block; cursor: default; background: var(--m2-brand-soft); }
body.m2 .m2-drawer-me.out b { display: block; font-size: 14px; font-weight: 800; }
body.m2 .m2-drawer-me.out small { display: block; margin: 2px 0 10px; font-size: 11.5px; color: #0a3d2e; }

/* the map picker (its own overlay, above any sheet) */
body.mp2.m2 .mp-map-modal-overlay { background: rgba(15, 23, 20, .5) !important; }
body.mp2.m2 .mp-map-modal-inner { border-radius: 18px 18px 0 0 !important; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important; background: #fff !important; }
body.mp2.m2 .mp-map-modal-inner .modal-title { font-size: 14px !important; font-weight: 800 !important; color: #000 !important; }
body.mp2.m2 .mp-map-modal-inner .modal-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #f1f2f4 !important; border: 0 !important; color: #000 !important; }
body.mp2.m2 .mp-map-modal-inner .btn { min-height: 44px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important; }
body.mp2.m2 .mp-map-modal-inner .btn-primary { background: var(--m2-brand) !important; border: 1px solid var(--m2-brand) !important; color: #fff !important; }
body.mp2.m2 .mp-map-modal-inner .btn-outline { background: #fff !important; border: 1px solid #d9dce1 !important; color: #000 !important; }
@media (min-width: 700px) { body.mp2.m2 .mp-map-modal-overlay { align-items: center !important; } body.mp2.m2 .mp-map-modal-inner { border-radius: 16px !important; } }

/* "Recently viewed" under a product (it sits outside the page wrapper) */
body.m2 .m2-recent { max-width: var(--m2-maxw); margin: 0 auto 8px; }
@media (min-width: 900px) { body.m2 .m2-recent { width: calc(100% - 40px); border-radius: 14px; } }

/* ---- Currency picker: a plain list, the chosen one ticked ------------------ */
body.mp2.m2 .mk-currency-search {
    display: flex !important; align-items: center !important; gap: 8px !important;
    height: 42px !important; padding: 0 14px !important; margin: 0 0 8px !important;
    border: 0 !important; border-radius: 999px !important; background: #f3f4f6 !important; box-shadow: none !important;
}
body.mp2.m2 .mk-currency-search i { color: #5c636e !important; }
body.mp2.m2 .mk-currency-search input { flex: 1 !important; height: 100% !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; }
body.mp2.m2 .mk-currency-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 0 12px !important; }
body.mp2.m2 .mk-currency-option {
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important;
    width: 100% !important; min-height: 48px !important; padding: 8px 4px !important;
    border: 0 !important; border-bottom: 1px solid #f2f3f5 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; text-align: left !important; transform: none !important;
}
body.mp2.m2 .mk-currency-option strong { min-width: 74px !important; font-size: 13px !important; font-weight: 700 !important; color: #000 !important; }
body.mp2.m2 .mk-currency-option span { flex: 1 !important; font-size: 12px !important; color: #5c636e !important; }
body.mp2.m2 .mk-currency-option.active strong { color: var(--m2-brand) !important; }
body.mp2.m2 .mk-currency-option.active::after {
    content: ""; flex: none; width: 6px; height: 11px; margin: 0 8px 3px auto;
    border: solid var(--m2-brand); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---- Sell, delivery partners, sitemap: the same cards, type and buttons ---- */
body.mp2.m2 .mk-seller-pro-page,
body.mp2.m2 .mk-delivery-pro-page,
body.mp2.m2 .mk-sitemap-page { max-width: 820px !important; margin: 0 auto !important; padding: 10px 12px 24px !important; }
body.mp2.m2 .mk-seller-pro-hero,
body.mp2.m2 .mk-seller-command-card,
body.mp2.m2 .mk-seller-ops-grid > *,
body.mp2.m2 .mk-seller-launch-board,
body.mp2.m2 .mk-seller-readiness-panel,
body.mp2.m2 .mk-seller-cta,
body.mp2.m2 .mk-delivery-pro-hero,
body.mp2.m2 .mk-delivery-route-card,
body.mp2.m2 .mk-delivery-page .card,
body.mp2.m2 .mk-sitemap-page .mk-page-head,
body.mp2.m2 .mk-sitemap-section,
body.mp2.m2 .mk-sitemap-card {
    border-radius: 16px !important; border: 1px solid #eef0f2 !important; box-shadow: none !important;
}
body.mp2.m2 .mk-seller-pro-copy h1,
body.mp2.m2 .mk-delivery-hero-copy h1 { font-size: 20px !important; line-height: 1.2 !important; letter-spacing: -.025em !important; font-weight: 800 !important; color: #000 !important; }
body.mp2.m2 .mk-seller-pro-copy p,
body.mp2.m2 .mk-delivery-hero-copy p { font-size: 12px !important; line-height: 1.55 !important; color: #373d47 !important; }
body.mp2.m2 .mk-seller-primary,
body.mp2.m2 .mk-seller-cta a,
body.mp2.m2 .mk-seller-section-head a,
body.mp2.m2 .mk-delivery-page .btn-primary {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    min-height: 46px !important; padding: 0 20px !important; border-radius: 999px !important;
    background: var(--m2-brand) !important; border: 1px solid var(--m2-brand) !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important; text-decoration: none !important;
}
body.mp2.m2 .mk-seller-secondary,
body.mp2.m2 .mk-delivery-page .btn-outline {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    min-height: 46px !important; padding: 0 20px !important; border-radius: 999px !important;
    background: #fff !important; border: 1px solid #d9dce1 !important; color: #000 !important;
    font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important;
}
body.mp2.m2 .mk-sitemap-page .mk-back-btn { border-radius: 999px !important; box-shadow: none !important; border: 1px solid #e3e6ea !important; }

/* the account screens read as one column on wide screens */
@media (min-width: 900px) {
    body.m2 #mp2-account-wrap { max-width: 760px; margin: 0 auto; }
}

/* Keyboard focus: one ring, in the brand colour. Fields already show their
   own focus (border and glow), so they skip the extra outline. */
body.mp2.m2 a:focus-visible,
body.mp2.m2 button:focus-visible,
body.mp2.m2 [tabindex]:focus-visible { outline: 2px solid rgba(14, 107, 80, .55) !important; outline-offset: 2px !important; }
body.mp2.m2 input:focus-visible,
body.mp2.m2 select:focus-visible,
body.mp2.m2 textarea:focus-visible { outline: none !important; }

/* ==========================================================================
   Colour and polish
   --------------------------------------------------------------------------
   Text stays true black; colour goes where it carries meaning or helps the
   eye: tinted buttons, coloured icons and chips, stat tiles, notes.
   ========================================================================== */

body.m2 {
    --m2-blue: #2563eb;   --m2-blue-soft: #eaf1ff;
    --m2-orange: #ea580c; --m2-orange-soft: #fff1e6;
    --m2-amber: #d97706;  --m2-amber-soft: #fff7e0;
    --m2-purple: #7c3aed; --m2-purple-soft: #f3edff;
    --m2-pink: #db2777;   --m2-pink-soft: #fdecf4;
    --m2-teal: #0f766e;   --m2-teal-soft: #e3f5f2;
}

/* header search: brand outline instead of black */
body.m2 .m2-search { border-color: var(--m2-brand) !important; }

/* placeholders read smaller than typed text (which stays 16px on phones) */
@media (max-width: 899px) {
    body.mp2.m2 input::placeholder,
    body.mp2.m2 textarea::placeholder { font-size: 13.5px !important; }
}

/* secondary buttons are tinted, not black outlines */
body.m2 .m2-b.ghost,
body.mp2.m2 .modal .btn-outline,
body.mp2.m2 .m2-page .btn-outline {
    background: var(--m2-brand-soft) !important;
    border-color: transparent !important;
    color: var(--m2-brand) !important;
}
body.m2 .m2-visit {
    display: inline-flex; align-items: center; gap: 2px;
    border: 0 !important; background: var(--m2-brand-soft) !important; color: var(--m2-brand) !important;
    padding: 7px 10px 7px 12px !important;
}
body.m2 .m2-visit i { font-size: 10px; }

/* chips: white with a coloured icon; the active one takes its colour */
body.m2 .m2-chip { background: #fff; border: 1px solid #e6e8eb; border-radius: 999px; }
body.m2 .m2-chip i { color: var(--m2-brand); }
body.m2 .m2-chip.blue i { color: var(--m2-blue); }
body.m2 .m2-chip.orange i { color: var(--m2-orange); }
body.m2 .m2-chip.purple i { color: var(--m2-purple); }
body.m2 .m2-chip.active { background: var(--m2-brand); border-color: var(--m2-brand); color: #fff; }
body.m2 .m2-chip.active i { color: #fff; }
body.m2 .m2-chip.blue.active { background: var(--m2-blue); border-color: var(--m2-blue); }
body.m2 .m2-chip.orange.active { background: var(--m2-orange); border-color: var(--m2-orange); }
body.m2 .m2-chip.purple.active { background: var(--m2-purple); border-color: var(--m2-purple); }
body.m2 .m2-chip.deal.active { background: var(--m2-deal); border-color: var(--m2-deal); }

/* listing tools: coloured icons */
body.m2 .m2-tool.c-blue i { color: var(--m2-blue); }
body.m2 .m2-tool.c-purple i { color: var(--m2-purple); }
body.m2 .m2-tool.c-amber i { color: var(--m2-amber); }
body.m2 .m2-tool.deal i { color: var(--m2-deal); }
body.m2 .m2-tool.on i { color: inherit; }

/* account: each state and shortcut has its own colour */
body.m2 #m2-order-states .m2-ostate:nth-child(1) i { color: var(--m2-amber); }
body.m2 #m2-order-states .m2-ostate:nth-child(2) i { color: var(--m2-blue); }
body.m2 #m2-order-states .m2-ostate:nth-child(3) i { color: var(--m2-purple); }
body.m2 #m2-order-states .m2-ostate:nth-child(4) i { color: var(--m2-brand); }
body.m2 #m2-order-states .m2-ostate:nth-child(5) i { color: var(--m2-deal); }
body.m2 .m2-sec + .m2-sec .m2-orders-row .m2-ostate:nth-child(1) i { color: var(--m2-pink); }
body.m2 .m2-sec + .m2-sec .m2-orders-row .m2-ostate:nth-child(2) i { color: var(--m2-blue); }
body.m2 .m2-sec + .m2-sec .m2-orders-row .m2-ostate:nth-child(3) i { color: var(--m2-amber); }
body.m2 .m2-sec + .m2-sec .m2-orders-row .m2-ostate:nth-child(4) i { color: var(--m2-purple); }
body.m2 .m2-sec + .m2-sec .m2-orders-row .m2-ostate:nth-child(5) i { color: var(--m2-brand); }

/* notes */
body.m2 .m2-summary-note { background: var(--m2-blue-soft); color: #1e3a8a; border-radius: 10px; padding: 9px 11px; }
body.m2 .m2-summary-note i { color: var(--m2-blue); }

/* ---- Store directory ------------------------------------------------------ */

body.m2 .m2-stores-hero {
    margin: 0 0 10px;
    padding: 14px var(--m2-pad) 12px;
    background: linear-gradient(135deg, #0a523d 0%, #0e6b50 45%, #17976f 100%);
    color: #fff;
}
body.m2 .m2-stores-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.m2 .m2-stores-hero h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
body.m2 .m2-stores-hero p { margin: 2px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .85); }
body.m2 .m2-stores-hero-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-size: 18px; flex: none; }
body.m2 .m2-stores-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
body.m2 .m2-stores-stats > div {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center;
    padding: 8px; border-radius: 12px; background: #fff; color: #000;
}
body.m2 .m2-stores-stats i { grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }
body.m2 .m2-stores-stats .green i { background: var(--m2-brand-soft); color: var(--m2-brand); }
body.m2 .m2-stores-stats .blue i { background: var(--m2-blue-soft); color: var(--m2-blue); }
body.m2 .m2-stores-stats .amber i { background: var(--m2-amber-soft); color: var(--m2-amber); }
body.m2 .m2-stores-stats b { font-size: 14px; font-weight: 800; line-height: 1.1; }
body.m2 .m2-stores-stats small { font-size: 10px; color: #5c636e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-stores-hero .m2-filter { margin: 0; background: #fff; border-radius: 999px; height: 40px; }
body.m2 .m2-store-chips { padding: 0 var(--m2-pad); margin-bottom: 10px; }

/* one column that may not grow wider than the screen (a long store
   description used to stretch a card to 1,700px) */
body.m2 .m2-store-list { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 var(--m2-pad); }
body.m2 .m2-store {
    min-width: 0; padding: 12px; border-radius: 16px;
    background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
body.m2 .m2-store-logo { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; }
body.m2 .m2-store-logo img { position: absolute; inset: 0; }
body.m2 .m2-store-logo .m2-letter { font-size: 18px; }
body.m2 .m2-store-name { font-size: 13.5px; }
body.m2 .m2-store-meta { gap: 5px; margin-top: 5px; }
body.m2 .m2-store-meta .st {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
body.m2 .m2-store-meta .st i { font-size: 10px; }
body.m2 .m2-store-meta .st.blue { background: var(--m2-blue-soft); color: #1d4ed8; }
body.m2 .m2-store-meta .st.orange { background: var(--m2-orange-soft); color: #c2410c; }
body.m2 .m2-store-meta .st.green { background: var(--m2-brand-soft); color: #047857; }
body.m2 .m2-store-meta .st.amber { background: var(--m2-amber-soft); color: #b45309; }
body.m2 .m2-store-desc {
    margin: 9px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--m2-ink-2);
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.m2 .m2-store-shelf { margin-top: 10px; gap: 6px; }
body.m2 .m2-shelf-item { border-radius: 10px; }
body.m2 .m2-shelf-price {
    position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px);
    padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #000;
    font-size: 10.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
body.m2 .m2-shelf-price.sale { background: var(--m2-deal); color: #fff; }
@media (min-width: 760px) {
    body.m2 .m2-store-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body.m2 .m2-stores-hero { border-radius: 16px; margin-top: 4px; }
    body.m2 .m2-stores-stats { max-width: 520px; }
}
@media (min-width: 1180px) { body.m2 .m2-store-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* other two-column form rows may not stretch either */
body.m2 .m2-co-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.m2 .m2-frange { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

/* ---- Menu drawer: main items, then groups that open in place --------------- */

body.mp2.m2 .mk-nav-drawer-body { padding: 10px 10px 24px !important; overflow-y: auto !important; }
body.m2 .m2-dm { display: flex; flex-direction: column; gap: 2px; }
body.m2 .m2-dm-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    min-height: 44px; padding: 5px 8px; border: 0; border-radius: 12px;
    background: transparent; color: #000; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
body.m2 .m2-dm-item:active, body.m2 .m2-dm-item.on { background: #f3f5f4; }
body.m2 .m2-dm-item.on .tx { font-weight: 800; }
body.m2 .m2-dm-item .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; flex: none; }
body.m2 .m2-dm-item .tx { flex: 1; min-width: 0; }
body.m2 .ic.green { background: var(--m2-brand-soft); color: var(--m2-brand); }
body.m2 .ic.red { background: var(--m2-deal-soft); color: var(--m2-deal); }
body.m2 .ic.blue { background: var(--m2-blue-soft); color: var(--m2-blue); }
body.m2 .ic.amber { background: var(--m2-amber-soft); color: var(--m2-amber); }
body.m2 .ic.purple { background: var(--m2-purple-soft); color: var(--m2-purple); }
body.m2 .ic.teal { background: var(--m2-teal-soft); color: var(--m2-teal); }
body.m2 .ic.orange { background: var(--m2-orange-soft); color: var(--m2-orange); }
body.m2 .ic.pink { background: var(--m2-pink-soft); color: var(--m2-pink); }
body.m2 .m2-dm-tag { padding: 2px 7px; border-radius: 999px; background: var(--m2-deal); color: #fff; font-size: 10px; font-weight: 800; }
body.m2 .m2-dm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--m2-amber); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-grid; place-items: center; }
body.m2 .m2-dm-val { font-size: 12px; font-weight: 700; color: #5c636e; }
body.m2 .m2-dm-sep { height: 1px; margin: 8px 8px; background: #eef0f2; }
body.m2 .m2-dm-item .chev { font-size: 11px; color: #9aa1aa; transition: transform .18s; }
body.m2 .m2-dm-group.open > .m2-dm-item .chev { transform: rotate(180deg); }
body.m2 .m2-dm-group.open > .m2-dm-item { background: #f7f8f9; }
body.m2 .m2-dm-subs { display: none; padding: 2px 0 6px 51px; }
body.m2 .m2-dm-group.open > .m2-dm-subs { display: block; }
body.m2 .m2-dm-sub {
    display: flex; align-items: center; gap: 9px; width: 100%;
    min-height: 38px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent;
    font-size: 12.5px; font-weight: 600; color: #1f2329; text-align: left; cursor: pointer;
}
body.m2 .m2-dm-sub:active { background: #f3f5f4; }
body.m2 .m2-dm-sub i { font-size: 13px; color: #5c636e; width: 16px; }
body.m2 .m2-dm-sub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-dm > .m2-drawer-me { margin-bottom: 8px; }

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

body.mp2.m2 .m2-foot {
    margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: linear-gradient(160deg, #0a3d2d 0%, #0b4a36 55%, #0e5b43 100%) !important; color: #fff !important;
    box-shadow: none !important;
}
body.m2 .m2-foot-inner { max-width: var(--m2-maxw); margin: 0 auto; padding: 22px var(--m2-pad) 10px; display: grid; gap: 18px; }
body.m2 .m2-foot-logo { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
body.m2 .m2-foot-mark { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; color: var(--m2-brand); font-weight: 800; font-size: 16px; }
body.m2 .m2-foot-mark img { width: 100%; height: 100%; object-fit: contain; }
body.m2 .m2-foot-logo b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
body.m2 .m2-foot-brand p { margin: 8px 0 12px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 420px; }
body.m2 .m2-foot-badges { display: flex; flex-wrap: wrap; gap: 6px; }
body.m2 .m2-foot-badges span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: rgba(255, 255, 255, .1); color: #fff; }
body.m2 .m2-foot-badges .g i { color: #6ee7b7; }
body.m2 .m2-foot-badges .b i { color: #93c5fd; }
body.m2 .m2-foot-badges .a i { color: #fcd34d; }
body.m2 .m2-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 360px) { body.m2 .m2-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.m2 .m2-foot-col h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 800; color: #a7f3d0; text-transform: none; letter-spacing: 0; }
body.m2 .m2-foot-col h3 i { font-size: 12px; }
body.m2 .m2-foot-col button {
    display: block; width: 100%; padding: 5px 0; border: 0; background: transparent; text-align: left; cursor: pointer;
    font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.m2 .m2-foot-col button:active, body.m2 .m2-foot-col button:hover { color: #fff; }
body.m2 .m2-foot-bottom { max-width: var(--m2-maxw); margin: 0 auto; padding: 12px var(--m2-pad) 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 11px; color: rgba(255, 255, 255, .65); }
@media (max-width: 899px) {
    /* clear the bottom navigation bar */
    body.m2 .m2-foot-bottom { padding-bottom: 18px; }
}
@media (min-width: 900px) {
    body.m2 .m2-foot-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 32px; padding: 32px 20px 16px; }
    body.m2 .m2-foot-bottom { padding-left: 20px; padding-right: 20px; }
    body.m2 .m2-foot-col button { font-size: 12.5px; }
}

/* ==========================================================================
   Partner pages: sell with us, deliver with us (+ the rider dashboard)
   ========================================================================== */

body.m2 .m2-lp { max-width: 820px; margin: 0 auto; padding-bottom: 12px; }
body.m2 .m2-lp-hero {
    position: relative; overflow: hidden;
    padding: 22px var(--m2-pad) 20px; margin-bottom: 8px; color: #fff;
    background: linear-gradient(135deg, #0a523d 0%, #0e6b50 50%, #17976f 100%);
}
body.m2 .m2-lp-seller .m2-lp-hero { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 52%, #db2777 100%); }
body.m2 .m2-lp-rider .m2-lp-hero { background: linear-gradient(135deg, #9a3412 0%, #ea580c 52%, #f59e0b 100%); }
body.m2 .m2-lp-hero::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%;
    background: rgba(255, 255, 255, .1); pointer-events: none;
}
body.m2 .m2-lp-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 700; }
body.m2 .m2-lp-hero h1 { margin: 12px 0 6px; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: #fff; max-width: 480px; }
body.m2 .m2-lp-hero p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 480px; }
body.m2 .m2-lp-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
body.m2 .m2-lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
    font-size: 13.5px; font-weight: 800; text-decoration: none;
}
body.m2 .m2-lp-btn.light { background: #fff; color: #111; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
body.m2 .m2-lp-seller .m2-lp-btn.light { color: #6d28d9; }
body.m2 .m2-lp-rider .m2-lp-btn.light { color: #c2410c; }
body.m2 .m2-lp-btn.glass { background: rgba(255, 255, 255, .18); color: #fff; }
body.m2 .m2-lp-ticks { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .92); }
body.m2 .m2-lp-ticks i { color: #fde68a; margin-right: 3px; }

body.m2 .m2-lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 var(--m2-pad); margin: 0 0 8px; }
body.m2 .m2-lp-stats > div { padding: 10px; border-radius: 14px; background: #fff; border: 1px solid #eef0f2; }
body.m2 .m2-lp-stats b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
body.m2 .m2-lp-stats small { font-size: 10.5px; color: #5c636e; }
body.m2 .m2-lp-stats .green b { color: var(--m2-brand); }
body.m2 .m2-lp-stats .blue b { color: var(--m2-blue); }
body.m2 .m2-lp-stats .amber b { color: var(--m2-amber); }

body.m2 .m2-lp-sec { background: #fff; padding: 16px var(--m2-pad); margin-bottom: 8px; }
body.m2 .m2-lp-sec h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.015em; color: #000; }
body.m2 .m2-lp-sec h2 .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; flex: none; }
body.m2 .m2-lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 339px) { body.m2 .m2-lp-grid { grid-template-columns: minmax(0, 1fr); } }
body.m2 .m2-lp-card { padding: 12px; border-radius: 14px; background: #fafafa; border: 1px solid #f0f1f3; }
body.m2 .m2-lp-card .ic, body.m2 .m2-lp-perk .ic, body.m2 .m2-rider-file .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; flex: none; }
body.m2 .m2-lp-card b { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 800; }
body.m2 .m2-lp-card p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #373d47; }

body.m2 .m2-lp-steps { list-style: none; margin: 0; padding: 0; }
body.m2 .m2-lp-steps li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
body.m2 .m2-lp-steps li:last-child { padding-bottom: 0; }
body.m2 .m2-lp-steps li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: #eceef1; }
body.m2 .m2-lp-steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-size: 12.5px; font-weight: 800; position: relative; }
body.m2 .m2-lp-steps .t0 .n { background: var(--m2-brand); }
body.m2 .m2-lp-steps .t1 .n { background: var(--m2-blue); }
body.m2 .m2-lp-steps .t2 .n { background: var(--m2-amber); }
body.m2 .m2-lp-steps .t3 .n { background: var(--m2-purple); }
body.m2 .m2-lp-steps b { display: block; font-size: 13px; font-weight: 800; padding-top: 4px; }
body.m2 .m2-lp-steps p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: #373d47; }
body.m2 .m2-lp-steps.inline { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f1f3; }
body.m2 .m2-lp-steps.inline li { padding-bottom: 10px; align-items: center; }
body.m2 .m2-lp-steps.inline li:not(:last-child)::before { top: 26px; bottom: -2px; }
body.m2 .m2-lp-steps.inline b { padding-top: 0; font-weight: 700; font-size: 12.5px; }

body.m2 .m2-lp-faq details { border-bottom: 1px solid #f0f1f3; }
body.m2 .m2-lp-faq details:last-child { border-bottom: 0; }
body.m2 .m2-lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: #000; }
body.m2 .m2-lp-faq summary::-webkit-details-marker { display: none; }
body.m2 .m2-lp-faq summary i { color: var(--m2-purple); font-size: 12px; transition: transform .18s; }
body.m2 .m2-lp-faq details[open] summary i { transform: rotate(180deg); }
body.m2 .m2-lp-faq p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #373d47; }

body.m2 .m2-lp-final {
    display: flex; align-items: center; gap: 12px; margin: 0 var(--m2-pad);
    padding: 14px; border-radius: 16px; background: var(--m2-purple-soft); border: 1px solid #e4d8ff;
}
body.m2 .m2-lp-final .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--m2-purple); color: #fff; font-size: 18px; flex: none; }
body.m2 .m2-lp-final div { flex: 1; min-width: 0; }
body.m2 .m2-lp-final b { display: block; font-size: 13px; font-weight: 800; }
body.m2 .m2-lp-final small { font-size: 11px; color: #5c636e; }
body.m2 .m2-lp-final .m2-b { flex: none; min-height: 38px !important; padding: 0 14px !important; font-size: 12.5px !important; text-decoration: none; }
body.m2 .m2-lp-seller .m2-lp-final .m2-b.primary { background: var(--m2-purple) !important; border-color: var(--m2-purple) !important; }

body.m2 .m2-lp-perks { display: flex; flex-direction: column; gap: 12px; }
body.m2 .m2-lp-perk { display: flex; gap: 12px; align-items: flex-start; }
body.m2 .m2-lp-perk b { display: block; font-size: 13px; font-weight: 800; }
body.m2 .m2-lp-perk p { margin: 2px 0 0; font-size: 11.5px; color: #373d47; line-height: 1.45; }

/* rider sign-in and registration */
body.m2 .m2-rider-card { scroll-margin-top: 110px; }
body.m2 .m2-rider-lead { margin: -4px 0 6px; font-size: 12px; color: #373d47; }
body.m2 .m2-rider-part { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 12.5px; font-weight: 800; color: #000; }
body.m2 .m2-rider-part .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--m2-orange-soft); color: var(--m2-orange); font-size: 11px; font-weight: 800; }
body.m2 .m2-rider-otp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
body.m2 .m2-rider-otp .input-group { margin-bottom: 0 !important; }
body.m2 .m2-rider-otp .m2-b { min-height: 44px !important; }
body.m2 .m2-rider-file {
    display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 0 4px;
    border: 1.5px dashed #c7d2fe; border-radius: 12px; background: #f8faff; cursor: pointer; position: relative;
}
body.m2 .m2-rider-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.m2 .m2-rider-file .tx b { display: block; font-size: 12.5px; font-weight: 800; }
body.m2 .m2-rider-file .tx small { font-size: 11px; color: #5c636e; word-break: break-all; }
body.m2 .m2-rider-file.done { border-style: solid; border-color: var(--m2-brand); background: var(--m2-brand-soft); }
body.m2 .m2-rider-pin { margin-top: 8px; padding: 8px 11px; border-radius: 10px; background: #fff7e6; color: #7a4b00; font-size: 11.5px; font-weight: 600; }
body.m2 .m2-rider-areas { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; border-radius: 12px; }
body.m2 .m2-rider-areas label { position: relative; cursor: pointer; }
body.m2 .m2-rider-areas input { position: absolute; opacity: 0; pointer-events: none; }
body.m2 .m2-rider-areas span { display: inline-block; padding: 6px 11px; border-radius: 999px; border: 1px solid #e3e6ea; background: #fff; font-size: 11.5px; font-weight: 600; color: #000; }
body.m2 .m2-rider-areas input:checked + span { background: var(--m2-orange); border-color: var(--m2-orange); color: #fff; }
body.m2 .m2-rider-areas input:focus-visible + span { outline: 2px solid rgba(14, 107, 80, .55); outline-offset: 2px; }
body.m2 .m2-rider-areas.m2-invalid, body.m2 .m2-rider-pin.m2-invalid, body.m2 .m2-rider-file.m2-invalid { outline: 2px solid var(--m2-deal); outline-offset: 2px; }

/* rider dashboard */
body.m2 .m2-rider-me-row { display: flex; align-items: center; gap: 12px; }
body.m2 .m2-rider-me-row .m2-avatar { width: 46px; height: 46px; background: var(--m2-orange) !important; }
body.m2 .m2-rider-me-row .txt { flex: 1; min-width: 0; }
body.m2 .m2-rider-me-row .txt b { display: block; font-size: 14.5px; font-weight: 800; }
body.m2 .m2-rider-me-row .txt small { font-size: 11.5px; color: #5c636e; }
body.m2 .m2-rider-me-row .badges { margin-top: 4px; }
body.m2 .m2-rider-avail {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 11px 12px;
    border: 1px solid #e6e8eb; border-radius: 14px; background: #f7f8f9; text-align: left; cursor: pointer;
}
body.m2 .m2-rider-avail .dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa1aa; flex: none; }
body.m2 .m2-rider-avail .tx { flex: 1; min-width: 0; }
body.m2 .m2-rider-avail .tx b { display: block; font-size: 13px; font-weight: 800; color: #000; }
body.m2 .m2-rider-avail .tx small { font-size: 11px; color: #5c636e; }
body.m2 .m2-switch-ui { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d6d9de; flex: none; }
body.m2 .m2-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
body.m2 .m2-rider-avail.on { background: var(--m2-brand-soft); border-color: #bfe3d3; }
body.m2 .m2-rider-avail.on .dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .2); }
body.m2 .m2-rider-avail.on .m2-switch-ui { background: var(--m2-brand); }
body.m2 .m2-rider-avail.on .m2-switch-ui::after { transform: translateX(18px); }
body.m2 .m2-rider-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 var(--m2-pad); margin-bottom: 8px; }
body.m2 .m2-rider-stats > div { padding: 10px; border-radius: 14px; background: #fff; border: 1px solid #eef0f2; }
body.m2 .m2-rider-stats i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; margin-bottom: 6px; }
body.m2 .m2-rider-stats .blue i { background: var(--m2-blue-soft); color: var(--m2-blue); }
body.m2 .m2-rider-stats .amber i { background: var(--m2-amber-soft); color: var(--m2-amber); }
body.m2 .m2-rider-stats .purple i { background: var(--m2-purple-soft); color: var(--m2-purple); }
body.m2 .m2-rider-stats b { display: block; font-size: 17px; font-weight: 800; }
body.m2 .m2-rider-stats small { font-size: 10.5px; color: #5c636e; }

body.m2 .m2-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-top: 10px; border-radius: 12px; font-size: 12px; line-height: 1.45; }
body.m2 .m2-note i { font-size: 14px; margin-top: 1px; }
body.m2 .m2-note.info { background: var(--m2-blue-soft); color: #1e3a8a; }
body.m2 .m2-note.warn { background: var(--m2-amber-soft); color: #7a4b00; }
body.m2 .m2-note.ok { background: var(--m2-brand-soft); color: #0a3d2e; }
body.m2 .m2-note + .m2-note { margin-top: 6px; }

body.m2 .m2-rider-jobs { display: flex; flex-direction: column; gap: 10px; }
body.m2 .m2-job { border: 1px solid #eceef1; border-radius: 14px; padding: 12px; background: #fff; }
body.m2 .m2-job.past { background: #fafafa; }
body.m2 .m2-job-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
body.m2 .m2-job-h b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
body.m2 .m2-job-h small { font-size: 11px; color: #5c636e; }
body.m2 .m2-job-h .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body.m2 .m2-job-h .amt { font-size: 14px; font-weight: 800; }
body.m2 .m2-job-route { position: relative; margin: 12px 0 10px; }
body.m2 .m2-job-route::before { content: ""; position: absolute; left: 15px; top: 34px; height: calc(100% - 64px); border-left: 2px dashed #d6d9de; }
body.m2 .m2-job-route .stop { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
body.m2 .m2-job-route .stop + .stop { margin-top: 8px; }
body.m2 .m2-job-route .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; flex: none; }
body.m2 .m2-job-route .stop > div { flex: 1; min-width: 0; }
body.m2 .m2-job-route small { display: block; font-size: 10.5px; color: #5c636e; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
body.m2 .m2-job-route b { display: block; font-size: 12.5px; font-weight: 700; }
body.m2 .m2-job-route span { display: block; font-size: 11.5px; color: #373d47; }
body.m2 .m2-job-route a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--m2-brand-soft); color: var(--m2-brand); text-decoration: none; flex: none; }
body.m2 .m2-job-pay { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
body.m2 .m2-job-pay.cash { background: var(--m2-amber-soft); color: #92400e; }
body.m2 .m2-job-pay.ok { background: var(--m2-brand-soft); color: #047857; }
body.m2 .m2-job-pay.online { background: var(--m2-blue-soft); color: #1d4ed8; }
body.m2 .m2-job-items { margin-top: 8px; font-size: 12px; }
body.m2 .m2-job-items summary { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; cursor: pointer; list-style: none; font-weight: 700; color: #373d47; }
body.m2 .m2-job-items summary::-webkit-details-marker { display: none; }
body.m2 .m2-job-items > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: #373d47; }
body.m2 .m2-job-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
body.m2 .m2-job-actions .m2-b { min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; text-decoration: none; }
body.m2 .m2-b.ghost.danger { background: var(--m2-deal-soft) !important; color: var(--m2-deal) !important; }
body.m2 .m2-b.ghost.amber { background: var(--m2-amber-soft) !important; color: #92400e !important; }
body.m2 .m2-job-code { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e3e6ea; }
body.m2 .m2-job-code label { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 6px; color: #373d47; }
body.m2 .m2-job-code > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.m2 .m2-job-code .m2-input { letter-spacing: .3em; font-weight: 800; text-align: center; }

@media (min-width: 820px) {
    body.m2 .m2-lp-hero { border-radius: 18px; margin-top: 10px; padding: 32px 28px; }
    body.m2 .m2-lp-hero h1 { font-size: 28px; }
    body.m2 .m2-lp-sec { border-radius: 16px; padding: 18px; }
    body.m2 .m2-lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.m2 .m2-lp-stats, body.m2 .m2-rider-stats { padding: 0; }
    body.m2 .m2-lp-final { margin: 0; }
}

/* ==========================================================================
   Admin-controlled design (Admin → Marketplace Home)
   --------------------------------------------------------------------------
   m2ApplyTheme() turns the admin's settings into the variables below; every
   one falls back to the theme when the admin has not set it.
   ========================================================================== */

/* main buttons */
body.m2 .m2-b.primary,
body.mp2.m2 .modal .btn-primary,
body.mp2.m2 .m2-page .btn-primary,
body.m2 .m2-btn:not(.ghost),
body.mp2.m2 .m2-co-bar #mp2-place-order,
body.mp2.m2 .m2-hero .mk-hero-cta-primary {
    background: var(--m2-btn, var(--m2-brand)) !important;
    border-color: var(--m2-btn, var(--m2-brand)) !important;
    color: var(--m2-btn-text, #fff) !important;
}
body.m2 .m2-b.primary:active, body.m2 .m2-btn:not(.ghost):active { background: var(--m2-btn-2, var(--m2-brand-2)) !important; }
body.mp2.m2 .m2-co-bar #mp2-place-order { box-shadow: 0 4px 12px color-mix(in srgb, var(--m2-btn, var(--m2-brand)) 30%, transparent) !important; }

/* brand-coloured surfaces follow the primary colour */
body.m2 .m2-stores-hero { background: linear-gradient(135deg, var(--m2-brand-2) 0%, var(--m2-brand) 50%, var(--m2-brand-3) 100%); }
body.mp2.m2 .m2-foot { background: linear-gradient(160deg, var(--m2-brand-deep, #0a3d2d) 0%, var(--m2-brand-2, #0b4a36) 60%, var(--m2-brand, #0e5b43) 100%) !important; }

/* product image fit and card corners */
body.m2 .m2-pp-track img { object-fit: var(--m2-pp-fit, cover); background: #f5f6f7; }
body.m2 .m2-card { border-radius: var(--m2-card-r, 10px); }

/* ---- Hero banner: fit, position and shape per screen size ---------------- */

body.mp2.m2 .m2-hero .mk-hero { aspect-ratio: var(--hero-ratio-m, 16 / 7) !important; }
body.mp2.m2 .m2-hero .mk-hero-slide:not(.mk-hero-slide-color) {
    background-size: var(--hero-fit-m, cover) !important;
    background-position: var(--hero-pos-m, center) !important;
    background-repeat: no-repeat !important;
}
@media (min-width: 600px) {
    body.mp2.m2 .m2-hero .mk-hero { aspect-ratio: var(--hero-ratio-t, 16 / 7) !important; }
    body.mp2.m2 .m2-hero .mk-hero-slide:not(.mk-hero-slide-color) {
        background-size: var(--hero-fit-t, cover) !important;
        background-position: var(--hero-pos-t, center) !important;
    }
}
@media (min-width: 900px) {
    body.mp2.m2 .m2-hero .mk-hero { aspect-ratio: var(--hero-ratio-d, 3 / 1) !important; }
    body.mp2.m2 .m2-hero .mk-hero-slide:not(.mk-hero-slide-color) {
        background-size: var(--hero-fit-d, contain) !important;
        background-position: var(--hero-pos-d, center) !important;
    }
    body.mp2.m2 .m2-hero .mk-hero-nav {
        display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important;
        border-radius: 50% !important; border: 0 !important; background: rgba(255, 255, 255, .85) !important; color: #000 !important;
        opacity: 0; transition: opacity .15s;
    }
    body.mp2.m2 .m2-hero .mk-hero:hover .mk-hero-nav { opacity: 1; }
}
/* "contain": the whole picture, centred on a soft blurred copy of itself, so a
   banner wider than the image has no flat bars at the sides. Each slide clips
   its own blur (slides sit side by side in the sliding track). */
body.mp2.m2 .m2-hero .m2-hero-fill,
body.mp2.m2 .m2-hero .m2-hero-pic { display: none; }
body.mp2.m2 .m2-hero .m2-hero-fill {
    position: absolute; inset: -30px; z-index: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    filter: blur(26px) saturate(1.1) brightness(.92);
    transform: scale(1.06);
}
body.mp2.m2 .m2-hero .m2-hero-pic {
    position: absolute; inset: 0; z-index: 0;
    background-size: contain; background-repeat: no-repeat;
}
@media (max-width: 599px) {
    body.mp2.m2.m2-hero-contain-m .m2-hero .mk-hero-slide:not(.mk-hero-slide-color) { background-image: none !important; overflow: hidden; }
    body.mp2.m2.m2-hero-contain-m .m2-hero .m2-hero-fill,
    body.mp2.m2.m2-hero-contain-m .m2-hero .m2-hero-pic { display: block; }
    body.mp2.m2.m2-hero-contain-m .m2-hero .m2-hero-pic { background-position: var(--hero-pos-m, center); }
}
@media (min-width: 600px) and (max-width: 899px) {
    body.mp2.m2.m2-hero-contain-t .m2-hero .mk-hero-slide:not(.mk-hero-slide-color) { background-image: none !important; overflow: hidden; }
    body.mp2.m2.m2-hero-contain-t .m2-hero .m2-hero-fill,
    body.mp2.m2.m2-hero-contain-t .m2-hero .m2-hero-pic { display: block; }
    body.mp2.m2.m2-hero-contain-t .m2-hero .m2-hero-pic { background-position: var(--hero-pos-t, center); }
}
@media (min-width: 900px) {
    body.mp2.m2.m2-hero-contain-d .m2-hero .mk-hero-slide:not(.mk-hero-slide-color) { background-image: none !important; overflow: hidden; }
    body.mp2.m2.m2-hero-contain-d .m2-hero .m2-hero-fill,
    body.mp2.m2.m2-hero-contain-d .m2-hero .m2-hero-pic { display: block; }
    body.mp2.m2.m2-hero-contain-d .m2-hero .m2-hero-pic { background-position: var(--hero-pos-d, center); }
}
@media (prefers-reduced-transparency: reduce) { body.mp2.m2 .m2-hero .m2-hero-fill { filter: brightness(.6); } }

/* the dark fade only when the slide asks for it (Add dark overlay) */
body.mp2.m2 .m2-hero .mk-hero-slide:not(.has-overlay)::after { display: none !important; }
body.mp2.m2 .m2-hero .mk-hero-slide.has-overlay::after { display: block !important; }
body.mp2.m2 .m2-hero .mk-hero-slide:not(.has-overlay):not(.mk-hero-slide-color) .mk-hero-title,
body.mp2.m2 .m2-hero .mk-hero-slide:not(.has-overlay):not(.mk-hero-slide-color) .mk-hero-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
/* the secondary button, as set on the slide */
body.mp2.m2 .m2-hero .mk-hero-ctas { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
body.mp2.m2 .m2-hero .mk-hero-cta-outline {
    display: inline-flex !important; background: transparent !important;
    color: var(--mk-slide-text, #fff) !important; border: 1.5px solid currentColor !important;
}
body.mp2.m2 .m2-hero .mk-hero-badge { color: var(--mk-slide-text, #fff) !important; }

/* ---- Section backgrounds set by the admin ---------------------------------- */

body.m2 .m2-hero.m2-bg-set { padding: 10px var(--m2-pad) 12px !important; }
@media (min-width: 900px) { body.m2 .m2-hero.m2-bg-set { padding: 12px !important; border-radius: 14px; } }
body.m2 .m2-on-dark .m2-sec-title,
body.m2 .m2-on-dark .m2-sec-sub,
body.m2 .m2-on-dark .m2-more,
body.m2 .m2-on-dark .m2-quick-item,
body.m2 .m2-on-dark .m2-tile-name,
body.m2 .m2-on-dark .m2-promo-kicker,
body.m2 .m2-on-dark .m2-promo-title,
body.m2 .m2-on-dark .m2-shelf-title { color: #fff !important; }
body.m2 .m2-on-dark .m2-shelf-title .ic { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---- Category banners (home shelves and category pages) ------------------- */

body.m2 .m2-cbanner {
    position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    min-height: 116px; padding: 14px; margin-bottom: 12px; border-radius: 14px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    color: var(--cb-text, #fff); cursor: pointer;
}
body.m2 .m2-cbanner.page { min-height: 140px; margin: 0 0 8px; border-radius: 0; cursor: default; }
@media (min-width: 760px) { body.m2 .m2-cbanner.page { border-radius: 14px; } body.m2 .m2-cbanner { min-height: 150px; } }
body.m2 .m2-cbanner.overlay::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .15)); }
body.m2 .m2-cbanner-txt, body.m2 .m2-cbanner-btn { position: relative; z-index: 1; }
body.m2 .m2-cbanner-txt { min-width: 0; }
body.m2 .m2-cbanner-badge { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 10.5px; font-weight: 800; }
body.m2 .m2-cbanner-txt b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
body.m2 .m2-cbanner-txt small { display: block; margin-top: 2px; font-size: 11.5px; opacity: .9; }
body.m2 .m2-cbanner.img:not(.overlay) .m2-cbanner-txt { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
body.m2 .m2-cbanner-btn {
    flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: 999px;
    background: #fff; color: #000; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
body.m2 .m2-shelf-title { display: flex; align-items: center; gap: 8px; }
body.m2 .m2-shelf-title .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--m2-brand-soft); color: var(--m2-brand); font-size: 13.5px; }

/* ---- Large screens: a menu button in the header --------------------------- */

@media (min-width: 900px) {
    body.m2 .m2-header-row > .m2-menu-desk { order: -1; }
    body.m2 .m2-icon-btn.m2-menu-desk { background: var(--m2-brand-soft) !important; color: var(--m2-brand) !important; }
}

/* ==========================================================================
   Checkout facelift
   ========================================================================== */

body.m2 .m2-co-progress {
    display: flex; align-items: center; gap: 0; list-style: none;
    margin: 0 0 8px; padding: 12px var(--m2-pad); background: #fff;
}
body.m2 .m2-co-progress li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 11px; color: #5c636e; }
body.m2 .m2-co-progress li:not(:last-child)::after {
    content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; border-radius: 2px; background: #e6e8eb;
}
body.m2 .m2-co-progress .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f1f2f4; color: #8a9099; font-size: 13px; transition: background .2s, color .2s; }
body.m2 .m2-co-progress b { font-weight: 700; }
body.m2 .m2-co-progress li.done .dot { background: var(--m2-brand); color: #fff; }
body.m2 .m2-co-progress li.done { color: #000; }
body.m2 .m2-co-progress li.done:not(:last-child)::after { background: var(--m2-brand); }
@media (min-width: 760px) { body.m2 .m2-co-progress { border-radius: 14px; } }

body.m2 .m2-co-card { border-radius: 0; }
@media (min-width: 760px) { body.m2 .m2-co-card { border-radius: 16px; border: 1px solid #eef0f2; } }
body.m2 .m2-co-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
body.m2 .m2-co-h .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 15px; flex: none; }
body.m2 .m2-co-h .t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #000; }
body.m2 .m2-co-h .t small { display: block; font-size: 11px; font-weight: 500; color: #5c636e; margin-top: 1px; }
body.m2 .m2-co-h .step { margin: 0; width: 22px; height: 22px; font-size: 11px; background: #eef0f2; color: #5c636e; }
body.m2 .m2-co-h .step.done { background: var(--m2-brand); color: #fff; }
body.m2 .m2-co-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--m2-purple-soft); color: var(--m2-purple); font-size: 11px; vertical-align: 1px; }

body.m2 .m2-co .m2-loc-row { position: relative; align-items: center; }
body.m2 .m2-co .m2-loc-row > .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a9099; font-size: 13px; pointer-events: none; }
body.mp2.m2 .m2-co .m2-loc-row .m2-input { padding-left: 34px !important; }
body.m2 .m2-co .m2-loc-row .m2-b { min-height: 44px !important; padding: 0 14px !important; }
body.m2 .m2-co-map { border-radius: 14px; }
body.m2 .m2-co-map small i { color: var(--m2-brand); margin-right: 3px; }

body.m2 .m2-co-store { padding: 10px 0 4px; }
body.m2 .m2-co-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f2f3f5; }
body.m2 .m2-co-store-h + .m2-co-item { border-top: 0; }
body.m2 .m2-co-item .im { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; background: #f5f6f7; display: grid; place-items: center; color: #b3b9c1; }
body.m2 .m2-co-item .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.m2 .m2-co-item .tx { flex: 1; min-width: 0; }
body.m2 .m2-co-item .tx b { display: block; font-size: 12.5px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-co-item .tx small { font-size: 11px; color: #5c636e; }
body.m2 .m2-co-item .amt { font-size: 12.5px; font-weight: 800; color: #000; white-space: nowrap; }

body.m2 .m2-co-coupon { position: relative; align-items: center; }
body.m2 .m2-co-coupon > .bi-ticket-perforated { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--m2-amber); font-size: 15px; pointer-events: none; }
body.mp2.m2 .m2-co-coupon .m2-input { padding-left: 38px !important; border-style: dashed !important; }
body.m2 .m2-co-summary .m2-co-sum { margin-top: 12px; padding: 12px; border-radius: 12px; background: #f8f9fa; }
body.m2 .m2-co-summary .m2-co-sum .grand { border-top-color: #dfe2e6; }
body.m2 .m2-co-summary .m2-co-sum .grand span:last-child { color: var(--m2-brand); font-size: 19px; }

body.m2 .m2-co-trust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.m2 .m2-co-trust span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
body.m2 .m2-co-trust .g { background: var(--m2-brand-soft); color: #047857; }
body.m2 .m2-co-trust .b { background: var(--m2-blue-soft); color: #1d4ed8; }
body.m2 .m2-co-trust .a { background: var(--m2-amber-soft); color: #92400e; }

/* phones: the total and Place order stay pinned to the bottom */
@media (min-width: 900px) {
    body.m2 .m2-co { max-width: 1080px; }
    body.m2 .m2-co-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
    body.m2 .m2-co-side { position: sticky; top: 118px; }
    body.m2 .m2-co-bar {
        position: static !important; transform: none !important; width: auto !important; left: auto !important; right: auto !important;
        margin: 14px 0 0; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
        flex-direction: column; align-items: stretch; gap: 10px;
    }
    body.m2 .m2-co-bar .sum { display: none; }
    body.mp2.m2 .m2-co-bar #mp2-place-order { width: 100%; justify-content: center; min-height: 50px !important; }
    body.mp2.m2.m2-focus { padding-bottom: 24px !important; }
}
body.m2 .m2-co-h > .t { display: block !important; }
@media (max-width: 599px) {
    /* phones: one subtitle line leaves room for the buttons */
    body.mp2.m2 .m2-hero .mk-hero-sub { -webkit-line-clamp: 1 !important; }
}
@media (min-width: 900px) {
    /* the count sits on the cart icon's corner, clear of the "Cart" label */
    body.mp2.m2 .m2-icon-btn.m2-desk-only .m2-badge { top: -3px; left: 15px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 4px; font-size: 9.5px; }
}

/* ==========================================================================
   Product page redesign (.m2-pd)
   --------------------------------------------------------------------------
   Phones: a full-width picture with dots, then a white sheet that overlaps
   it with a small deal chip and the price first, the title, rating and
   stock, the variation picker (pills, colour swatches or a grid of tiles),
   three trust columns with tinted icons, the seller card, "About this
   item" with specifications, ratings, and a grid of related products; a
   buy bar with the live price stays at the bottom. Large screens:
   breadcrumbs, a sticky gallery with a thumbnail column, and a buy column
   (title first, the price under a hairline). Type stays moderate: title
   16px (21px large), price 24px (30px large), body 13–14px.
   Every id and class the flows use (#mp2-pprice, #mp2-var-*, #mp2-pqty,
   #m2-var-sel-*, #m2-pp-stock, .m2-pp-bar .m2-b.cart/.primary,
   .m2-pp-cartbadge, #mp-product-review-list, #m2-related-rail) is kept.
   Colours follow the admin theme: --m2-brand*, --m2-btn, --m2-star.
   ========================================================================== */

/* ---- gallery ---- */
body.mp2.m2 .m2-pp #mp-img-track { max-height: none !important; aspect-ratio: auto !important; height: 100% !important; }
body.m2 .m2-pd .m2-pp-gal { background: #f4f5f6; }
body.m2 .m2-pd .m2-pp-fab {
    width: 38px; height: 38px; background: rgba(255, 255, 255, .94); font-size: 15px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px rgba(16, 24, 40, .08);
}
body.m2 .m2-pd .m2-pp-fab.share { right: 58px; }
body.m2 .m2-pp-dots {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
    display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px;
    background: rgba(0, 0, 0, .28); pointer-events: none;
}
body.m2 .m2-pp-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .6); transition: width .2s, background .2s; }
body.m2 .m2-pp-dots i.on { width: 16px; background: #fff; }
body.m2 .m2-pp-count { z-index: 2; }
body.m2 .m2-pp-nav { display: none; }
body.m2 .m2-pd-crumbs { display: none; }

/* ---- the sheet: price, title, rating, stock ---- */
body.m2 .m2-pd-info { position: relative; z-index: 2; min-width: 0; }
body.m2 .m2-pd .m2-pp-head { display: flex; flex-direction: column; background: #fff; }
body.m2 .m2-pd .m2-pp-price { padding: 16px var(--m2-pad) 0; }
body.m2 .m2-pd .m2-pp-price-row { gap: 2px 10px; }
/* an older sheet sizes and colours #mp2-pprice by id, with !important */
body.mp2.m2 .m2-pd #mp2-pprice { font-size: 24px !important; font-weight: 800; letter-spacing: -.025em; color: #000 !important; }
body.mp2.m2 .m2-pd #mp2-pprice.sale { color: var(--m2-deal) !important; }
body.mp2.m2 .m2-pd #mp2-pprice.bulk { color: #5b21b6 !important; }
body.m2 .m2-pd .m2-pp-was { font-size: 13px; color: #5c636e; }
/* the deal: a small tinted chip above the price, not a full-width strip */
body.m2 .m2-pp-dealbar {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    margin: 0 0 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
    background: var(--m2-deal-soft); color: #b91c1c; font-size: 11.5px; line-height: 1.3;
}
body.m2 .m2-pp-dealbar b { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--m2-deal); }
body.m2 .m2-pp-dealbar span { font-weight: 700; }
/* bulk price card, above the quantity: tap it to buy the break quantity;
   once the quantity reaches it the card says so and the price turns purple */
body.m2 .m2-pd .m2-pp-bulk {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 10px 10px 10px 12px;
    border: 1px dashed #c4b5fd; border-radius: 14px; background: var(--m2-purple-soft); color: #000;
    font: inherit; text-align: left; cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
body.m2 .m2-pd .m2-pp-bulk[hidden] { display: none; }
body.m2 .m2-pd .m2-pp-bulk .ic {
    flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
    background: #fff; color: var(--m2-purple); font-size: 17px;
}
body.m2 .m2-pd .m2-pp-bulk .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.m2 .m2-pd .m2-pp-bulk .tx b { font-size: 13px; font-weight: 800; line-height: 1.3; color: #000; }
body.m2 .m2-pd .m2-pp-bulk .tx small { font-size: 12px; font-weight: 600; color: #5b21b6; }
body.m2 .m2-pd .m2-pp-bulk .go {
    flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px;
    background: var(--m2-purple); color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
body.m2 .m2-pd .m2-pp-bulk.on { border-style: solid; border-color: var(--m2-purple); background: color-mix(in srgb, var(--m2-purple) 8%, #fff); cursor: default; }
body.m2 .m2-pd .m2-pp-bulk.on .ic { background: var(--m2-purple); color: #fff; }
body.m2 .m2-pd .m2-pp-bulk.on .go { background: #fff; color: #5b21b6; box-shadow: inset 0 0 0 1px #c4b5fd; }
body.m2 .m2-pd .m2-pp-bulk:focus-visible { outline: 2px solid var(--m2-purple); outline-offset: 2px; }


body.m2 .m2-pd .m2-pp-title { padding: 12px var(--m2-pad) 16px; }
body.m2 .m2-pp-storelink {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    margin: 0 0 8px; padding: 4px 10px 4px 8px; border: 0; border-radius: 999px;
    background: var(--m2-brand-soft); color: var(--m2-brand); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
body.m2 .m2-pp-storelink span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.m2 .m2-pp-storelink .bi-chevron-right { font-size: 9px; }
body.m2 .m2-pd .m2-pp-title h1 { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: #000; }
body.m2 .m2-pd .m2-pp-sub { gap: 8px 10px; margin-top: 10px; font-size: 12.5px; }
body.m2 .m2-pp-rate .stars { display: inline-flex; gap: 1px; color: var(--m2-star); font-size: 11px; }
body.m2 .m2-pp-rate .n { color: #5c636e; }
body.m2 .m2-pp-stock { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
body.m2 .m2-pp-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.m2 .m2-pp-stock.in { background: #e3f6ec; color: #047857; }
body.m2 .m2-pp-stock.low { background: var(--m2-orange-soft); color: #c2410c; }
body.m2 .m2-pp-stock.out { background: var(--m2-deal-soft); color: #c81e14; }

/* ---- options (the variation picker) and quantity ----
   One-option groups are facts ("Size M · Weight 500g") in a quiet strip.
   Each real choice: its name ("Colour"), the chosen value and how many
   options, then the options in one of three looks:
     swatches — a colour group: a round swatch with its name under it;
     sizes    — short values: compact rounded chips;
     tiles    — longer values: an even grid of cards with a tick.
   The price difference is a quiet line; "n left" is amber; a sold-out
   option is struck through, muted and cannot be picked. The legacy chip
   class stays on each option (selectVariant toggles .active), so these
   rules outrank the older chip styles. */
body.m2 .m2-pd .m2-pp-buy { padding-top: 16px; padding-bottom: 16px; }

body.m2 .m2-pd .m2-vp-fixed { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.m2 .m2-pd .m2-vp-fact {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 11px;
    border-radius: 10px; background: #f4f5f7; font-size: 12.5px; line-height: 1.3; color: #000; max-width: 100%;
}
body.m2 .m2-pd .m2-vp-fact small { font-size: 11.5px; font-weight: 600; color: #475569; }
body.m2 .m2-pd .m2-vp-fact b { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
body.m2 .m2-pd .m2-vp-fact em { font-style: normal; font-size: 11px; font-weight: 700; color: #c81e14; }
body.m2 .m2-pd .m2-vp-fact.out b { color: #5c636e; text-decoration: line-through; }
body.m2 .m2-pd .m2-vp-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
body.m2 .m2-pd .m2-vp-dot.light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }

body.m2 .m2-pd .m2-vp { margin: 0 0 18px; }
body.m2 .m2-pd .m2-vp + .m2-pp-qty { margin-top: 2px; }
body.m2 .m2-pd .m2-vp-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0 0 10px; font-size: 13px; line-height: 1.3; color: #000; }
body.m2 .m2-pd .m2-vp-head .k { flex: none; font-weight: 800; letter-spacing: -.005em; }
body.m2 .m2-pd .m2-vp-head b { min-width: 0; font-weight: 600; color: #373d47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-pd .m2-vp-head b:not(:empty)::before { content: "·"; margin-right: 8px; color: #9aa1aa; font-weight: 700; }
body.m2 .m2-pd .m2-vp-head small { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 600; color: #5c636e; }

body.mp2.m2 .m2-pd .m2-vp-opts { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
body.mp2.m2 .m2-pd .m2-vp-opts.tiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
body.mp2.m2 .m2-pd .m2-vp-opts .mp-var-chip.m2-vp-opt {
    position: relative; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: auto !important; height: auto !important; min-width: 48px !important; min-height: 40px !important; margin: 0 !important;
    padding: 7px 14px !important; border: 1px solid #d5d9de !important; border-radius: 10px !important;
    background: #fff !important; color: #000 !important; box-shadow: none !important; opacity: 1 !important;
    font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important;
    text-align: center !important; text-decoration: none !important; cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
body.m2 .m2-pd .m2-vp-tx { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
body.m2 .m2-pd .m2-vp-tx .nm { overflow-wrap: anywhere; }
body.m2 .m2-pd .m2-vp-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1px 6px; font-size: 10.5px; font-weight: 600; color: #5c636e; }
body.m2 .m2-pd .m2-vp-mod { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.m2 .m2-pd .m2-vp-flag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 700; }
body.m2 .m2-pd .m2-vp-flag.low { color: #b45309; }
body.m2 .m2-pd .m2-vp-flag.out { color: #5c636e; }
body.m2 .m2-pd .m2-vp-tick {
    position: absolute; top: 7px; right: 8px; font-size: 14px; line-height: 1; color: var(--m2-brand);
    opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
body.m2 .m2-pd .m2-vp-opts:not(.tiles) .m2-vp-tick { display: none; }

/* tiles: longer values, left-aligned, tick on the chosen one */
body.mp2.m2 .m2-pd .m2-vp-opts.tiles .mp-var-chip.m2-vp-opt {
    justify-content: flex-start !important; align-items: flex-start !important; min-width: 0 !important;
    padding: 10px 30px 10px 12px !important; border-radius: 12px !important; text-align: left !important; font-weight: 600 !important;
}
body.m2 .m2-pd .m2-vp-opts.tiles .m2-vp-tx { align-items: flex-start; }
body.m2 .m2-pd .m2-vp-opts.tiles .m2-vp-meta { justify-content: flex-start; font-size: 11px; }
body.m2 .m2-pd .m2-vp-opts.tiles .m2-vp-sw { width: 18px; height: 18px; margin-top: 1px; }

/* swatches: a colour circle with its name underneath */
body.mp2.m2 .m2-pd .m2-vp-opts.swatches { gap: 6px 10px !important; }
body.mp2.m2 .m2-pd .m2-vp-opts.swatches .mp-var-chip.m2-vp-opt {
    flex-direction: column !important; gap: 5px !important; min-width: 56px !important; max-width: 84px; min-height: 0 !important;
    padding: 4px 2px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important;
    font-size: 11.5px !important; font-weight: 600 !important; color: #373d47 !important;
}
body.m2 .m2-pd .m2-vp-opts.swatches .m2-vp-sw { width: 38px; height: 38px; transition: box-shadow .15s, transform .15s; }
body.mp2.m2 .m2-pd .m2-vp-opts.swatches .mp-var-chip.m2-vp-opt.active { background: transparent !important; box-shadow: none !important; color: #000 !important; font-weight: 800 !important; }
body.m2 .m2-pd .m2-vp-opts.swatches .m2-vp-opt.active .m2-vp-sw { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m2-brand); }
body.m2 .m2-pd .m2-vp-opts.swatches .m2-vp-opt[disabled] .m2-vp-sw { opacity: .35; background-image: linear-gradient(135deg, transparent 46%, #5c636e 47%, #5c636e 53%, transparent 54%) !important; }

/* short values and mixed groups: a swatch dot sits inside the chip */
body.m2 .m2-pd .m2-vp-sw { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
body.m2 .m2-pd .m2-vp-sw.light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
body.m2 .m2-pd .m2-vp-sw.none { background: repeating-linear-gradient(135deg, #fff 0 3px, #e3e6ea 3px 5px); box-shadow: inset 0 0 0 1px #d5d9de; }
body.m2 .m2-pd .m2-vp-opts.swatches .m2-vp-sw.light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
@media (hover: hover) {
    body.mp2.m2 .m2-pd .m2-vp-opts:not(.swatches) .mp-var-chip.m2-vp-opt:not([disabled]):not(.active):hover { border-color: #8a9099 !important; }
    body.m2 .m2-pd .m2-vp-opts.swatches .m2-vp-opt:not([disabled]):not(.active):hover .m2-vp-sw { transform: scale(1.06); }
}
body.mp2.m2 .m2-pd .m2-vp-opts .mp-var-chip.m2-vp-opt:focus-visible { outline: 2px solid var(--m2-brand) !important; outline-offset: 2px; }
/* chosen */
body.mp2.m2 .m2-pd .m2-vp-opts:not(.swatches) .mp-var-chip.m2-vp-opt.active {
    border-color: var(--m2-brand) !important; background: color-mix(in srgb, var(--m2-brand) 8%, #fff) !important;
    box-shadow: inset 0 0 0 1px var(--m2-brand) !important; color: #000 !important;
}
body.m2 .m2-pd .m2-vp-opt.active .m2-vp-tick { opacity: 1; transform: none; }
body.m2 .m2-pd .m2-vp-opts:not(.swatches) .m2-vp-opt.active .m2-vp-sw { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--m2-brand); }
/* sold out */
body.mp2.m2 .m2-pd .m2-vp-opts:not(.swatches) .mp-var-chip.m2-vp-opt[disabled] {
    border-style: dashed !important; border-color: #cfd4da !important; background: #f7f8f9 !important;
    color: #5c636e !important; cursor: not-allowed;
}
body.mp2.m2 .m2-pd .m2-vp-opts.swatches .mp-var-chip.m2-vp-opt[disabled] { cursor: not-allowed; color: #5c636e !important; }
body.m2 .m2-pd .m2-vp-opt[disabled] .nm { color: #5c636e; text-decoration: line-through; text-decoration-color: rgba(92, 99, 110, .6); }
body.m2 .m2-pd .m2-vp-opts:not(.swatches) .m2-vp-opt[disabled] .m2-vp-sw { opacity: .4; }

body.m2 .m2-pd .m2-pp-qty { margin-top: 0; padding-top: 14px; border-top: 1px solid #f0f1f3; }
body.m2 .m2-pd .m2-pp-buy > .m2-pp-qty:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body.m2 .m2-pd .m2-pp-qty span { font-size: 13px; font-weight: 700; color: #000; }
body.m2 .m2-pd .m2-pp-qty .m2-stepper { height: 40px; border-color: #d5d9de; }
body.m2 .m2-pd .m2-pp-qty .m2-stepper button { width: 42px; font-size: 16px; }
body.mp2.m2 .m2-pd .m2-pp-qty .m2-stepper input { width: 38px; font-size: 14px !important; }

/* Add to cart is amber, Buy now takes the admin's button colour */
body.m2 .m2-pp-desk-actions .m2-b.cart,
body.m2 .m2-pp-bar .m2-b.cart {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important; border: 0 !important; color: #000 !important;
}
body.m2 .m2-pp-desk-actions .m2-b.cart:active,
body.m2 .m2-pp-bar .m2-b.cart:active { background: #f59e0b !important; }

/* ---- trust tiles: three columns split by hairlines, colour in the icons ---- */
body.m2 .m2-pd-trust { background: #fff; padding: 12px var(--m2-pad); margin-top: 8px; }
body.m2 .m2-pd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.m2 .m2-pd-tile {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 44px;
    padding: 6px 6px 8px; border: 0; border-radius: 12px; background: transparent; text-align: center; cursor: pointer;
}
body.m2 .m2-pd-tile + .m2-pd-tile { box-shadow: -1px 0 0 #eef0f2; border-radius: 0; }
body.m2 .m2-pd-tile:active { background: #f7f8f9; }
body.m2 .m2-pd-tile .ic { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
body.m2 .m2-pd-tile b { font-size: 12px; font-weight: 700; color: #000; }
body.m2 .m2-pd-tile small { font-size: 11px; line-height: 1.3; color: #5c636e; }
body.m2 .m2-pd-tile.blue .ic { background: var(--m2-blue-soft); color: var(--m2-blue); }
body.m2 .m2-pd-tile.purple .ic { background: var(--m2-purple-soft); color: var(--m2-purple); }
body.m2 .m2-pd-tile.green .ic { background: var(--m2-brand-soft); color: var(--m2-brand); }
body.m2 .m2-pd-policy {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px 12px;
    border: 0; border-radius: 12px; background: #f7f8f9; text-align: left; cursor: pointer; font-size: 12px; color: #000; line-height: 1.45;
}
body.m2 .m2-pd-policy > i:first-child { color: var(--m2-blue); font-size: 15px; flex: none; }
body.m2 .m2-pd-policy span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.m2 .m2-pd-policy > .bi-chevron-right { color: #8a9099; font-size: 11px; flex: none; }

/* ---- seller: the logo in the store's own colour, a faint tint behind ---- */
body.m2 .m2-pd .m2-pp-seller {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--st, var(--m2-brand)) 8%, #fff) 0%, #fff 60%);
}
body.m2 .m2-pd .m2-pp-store { flex: 1 1 210px; min-width: 0; }
body.m2 .m2-pd .m2-pp-store-logo { width: 46px; height: 46px; border-radius: 13px; font-size: 17px; box-shadow: 0 3px 10px color-mix(in srgb, var(--st, var(--m2-brand)) 26%, transparent); }
body.m2 .m2-pd .m2-pp-store .k { display: block; font-size: 11px; font-weight: 600; color: #5c636e; }
body.m2 .m2-pd .m2-pp-store b { display: flex; align-items: flex-start; gap: 4px; margin: 1px 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #000; }
body.m2 .m2-pd .m2-pp-store b span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.m2 .m2-pd .m2-pp-store small:not(.k) { font-size: 11.5px; }
body.m2 .m2-pd .m2-pp-seller .m2-visit {
    flex: none; gap: 6px !important; min-height: 40px; border-radius: 999px;
    background: #fff !important; color: var(--m2-brand) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m2-brand) 30%, #fff); padding: 0 14px !important; font-size: 12.5px; font-weight: 700;
}
body.m2 .m2-pd .m2-pp-seller .m2-visit i { font-size: 13px; }
body.m2 .m2-pd .m2-pp-seller .m2-visit .bi-chevron-right { font-size: 10px; }

/* ---- about this item + specifications ---- */
body.m2 .m2-pd .m2-pp-card { padding-top: 16px; padding-bottom: 16px; }
body.m2 .m2-pd .m2-pp-card h2 { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; }
body.m2 .m2-pp-h { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
body.m2 .m2-pp-h .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12.5px; flex: none; }
body.m2 .m2-pd-specs { margin-top: 18px; }
body.m2 .m2-pd .m2-pp-desc { font-size: 13.5px; line-height: 1.65; color: #000; }
body.m2 .m2-pd .m2-pp-desc.clamp { -webkit-line-clamp: 6; }
body.m2 .m2-pd .m2-pd-desc .m2-linkbtn { margin-top: 6px; font-size: 13px; }
body.m2 .m2-pd .m2-pp-spec { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 0; margin: 0; border: 0; font-size: 13px; }
body.m2 .m2-pd .m2-pp-spec dt, body.m2 .m2-pd .m2-pp-spec dd { padding: 10px 0; border-top: 1px solid #eef0f2; }
body.m2 .m2-pd .m2-pp-spec dt { padding-right: 12px; color: #5c636e; font-weight: 500; }
body.m2 .m2-pd .m2-pp-spec dd { font-weight: 600; color: #000; overflow-wrap: anywhere; }
body.m2 .m2-pd .m2-pp-spec dt:first-of-type, body.m2 .m2-pd .m2-pp-spec dd:first-of-type { border-top: 0; padding-top: 2px; }

/* ---- ratings and reviews: a calm summary, reviews split by hairlines ---- */
body.m2 .m2-rv-sum { gap: 14px; margin-bottom: 6px; padding: 0 0 14px; border-radius: 0; background: transparent; border-bottom: 1px solid #eef0f2; }
body.m2 .m2-rv-score {
    flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-content: center; text-align: center;
    background: var(--m2-amber-soft); color: #000; box-shadow: none;
}
body.m2 .m2-rv-score b { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #000; }
body.m2 .m2-rv-score small { font-size: 10.5px; font-weight: 600; color: #7a4b00; margin-top: 3px; }
body.m2 .m2-rv-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
body.m2 .m2-rv-meta .stars { font-size: 14px; letter-spacing: 1px; }
body.m2 .m2-rv-meta small { font-size: 12.5px; font-weight: 600; color: #000; }
body.m2 .m2-rv-only { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #e3f6ec; color: #047857; font-size: 11px; font-weight: 700; }
body.mp2.m2 .m2-pd #mp-product-review-list { gap: 0; }
body.mp2.m2 .m2-pd #mp-product-review-list > .m2-rv-item { background: transparent !important; border-radius: 0 !important; padding: 14px 0 !important; border-top: 1px solid #eef0f2 !important; font-size: 13px !important; }
body.mp2.m2 .m2-pd #mp-product-review-list > .m2-rv-item:first-child { border-top: 0 !important; }
body.mp2.m2 .m2-pd #mp-product-review-list > .m2-rv-empty { background: #f7f8f9 !important; padding: 12px !important; border-radius: 12px !important; }
body.m2 .m2-rv-item .m2-rv-top { display: flex; align-items: center; gap: 10px; }
body.m2 .m2-rv-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--m2-blue-soft); color: var(--m2-blue); font-size: 14px; }
body.m2 .m2-rv-item:nth-child(2) .m2-rv-av { background: var(--m2-purple-soft); color: var(--m2-purple); }
body.m2 .m2-rv-item:nth-child(3) .m2-rv-av { background: var(--m2-pink-soft); color: var(--m2-pink); }
body.m2 .m2-rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
body.m2 .m2-rv-who b { font-size: 12.5px; font-weight: 700; color: #000; }
body.m2 .m2-rv-who .stars { color: var(--m2-star); font-size: 10.5px; letter-spacing: 1px; }
body.m2 .m2-rv-top time { flex: none; font-size: 11.5px; color: #5c636e; }
body.m2 .m2-rv-item p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #000; }
body.m2 .m2-rv-empty { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #373d47; }
body.m2 .m2-rv-empty i { font-size: 16px; color: var(--m2-pink); }
body.m2 .m2-pp-rateit { margin-top: 8px; min-height: 44px; }

/* ---- related: a grid, two full rows for the width ---- */
body.m2 .m2-pp-related { margin-top: 8px; }
body.m2 .m2-pp-related .m2-sec-title { display: flex; font-size: 15px; }
@media (max-width: 899px) { body.m2 .m2-pd-grid > :nth-child(n+7) { display: none; } }
@media (min-width: 900px) and (max-width: 1179px) { body.m2 .m2-pd-grid > :nth-child(n+9) { display: none; } }

/* ---- phone buy bar: live price, Add to cart, Buy now ---- */
body.m2 .m2-pp-bar { gap: 8px; padding: 8px 12px; }
body.m2 .m2-pp-bar-price { flex: none; max-width: 32%; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
body.m2 .m2-pp-bar-price b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-pp-bar-price.sale b { color: var(--m2-deal); }
body.m2 .m2-pp-bar-price s, body.m2 .m2-pp-bar-price small { font-size: 11px; color: #5c636e; white-space: nowrap; }
body.m2 .m2-pp-bar .m2-b { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px !important; gap: 5px !important; white-space: nowrap; }
body.m2 .m2-pp-bar .m2-b i { font-size: 14.5px; }
body.m2 .m2-pp-bar .m2-b.cart .m2-pp-cartbadge { top: -7px; right: 4px; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 359px) {
    body.m2 .m2-pp-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
    body.m2 .m2-pp-bar-price b { font-size: 14.5px; }
    body.m2 .m2-pp-bar .m2-b { padding: 0 8px !important; font-size: 12.5px !important; }
    body.m2 .m2-pp-bar .m2-b.cart i { display: none; }
}

@media (max-width: 899px) {
    /* the sheet overlaps the bottom of the picture */
    body.m2 .m2-pd .m2-pp-head {
        position: relative; margin-top: -18px; border-radius: 20px 20px 0 0; overflow: hidden;
        box-shadow: 0 -8px 20px rgba(16, 24, 40, .08);
    }
    body.m2 .m2-pd .m2-pp-dots, body.m2 .m2-pd .m2-pp-count { bottom: 30px; }
    body.m2 .m2-pd .m2-pp-thumbs, body.m2 .m2-pd .m2-pp-count.has-dots { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
    body.m2 .m2-pd-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
    body.m2 .m2-pd-specs { margin-top: 0; }
}

/* ---- large screens ---- */
@media (min-width: 900px) {
    body.m2 .m2-pd { padding-bottom: 24px; }
    body.m2 .m2-pd-crumbs {
        display: flex; align-items: center; gap: 7px; min-width: 0; padding: 16px 2px 12px;
        font-size: 12px; color: #5c636e;
    }
    body.m2 .m2-pd-crumbs button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font: inherit; color: #373d47; cursor: pointer; white-space: nowrap; }
    body.m2 .m2-pd-crumbs button:hover { color: var(--m2-brand); text-decoration: underline; }
    body.m2 .m2-pd-crumbs > i { font-size: 9px; color: #9aa1aa; }
    body.m2 .m2-pd-crumbs span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; font-weight: 600; }

    body.m2 .m2-pd-top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 22px; align-items: start; }
    body.m2 .m2-pd .m2-pp-media { position: sticky; top: 126px; }
    body.m2 .m2-pd .m2-pp-media.has-thumbs { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
    body.m2 .m2-pd .m2-pp-media.has-thumbs .m2-pp-thumbs {
        order: -1; flex-direction: column; gap: 10px; padding: 0 2px 0 0; background: transparent;
        height: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto;
    }
    body.m2 .m2-pd .m2-pp-thumb { width: 70px; height: 70px; border-radius: 14px; border-width: 2px; background: #fff; }
    body.m2 .m2-pd .m2-pp-thumb:not(.active):hover { border-color: #d0d4d9; }
    body.m2 .m2-pd .m2-pp-gal { border-radius: 20px; }
    body.m2 .m2-pd .m2-pp-fab { top: 14px; }
    body.m2 .m2-pd .m2-pp-fab.back { left: 14px; }
    body.m2 .m2-pd .m2-pp-fab.wish { right: 14px; }
    body.m2 .m2-pd .m2-pp-fab.share { right: 60px; }
    body.m2 .m2-pp-nav {
        display: grid; place-items: center; position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
        width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: #000;
        font-size: 15px; cursor: pointer; box-shadow: 0 4px 14px rgba(16, 24, 40, .14); opacity: 0; transition: opacity .15s;
    }
    body.m2 .m2-pp-nav.prev { left: 14px; }
    body.m2 .m2-pp-nav.next { right: 14px; }
    body.m2 .m2-pp-gal:hover .m2-pp-nav, body.m2 .m2-pp-nav:focus-visible { opacity: 1; }
    body.m2 .m2-pd .m2-pp-dots { display: none; }

    body.m2 .m2-pd-info { display: flex; flex-direction: column; gap: 12px; }
    body.m2 .m2-pd-info > * { margin-top: 0 !important; }
    body.m2 .m2-pd .m2-pp-head { border-radius: 18px; padding: 22px 24px; }
    body.m2 .m2-pd .m2-pp-head .m2-pp-title { order: -1; padding: 0; }
    body.m2 .m2-pd .m2-pp-head .m2-pp-title h1 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
    /* the price sits under a hairline, no box of its own */
    body.m2 .m2-pd .m2-pp-head .m2-pp-price { margin-top: 16px; padding: 16px 0 0 !important; border-top: 1px solid #eef0f2; background: transparent; }
    body.m2 .m2-pd .m2-pp-head .m2-pp-dealbar { margin: 0 0 8px; }
    body.mp2.m2 .m2-pd #mp2-pprice { font-size: 30px !important; }
    body.m2 .m2-pd .m2-pp-head .m2-pp-was { font-size: 14.5px; }

    body.m2 .m2-pd .m2-pp-buy,
    body.m2 .m2-pd .m2-pp-seller { border-radius: 18px; padding: 20px 24px; }
    body.mp2.m2 .m2-pd .m2-vp-opts.tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    body.m2 .m2-pd .m2-pp-desk-actions { gap: 12px; margin-top: 18px; }
    body.m2 .m2-pd .m2-pp-desk-actions .m2-b { min-height: 50px !important; font-size: 14.5px !important; }
    body.m2 .m2-pd-trust { border-radius: 18px; padding: 14px 16px; }
    body.m2 .m2-pd-tile { padding: 8px 8px 10px; }
    body.m2 .m2-pd-tile b { font-size: 12.5px; }
    body.m2 .m2-pd-tile small { font-size: 11.5px; }

    body.m2 .m2-pd-about {
        display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px;
        margin-top: 18px; padding: 24px 28px; border-radius: 18px;
    }
    body.m2 .m2-pd-specs { margin-top: 0; }
    body.m2 .m2-pd .m2-pp-desc { font-size: 14px; }
    body.m2 .m2-pd .m2-pp-card h2 { font-size: 15.5px; }
    body.m2 .m2-pd-reviews { margin-top: 14px; padding: 24px 28px; border-radius: 18px; }
    body.m2 .m2-pd-rv { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "sum list" "rate list"; gap: 12px 36px; align-items: start; }
    body.m2 .m2-pd-rv > .m2-rv-sum { grid-area: sum; margin: 0; }
    body.m2 .m2-pd-rv > #mp-product-review-list { grid-area: list; }
    body.m2 .m2-pd-rv > .m2-pp-rateit { grid-area: rate; margin-top: 0; }
    body.m2 .m2-pp-related { margin-top: 14px; padding: 20px 24px 22px; border-radius: 18px; }
    body.m2 .m2-pp-related .m2-sec-title { font-size: 16px; }
}

/* ==========================================================================
   Checkout redesign (.m2-cx)
   --------------------------------------------------------------------------
   Calm and compact: a white app bar with a slim step indicator (Items,
   Delivery, Payment, Review — they tick themselves off and jump to their
   card), then plain white step cards. Colour stays where it guides: each
   step's number and icons in its own tint (items purple, delivery orange,
   payment blue, review in the brand colour), the step indicator and the
   total band in the brand colour, the method colours in the payment icons.
   Phones: type ~13–14px, card titles 15px, the total 20px; the total and
   Place order stay pinned to the bottom. The indicator, the total and the
   button follow the admin theme (--m2-brand*, --m2-btn). Every mp2-co-*
   id, #mp2-pay-methods, #m2-co-del-hint, #mp2-checkout-map and
   #mp2-place-order (.btn-text/.btn-loading) is unchanged.
   ========================================================================== */

/* ---- header: white app bar + a slim step indicator ---- */
body.m2 .m2-co .m2-co-top {
    margin: 0; padding: 4px 12px 0 4px; min-height: 48px; border: 0; border-radius: 0;
    background: #fff; color: #000;
}
body.m2 .m2-co .m2-co-top h1 { color: #000; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
body.m2 .m2-co .m2-co-top .m2-icon-btn { width: 44px; height: 44px; color: #000; }
body.m2 .m2-co .m2-co-top .secure {
    padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--m2-brand-soft); color: color-mix(in srgb, var(--m2-brand) 78%, #000);
}
body.m2 .m2-cx-band { position: relative; margin: 0 0 8px; padding: 4px 10px 10px; background: #fff; box-shadow: 0 1px 0 #eceef1; }
body.m2 .m2-cx .m2-co-progress { margin: 0; padding: 0; background: transparent; border-radius: 0; }
body.m2 .m2-cx .m2-co-progress li { color: #5c636e; }
body.m2 .m2-cx .m2-co-progress li button {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 44px; min-width: 44px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
body.m2 .m2-cx .m2-co-progress .dot {
    width: 26px; height: 26px; font-size: 12px;
    background: #f1f2f4; color: #6b7280; box-shadow: none; transition: background .2s, color .2s, box-shadow .2s;
}
body.m2 .m2-cx .m2-co-progress b { font-size: 11px; font-weight: 600; color: #5c636e; }
body.m2 .m2-cx .m2-co-progress li:not(:last-child)::after { top: 12px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 2px; background: #e6e8eb; }
body.m2 .m2-cx .m2-co-progress li.done:not(:last-child)::after { background: var(--m2-brand); }
body.m2 .m2-cx .m2-co-progress li.done .dot { background: var(--m2-brand); color: #fff; }
body.m2 .m2-cx .m2-co-progress li.now .dot { background: var(--m2-brand-soft); color: var(--m2-brand); box-shadow: inset 0 0 0 1.5px var(--m2-brand); }
body.m2 .m2-cx .m2-co-progress li.done b,
body.m2 .m2-cx .m2-co-progress li.now b { color: #000; font-weight: 700; }

/* ---- guest sign-in: one slim tinted row ---- */
body.m2 .m2-cx .m2-co-signin {
    position: relative; gap: 10px; margin: 0 0 8px; padding: 6px 8px 6px 12px; border-radius: 0;
    background: var(--m2-blue-soft); color: #000; font-size: 12.5px; line-height: 1.35; box-shadow: none;
}
body.m2 .m2-cx .m2-co-signin .ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #fff; }
body.m2 .m2-cx .m2-co-signin .ic i { color: var(--m2-blue); font-size: 16px; }
body.m2 .m2-cx .m2-co-signin .m2-linkbtn {
    flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; background: transparent;
    color: #1d4ed8; font-size: 13px; font-weight: 700;
}

/* ---- step cards: white, no coloured edges; the number carries the colour ---- */
body.m2 .m2-cx .m2-co-grid { position: relative; }
body.m2 .m2-cx .m2-cx-step {
    --cx: var(--m2-brand); --cx-soft: var(--m2-brand-soft); --cx-ink: color-mix(in srgb, var(--m2-brand) 80%, #000);
    position: relative; margin: 0 0 8px; padding: 14px var(--m2-pad) 16px; border: 0; border-radius: 0; background: #fff; box-shadow: none;
}
body.m2 .m2-cx .s-items { --cx: var(--m2-purple); --cx-soft: var(--m2-purple-soft); --cx-ink: #6d28d9; }
body.m2 .m2-cx .s-where { --cx: var(--m2-orange); --cx-soft: var(--m2-orange-soft); --cx-ink: #c2410c; }
body.m2 .m2-cx .s-pay { --cx: var(--m2-blue); --cx-soft: var(--m2-blue-soft); --cx-ink: #1d4ed8; }
body.m2 .m2-cx-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; }
body.m2 .m2-cx-num {
    flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--cx-soft); color: var(--cx-ink); font-size: 13px; font-weight: 700; box-shadow: none;
}
body.m2 .m2-cx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
body.m2 .m2-cx-t .m2-cx-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.m2 .m2-cx-t b { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #000; }
body.m2 .m2-cx-t em { margin-top: 1px; font-style: normal; font-size: 12px; color: #5c636e; }
body.m2 .m2-cx .m2-co-count { min-width: 20px; height: 20px; margin-left: 5px; background: var(--cx-soft); color: var(--cx-ink); font-size: 11px; font-weight: 700; }
body.m2 .m2-cx-edit {
    position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
    background: var(--cx-soft); color: var(--cx-ink); font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: none;
}
body.m2 .m2-cx-edit::before { content: ""; position: absolute; inset: -5px -2px; }
body.m2 .m2-cx .m2-cx-step, body.m2 .m2-cx .m2-cx-sub { scroll-margin-top: 70px; }
body.m2 .m2-cx-flash { animation: m2cxFlash .9s ease-out 1; }
@keyframes m2cxFlash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cx, var(--m2-brand)) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* ---- step 1: items ---- */
body.m2 .m2-cx-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
body.m2 .m2-cx-strip::-webkit-scrollbar { display: none; }
body.m2 .m2-cx-strip .im { position: relative; flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #f5f6f7; display: grid; place-items: center; color: #b3b9c1; }
body.m2 .m2-cx-strip .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.m2 .m2-cx-strip .im em { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .66); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; }
body.m2 .m2-cx-strip .more { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--cx-soft); color: var(--cx-ink); font-size: 12.5px; font-weight: 700; }
body.m2 .m2-cx-items .m2-co-store { display: none; }
body.m2 .m2-cx-items.open .m2-co-store { display: block; }
body.m2 .m2-cx-items.open .m2-cx-strip { display: none; }
/* "Show all n items": the card's own footer row, not a box inside it */
body.m2 .m2-cx-more {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: calc(100% + 2 * var(--m2-pad)); min-height: 44px; margin: 12px calc(-1 * var(--m2-pad)) -16px; padding: 0 var(--m2-pad);
    border: 0; border-top: 1px solid #f0f1f3; border-radius: 0; background: transparent;
    color: var(--cx-ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
body.m2 .m2-cx-more i { transition: transform .2s; }
body.m2 .m2-cx-more.open i { transform: rotate(180deg); }
body.m2 .m2-cx .m2-co-store { padding: 12px 0 2px; border-top: 1px solid #f0f1f3; }
body.m2 .m2-cx .m2-cx-strip + .m2-co-store { padding-top: 0; border-top: 0; }
body.m2 .m2-cx .m2-co-store-h { gap: 7px; min-width: 0; margin-bottom: 4px; font-size: 13px; font-weight: 700; }
body.m2 .m2-cx .m2-co-store-h .sic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-soft); color: var(--cx-ink); font-size: 11px; }
body.m2 .m2-cx .m2-co-store-h .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-cx .m2-co-store-h .n { flex: none; white-space: nowrap; font-size: 12px; font-weight: 500; }
body.m2 .m2-cx .m2-co-item { align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 0; }
body.m2 .m2-cx .m2-co-item .im { width: 48px; height: 48px; border-radius: 10px; }
body.m2 .m2-cx .m2-co-item .tx b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.35; }
body.m2 .m2-cx .m2-co-item .tx .var { display: block; max-width: 100%; margin-top: 2px; padding: 0; border-radius: 0; background: none; color: #5c636e; font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-cx .m2-co-item .tx small { display: block; margin-top: 2px; font-size: 12px; color: #5c636e; }
body.m2 .m2-cx .m2-co-item .amt { padding-top: 1px; font-size: 13px; font-weight: 700; }

/* ---- step 2: delivery details ---- */
body.m2 .m2-cx-sub + .m2-cx-sub { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f1f3; }
body.m2 .m2-cx .m2-cx-sub .m2-co-h { gap: 8px; margin: 0 0 10px; }
body.m2 .m2-cx .m2-cx-sub .m2-co-h .ic { width: 28px; height: 28px; border-radius: 50%; font-size: 13px; }
body.m2 .m2-cx .m2-cx-sub .m2-co-h .t { font-size: 14px; font-weight: 700; }
body.m2 .m2-cx .m2-cx-sub .m2-co-h .t small { font-size: 12px; font-weight: 400; }
/* the little sub-step markers only show once a part is done, as a tick */
body.m2 .m2-cx .m2-cx-sub .m2-co-h .step:not(.done) { display: none; }
body.m2 .m2-cx .m2-cx-sub .m2-co-h .step.done { width: 22px; height: 22px; background: #047857; color: #fff; font-size: 12px; }
body.m2 .m2-cx .m2-addr-pick { gap: 8px; margin-bottom: 10px; }
body.m2 .m2-cx .m2-addr-opt { width: 200px; padding: 9px 12px; border-width: 1px; border-radius: 12px; }
body.m2 .m2-cx .m2-addr-opt b { min-width: 0; font-size: 13px; font-weight: 700; }
body.m2 .m2-cx .m2-addr-opt b span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-cx .m2-addr-opt b i { color: var(--m2-orange); }
body.m2 .m2-cx .m2-addr-opt small { font-size: 12px; }
body.m2 .m2-cx .m2-addr-opt.on { border-color: var(--m2-orange); background: color-mix(in srgb, var(--m2-orange) 6%, #fff); box-shadow: inset 0 0 0 1px var(--m2-orange); }
body.m2 .m2-cx .m2-addr-opt.new { width: 120px; color: #c2410c; font-size: 12.5px; }
body.mp2.m2 .m2-cx .m2-loc-row .m2-b { min-height: 44px !important; padding: 0 16px !important; font-size: 13px !important; }
body.m2 .m2-cx .m2-cx-find { background: var(--m2-orange-soft) !important; color: #c2410c !important; }
body.mp2.m2 .m2-cx .m2-loc-actions { gap: 8px; margin-top: 10px; }
body.mp2.m2 .m2-cx .m2-loc-actions .m2-b { min-height: 40px !important; padding: 0 14px !important; font-size: 12.5px !important; font-weight: 600 !important; }
body.m2 .m2-cx .m2-cx-gps { background: var(--m2-blue-soft) !important; color: #1d4ed8 !important; }
body.m2 .m2-cx .m2-cx-pin { background: var(--m2-purple-soft) !important; color: #6d28d9 !important; }
/* the chosen place: plain text until set, then a soft brand line */
body.mp2.m2 .m2-cx .mp-selected-location { margin: 8px 0 0 !important; padding: 6px 2px !important; background: transparent !important; font-size: 12.5px !important; color: #373d47 !important; }
body.mp2.m2 .m2-cx .mp-selected-location.is-set { padding: 9px 12px !important; border-radius: 12px !important; background: var(--m2-brand-soft) !important; color: #000 !important; }
/* isolate keeps Leaflet's panes (z-index 400+) under the pinned bars */
body.m2 .m2-cx .m2-co-map { position: relative; isolation: isolate; margin-top: 8px; border: 1px solid #e6e8eb; border-radius: 14px; }
body.m2 .m2-cx .m2-co-map small { padding: 7px 10px; font-size: 11.5px; background: #fff; }
body.m2 .m2-cx .m2-co-map small i { color: var(--m2-orange); }
body.m2 .m2-cx .m2-co-2 { gap: 10px; }
body.mp2.m2 .m2-cx .m2-co-2 .input-group label { font-size: 12.5px !important; font-weight: 600 !important; color: #000 !important; }
body.m2 .m2-cx .m2-co-more summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 2px; border-radius: 0; background: transparent; color: #1d4ed8; font-size: 13px; font-weight: 600; }
body.m2 .m2-cx .m2-co-more summary span { flex: 1; min-width: 0; }
body.m2 .m2-cx .m2-co-more .m2-cx-chev { flex: none; font-size: 12px; transition: transform .2s; }
body.m2 .m2-cx .m2-co-more[open] .m2-cx-chev { transform: rotate(180deg); }
/* a field that needs attention stays red while it has focus */
body.mp2.m2 .m2-cx input.m2-invalid,
body.mp2.m2 .m2-cx input.m2-invalid:focus { border-color: var(--m2-deal) !important; box-shadow: 0 0 0 3px rgba(225, 37, 27, .16) !important; }
/* any select that is ever shown here gets a chevron */
body.mp2.m2 .m2-cx select:not([hidden]) {
    -webkit-appearance: none !important; appearance: none !important; padding-right: 36px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px !important;
}

/* ---- step 3: payment — each method in its own colour ---- */
body.mp2.m2 .m2-cx #mp2-pay-methods { gap: 8px !important; }
body.mp2.m2 .m2-cx .mp2-pay-btn {
    --pm: var(--m2-blue); min-height: 56px !important; gap: 12px !important; padding: 9px 12px !important;
    border: 1px solid #e3e6ea !important; border-radius: 12px !important;
}
body.mp2.m2 .m2-cx .mp2-pay-btn[data-value="hubtel"] { --pm: #e24329; }
body.mp2.m2 .m2-cx .mp2-pay-btn[data-value="paystack"] { --pm: #0ba4db; }
body.mp2.m2 .m2-cx .mp2-pay-btn[data-value="cod"] { --pm: #10b981; }
body.mp2.m2 .m2-cx .mp2-pay-btn > i:first-child {
    flex: none; width: 36px !important; height: 36px; border-radius: 50%; display: grid !important; place-items: center;
    background: color-mix(in srgb, var(--pm) 12%, #fff); font-size: 16px !important;
}
body.mp2.m2 .m2-cx .mp2-pay-img { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: #fff; box-shadow: inset 0 0 0 1px #eceef1; }
body.mp2.m2 .m2-cx .mp2-pay-label { font-size: 13.5px !important; font-weight: 700 !important; }
body.mp2.m2 .m2-cx .mp2-pay-info { flex: 1 !important; min-width: 0 !important; }
body.mp2.m2 .m2-cx .mp2-pay-desc { font-size: 12px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35 !important; }
body.mp2.m2 .m2-cx .mp2-pay-check { font-size: 18px !important; }
/* the chosen tile takes the step's blue; the method keeps its colour in its icon */
body.mp2.m2 .m2-cx .mp2-pay-btn.active {
    border-color: var(--cx) !important; background: color-mix(in srgb, var(--cx) 5%, #fff) !important;
    box-shadow: inset 0 0 0 1px var(--cx) !important;
}
body.mp2.m2 .m2-cx .mp2-pay-btn.active .mp2-pay-check { color: var(--cx) !important; }
body.mp2.m2 .m2-cx .mp2-pay-note { background: var(--m2-blue-soft) !important; color: #1e3a8a !important; border-radius: 12px !important; font-size: 12px !important; }
body.mp2.m2 .m2-cx .mp2-pay-note > i { color: var(--m2-blue) !important; }
body.mp2.m2 .m2-cx .mp2-pay-note-btn { color: #1d4ed8 !important; font-size: 12px !important; }

/* ---- step 4: review and place order ---- */
/* the recap is a list split by hairlines, not three boxes */
body.m2 .m2-cx-recap { display: flex; flex-direction: column; gap: 0; margin: -4px 0 12px; }
body.m2 .m2-cx-rc {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-radius: 0;
    background: transparent; text-align: left; cursor: pointer;
}
body.m2 .m2-cx-rc + .m2-cx-rc { border-top: 1px solid #f0f1f3; }
body.m2 .m2-cx-rc .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
body.m2 .m2-cx-rc.where .ic { background: var(--m2-orange-soft); color: var(--m2-orange); }
body.m2 .m2-cx-rc.who .ic { background: var(--m2-teal-soft); color: var(--m2-teal); }
body.m2 .m2-cx-rc.pay .ic { background: var(--m2-blue-soft); color: var(--m2-blue); }
body.m2 .m2-cx-rc .tx { flex: 1; min-width: 0; line-height: 1.3; }
body.m2 .m2-cx-rc .tx small { display: block; font-size: 11.5px; font-weight: 500; color: #5c636e; }
body.m2 .m2-cx-rc .tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; color: #000; overflow-wrap: anywhere; }
body.m2 .m2-cx-rc > .bi-chevron-right { flex: none; font-size: 11px; color: #8a9099; }
body.m2 .m2-cx-rc.todo { background: transparent; box-shadow: none; }
body.m2 .m2-cx-rc.todo .tx b { color: #b45309; font-weight: 600; }
body.mp2.m2 .m2-cx .m2-co-coupon .m2-input { border: 1px solid #d5d9de !important; border-style: solid !important; background: #fff !important; }
body.mp2.m2 .m2-cx .m2-co-coupon .m2-b { min-height: 44px !important; padding: 0 16px !important; background: var(--m2-amber-soft) !important; color: #92400e !important; font-size: 13px !important; }
body.m2 .m2-cx .m2-co-summary .m2-co-sum { margin-top: 12px; padding: 0; border-radius: 0; background: transparent; overflow: visible; }
body.m2 .m2-cx .m2-co-sum > div { padding: 4px 0; font-size: 13px; color: #373d47; }
body.m2 .m2-cx .m2-co-sum > div span:first-child { min-width: 0; }
body.m2 .m2-cx .m2-co-sum > div span:last-child { flex: none; white-space: nowrap; color: #000; }
body.mp2.m2 .m2-cx .mp-tax-lines > div span:first-child { min-width: 0; }
body.mp2.m2 .m2-cx .mp-tax-lines > div span:last-child { flex: none; white-space: nowrap !important; padding-left: 8px; }
/* empty note slots take no room */
body.mp2.m2 .m2-cx .m2-co-sum > .mp-tax-lines:empty,
body.mp2.m2 .m2-cx #mp2-co-coupon-note:empty { display: none !important; }
/* the total band: a soft brand tint, the figure in dark brand */
body.m2 .m2-cx .m2-co-summary .m2-co-sum .grand {
    align-items: center; margin: 10px 0 0; padding: 12px 14px; border: 0; border-radius: 12px;
    background: color-mix(in srgb, var(--m2-brand) 9%, #fff);
}
body.m2 .m2-cx .m2-co-summary .m2-co-sum .grand span:first-child { font-size: 13.5px; font-weight: 700; color: #000; }
body.m2 .m2-cx .m2-co-summary .m2-co-sum .grand span:last-child { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: color-mix(in srgb, var(--m2-brand) 80%, #000); }
body.m2 .m2-cx .m2-co-notes { margin-top: 10px; }
body.m2 .m2-cx .m2-co-notes div { font-size: 12px; color: #373d47; }
/* trust: one quiet line, the colour in the icons */
body.m2 .m2-cx .m2-co-trust { gap: 4px 14px; margin-top: 12px; }
body.m2 .m2-cx .m2-co-trust span { padding: 0; background: none; color: #373d47; font-size: 11.5px; font-weight: 600; }
body.m2 .m2-cx .m2-co-trust .g i { color: #047857; }
body.m2 .m2-cx .m2-co-trust .b i { color: var(--m2-blue); }
body.m2 .m2-cx .m2-co-trust .a i { color: var(--m2-amber); }

/* the bar: pinned on phones, in the review card on large screens */
body.m2 .m2-cx .m2-co-bar { gap: 12px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #eceef1; box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); }
body.m2 .m2-cx .m2-co-bar .sum small { font-size: 11.5px; font-weight: 500; color: #5c636e; }
body.m2 .m2-cx .m2-co-bar .sum b { font-size: 18px; font-weight: 800; color: #000; }
body.mp2.m2 .m2-cx .m2-co-bar #mp2-place-order {
    background: var(--m2-btn, var(--m2-brand)) !important;
    min-height: 46px !important; padding: 0 22px !important; font-size: 14.5px !important; font-weight: 700 !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m2-btn, var(--m2-brand)) 28%, transparent) !important;
}
body.mp2.m2 .m2-cx.m2-cx-ready .m2-co-bar #mp2-place-order { box-shadow: 0 4px 14px color-mix(in srgb, var(--m2-btn, var(--m2-brand)) 40%, transparent) !important; }

/* ---- header currency picker: a chevron says it opens a list ---- */
body.m2 .m2-currency { grid-auto-flow: column; gap: 3px; }
body.m2 .m2-currency::after { content: "\F282"; font-family: "bootstrap-icons" !important; font-size: 9px; font-weight: 400; line-height: 1; }

/* ---- large screens ---- */
/* ---- tablets: the cards float with rounded corners ---- */
@media (min-width: 600px) {
    body.m2 .m2-cx .m2-cx-step { margin: 0 12px 10px; padding: 16px 18px 18px; border-radius: 16px; border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
    body.m2 .m2-cx-more { width: calc(100% + 36px); margin: 12px -18px -18px; padding: 0 18px; border-radius: 0 0 16px 16px; }
    body.m2 .m2-cx .m2-co-signin { margin: 0 12px 10px; border-radius: 14px; }
}

/* ---- large screens ---- */
@media (min-width: 900px) {
    body.m2 .m2-cx { max-width: 1120px; padding: 16px 20px 28px; }
    body.m2 .m2-co .m2-co-top { border-radius: 18px 18px 0 0; padding: 10px 20px 0 10px; }
    body.m2 .m2-co .m2-co-top h1 { font-size: 20px; }
    body.m2 .m2-cx-band { margin: 0 0 14px; padding: 6px 80px 14px; border-radius: 0 0 18px 18px; box-shadow: none; }
    body.m2 .m2-cx .m2-co-progress .dot { width: 30px; height: 30px; font-size: 13px; }
    body.m2 .m2-cx .m2-co-progress li:not(:last-child)::after { top: 14px; left: calc(50% + 20px); right: calc(-50% + 20px); }
    body.m2 .m2-cx .m2-co-progress b { font-size: 12px; }
    body.m2 .m2-cx .m2-co-signin { margin: 0 0 14px; padding: 6px 10px 6px 14px; border-radius: 14px; font-size: 13px; }
    body.m2 .m2-cx .m2-co-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; padding: 0; }
    body.m2 .m2-cx .m2-cx-step { margin: 0 0 14px; padding: 20px 22px 22px; border-radius: 18px; }
    body.m2 .m2-cx-head { margin: 0 0 14px; }
    body.m2 .m2-cx-num { width: 28px; height: 28px; font-size: 13.5px; }
    body.m2 .m2-cx-t b { font-size: 16px; }
    body.m2 .m2-cx-t em { font-size: 12.5px; }
    body.m2 .m2-cx .m2-co-item .tx b, body.m2 .m2-cx .m2-cx-rc .tx b { font-size: 13.5px; }
    body.m2 .m2-cx .m2-co-sum > div { font-size: 13.5px; }
    body.m2 .m2-cx .m2-co-summary .m2-co-sum .grand span:last-child { font-size: 22px; }
    body.m2 .m2-cx .m2-co-side { top: 126px; }
    body.m2 .m2-cx .m2-cx-step, body.m2 .m2-cx .m2-cx-sub { scroll-margin-top: 130px; }
    body.m2 .m2-cx-strip, body.m2 .m2-cx-more { display: none; }
    body.m2 .m2-cx-items .m2-co-store { display: block; }
    body.m2 .m2-cx .m2-cx-strip + .m2-co-store { border-top: 0; }
    body.mp2.m2 .m2-cx .m2-co-bar #mp2-place-order { min-height: 50px !important; font-size: 15px !important; }
}

/* ==========================================================================
   Cart facelift (.m2-ct)
   --------------------------------------------------------------------------
   A light header (Cart, the item count, how many stores), then one white
   card per store: a letter badge in the store's colour, the name, the
   count. Each row: picture, name with a remove button beside it, the
   chosen options as small chips, "n left" in amber, the line price and a
   quantity stepper (its ends dim at 1 and at the stock limit). The summary
   (items, stores, delivery at checkout, the subtotal in a soft brand band,
   Checkout) is sticky beside the list on large screens; on phones it sits
   under the list and the subtotal + Checkout bar stays pinned above the
   bottom navigation. The empty cart gets a picture, two ways in and three
   shortcuts. Classes the cart functions render with (.m2-cgroup, .m2-citem*,
   .m2-stepper, .m2-summary, .m2-cartbar) are kept; this block restyles them
   only inside .m2-ct.
   ========================================================================== */

body.m2 .m2-ct-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 8px; padding: 14px var(--m2-pad) 12px; background: #fff;
}
body.m2 .m2-ct-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
body.m2 .m2-ct-title h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #000; }
body.m2 .m2-ct-count { font-size: 13px; font-weight: 500; color: #5c636e; white-space: nowrap; }
body.m2 .m2-ct-meta {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    background: var(--m2-brand-soft); color: color-mix(in srgb, var(--m2-brand) 80%, #000); font-size: 12px; font-weight: 600;
}

/* one card per store */
body.m2 .m2-ct .m2-ct-group { margin: 0 0 8px; padding: 0; background: #fff; }
body.m2 .m2-ct .m2-ct-ghead {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px var(--m2-pad);
    border: 0; border-bottom: 1px solid #f0f1f3; background: transparent; text-align: left; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: #000;
}
body.m2 .m2-ct-logo {
    flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--st, var(--m2-brand)) 13%, #fff); color: var(--st, var(--m2-brand)); font-size: 13px; font-weight: 800;
}
body.m2 .m2-ct-gname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
body.m2 .m2-ct-gname b { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-ct .m2-ct-ghead .count { flex: none; margin-left: 0; font-size: 12px; font-weight: 500; color: #5c636e; }
body.m2 .m2-ct .m2-ct-ghead .bi-chevron-right { flex: none; margin-left: 0; font-size: 11px; color: #8a9099; }

/* item rows */
body.m2 .m2-ct .m2-ct-item { display: flex; gap: 12px; padding: 12px var(--m2-pad) 14px; border-top: 1px solid #f0f1f3; }
body.m2 .m2-ct .m2-ct-ghead + .m2-ct-item { border-top: 0; }
body.m2 .m2-ct .m2-ct-item .m2-citem-img {
    width: 84px; height: 84px; border-radius: 12px; background: #f5f6f7;
    display: grid; place-items: center; color: #b3b9c1; font-size: 22px;
}
body.m2 .m2-ct .m2-ct-item .m2-citem-info { gap: 5px; }
body.m2 .m2-ct-top { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
body.m2 .m2-ct .m2-ct-item .m2-citem-name { flex: 1; min-width: 0; padding: 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #000; }
body.m2 .m2-ct .m2-ct-item .m2-citem-del {
    position: relative; top: auto; right: auto; flex: none; width: 36px; height: 36px; margin: -7px -8px 0 0;
    display: grid; place-items: center; border-radius: 50%; color: #5c636e; font-size: 15px;
}
body.m2 .m2-ct .m2-ct-item .m2-citem-del::before { content: ""; position: absolute; inset: -4px; }
@media (hover: hover) { body.m2 .m2-ct .m2-ct-item .m2-citem-del:hover { background: var(--m2-deal-soft); color: var(--m2-deal); } }
body.m2 .m2-ct .m2-ct-item .m2-citem-del:active { background: var(--m2-deal-soft); color: var(--m2-deal); }
body.m2 .m2-ct-opts { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
body.m2 .m2-ct-opts span {
    max-width: 100%; padding: 2px 8px; border-radius: 999px; background: #f3f4f6;
    font-size: 11.5px; line-height: 1.5; color: #373d47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.m2 .m2-ct-opts b { font-weight: 600; color: #000; }
body.m2 .m2-ct .m2-citem-var { font-size: 11.5px; border-radius: 999px; }
body.m2 .m2-ct .m2-citem-low { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #b45309; }
body.m2 .m2-ct .m2-citem-low::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f59e0b; }
/* a line at its bulk price, or one tap from it */
body.m2 .m2-ct .m2-ct-bulk {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 0; border-radius: 999px;
    background: var(--m2-purple-soft); color: #5b21b6; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
body.m2 .m2-ct .m2-ct-bulk.on { background: var(--m2-purple); color: #fff; cursor: default; }
body.m2 .m2-ct .m2-citem-each s { color: #6b7280; }
body.m2 .m2-ct .m2-ct-item .m2-citem-foot { align-items: flex-end; margin-top: auto; padding-top: 4px; }
body.m2 .m2-ct-price { min-width: 0; }
body.m2 .m2-ct .m2-citem-price { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #000; white-space: nowrap; }
body.m2 .m2-ct .m2-citem-each { font-size: 11.5px; color: #5c636e; white-space: nowrap; }
body.m2 .m2-ct .m2-ct-step { height: 40px; border-color: #d5d9de; background: #fff; }
body.m2 .m2-ct .m2-ct-step button { width: 40px; font-size: 17px; font-weight: 500; }
body.m2 .m2-ct .m2-ct-step button.off { color: #b3b9c1; }
body.mp2.m2 .m2-ct .m2-ct-step input { width: 34px; font-size: 14px !important; font-weight: 700; }

/* summary: under the list on phones (Checkout lives in the pinned bar) */
body.m2 .m2-ct .m2-ct-sum {
    display: block; position: static; margin: 0 0 8px; padding: 14px var(--m2-pad) 16px;
    border-radius: 0; background: #fff; box-shadow: none;
}
body.m2 .m2-ct .m2-ct-sum h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #000; }
body.m2 .m2-ct .m2-ct-sum .m2-kv { padding: 5px 0; font-size: 13px; color: #373d47; }
body.m2 .m2-ct .m2-ct-sum .m2-kv b { font-weight: 600; color: #000; white-space: nowrap; }
body.m2 .m2-ct .m2-ct-sum .m2-kv .m2-ct-later { font-weight: 500; color: #5c636e; }
body.m2 .m2-ct .m2-ct-sum .m2-kv.total {
    align-items: center; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: 12px;
    background: color-mix(in srgb, var(--m2-brand) 9%, #fff); font-size: 13.5px; font-weight: 700; color: #000;
}
body.m2 .m2-ct .m2-ct-sum .m2-kv.total b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: color-mix(in srgb, var(--m2-brand) 80%, #000); }
body.m2 .m2-ct .m2-ct-sum > .m2-btn { display: none; }
body.m2 .m2-ct .m2-ct-sum .m2-summary-note { margin-top: 12px; font-size: 12px; line-height: 1.45; align-items: flex-start; }
body.m2 .m2-ct-trust { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; font-weight: 500; color: #373d47; }
body.m2 .m2-ct-trust span { display: inline-flex; align-items: center; gap: 6px; }
body.m2 .m2-ct-trust .g { color: #047857; }
body.m2 .m2-ct-trust .a { color: var(--m2-amber); }
body.m2 .m2-ct-trust .b { color: var(--m2-blue); }

/* the pinned bar on phones */
body.m2 .m2-ct .m2-ct-bar { gap: 12px; padding: 8px var(--m2-pad); border-top: 1px solid #eceef1; box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); }
body.m2 .m2-ct-bar .m2-cartbar-sum small { display: block; font-size: 11.5px; font-weight: 500; color: #5c636e; }
body.m2 .m2-ct-bar .m2-cartbar-sum b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-ct .m2-ct-bar .m2-btn {
    flex: none; min-height: 46px; padding: 0 22px; justify-content: center; font-size: 14.5px; font-weight: 700;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m2-btn, var(--m2-brand)) 28%, transparent);
}

/* the empty cart */
body.m2 .m2-ct-empty { margin: 0 0 8px; padding: 32px 20px 26px; background: #fff; text-align: center; }
body.m2 .m2-ct-art {
    position: relative; width: 108px; height: 108px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 32% 28%, #fff 0%, var(--m2-brand-soft) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m2-brand) 12%, #fff);
}
body.m2 .m2-ct-art i { font-size: 44px; line-height: 1; color: var(--m2-brand); }
body.m2 .m2-ct-art span { position: absolute; border-radius: 50%; }
body.m2 .m2-ct-art .s1 { top: 6px; right: 2px; width: 14px; height: 14px; background: #fbbf24; }
body.m2 .m2-ct-art .s2 { bottom: 10px; left: -2px; width: 10px; height: 10px; background: var(--m2-pink); opacity: .75; }
body.m2 .m2-ct-art .s3 { top: 18px; left: 6px; width: 7px; height: 7px; background: var(--m2-blue); opacity: .7; }
body.m2 .m2-ct-empty h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #000; }
body.m2 .m2-ct-empty p { max-width: 300px; margin: 6px auto 0; font-size: 13.5px; line-height: 1.5; color: #5c636e; }
body.m2 .m2-ct-empty-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
body.m2 .m2-ct-empty-cta .m2-btn { min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700; }
body.m2 .m2-ct-empty-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin: 22px auto 0; }
body.m2 .m2-ct-empty-links button {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 12px 6px;
    border: 0; border-radius: 14px; background: #f7f8f9; color: #000; font-size: 12px; font-weight: 600; cursor: pointer;
}
body.m2 .m2-ct-empty-links button span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m2 .m2-ct-empty-links .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }

@media (max-width: 359px) {
    /* small phones: a slimmer picture and stepper leave room for long prices */
    body.m2 .m2-ct .m2-ct-item { gap: 10px; }
    body.m2 .m2-ct .m2-ct-item .m2-citem-img { width: 72px; height: 72px; }
    body.m2 .m2-ct .m2-ct-item .m2-citem-foot { flex-wrap: wrap; row-gap: 6px; }
    body.m2 .m2-ct .m2-ct-step button { width: 36px; }
    body.mp2.m2 .m2-ct .m2-ct-step input { width: 30px; }
    body.m2 .m2-ct .m2-citem-price { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 899px) {
    body.m2 .m2-ct .m2-ct-group, body.m2 .m2-ct .m2-ct-sum, body.m2 .m2-ct-empty { margin-left: 12px; margin-right: 12px; border-radius: 16px; overflow: hidden; }
}
@media (min-width: 900px) {
    body.m2 .m2-ct-head { margin-bottom: 14px; padding: 18px 20px; border-radius: 16px; }
    body.m2 .m2-ct-title h1 { font-size: 22px; }
    body.m2 .m2-ct-count { font-size: 14px; }
    body.m2 .m2-ct .m2-ct-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
    body.m2 .m2-ct .m2-ct-group { margin-bottom: 12px; border-radius: 16px; overflow: hidden; }
    body.m2 .m2-ct .m2-ct-ghead { padding: 12px 20px; font-size: 14px; }
    @media (hover: hover) { body.m2 .m2-ct .m2-ct-ghead:hover .m2-ct-gname b { text-decoration: underline; } }
    body.m2 .m2-ct .m2-ct-item { gap: 16px; padding: 16px 20px; }
    body.m2 .m2-ct .m2-ct-item .m2-citem-img { width: 96px; height: 96px; }
    body.m2 .m2-ct .m2-ct-item .m2-citem-name { font-size: 14px; }
    body.m2 .m2-ct .m2-ct-sum { position: sticky; top: 126px; margin: 0; padding: 20px; border-radius: 16px; }
    body.m2 .m2-ct .m2-ct-sum h2 { font-size: 16px; }
    body.m2 .m2-ct .m2-ct-sum .m2-kv { font-size: 13.5px; }
    body.m2 .m2-ct .m2-ct-sum .m2-kv.total b { font-size: 22px; }
    body.m2 .m2-ct .m2-ct-sum > .m2-btn { display: flex; min-height: 50px; margin-top: 14px; font-size: 15px; font-weight: 700; }
    body.m2 .m2-ct-empty { padding: 44px 24px 36px; border-radius: 16px; }
}


/* ==========================================================================
   Order actions (details sheet, order cards): confirm receipt, cancel,
   refunds and returns. .m2-oa is one thing the shopper can do, with a line on
   why; .m2-rf is a refund request as it stands; .m2-oform holds the cancel
   and refund sheets (reason chips, item steppers).
   ========================================================================== */
body.m2 .m2-order-rf { margin-top: 8px; }
body.m2 .m2-pill i { font-size: 10px; }
body.m2 .m2-b.ghost.m2-b-danger { background: #fdecec !important; color: #b91c1c !important; }
body.m2 .m2-od-note.ok { background: #e6f6ee; color: #065f46; }
body.m2 .m2-od-note.info { background: #eef4ff; color: #1e3a8a; }
body.m2 .m2-od-note > i { flex: none; margin-top: 1px; }

body.m2 .m2-oas { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
body.m2 .m2-oas .m2-od-note { margin: 0; }
body.m2 .m2-oa {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start;
    padding: 12px; border: 1px solid #e6e8eb; border-radius: 12px; background: #fff;
}
body.m2 .m2-oa > i { font-size: 18px; line-height: 1; margin-top: 1px; color: var(--m2-brand); }
body.m2 .m2-oa.stop > i { color: #b91c1c; }
body.m2 .m2-oa > div b { display: block; font-size: 13px; font-weight: 800; color: #000; }
body.m2 .m2-oa > div small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #4b5260; }
body.m2 .m2-oa > .m2-b { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 36px !important; padding: 0 14px !important; font-size: 12.5px !important; }
body.m2 .m2-oa.ok { border-color: #bfe6cf; background: #f3fbf6; }
@media (min-width: 480px) {
    body.m2 .m2-oa { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    body.m2 .m2-oa > .m2-b { grid-column: 3; margin-top: 0; }
}

body.m2 .m2-rf { margin-bottom: 8px; padding: 12px; border-radius: 12px; background: #f6f7f8; font-size: 12px; line-height: 1.45; color: #373d47; }
body.m2 .m2-rf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
body.m2 .m2-rf-h b { font-size: 14px; font-weight: 800; color: #000; }
body.m2 .m2-rf-items { font-weight: 600; color: #000; }
body.m2 .m2-rf-why { margin-top: 4px; }
body.m2 .m2-rf-reply { display: flex; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #fff; color: #000; }
body.m2 .m2-rf-reply i { color: #5c636e; }
body.m2 .m2-rf-st { margin-top: 6px; color: #4b5260; }
body.m2 .m2-rf .m2-linkbtn { margin-top: 4px; }

body.m2 .m2-oform h4 { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #000; }
body.m2 .m2-oform-top { padding: 12px; border-radius: 12px; background: #f6f7f8; }
body.m2 .m2-oform-top small { display: block; font-size: 11px; color: #5c636e; }
body.m2 .m2-oform-top b { display: block; font-size: 14px; letter-spacing: .02em; color: #000; }
body.m2 .m2-oform-top span { display: block; margin-top: 2px; font-size: 12px; color: #4b5260; }
body.m2 .m2-oreasons { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 12px; }
body.m2 .m2-oreason {
    min-height: 38px; padding: 0 14px; border: 1px solid #d9dce1; border-radius: 999px;
    background: #fff; color: #000; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
body.m2 .m2-oreason.on { background: var(--m2-brand); border-color: var(--m2-brand); color: #fff; }
body.m2 .m2-oreason:focus-visible { outline: 2px solid var(--m2-brand); outline-offset: 2px; }
body.m2 .m2-oreasons.m2-invalid,
body.m2 .m2-rf-pick.m2-invalid { border: 0 !important; box-shadow: none !important; outline: 2px solid var(--m2-deal); outline-offset: 4px; }
body.mp2.m2 .m2-oform .input-group { margin: 20px 0 0 !important; }
body.mp2.m2 .m2-oform .input-group label { display: block; margin-bottom: 6px; font-size: 12.5px !important; font-weight: 700 !important; color: #000 !important; }
body.m2 .m2-oform .input-group label span { font-weight: 500; color: #5c636e; }
body.m2 .m2-od-rfs { margin-top: 16px; }
body.m2 .m2-oform .m2-od-note { margin: 14px 0 0; }
body.m2 .m2-rf-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px; border: 1px solid #e6e8eb; border-radius: 12px; background: #fff; }
body.m2 .m2-rf-line.on { border-color: var(--m2-brand); background: var(--m2-brand-soft); }
body.m2 .m2-rf-line .im { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #f5f6f7; color: #b3b9c1; }
body.m2 .m2-rf-line .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.m2 .m2-rf-line .txt { flex: 1; min-width: 0; font-size: 12px; }
body.m2 .m2-rf-line .txt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: #000; }
body.m2 .m2-rf-line .txt small { font-size: 11px; color: #5c636e; }
body.m2 .m2-rf-line .m2-stepper { height: 34px; background: #fff; }
body.m2 .m2-rf-line .m2-stepper button.off { color: #b3b9c1; }
body.m2 .m2-rf-sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef0f2; font-size: 13px; color: #000; }
body.m2 .m2-rf-sum b { font-size: 18px; font-weight: 800; }
body.m2 .m2-rf-fine { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #4b5260; }