/* =========================================================
   xpressmac.online — inner pages (store, product, lists, search,
   checkout shell, orders, receipt). Loaded after xpressmac.css + xm-live.css.
   ========================================================= */

.xm-main { display: block; min-height: 50vh; padding-bottom: 8px; }
.xm-main > .crumbs:first-child { margin-top: 16px; }

/* legacy Bootstrap modals from the old footer: hidden until Bootstrap JS opens them */
body:not(.xm-legacy) .xm-legacy-modals .modal { display: none; position: fixed; inset: 0; z-index: 1050; overflow: auto; background: rgba(11, 31, 58, .5); }
body:not(.xm-legacy) .xm-legacy-modals .modal.show { display: block; }
body:not(.xm-legacy) .xm-legacy-modals .modal-dialog { max-width: 520px; margin: 10vh auto; padding: 0 16px; }
body:not(.xm-legacy) .xm-legacy-modals .modal-content { background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow-lg); }
body:not(.xm-legacy) .xm-legacy-modals .modal-footer, body:not(.xm-legacy) .xm-legacy-modals .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body:not(.xm-legacy) .xm-legacy-modals .close { border: 0; background: none; font-size: 22px; }
body:not(.xm-legacy) .modal-backdrop { display: none; }
body:not(.xm-legacy) .modal:not(.show) { display: none !important; }
body:not(.xm-legacy) .modal.show { display: block; position: fixed; inset: 0; z-index: 1050; overflow: auto; background: rgba(11, 31, 58, .5); }
body:not(.xm-legacy) .modal.show .modal-dialog { max-width: 520px; margin: 10vh auto; padding: 0 16px; }
body:not(.xm-legacy) .modal.show .modal-content { background: #fff; border-radius: 16px; padding: 18px; }
/* old off-canvas mobile menu built by the legacy footer script — the new header replaces it */
.xm-page .hc-offcanvas-nav, .xm-page .hc-nav-trigger, .xm-page #main-nav { display: none !important; }
#overlay { position: fixed; inset: 0; z-index: 300; background: rgba(255, 255, 255, .55); display: grid; place-items: center; }
#overlay img { width: 56px; height: 56px; }

/* ---------- store header ---------- */
.shophead__avatar { overflow: hidden; }
.shophead__avatar.has-img, .shophead__avatar img { background: #fff; }
.shophead__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.openstat.is-closed { background: #FDECEC; color: var(--hot); }
.shophead__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.shophead__meta span { display: inline-flex; align-items: center; gap: 4px; }
[data-store-fav].is-on { border-color: var(--green); color: var(--green-d); }
.xm-catpills { margin: -4px 0 14px; flex-wrap: wrap; }
.xm-coupon-list { display: flex; flex-wrap: wrap; gap: 10px; }
.xm-coupon { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1.5px dashed var(--green); background: var(--brand-tint-2); border-radius: 12px; padding: 8px 14px; cursor: pointer; text-align: left; }
.xm-coupon b { font: 700 15px/1.2 'Poppins', sans-serif; color: var(--green-d); letter-spacing: .04em; }
.xm-coupon span { font-size: 12px; color: var(--muted); }
.xm-coupon:hover { background: var(--brand-tint); }
.card.is-soldout .card__img img { filter: grayscale(.8); opacity: .7; }
.card--shop .card__img .rcard__flag { top: 10px; bottom: auto; }

/* ---------- product page ---------- */
.pick__gallery { display: flex; flex-direction: column; gap: 10px; }
.pick__img { position: relative; }
.pick__img img, .pick__img video { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pick__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.pick__thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #F3F4F6; padding: 0; cursor: pointer; }
.pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick__thumb.is-active { border-color: var(--green); }
.pick__desc { color: #374151; font-size: 14px; line-height: 1.6; margin: 4px 0 12px; white-space: pre-line; }
.pick__meta a, .pick__store a { color: var(--green-d); font-weight: 600; }
.pick__store { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pick__stock { font-size: 12.5px; color: var(--muted); }
.pick__stock.is-low { color: var(--hot); font-weight: 600; }
.pick__fav { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; width: 40px; height: 40px; display: inline-grid; place-items: center; font-size: 18px; cursor: pointer; }
.pick__fav.is-on { color: var(--hot); border-color: var(--hot); }
.pick__buy .btn { min-width: 150px; }
.pick__buy .add-to-cart[disabled] { opacity: .5; cursor: not-allowed; }
.xm-addons { margin: 6px 0 14px; }
.xm-addons__title, .xm-attr__title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.xm-addon { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; font-size: 13.5px; }
.xm-addon input { width: 18px; height: 18px; accent-color: var(--green); }
.xm-addon span { margin-left: auto; color: var(--muted); font-weight: 600; }
.xm-addon:has(input:checked) { border-color: var(--green); background: var(--brand-tint-2); }
/* variant pickers generated by the existing getVariantsHtml() */
.attribute_list { margin: 4px 0 12px; }
.attribute_list .attribute-drp { margin-bottom: 10px; }
.attribute_list .attribute-drp > h3, .attribute_list h3, .attribute_list label.attribute-title { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.attribute_list ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.attribute_list .attribute-selection, .attribute_list li { list-style: none; }
.attribute_list .attribute-selection label, .attribute_list li label, .attribute_list .custom-control-label { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; }
.attribute_list input[type=radio], .attribute_list input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.attribute_list input:checked + label, .attribute_list input:checked + .custom-control-label { border-color: var(--green); background: var(--brand-tint); color: var(--green-d); }
.variation_info { display: flex; flex-direction: column; gap: 2px; }
#variant_price { font: 700 28px/1.1 'Poppins', sans-serif; color: var(--ink); }
#variant_qty { font-size: 12.5px; color: var(--muted); }
.xm-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.xm-specs dt, .xm-specs dd { margin: 0; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.xm-specs dt { background: #F9FAFB; color: var(--muted); font-weight: 600; }
.xm-specs > :nth-last-child(-n+2) { border-bottom: 0; }
.xm-reviews .rev { border-bottom: 1px solid var(--line); padding: 12px 0; }
.xm-reviews .rev:last-child { border-bottom: 0; }
.xm-reviews .rev b { font-size: 13.5px; }
.xm-reviews .rev small { color: var(--muted); margin-left: 6px; }
.xm-reviews .rev p { font-size: 13.5px; color: #374151; margin-top: 4px; }
.xm-reviews .rev .stars { color: #E8A10B; letter-spacing: 1px; }
.xm-reviews .rev .rev__photos { display: flex; gap: 6px; margin-top: 6px; }
.xm-reviews .rev .rev__photos img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.xm-twocol { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.xm-twocol > .vsec { width: auto; margin-top: 16px; }
@media (max-width: 960px) { .xm-twocol { grid-template-columns: minmax(0, 1fr); } }
.xm-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.xm-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.xm-trust li .ico { width: 22px; height: 22px; }

/* compact product rows (more from this store) */
.xm-mini-list { display: flex; flex-direction: column; gap: 4px; }
.xm-mrow { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.xm-mrow:hover { background: var(--brand-tint-2); }
.xm-mrow img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; background: #F3F4F6; flex: none; }
.xm-mrow span { display: flex; flex-direction: column; min-width: 0; }
.xm-mrow b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-mrow em { font-style: normal; font-weight: 700; font-size: 13px; }
.xm-mrow s { color: #9CA3AF; font-weight: 400; font-size: 12px; }
.xm-pd-store { padding-top: 14px; padding-bottom: 14px; }
.xm-pd-store .shophead__avatar a, .xm-pd-store .shophead__avatar img { display: block; width: 100% !important; height: 100% !important; border-radius: inherit !important; object-fit: cover; }
.xm-pd-store h1 a { color: inherit; }
.pick__closed { margin-top: 8px; }
.attribute_list .attribute-options { display: flex; flex-wrap: wrap; gap: 8px; }
.attribute_list .attribute-selection { position: relative; padding: 0 !important; border: 0 !important; }
.attribute_list .attribute-label { font-size: 13px; font-weight: 700; margin: 0 0 8px; }

/* ---------- list / search pages ---------- */
.xm-listhead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.xm-listhead h1 { font: 700 22px/1.2 'Poppins', sans-serif; }
.xm-listhead .shoptools { margin-left: auto; }
.xm-listlayout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.xm-listlayout .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xm-listlayout .vsec { width: auto; margin-top: 0; }
.xm-listlayout--full, .xm-listlayout:has(> .xm-side[hidden]) { grid-template-columns: minmax(0, 1fr); }
.xm-listlayout--full .grid, .xm-listlayout:has(> .xm-side[hidden]) .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xm-listmain { min-width: 0; }
.xm-listhead h1 { margin: 0; }
.xm-tabs .pill b { margin-left: 4px; font-weight: 700; }
.xm-side { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 0; position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; }
.xm-side h3 { font: 600 14px 'Poppins', sans-serif; padding: 0 16px 8px; }
.xm-side a { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 13px; }
.xm-side a img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.xm-side a:hover, .xm-side a.is-current { background: var(--brand-tint-2); color: var(--green-d); font-weight: 600; }
@media (max-width: 960px) {
    .xm-listlayout { grid-template-columns: minmax(0, 1fr); }
    .xm-side { position: static; max-height: none; display: flex; overflow-x: auto; padding: 8px; gap: 4px; }
    .xm-side h3 { display: none; }
    .xm-side a { white-space: nowrap; border-radius: 999px; padding: 6px 12px; }
    .xm-listlayout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) { .xm-listlayout--full .grid, .xm-listlayout:has(> .xm-side[hidden]) .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .xm-listlayout--full .grid, .xm-listlayout:has(> .xm-side[hidden]) .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .xm-listlayout .grid, .xm-listlayout--full .grid, .xm-listlayout:has(> .xm-side[hidden]) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xm-listhead .shoptools { margin-left: 0; width: 100%; } }
.xm-searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.xm-searchbar input { flex: 1; min-width: 0; height: 46px; border: 2px solid var(--navy); border-radius: 999px; padding: 0 20px; font: inherit; font-size: 15px; outline: 0; }
.xm-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- orders ---------- */
.xm-ordertabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.orow { cursor: pointer; }
.orow__img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #F3F4F6; flex: none; }
.ostat--done { background: var(--ok-bg); color: var(--ok); }
.ostat--bad { background: #FDECEC; color: var(--hot); }
.ostat--wait { background: #FFF4DC; color: #A16207; }
.ostat--go { background: #E8F1FD; color: #1D4ED8; }
.xm-orderacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.xm-empty-state { text-align: center; padding: 34px 16px; color: var(--muted); }
.xm-empty-state b { display: block; color: var(--ink); font: 600 17px 'Poppins', sans-serif; margin-bottom: 6px; }

/* ---------- receipt (thermal / 80 mm style, matches the POS receipt template) ---------- */
.rcpt-bar { position: sticky; top: 0; z-index: 10; background: #243B5A; padding: 14px 16px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.rcpt-bar .rcpt-btn { height: 46px; padding: 0 22px; border-radius: 8px; border: 0; font: 600 17px 'Inter', sans-serif; cursor: pointer; }
.rcpt-bar .rcpt-print { background: #4CAF50; color: #fff; }
.rcpt-bar .rcpt-print:hover { background: #43A047; }
.rcpt-bar select { height: 46px; min-width: 280px; border-radius: 8px; border: 0; padding: 0 14px; font: 500 17px 'Inter', sans-serif; background: #fff; }
.rcpt-bar .rcpt-close { background: #EEF0F3; color: #111827; }
.rcpt-page { background: #E9ECEF; min-height: 100vh; margin: 0; }
.rcpt-wrap { display: flex; justify-content: center; padding: 20px 12px 60px; }
.rcpt { width: 100%; max-width: 380px; background: #fff; padding: 18px 16px 24px; font-family: 'Courier New', Courier, 'Liberation Mono', monospace; font-size: 13.5px; line-height: 1.35; color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.rcpt * { box-sizing: border-box; }
.rcpt__center { text-align: center; }
.rcpt__store { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rcpt__logo { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; margin: 0 auto 6px; display: block; }
.rcpt__rule { border: 0; border-top: 1.5px dashed #333; margin: 10px 0; }
.rcpt__rule--thin { border-top: 1px dotted #999; margin: 8px 0; }
.rcpt__row { display: flex; justify-content: space-between; gap: 10px; }
.rcpt__row > :last-child { text-align: right; white-space: nowrap; }
.rcpt b, .rcpt__bold { font-weight: 700; }
.rcpt__head b { font-size: 14.5px; }
.rcpt__item { padding: 6px 0; border-bottom: 1px dotted #aaa; }
.rcpt__item:last-child { border-bottom: 0; }
.rcpt__sub { color: #444; font-size: 12.5px; }
.rcpt__extra { padding-left: 14px; }
.rcpt__total { font-size: 16px; font-weight: 700; }
.rcpt__foot { text-align: center; margin-top: 12px; font-size: 12.5px; }
.rcpt__muted { color: #555; }
.rcpt--gift .rcpt__money { visibility: hidden; }
.rcpt-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.rcpt-card .rcpt { box-shadow: none; max-width: 100%; padding: 6px 0; }
/* order QR */
.rcpt__qr { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rcpt__qrimg { display: block; width: 34mm; height: 34mm; max-width: 60%; }
.rcpt__qrcap { font-size: 11.5px; }
.rcpt-card .rcpt__qrimg { width: 120px; height: 120px; }
/* long names wrap instead of pushing the price off the paper */
.rcpt__row > :first-child { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.rcpt div, .rcpt span { overflow-wrap: anywhere; }
/* paper selector + on-screen preview width (80 mm ≈ 48 chars, 58 mm ≈ 32 chars) */
.rcpt-bar .rcpt-paper { min-width: 0; }
.rcpt-page[data-paper="80"] .rcpt { max-width: 380px; }
.rcpt-page[data-paper="58"] .rcpt { max-width: 270px; font-size: 12px; padding: 14px 10px 20px; }
.rcpt-page[data-paper="58"] .rcpt__store { font-size: 14px; }
.rcpt-page[data-paper="58"] .rcpt__head b { font-size: 12.5px; }
.rcpt-page[data-paper="58"] .rcpt__sub, .rcpt-page[data-paper="58"] .rcpt__foot, .rcpt-page[data-paper="58"] .rcpt__qrcap { font-size: 11px; }
.rcpt-page[data-paper="58"] .rcpt__total { font-size: 13.5px; }
.rcpt-page[data-paper="58"] .rcpt__extra { padding-left: 8px; }
.rcpt-page[data-paper="58"] .rcpt__row { gap: 6px; }
.rcpt-page[data-paper="58"] .rcpt__qrimg { width: 30mm; height: 30mm; max-width: 70%; }
/* print layout: applied while printing (JS adds .is-print on beforeprint so the page height can be measured) */
body.rcpt-page.is-print { background: #fff; margin: 0; }
.is-print .rcpt-bar { display: none !important; }
.is-print .rcpt-wrap { padding: 0; display: block; }
.is-print .rcpt { box-shadow: none; max-width: none; width: 72mm; padding: 0; margin: 0; font-size: 11px; color: #000; }
.is-print .rcpt__sub, .is-print .rcpt__muted { color: #000; }
.is-print .rcpt__store { font-size: 14px; }
.is-print .rcpt__total { font-size: 13.5px; }
.is-print .rcpt__sub, .is-print .rcpt__foot, .is-print .rcpt__qrcap { font-size: 10px; }
.is-print .rcpt__head b { font-size: 12.5px; }
.is-print .rcpt__qrimg { width: 34mm; height: 34mm; }
.is-print[data-paper="58"] .rcpt { width: 48mm; font-size: 9.5px; padding: 0; }
.is-print[data-paper="58"] .rcpt__store { font-size: 12px; }
.is-print[data-paper="58"] .rcpt__head b, .is-print[data-paper="58"] .rcpt__total { font-size: 11.5px; }
.is-print[data-paper="58"] .rcpt__sub, .is-print[data-paper="58"] .rcpt__foot, .is-print[data-paper="58"] .rcpt__qrcap { font-size: 9px; }
.is-print[data-paper="58"] .rcpt__qrimg { width: 28mm; height: 28mm; max-width: 60%; }
@media print {
    /* @page size is written by the paper selector (width) and measured before printing (height) */
    @page { size: 80mm 297mm; margin: 2mm 4mm; }
    html, body.rcpt-page { background: #fff; margin: 0; }
    .rcpt-bar, .no-print, .xm-toast { display: none !important; }
    .rcpt-wrap { padding: 0; display: block; }
    .rcpt { box-shadow: none; }
    .rcpt__item, .rcpt__qr { break-inside: avoid; page-break-inside: avoid; }
}

/* order details side column */
.xm-oside { font-size: 13.5px; color: #374151; background: #F9FAFB; border-radius: 12px; padding: 14px; }
.xm-oside p { margin: 0; }
.xm-oside a { color: var(--green-d); font-weight: 600; }
.track__step.is-bad b { color: var(--hot); }
.olines em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.orow { display: flex; align-items: center; gap: 12px; }
.orow .orow__main { flex: 1; min-width: 0; }
.orow .orow__main span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 680px) { .orow { flex-wrap: wrap; } .orow .ostat { order: 3; } }

/* order confirmation */
.xm-success { text-align: center; padding: 26px 16px 8px; }
.xm-success__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: inline-grid; place-items: center; font-size: 30px; margin-bottom: 10px; }
.xm-success h1 { font: 700 24px 'Poppins', sans-serif; margin-bottom: 6px; }
.xm-success p { color: var(--muted); }
.xm-success .xm-orderacts { justify-content: center; }
.xm-success-receipt { max-width: 420px; margin: 18px auto 0; }

/* product page: all items from the store + similar products from other stores */
.vsec__hint { font-size: 13px; color: var(--muted); }
.xm-count { font: 500 14px 'Inter', sans-serif; color: var(--muted); }
.xm-more-wrap { display: flex; justify-content: center; margin-top: 16px; }
/* store header buttons wrap on small phones */
.shophead__actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
@media (max-width: 480px) { .shophead__actions .btn { flex: 1 1 auto; } }