/* UX2 market surface (shoppi.app) - flag "ux2". Loaded only for flagged visitors.
   Every rule is scoped under html.ux2. Drawer, toasts, add-button states,
   product-page stepper and badge pulse. 44px targets, dvh + safe areas,
   prefers-reduced-motion respected. */

html.ux2 {
    --ux2-text: #0f172a;
    --ux2-muted: #5a6a80;
    --ux2-border: #e2e8f0;
    --ux2-surface: #ffffff;
    --ux2-bg: #f8fafc;
    --ux2-accent: #f7931e;
    --ux2-on-accent: #0b1b33;
    --ux2-link: #2563eb;
    --ux2-accent-h: #e8841b;
    --ux2-error: #b42318;
    --ux2-ok: #057a55;
    --ux2-ring: 0 0 0 3px rgba(37, 99, 235, .28);
}

/* The legacy drawer stays in the page but is replaced by the v2 one. */
html.ux2 #shoppi-cart-drawer,
html.ux2 #shoppi-cart-overlay { display: none !important; }

html.ux2.ux2-open { overflow: hidden; }

html.ux2 .ux2-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------- overlay + sheet ------------------------------- */

html.ux2 .ux2-overlay {
    position: fixed; inset: 0; background: rgba(11, 27, 51, .45);
    opacity: 0; visibility: hidden; z-index: 99990;
    transition: opacity .16s ease, visibility 0s linear .16s;
}
html.ux2 .ux2-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .16s ease; }

html.ux2 .ux2-drawer {
    position: fixed; top: 0; right: 0; z-index: 99991;
    width: 420px; max-width: 100vw;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--ux2-surface); color: var(--ux2-text);
    font-size: 15px; line-height: 1.5; font-family: inherit;
    box-shadow: -8px 0 32px rgba(11, 27, 51, .18);
    transform: translateX(100%); visibility: hidden;
    transition: transform .16s ease, visibility 0s linear .16s;
}
html.ux2 .ux2-drawer.is-open { transform: none; visibility: visible; transition: transform .16s ease; }

html.ux2 .ux2-dh {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 8px 12px 20px; border-bottom: 1px solid var(--ux2-border);
}
html.ux2 .ux2-dtitle { margin: 0; font-size: 17px; font-weight: 600; color: var(--ux2-text); }
html.ux2 .ux2-dcount { font-weight: 400; color: var(--ux2-muted); }

html.ux2 .ux2-icon-btn {
    width: 44px; height: 44px; display: inline-grid; place-items: center;
    border: 0; background: transparent; color: var(--ux2-text); border-radius: 8px; cursor: pointer;
}
html.ux2 .ux2-icon-btn:hover { background: var(--ux2-bg); }

html.ux2 .ux2-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px;
    background: #fef3f2; color: var(--ux2-error); font-size: 14px;
}
html.ux2 .ux2-banner[hidden] { display: none; }
html.ux2 .ux2-banner-act {
    min-height: 44px; padding: 0 12px; border: 0; background: transparent;
    color: var(--ux2-error); font-weight: 600; text-decoration: underline; cursor: pointer;
}

html.ux2 .ux2-db { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px; }
html.ux2 .ux2-db [hidden] { display: none !important; }

/* ------------------------------------ rows ------------------------------------- */

html.ux2 .ux2-list { list-style: none; margin: 0; padding: 0; }
html.ux2 .ux2-row {
    display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ux2-border);
    max-height: 400px; overflow: hidden;
    transition: opacity .18s ease, max-height .2s ease, padding .2s ease, background-color .6s ease;
}
html.ux2 .ux2-row:last-child { border-bottom: 0; }
html.ux2 .ux2-row.ux2-leaving { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
html.ux2 .ux2-row.ux2-flash { background: #fff4e5; }
html.ux2 .ux2-row.is-sold-out .ux2-thumb { opacity: .55; }
html.ux2 .ux2-row.is-sold-out .ux2-title { color: var(--ux2-muted); }

html.ux2 .ux2-thumb {
    flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--ux2-border); background: var(--ux2-bg);
}
html.ux2 .ux2-info { flex: 1 1 auto; min-width: 0; }
html.ux2 .ux2-title {
    font-weight: 500; color: var(--ux2-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
html.ux2 .ux2-price { color: var(--ux2-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
html.ux2 .ux2-soldout { color: var(--ux2-error); font-weight: 600; font-size: 14px; }
html.ux2 .ux2-rowerr { margin-top: 4px; color: var(--ux2-error); font-size: 13px; }
html.ux2 .ux2-rowerr[hidden] { display: none; }
html.ux2 .ux2-ctrls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }

html.ux2 .ux2-stepper,
html.ux2 .ux2-pdp-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--ux2-border); border-radius: 8px; background: var(--ux2-surface);
}
html.ux2 .ux2-step {
    position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center;
    border: 0; background: transparent; color: var(--ux2-text); border-radius: 8px; cursor: pointer;
}
html.ux2 .ux2-step:hover:not(:disabled) { background: var(--ux2-bg); }
html.ux2 .ux2-step:disabled { color: #a3acb9; cursor: not-allowed; }
html.ux2 .ux2-qty {
    min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums;
}
html.ux2 .ux2-rm {
    min-height: 44px; padding: 0 8px; border: 0; background: transparent;
    color: var(--ux2-muted); font-size: 14px; text-decoration: underline; cursor: pointer;
}
html.ux2 .ux2-rm:hover { color: var(--ux2-error); }

/* ----------------------------- empty, skeleton, notes --------------------------- */

html.ux2 .ux2-empty { text-align: center; padding: 48px 16px; }
html.ux2 .ux2-empty-t { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
html.ux2 .ux2-empty-p { margin: 0 0 20px; color: var(--ux2-muted); }
html.ux2 .ux2-note { margin: 8px 0 0; font-size: 13px; color: var(--ux2-muted); }
html.ux2 .ux2-note--warn { padding: 10px 12px; border-radius: 8px; background: #fffaeb; color: #93370d; }

html.ux2 .ux2-skel-row { display: flex; gap: 12px; padding: 14px 0; }
html.ux2 .ux2-skel-img,
html.ux2 .ux2-skel-line {
    display: block; background: linear-gradient(90deg, #eef1f5 25%, #f6f8fa 50%, #eef1f5 75%);
    background-size: 200% 100%; animation: ux2-shimmer 1.2s linear infinite; border-radius: 8px;
}
html.ux2 .ux2-skel-img { width: 64px; height: 64px; flex: 0 0 64px; }
html.ux2 .ux2-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
html.ux2 .ux2-skel-line { height: 12px; }
html.ux2 .ux2-skel-line.ux2-short { width: 40%; }
@keyframes ux2-shimmer { to { background-position: -200% 0; } }

/* -------------------------------------- footer ---------------------------------- */

html.ux2 .ux2-df {
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ux2-border); background: var(--ux2-surface); color: var(--ux2-text);
}
html.ux2 .ux2-df[hidden] { display: none; }
html.ux2 .ux2-subrow { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
html.ux2 .ux2-subval { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 17px; }

html.ux2 .ux2-cta {
    display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 48px;
    margin-top: 12px; padding: 0 16px; border: 0; border-radius: 8px;
    background: var(--ux2-accent); color: var(--ux2-on-accent); font: inherit; font-size: 15px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background-color .16s ease;
}
html.ux2 .ux2-cta:hover { background: var(--ux2-accent-h); color: var(--ux2-on-accent); }
html.ux2 .ux2-cta--ghost { width: auto; display: inline-flex; }
html.ux2 .ux2-link {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    color: var(--ux2-link); font-size: 14px; font-weight: 500; text-decoration: none;
}
html.ux2 .ux2-link:hover { text-decoration: underline; }
html.ux2 .ux2-secure { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--ux2-muted); }
html.ux2 .ux2-secure svg { vertical-align: -2px; }
html.ux2 .ux2-sellers { margin-top: 4px; }
html.ux2 .ux2-sellers[hidden] { display: none; }
html.ux2 .ux2-rlink {
    display: flex; align-items: center; justify-content: center; min-height: 44px; margin: -6px 0 -10px; padding: 0 8px;
    color: var(--ux2-link); font-size: 13px; font-weight: 500; text-align: center; text-decoration: none;
}
html.ux2 .ux2-rlink:hover { text-decoration: underline; }
html.ux2 .ux2-rlink:focus-visible { outline: 2px solid var(--ux2-link); outline-offset: 2px; border-radius: 4px; }
html.ux2 .ux2-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------- toasts ----------------------------------- */

html.ux2 .ux2-toasts {
    position: fixed; left: 50%; transform: translateX(-50%);
    /* --ux2-toast-b is set by ux2-market.js: drawer footer height (drawer open) or the fixed buy bar height + gap */
    bottom: var(--ux2-toast-b, calc(16px + env(safe-area-inset-bottom)));
    z-index: 99995; display: flex; flex-direction: column; gap: 8px;
    width: min(440px, calc(100vw - 32px)); pointer-events: none;
}
html.ux2 .ux2-toast {
    display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 16px; min-height: 52px;
    background: #0b1b33; color: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(11, 27, 51, .3);
    font-size: 14px; pointer-events: auto; opacity: 0; transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease;
}
html.ux2 .ux2-toast.is-in { opacity: 1; transform: none; }
/* Drawer open: the stack sits over the drawer, right above its footer, so the checkout button stays reachable. */
html.ux2.ux2-open .ux2-toasts {
    left: auto; right: 16px; transform: none; width: min(388px, calc(100vw - 32px));
}
html.ux2 .ux2-toast--error { background: #7a1710; }
html.ux2 .ux2-toast-msg { flex: 1 1 auto; padding: 8px 0; }
html.ux2 .ux2-toast-act {
    min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: #fff;
    font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center;
}
html.ux2 .ux2-toast-x {
    width: 44px; height: 44px; display: inline-grid; place-items: center;
    border: 0; background: transparent; color: #fff; cursor: pointer; opacity: .8;
}
html.ux2 .ux2-toast-x svg { width: 16px; height: 16px; }
html.ux2 .ux2-toast-act { white-space: nowrap; }
html.ux2 .ux2-toast.is-stack { flex-wrap: wrap; row-gap: 0; }
html.ux2 .ux2-toast.is-stack .ux2-toast-msg { flex: 1 1 calc(100% - 52px); padding: 10px 0 2px; }
html.ux2 .ux2-toast.is-stack .ux2-toast-x { order: 1; align-self: flex-start; }
html.ux2 .ux2-toast.is-stack .ux2-toast-act { order: 2; margin-left: -12px; }
/* sold-out drawer row has no stepper: "Remove" starts at the title edge */
html.ux2 .ux2-row.is-sold-out .ux2-rm { margin-left: -8px; }

/* ----------------------- add button states (any market button) ------------------ */

html.ux2 .ux2-spin {
    display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ux2-rot .7s linear infinite;
}
@keyframes ux2-rot { to { transform: rotate(360deg); } }
html.ux2 .ux2-busy { cursor: progress; opacity: .85; }
html.ux2 .ux2-added svg { vertical-align: -3px; margin-right: 6px; }
html.ux2 .ux2-added { background: var(--ux2-ok) !important; border-color: var(--ux2-ok) !important; color: #fff !important; }

/* primary add / buy buttons: Shoppi orange, navy text (white on orange fails contrast); the "Added" state below stays green */
html.ux2 .mk-add, html.ux2 .mk-st-btn-add, html.ux2 .mbb-add, html.ux2 a.btn-premium-primary {
    background: var(--ux2-accent); color: var(--ux2-on-accent); border-color: transparent;
}
html.ux2 .mk-add:hover, html.ux2 .mk-st-btn-add:hover, html.ux2 .mbb-add:hover, html.ux2 a.btn-premium-primary:hover {
    background: var(--ux2-accent-h); color: var(--ux2-on-accent);
}

/* search / category cards run their own add code: in-flight = dimmed, done = same green as the "Added" state elsewhere */
html.ux2 .mk-add[aria-busy="true"]:disabled { opacity: .65; cursor: progress; }
html.ux2 .mk-add.is-added { background: var(--ux2-ok); color: #fff; }

/* category and search cards: bigger touch target, restored label after "Added" */
@media (pointer: coarse) {
    html.ux2 .mk-add, html.ux2 .mk-st-btn-add, html.ux2 .mbb-add { min-height: 44px; }
}
html.ux2 .mk-add:focus-visible,
html.ux2 .mk-st-btn-add:focus-visible,
html.ux2 .btn-premium-secondary:focus-visible,
html.ux2 .mbb-add:focus-visible { outline: 2px solid var(--ux2-link); outline-offset: 2px; }

/* header badge */
html.ux2 #mk-cart-count.ux2-pulse { animation: ux2-pulse .9s ease; }
@keyframes ux2-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------------------------- product page quantity stepper --------------------- */

html.ux2 .ux2-pdp-qty { align-self: flex-start; }

/* ------------------------------ focus, small screens --------------------------- */

html.ux2 .ux2-drawer button:focus-visible,
html.ux2 .ux2-drawer a:focus-visible,
html.ux2 .ux2-toast button:focus-visible,
html.ux2 .ux2-toast a:focus-visible,
html.ux2 .ux2-pdp-qty button:focus-visible {
    outline: 2px solid var(--ux2-link); outline-offset: 2px; box-shadow: var(--ux2-ring);
}

@media (max-width: 640px) {
    html.ux2 .ux2-drawer {
        top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%;
        height: auto; max-height: 90vh; max-height: 90dvh;
        border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(11, 27, 51, .22);
        transform: translateY(100%);
    }
    html.ux2 .ux2-drawer.is-open { transform: none; }
    html.ux2 .ux2-db { min-height: 120px; }
    html.ux2.ux2-open .ux2-toasts { left: 16px; right: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html.ux2 .ux2-overlay, html.ux2 .ux2-drawer, html.ux2 .ux2-row, html.ux2 .ux2-toast, html.ux2 .ux2-cta {
        transition: none !important;
    }
    html.ux2 .ux2-skel-img, html.ux2 .ux2-skel-line, html.ux2 .ux2-spin, html.ux2 #mk-cart-count.ux2-pulse {
        animation: none !important;
    }
}

/* Poppins like the Shoppi home: buttons do not inherit the font by default ("Remove" was rendering in Arial) */
html.ux2 .ux2-drawer, html.ux2 .ux2-toasts {
    font-family: Poppins, 'Plus Jakarta Sans', Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
html.ux2 .ux2-drawer button, html.ux2 .ux2-drawer a, html.ux2 .ux2-toasts button, html.ux2 .ux2-toasts a { font-family: inherit; }