/* Live demo (/try): store, customer portal and merchant dashboard on one page */
.demo-page { padding-block: 40px 72px; }
.demo-head h1 { color: var(--palm); }
.demo-head .sub { max-width: 46em; }
.demo-foot { margin-top: 28px; }
.demo-foot a { color: var(--palm); font-weight: 800; }
.demo-app { margin-top: 28px; }
.demo-app :is(input[type="text"], input[type="tel"], input[type="search"], select) {
  width: 100%; font: 15px/1.5 var(--f); color: var(--graphite); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; margin-top: 4px; }
.demo-app :is(input, select):focus-visible { border-color: var(--palm); outline: 3px solid rgba(107, 58, 31, .18); outline-offset: 0; }
.demo-app input[type="radio"], .demo-app input[type="checkbox"] { accent-color: var(--palm); width: 17px; height: 17px; flex: none; }
.demo-app small { font-size: 12.5px; }
.demo-app .fine { font-size: 13.5px; color: var(--grey); margin-top: 8px; }
.demo-app .field { display: block; font-weight: 800; font-size: 14px; }
.demo-app .callout { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md); background: var(--sand-tint); border-inline-start: 6px solid var(--sand); font-size: 15px; }
.demo-app .callout.small { font-size: 14px; }
.demo-app .actions { margin-top: 16px; }
.btn.small { padding: 7px 14px; font-size: 13.5px; }
.btn.ghost, .sbtn.ghost { border-color: transparent; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.link-btn { background: none; border: 0; padding: 0; font: 800 14px var(--f); color: var(--palm); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* Presenter bar */
.simbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 14px; background: var(--code); color: #F3E9DD; border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(43, 26, 16, .18); }
.simbar p { margin: 0; }
.sim-tag { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #E2C998; font-weight: 800; }
.sim-tag .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--sand); box-shadow: 0 0 0 3px rgba(217, 163, 91, .25); }
.sim-today { display: grid; line-height: 1.35; }
.sim-today small { font-size: 11.5px; color: #CDB79C; }
.sim-today strong { font-size: 15px; color: var(--white); }
.sim-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-btns.end { margin-inline-start: auto; }
.sbtn { font: 800 13.5px var(--f); padding: 7px 12px; border-radius: var(--r-sm); border: 1.5px solid rgba(243, 233, 221, .35); background: transparent; color: inherit; cursor: pointer; white-space: nowrap; }
.sbtn:hover { border-color: var(--sand); }
.sbtn.strong { background: var(--sand); border-color: var(--sand); color: var(--code); }
.sbtn.strong small { font-size: 12px; opacity: .8; }
.sbtn[disabled] { opacity: .5; cursor: not-allowed; }
.sbtn .count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(243, 233, 221, .18); font-size: 12px; }
.simbar :focus-visible { outline-color: var(--sand); }
.sim-fail { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.sim-fail input { accent-color: #E27A5F; }

/* View tabs */
.demo-tabs[role="tablist"] { max-width: none; border-bottom: 0; gap: 10px; margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); }
.demo-tabs [role="tab"] { display: grid; text-align: start; gap: 0; padding: 12px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--white); color: var(--graphite); }
.demo-tabs [role="tab"] b { font-size: 16px; color: var(--palm); }
.demo-tabs [role="tab"] small { font-weight: 400; color: var(--grey); }
.demo-tabs [role="tab"][aria-selected="true"] { background: var(--palm); border-color: var(--palm); color: var(--white); }
.demo-tabs [role="tab"][aria-selected="true"] :is(b, small) { color: var(--white); }
.demo-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); overflow: hidden; }

/* Product art */
.art { position: relative; display: grid; place-items: center; background: var(--sand-tint); border-radius: var(--r-md); }
.art svg { width: 70%; height: auto; }
.art span { position: absolute; inset-inline: 0; top: 55%; text-align: center; font-weight: 800; font-size: 13px; color: var(--palm); padding-inline: 18%; line-height: 1.3; }
.art.lg { aspect-ratio: 1; }
.art.lg span { font-size: 20px; }
.art.sm { width: 64px; height: 64px; flex: none; }
.art.xs { width: 34px; height: 34px; flex: none; border-radius: 6px; }
.art.sm span, .art.xs span { display: none; }

/* Store */
.store-top { display: flex; align-items: center; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #FFFCF8; }
.store-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--graphite); }
.mark { width: 22px; height: 22px; border-radius: 6px; background: conic-gradient(var(--palm) 25%, var(--sand) 0 50%, var(--palm) 0 75%, var(--sand) 0) 0 0 / 11px 11px; flex: none; }
.store-nav { display: flex; gap: 16px; font-size: 14px; color: var(--grey); flex-wrap: wrap; }
.store-cart { margin-inline-start: auto; min-width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-tint); font-size: 13px; font-weight: 800; color: var(--palm); }
.crumbs { font-size: 13px; color: var(--grey); padding: 14px 20px 0; }
.pdp { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; padding: 16px 20px 28px; }
.pdp-art .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { display: flex; align-items: center; gap: 8px; font: 13px var(--f); padding: 5px 10px 5px 5px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); cursor: pointer; color: var(--graphite); }
html[dir="rtl"] .chip { padding: 5px 5px 5px 10px; }
.chip.on { border-color: var(--palm); background: var(--sand-tint); font-weight: 800; }
.pdp-info h2 { font-size: 26px; color: var(--graphite); line-height: 1.4; }
.pdp-info h2:focus { outline: none; }
.pdp-price { font-size: 22px; font-weight: 800; color: var(--palm); margin-top: 4px; }
.pdp-desc { color: var(--grey); margin-top: 8px; font-size: 15.5px; }

/* The Maqadi widget as it appears on the product page */
.mq-widget { margin-top: 18px; border: 2px solid var(--sand); border-radius: var(--r-md); padding: 14px 16px 12px; background: #FFFDF9; }
.mq-widget legend { font-weight: 800; font-size: 15px; padding-inline: 6px; }
.mq-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); margin-top: 8px; cursor: pointer; background: var(--white); }
.mq-opt input { margin-top: 5px; }
.mq-opt .t { flex: 1; font-weight: 800; font-size: 15px; display: grid; }
.mq-opt .t small { font-weight: 400; color: var(--grey); }
.mq-opt b { white-space: nowrap; font-size: 15px; }
.mq-opt s { font-weight: 400; color: var(--grey); font-size: 13px; }
.mq-opt:has(input:checked) { border-color: var(--palm); background: var(--sand-tint); }
.mq-freq { margin-top: 12px; }
.mq-freq .lbl { font-size: 13.5px; font-weight: 800; }
.segs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; background: var(--white); }
.seg input:checked + span { background: var(--palm); border-color: var(--palm); color: var(--white); font-weight: 800; }
.seg input:focus-visible + span { outline: 3px solid var(--palm); outline-offset: 2px; }
.mq-break { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin-top: 14px; font-size: 14.5px; }
.mq-break dd { margin: 0; text-align: end; }
.mq-break .minus { color: var(--ok); }
.mq-break .tot { font-weight: 800; font-size: 16px; border-top: 1px solid var(--line); padding-top: 6px; }
.mq-when { margin-top: 10px; font-size: 14px; }
.mq-fair { margin-top: 6px; font-size: 13px; color: var(--ok); background: #EEF5EF; border-radius: var(--r-sm); padding: 6px 10px; }
.mq-by { margin-top: 10px; font-size: 12px; color: var(--grey); text-align: end; }
.mq-by b { color: var(--palm); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); }
.qty button { width: 40px; height: 44px; border: 0; background: none; font: 800 20px var(--f); color: var(--palm); cursor: pointer; }
.qty output { min-width: 32px; text-align: center; font-weight: 800; }
.buy .btn-main { flex: 1; min-width: 180px; text-align: center; }
.checkout, .done { margin: 0 20px 24px; padding: 18px 20px; border-radius: var(--r-md); background: var(--sand-tint); }
.checkout h3, .done h3 { font-size: 19px; color: var(--palm); }
.checkout h3:focus, .done h3:focus { outline: none; }
.co-sum { margin-top: 4px; font-size: 14.5px; }
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.co-grid label { font-weight: 800; font-size: 14px; }
.pay-opts { border: 0; padding: 0; margin-top: 14px; display: grid; gap: 8px; }
.pay-opts legend { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.pay-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); cursor: pointer; }
.pay-opt input { margin-top: 5px; }
.pay-opt span { display: grid; }
.pay-opt small { color: var(--grey); }
.pay-opt:has(input:checked) { border-color: var(--palm); }
.done { background: #EEF5EF; }
.done .ok { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: var(--white); font-size: 16px; }
.done h3 { color: var(--ok); }
.done p { margin-top: 8px; }

/* Customer portal: a phone-width page */
.portal { padding: 24px 16px; background: linear-gradient(var(--sand-tint), var(--white)); }
.phone-shell { max-width: 460px; margin-inline: auto; background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 32px rgba(43, 26, 16, .10); }
.phone-shell.wide { max-width: 720px; }
.pshell-top { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-weight: 800; font-size: 14px; border-bottom: 1px solid var(--line); }
.pshell-top .link-btn { margin-inline-start: auto; font-size: 13px; }
.login, .pbody { padding: 20px 20px 24px; }
.login h2, .pbody h2 { font-size: 22px; color: var(--graphite); line-height: 1.4; }
.login h2:focus, .pbody h2:focus { outline: none; }
.login .sub, .pbody .sub { font-size: 15px; margin-top: 4px; }
.login .field { margin-top: 14px; }
.login .btn-main { margin-top: 12px; width: 100%; text-align: center; }
.login .actions .btn-main { width: auto; margin-top: 0; }
.samples { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chip-txt { display: flex; justify-content: space-between; gap: 10px; font: 14px var(--f); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); cursor: pointer; color: var(--graphite); text-align: start; }
.chip-txt:hover { border-color: var(--palm); }
.chip-txt small { color: var(--grey); }
.err { color: var(--danger); font-weight: 800; margin-top: 8px; font-size: 14px; }
.psubs { display: grid; gap: 14px; margin-top: 16px; }
.psub { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.psub.off { opacity: .7; }
.psub-head { display: flex; gap: 12px; align-items: flex-start; }
.psub-head > div { flex: 1; min-width: 0; }
.psub-head h3 { font-size: 16px; line-height: 1.5; }
.psub-head p { font-size: 13.5px; color: var(--grey); }
.psub-head .when { color: var(--graphite); font-weight: 800; margin-top: 2px; }
.palert { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: #FBEDEA; }
.palert p { font-size: 14px; color: #7A2E22; }
.palert .btn { margin-top: 8px; }
.pactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pa { font: 800 13.5px var(--f); padding: 6px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--white); color: var(--palm); cursor: pointer; }
.pa:hover, .pa[aria-expanded="true"] { border-color: var(--palm); background: var(--sand-tint); }
.pa.danger { color: var(--danger); }
.pform { margin-top: 12px; padding: 14px; border-radius: var(--r-sm); background: var(--sand-tint); }
.pform p { font-size: 14.5px; }
.pform .co-grid { margin-top: 0; }
.retain h4 { font-size: 16px; color: var(--palm); }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.offer { display: grid; text-align: start; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--sand); border-radius: var(--r-sm); background: var(--white); font: 14px var(--f); color: var(--graphite); cursor: pointer; }
.offer b { color: var(--palm); }
.offer small { color: var(--grey); }
.offer:hover { border-color: var(--palm); }
.retain .field { margin-top: 12px; }
.pbody > h3 { margin-top: 24px; font-size: 16px; }

/* Tables and status badges */
.table-wrap { overflow-x: auto; margin-top: 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: start; font-size: 12.5px; color: var(--grey); font-weight: 800; padding: 8px 10px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td small { display: block; color: var(--grey); }
.tbl tbody tr:hover { background: #FFFBF6; }
.st { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: #EEF5EF; color: var(--ok); }
.st-paused { background: #F1ECE4; color: #6E6259; }
.st-failed, .st-awaiting { background: #FBEDEA; color: var(--danger); }
.st-cancelled, .st-skipped, .st-replaced { background: #EFEDEB; color: #77706A; }

/* Merchant dashboard, framed as an app page in the store admin */
.admin-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 11px 18px; background: #FBF7F2; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--grey); }
.admin-top b { color: var(--palm); }
.admin-store { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--graphite); }
.admin-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 560px; }
.admin-nav[role="tablist"] { display: flex; flex-direction: column; gap: 2px; max-width: none; border-bottom: 0; border-inline-end: 1px solid var(--line); padding: 12px 10px; background: #FFFCF8; }
.admin-nav [role="tab"] { flex: none; text-align: start; padding: 9px 12px; font-size: 14.5px; border-radius: var(--r-sm); background: none; color: var(--graphite); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.admin-nav [role="tab"]:hover { background: var(--sand-tint); }
.admin-nav [role="tab"][aria-selected="true"] { background: var(--palm); color: var(--white); }
.pill { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: var(--white); font-size: 12px; text-align: center; }
.admin-main { padding: 20px 22px 28px; min-width: 0; }
.admin-main > h2 { font-size: 22px; line-height: 1.4; color: var(--graphite); }
.admin-main > h2:focus { outline: none; }
.admin-main > h3 { margin-top: 24px; font-size: 16px; }
.admin-main .sub { font-size: 15px; margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: grid; align-content: start; }
.kpi span { font-size: 12.5px; color: var(--grey); font-weight: 800; line-height: 1.5; }
.kpi strong { font-size: 24px; color: var(--palm); line-height: 1.5; }
.kpi small { color: var(--grey); }
.kpi.warn { border-color: #E9B3A8; background: #FFF7F5; }
.kpi.warn strong { color: var(--danger); }
.two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
.card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-top: 14px; min-width: 0; }
.two .card { margin-top: 0; }
.card h3, .card legend { font-size: 15px; font-weight: 800; }
fieldset.card legend { padding-inline: 6px; }
.bars { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.bars .bar { height: 12px; background: var(--sand-tint); border-radius: 3px; overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: var(--palm); border-radius: 3px; }
.bars .n { color: var(--grey); white-space: nowrap; }
.feed { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 6px; font-size: 13.5px; }
.feed li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.feed .d { color: var(--grey); font-size: 12.5px; }
.feed :is(.e-failed, .e-retry_failed, .e-final_wait, .e-awaiting) span:last-child { color: var(--danger); }
.feed :is(.e-cancelled) span:last-child { color: #77706A; }
.tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 14px; }
.tools .grow { flex: 1; min-width: 200px; }
.day { margin-top: 16px; }
.day h3 { font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.day h3 small { font-weight: 400; color: var(--grey); }
.day ul { list-style: none; padding: 0; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.day li { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; padding: 7px 12px; font-size: 14px; }
.day li + li { border-top: 1px solid var(--line); }
.fps { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 14px; }
.fp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #E9B3A8; border-radius: var(--r-md); background: #FFF9F7; font-size: 14.5px; }
.fp small { display: block; margin-top: 4px; color: var(--grey); }
.fp-act { display: flex; flex-wrap: wrap; gap: 6px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.checks.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: 14.5px; margin-top: 6px; }
.check-row span { display: grid; }
.check-row small { color: var(--grey); }
.check-row:has(input:checked) { border-color: var(--palm); background: #FBF5EE; }
.range { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.range input { flex: 1; accent-color: var(--palm); }
.range output { font-size: 20px; font-weight: 800; color: var(--palm); min-width: 50px; }
.seg-row { display: flex; gap: 6px; }
.admin-main .sbtn { color: var(--palm); border-color: var(--line); }
.admin-main .sbtn.on, .dlg-langs .sbtn.on { background: var(--palm); border-color: var(--palm); color: var(--white); }
.packing h3 { margin-top: 16px; font-size: 16px; }
.pack-sum { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pack-sum li { padding: 4px 12px; border-radius: 999px; background: var(--sand-tint); font-size: 14px; }
.tick { text-align: center; width: 40px; }
.box { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--grey); border-radius: 3px; }
.msgs { list-style: none; padding: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.msgs li + li { border-top: 1px solid var(--line); }
.msgs button { width: 100%; display: grid; grid-template-columns: 64px 170px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; font: 14px var(--f); text-align: start; background: var(--white); border: 0; cursor: pointer; color: var(--graphite); }
.msgs button:hover { background: var(--sand-tint); }
.msgs .d { color: var(--grey); font-size: 12.5px; }
.msgs .k { font-weight: 800; color: var(--palm); }
.msgs :is(.k-failed, .k-due, .k-hold) { color: var(--danger); }
.msgs .ch { display: flex; gap: 4px; }
.msgs .ch i { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: #E7F4EA; color: #1F6B35; }
.msgs .ch .ch-email { background: var(--sand-tint); color: var(--palm); }

/* Message preview dialog */
.mq-dialog { margin: auto; border: 0; border-radius: var(--r-md); padding: 0; width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 32px); color: var(--graphite); box-shadow: 0 24px 60px rgba(43, 26, 16, .35); }
.mq-dialog::backdrop { background: rgba(43, 26, 16, .45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; background: var(--palm); color: var(--white); }
.dlg-head h2 { font-size: 16px; color: var(--white); line-height: 1.5; }
.dlg-langs { display: flex; gap: 6px; padding: 12px 18px 0; }
.dlg-langs .sbtn { color: var(--palm); border-color: var(--line); }
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 18px; }
.mq-dialog > .fine { padding: 0 18px 16px; font-size: 13px; color: var(--grey); }
.dlg-grid figcaption { font-size: 12.5px; font-weight: 800; color: var(--grey); margin-bottom: 6px; }
.wa-screen { background: #ECE5DA; border-radius: var(--r-md); padding: 16px 12px; min-height: 200px;
  background-image: radial-gradient(rgba(107, 58, 31, .07) 1px, transparent 1px); background-size: 14px 14px; }
.wa-bubble { position: relative; background: #DCF3D3; border-radius: 10px; padding: 9px 12px 20px; font-size: 14.5px; line-height: 1.7; max-width: 92%; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); white-space: pre-line; overflow-wrap: anywhere; }
.wa-time { position: absolute; bottom: 4px; inset-inline-end: 8px; font-size: 11px; color: #6B7B6A; }
.mail-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; }
.mail-from { color: var(--grey); font-size: 12.5px; }
.mail-subj { font-weight: 800; margin-top: 4px; font-size: 15px; }
.mail-body { margin-top: 8px; line-height: 1.75; overflow-wrap: anywhere; }

/* Activity drawer and toast */
.activity { position: fixed; z-index: 70; inset-block: 0; inset-inline-end: 0; width: min(420px, 100vw); background: var(--white); border-inline-start: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(43, 26, 16, .18); display: flex; flex-direction: column; animation: act-in .18s ease-out; }
.activity[hidden] { display: none; }
@keyframes act-in { from { opacity: 0; transform: translateX(16px); } }
html[dir="rtl"] .activity { animation-name: act-in-rtl; }
@keyframes act-in-rtl { from { opacity: 0; transform: translateX(-16px); } }
.act-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--code); color: var(--white); }
.act-head h2 { font-size: 17px; color: var(--white); line-height: 1.5; }
.act-head h2:focus { outline: none; }
.act-head .sbtn { border-color: rgba(243, 233, 221, .35); }
.activity .feed { overflow-y: auto; padding: 12px 18px; margin: 0; }
.mq-toast { position: fixed; z-index: 80; inset-block-end: 20px; inset-inline-start: 20px; max-width: min(460px, calc(100vw - 110px)); padding: 12px 16px; border-radius: var(--r-md);
  background: var(--code); color: #F3E9DD; font-size: 14.5px; box-shadow: 0 10px 28px rgba(43, 26, 16, .3); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.mq-toast.show { opacity: 1; transform: none; }
.mq-toast:empty { display: none; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .pdp { grid-template-columns: 1fr; gap: 18px; }
  .pdp-art { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
  .pdp-art .chips { margin-top: 0; }
  .art.lg span { font-size: 13px; }
  .admin-body { grid-template-columns: 1fr; min-height: 0; }
  .admin-nav[role="tablist"] { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .admin-nav [role="tab"] { white-space: nowrap; }
  .co-grid { grid-template-columns: 1fr; }
  .dlg-grid { grid-template-columns: 1fr; }
  .msgs button { grid-template-columns: 54px 1fr auto; }
  .msgs .who { grid-column: 2 / -1; grid-row: 2; font-size: 13px; color: var(--grey); }
  .day li { grid-template-columns: 1fr 1fr; }
  .checks, .checks.row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .demo-tabs[role="tablist"] { gap: 6px; }
  .demo-tabs [role="tab"] { padding: 8px 10px; }
  .demo-tabs [role="tab"] small { display: none; }
  .demo-tabs [role="tab"] b { font-size: 14.5px; }
  /* On a phone the bar would cover half the screen, so it scrolls with the page */
  .simbar { gap: 8px; padding: 8px 10px; position: static; }
  .sim-tag { width: 100%; }
  .sim-btns.end { margin-inline-start: 0; }
  .sbtn { padding: 6px 9px; font-size: 13px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi strong { font-size: 20px; }
  .store-nav { display: none; }
  .admin-main { padding: 16px 14px 22px; }
  .bars li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .bars .bar { grid-column: 1 / -1; grid-row: 2; }
  .offers { grid-template-columns: 1fr; }
  .portal { padding: 14px 8px; }
  .login, .pbody { padding: 16px 14px 20px; }
  .checkout, .done { margin-inline: 12px; }
  .pdp, .crumbs { padding-inline: 12px; }
  .mq-toast { inset-inline: 12px; max-width: none; inset-block-end: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .activity { animation: none; }
  .mq-toast { transition: none; }
}

/* Printing the packing list: only the list is printed */
@media print {
  html.print-pack body * { visibility: hidden; }
  html.print-pack .packing, html.print-pack .packing * { visibility: visible; }
  html.print-pack .packing { position: absolute; inset-inline: 0; top: 0; }
  html.print-pack .simbar { display: none; }
  .packing .tbl { font-size: 11pt; }
}