/* Ora-Migo Shop. One light theme for the whole site. Fonts load from Google Fonts with system fallbacks. */
:root{
  --bg:#edf2ef; --surface:#ffffff; --ink:#12201b; --muted:#55655f; --line:#d3ddd8;
  --brand:#0e5a46; --brand-hover:#0a4636; --hero:#0c3b2f; --hero-ink:#e9f4ef; --hero-line:#25584a;
  --accent:#ffb627; --danger:#b3261e; --ok:#1e7a4f; --warn:#8a5a00;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--body)}
a{color:var(--brand)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:1.8rem;margin-bottom:1rem}
h2{font-size:1.3rem;margin:1.8rem 0 .7rem}
h3{font-size:1.05rem}
.muted{color:var(--muted)}.small{font-size:.86rem}
.wrap{max-width:1080px;margin:0 auto;padding:24px 16px 72px}

/* ---------- header (all pages) ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px max(16px,calc((100% - 1080px)/2));background:var(--surface);border-bottom:1px solid var(--line)}
.nav nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav nav a{text-decoration:none;color:var(--ink);font-weight:500}
.nav nav a:hover{color:var(--brand)}
.brand{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand b{color:var(--brand)}

/* ---------- buttons & forms ---------- */
.btn,button.btn{display:inline-block;background:var(--brand);color:#fff!important;border:0;border-radius:8px;padding:10px 18px;font:600 1rem var(--body);cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{background:var(--brand-hover)}
.btn:disabled{background:#c9d3ce;color:#6c7a74!important;cursor:not-allowed}
.btn.block{display:block;width:100%;margin-top:16px}
.btn.accent{background:var(--accent);color:#1b1500!important}
.btn.accent:hover{background:#ffc447}
.btn.ghost{background:transparent;color:inherit!important;border:1.5px solid currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.big{padding:14px 26px;font-size:1.05rem}
button.link{background:none;border:0;color:var(--brand);font:500 1rem var(--body);cursor:pointer;padding:0}
form.inline{display:inline;margin:0}
input[type=text],input[type=email],input[type=password],input[type=number]{width:100%;padding:10px 12px;background:#fff;border:1.5px solid var(--line);border-radius:8px;color:var(--ink);font:inherit}
input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(14,90,70,.18)}
label{display:block;margin-top:14px;font-size:.9rem;font-weight:500;color:var(--muted)}
label.check{display:flex;gap:8px;align-items:center;font-weight:400}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px}
.panel.narrow{max-width:420px;margin:28px auto}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-weight:500}
.flash.ok{background:#dcf2e6;color:#14532d}.flash.err{background:#fde4e1;color:#7a1710}
.err-text{color:var(--danger);font-size:.86rem;margin-top:4px}

/* ---------- marketplace ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tabs a{padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);background:var(--surface);text-decoration:none;font-weight:500}
.tabs a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.routebox{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;margin-bottom:22px;overflow:hidden}
.routebox>header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 18px;background:#f5f8f6;border-bottom:1.5px solid var(--line)}
.routebox>header h2{margin:0;font-size:1.2rem}
.routebox .inner{padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fff}
.card.wide{margin-bottom:12px}
.card h3{font-size:.98rem;font-weight:600;font-family:var(--body);line-height:1.35;word-break:break-word}
.price{font-family:var(--display);font-size:1.35rem;font-weight:800;margin-top:auto;font-variant-numeric:tabular-nums}
.buy{display:flex;gap:8px}.buy input{width:68px}
details.more{margin-top:14px}
details.more summary{cursor:pointer;font-weight:600;color:var(--brand);padding:6px 0}
details.more .grid{margin-top:12px}
.soon{padding:22px;border:1.5px dashed var(--line);border-radius:12px;background:var(--surface)}

/* ---------- orders / wallet / tables ---------- */
.row{display:flex;justify-content:space-between;gap:12px;align-items:center}
.badge{font-size:.78rem;font-weight:600;padding:2px 10px;border-radius:999px;background:#e5ece8;color:var(--muted)}
.badge.delivered{background:#dcf2e6;color:#14532d}.badge.refunded{background:#fde4e1;color:#7a1710}.badge.processing,.badge.pending,.badge.awaiting_funding,.badge.retry_pending{background:#fff0c7;color:var(--warn)}
pre{background:#f3f6f4;border:1px solid var(--line);border-radius:8px;padding:12px;white-space:pre-wrap;word-break:break-all;margin:8px 0 0;font-size:.9rem}
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:8px}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:.85rem;color:var(--muted);font-weight:600}
.r{text-align:right}td.credit{color:var(--ok);font-weight:600}td.debit{color:var(--danger);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0 24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}.stat.warn{border-color:var(--accent);background:#fff8e6}
.stat .label{color:var(--muted);font-size:.86rem}.stat .value{font-family:var(--display);font-size:1.6rem;font-weight:800}.stat.big{max-width:380px}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.chart svg{width:100%;height:150px;display:block}.bar{fill:var(--brand)}

/* ---------- homepage ---------- */
.site-header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header .in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header nav{display:flex;align-items:center;gap:22px}
.site-header nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500}
.site-header nav a:not(.btn):hover{color:var(--brand)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.hero{background:var(--hero);color:var(--hero-ink);padding:64px 0 76px}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0 0 20px}
.hero p.lead{font-size:1.15rem;max-width:34em;margin:0 0 28px;color:#c9e0d8}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.receipt{background:#fff;color:var(--ink);border-radius:6px;padding:22px 22px 18px;transform:rotate(1.4deg);box-shadow:0 18px 40px rgba(0,0,0,.28);max-width:380px;margin-left:auto}
.receipt .tag{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:12px}
.receipt dl{margin:0}
.receipt .line{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1.5px dashed #c7d2cc}
.receipt .line:first-of-type{border-top:0}
.receipt dt{color:var(--muted)}
.receipt dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.receipt .done{margin-top:6px;padding:10px 12px;border-radius:6px;background:#dcf2e6;color:#14532d;font-weight:600}
.receipt .secret{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.88rem;font-weight:500;margin-top:8px;color:#3b4a44}
.facts{background:var(--surface);border-bottom:1px solid var(--line)}
.facts ul{list-style:none;margin:0;padding:18px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:0 auto}
.facts li{font-weight:600}.facts li span{display:block;font-weight:400;color:var(--muted);font-size:.92rem}
.section{padding:68px 0}
.section h2.title{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0 0 10px;letter-spacing:-.02em}
.section p.intro{max-width:38em;color:var(--muted);margin:0 0 30px}
.shelves{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shelf{border:1.5px solid var(--line);border-radius:12px;padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.shelf h3{font-size:1.15rem}
.shelf p{margin:0;color:var(--muted);font-size:.96rem}
.chip{align-self:flex-start;margin-top:auto;font-size:.8rem;font-weight:600;padding:3px 11px;border-radius:999px}
.chip.open{background:#dcf2e6;color:#14532d}.chip.soon{background:#fff0c7;color:var(--warn)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--brand);padding-top:14px}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-weight:800;font-size:2rem;color:var(--brand);line-height:1}
.steps h3{margin:8px 0 6px}.steps p{margin:0;color:var(--muted)}
.why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why dl{margin:0;display:grid;gap:0}
.why .item{display:grid;grid-template-columns:minmax(180px,.35fr) 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.why .item:first-child{border-top:0}
.why dt{font-family:var(--display);font-weight:700;font-size:1.15rem}
.why dd{margin:0;color:var(--muted);max-width:40em}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem}
.faq details p{margin:10px 0 0;color:var(--muted)}
.cta{background:var(--brand);color:#fff;padding:56px 0;text-align:left}
.cta .container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;color:#fff;max-width:20em}
.site-footer{padding:26px 0;color:var(--muted);font-size:.9rem}
.site-footer .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- error pages ---------- */
.errorpage{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}
.errorpage h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:800;margin-bottom:14px}
.errorpage p{color:var(--muted);margin:0 0 22px}

@media (max-width:960px){
  .hero .container{grid-template-columns:1fr}
  .receipt{margin:8px auto 0;transform:none}
  .shelves{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .site-header nav a:not(.btn){display:none}
  .facts ul,.steps{grid-template-columns:1fr}
  .why .item{grid-template-columns:1fr;gap:6px}
  .hero{padding:44px 0 52px}.section{padding:48px 0}
}
@media (max-width:480px){.shelves{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- logged-in shell: toggleable sidebar + content ---------- */
:root{--sbw:236px;--sbw-rail:62px}
.shell{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .2s ease}
html.sb-collapsed .shell{grid-template-columns:var(--sbw-rail) minmax(0,1fr)}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:12px 10px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:14px;z-index:30}
.sb-head{display:flex;align-items:center;gap:8px;min-height:42px}
.sb-toggle{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.sb-toggle:hover{border-color:var(--brand);color:var(--brand)}
.sidebar .brand{font-size:1.1rem;white-space:nowrap}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a,.sidebar nav button.link{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font:500 .97rem var(--body);white-space:nowrap;background:none;border:0;cursor:pointer;text-align:left}
.sidebar nav a:hover,.sidebar nav button.link:hover{background:#eef3f0}
.sidebar nav a.on{background:var(--brand);color:#fff}
.sidebar .i{flex:0 0 20px}
.sidebar .sb-label{margin:14px 12px 4px;font-size:.78rem;font-weight:600;color:var(--muted)}
.sidebar form.inline{margin:14px 0 0}
.sb-backdrop{display:none}
/* collapsed: icons only */
html.sb-collapsed .sidebar .sb-text{display:none}
html.sb-collapsed .sidebar{padding:12px 9px}
html.sb-collapsed .sidebar nav a,html.sb-collapsed .sidebar nav button.link{justify-content:center;padding:10px 0}
html.sb-collapsed .sidebar .sb-head{justify-content:center}
html.sb-collapsed .sidebar nav{border-top:0}
.content{padding:26px clamp(16px,3vw,36px) 72px;max-width:1180px;width:100%}

/* ---------- category tiles, search, chips, pager ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:6px}
.tile{display:flex;flex-direction:column;gap:3px;padding:16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(14,90,70,.12)}
.tile strong{font-family:var(--display);font-size:1.12rem}
.searchbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.searchbar input[type=text],.searchbar select{flex:1 1 220px;max-width:420px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
.crumbs{margin:0 0 8px;color:var(--muted);font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipLink{padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:#fff}
.chipLink:hover{border-color:var(--brand)}
.pager{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.btn.ghost-dark{background:transparent;color:var(--brand)!important;border:1.5px solid var(--brand)}
.btn.ghost-dark:hover{background:#eaf3ef}
.badge.received,.badge.completed{background:#dcf2e6;color:#14532d}
.badge.cancelled,.badge.expired,.badge.failed{background:#fde4e1;color:#7a1710}
.badge.waiting,.badge.in_progress,.badge.review,.badge.partial,.badge.starting{background:#fff0c7;color:var(--warn)}

@media (max-width:860px){
  /* phone: a 62px icon rail that is always there; the button slides the full menu (icons + names) over the page */
  .shell,html.sb-collapsed .shell{grid-template-columns:var(--sbw-rail) minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;width:var(--sbw-rail);padding:12px 9px;transition:width .2s ease,box-shadow .2s ease}
  .shell > .content{grid-column:2}
  .sidebar .sb-text{display:none}
  .sidebar .sb-head{justify-content:center}
  .sidebar nav a,.sidebar nav button.link{justify-content:center;padding:10px 0}
  html.sb-open .sidebar{width:min(250px,82vw);padding:12px 10px;box-shadow:0 0 0 100vmax rgba(10,25,20,.0),6px 0 24px rgba(10,25,20,.22)}
  html.sb-open .sidebar .sb-text{display:inline}
  html.sb-open .sidebar .sb-label.sb-text{display:block}
  html.sb-open .sidebar .sb-head{justify-content:flex-start}
  html.sb-open .sidebar nav a,html.sb-open .sidebar nav button.link{justify-content:flex-start;padding:10px 12px}
  .sb-backdrop{position:fixed;inset:0;background:rgba(10,25,20,.38);z-index:20}
  .sb-backdrop:not([hidden]){display:block}
  .content{padding:18px 14px 56px}
  h1{font-size:1.5rem}
  .flash{margin-bottom:12px}
}
}

/* ---------- product page, icons ---------- */
.ico{font-size:1.15em;margin-right:2px}
.card-title{color:var(--ink);text-decoration:none}
.card-title:hover{color:var(--brand);text-decoration:underline}
.tile-ico{font-size:1.8rem;line-height:1;margin-bottom:4px}
.product-page{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.product-icon{font-size:3rem;line-height:1;margin-bottom:6px}
.product-desc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-wrap:anywhere;line-height:1.7}
.product-buy{position:sticky;top:18px}
@media (max-width:860px){.product-page{grid-template-columns:1fr}.product-buy{position:static}}

/* ---------- store-front browsing: server > categories > products (also numbers and boost) ---------- */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.steps a,.steps span{padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600}
.steps .on{background:var(--brand);border-color:var(--brand);color:#fff}
.srv-grid,.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:8px}
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.srv,.cat{display:flex;flex-direction:column;gap:7px;padding:18px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.srv:hover,.cat:hover{border-color:var(--brand);box-shadow:0 4px 16px rgba(14,90,70,.14);transform:translateY(-1px)}
.srv strong,.cat strong{font-family:var(--display);font-size:1.1rem;line-height:1.2}
.srv-ico,.cat-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#e3f3ec,#cfe8dd);display:grid;place-items:center;font-size:1.5rem;margin-bottom:2px}
.pill{align-self:flex-start;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;background:#dcf2e6;color:#14532d}
.pill.alt{background:#fff0c7;color:var(--warn)}
.cat-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.cat .open{font-weight:600;color:var(--brand);font-size:.9rem}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.filters input{flex:1 1 150px;max-width:260px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
.filters input[type=text]{flex:2 1 220px;max-width:380px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.pc{display:flex;flex-direction:column;gap:9px;padding:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}
.pc:hover{border-color:var(--brand)}
.pc-ico{width:38px;height:38px;border-radius:10px;background:#e8eefb;display:grid;place-items:center;font-size:1.25rem}
.pc-name{font-size:.95rem;font-weight:600;font-family:var(--body);line-height:1.35;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto}
.pc-row .price{margin:0;font-size:1.2rem}
.stock{font-size:.78rem;font-weight:600;color:var(--ok)}
.pc-btn{text-align:center}
.idcol{color:var(--muted);font-variant-numeric:tabular-nums;width:64px}
@media (max-width:560px){.srv-grid,.cat-grid,.pgrid{grid-template-columns:1fr 1fr}.filters input,.filters input[type=text]{max-width:none}}
.chipLink.on{background:var(--brand);border-color:var(--brand);color:#fff}.chipLink{display:inline-block;margin:0 6px 6px 0}

/* ---------- order history and order page ---------- */
.tablewrap{overflow-x:auto}
.otable{min-width:640px}
.otable th{background:var(--brand);color:#fff;text-align:left;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px}
.otable th.r,.otable td.r{text-align:right}
.otable td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
.otable tbody tr:hover{background:#f5f8f6}
.otitle{max-width:340px;word-break:break-word}
.oid{font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.small-btn{padding:6px 14px;font-size:.88rem}
.odetail{max-width:760px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:22px}
.ohead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.ohead h1{margin:6px 0 4px;font-size:1.4rem}
.oright{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.oright .price{margin:0}
.cred,.hold{border:1.5px solid var(--line);border-radius:12px;padding:16px;margin:14px 0;background:#fbfdfc}
.cred h2,.hold h2,.osum h2{font-size:1.05rem;margin:0 0 8px}
.cred pre{margin:12px 0 0;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-all;background:#f2f6f4;border:1px solid var(--line);border-radius:8px;padding:12px;user-select:all}
.credtools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.notice{background:#fff7dd;border:1px solid #f0dc9a;border-radius:10px;padding:12px 16px;margin:14px 0;font-size:.92rem}
.notice ul{margin:6px 0 0;padding-left:18px}
.remind{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.codebox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.codebox code{font-size:1.05rem;font-weight:700;letter-spacing:.04em;background:#eef4f1;border:1px solid var(--line);border-radius:8px;padding:8px 12px;word-break:break-all;user-select:all}
.osum dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0}
.osum dt{color:var(--muted)}.osum dd{margin:0;text-align:right;word-break:break-word}
.oactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (max-width:640px){
  .otable{min-width:0;width:100%}
  .otable thead{display:none}
  .otable,.otable tbody{display:block}
  .otable tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"id status" "item item" "date amt" "qty act";gap:4px 12px;align-items:center;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:12px 14px;background:#fff}
  .otable td{display:block;border:0;padding:0;text-align:left!important}
  .otable td.c-id{grid-area:id}.otable td.c-status{grid-area:status;justify-self:end}
  .otable td.c-item{grid-area:item;font-weight:600;max-width:none}
  .otable td.c-date{grid-area:date;color:var(--muted);font-size:.84rem}
  .otable td.c-amt{grid-area:amt;justify-self:end;font-weight:700}
  .otable td.c-qty{grid-area:qty;color:var(--muted);font-size:.84rem}
  .otable td.c-qty::before{content:"Qty ";}
  .otable td.c-act{grid-area:act;justify-self:end}
  .tablewrap{overflow:visible}
}

/* ---------- small-screen polish ---------- */
.content img,.content table{max-width:100%}
.otitle{overflow-wrap:anywhere}
@media (max-width:480px){
  .srv-grid,.cat-grid,.pgrid{grid-template-columns:1fr}
  .odetail{padding:16px}
  .osum dl{grid-template-columns:110px 1fr}
  .oright{align-items:flex-start;text-align:left}
}
@media (min-width:1280px){.content{max-width:1280px}}

/* ---------- live search suggestions ---------- */
.sg-wrap{position:relative;flex:1 1 260px;max-width:460px}
.sg-wrap input[type=text]{width:100%;max-width:none}
.sg-list{position:absolute;z-index:15;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(10,25,20,.14);max-height:340px;overflow:auto}
.sg-list li a{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.sg-list li a .muted{grid-column:1}.sg-list li a .sg-price{grid-row:1/3;grid-column:2;align-self:center;font-weight:700}
.sg-list li.on a,.sg-list li a:hover{background:#eef3f0}
.sg-note{padding:10px;color:var(--muted);font-size:.9rem}

[hidden]{display:none!important}

/* Settings page */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start;max-width:1000px}
.settings-grid .panel{padding:20px}
.settings-grid h3{margin:0 0 6px}
.settings-grid input{width:100%}
.settings-grid .btn{margin-top:12px}

/* Order receipt (own class names: .receipt belongs to the home page example) */
.orcpt{max-width:440px;margin:22px auto;text-align:center}
.orcpt h2{margin:0 0 10px}
.orcpt-card{background:#fff;border:1.5px dashed var(--line);border-radius:12px;padding:18px 20px;text-align:left}
.orcpt-brand{font-family:var(--display);font-weight:800;font-size:1.15rem}
.orcpt-no{color:var(--muted);font-size:.85rem;margin-bottom:10px}
.orcpt dl{display:grid;grid-template-columns:96px 1fr;gap:7px 12px;margin:0}
.orcpt dt{color:var(--muted)}
.orcpt dd{margin:0;word-break:break-word;text-align:right}
.orcpt .credtools{justify-content:center;margin-top:12px}

/* Order filters */
.ofilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ofilter a{padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;font-size:.95rem}
.ofilter a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* Shop assistant */
.ai-fab{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:60}
.ai-win{position:fixed;right:16px;bottom:78px;width:min(360px,calc(100vw - 32px));height:min(480px,70vh);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;z-index:60;overflow:hidden}
.ai-win[hidden]{display:none}
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--hero);color:var(--hero-ink)}
.ai-x{background:none;border:0;color:inherit;font-size:1.4rem;cursor:pointer}
.ai-log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.ai-msg{max-width:88%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word;font-size:.95rem}
.ai-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start}
.ai-msg.me{background:var(--brand);color:#fff;align-self:flex-end}
.ai-msg.me a{color:#fff}
.ai-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.ai-form input{flex:1;min-width:0}
.ai-send{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:0 14px;cursor:pointer}
.ai-help{border:0;border-top:1px solid var(--line);background:#fff;padding:9px;color:var(--brand);font-weight:600;cursor:pointer}
.ai-wa{align-self:flex-start;font-weight:600}

/* Picture listings */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lcard{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--ink);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.lcard:hover{border-color:var(--brand);box-shadow:0 4px 16px rgba(14,90,70,.14)}
.lthumb{aspect-ratio:4/3;background:#e3ebe7;display:grid;place-items:center;overflow:hidden}
.lthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lbody{display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.lprice{font-weight:700;color:var(--brand)}
.lpreview{margin:26px 0}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.lhead h2{margin:0}
.lpics{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.lpics img{max-width:min(100%,360px);border-radius:10px;border:1px solid var(--line)}
.lspecs{display:grid;grid-template-columns:150px 1fr;gap:6px 14px}
.lspecs dt{color:var(--muted)} .lspecs dd{margin:0}

/* ---------- Update 18: wallet tabs, transactions, recommended payment, settings ---------- */
.reco{border:2px solid var(--brand);border-radius:12px;padding:12px;margin:0 0 14px;background:var(--surface)}
.reco-tag{background:var(--brand);color:#fff;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.wtabs{margin-top:28px}
.wtabs>input{position:absolute;opacity:0;pointer-events:none}
.wtabs .wt-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.wtabs .wt-bar label{padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600;background:var(--surface)}
.wtabs .wt-pane{display:none}
#wt-pp:checked~.wt-bar label[for=wt-pp],#wt-cr:checked~.wt-bar label[for=wt-cr],#wt-mn:checked~.wt-bar label[for=wt-mn]{background:var(--brand);border-color:var(--brand);color:#fff}
#wt-pp:checked~.wt-panes #p-pp,#wt-cr:checked~.wt-panes #p-cr,#wt-mn:checked~.wt-panes #p-mn{display:block}
#wt-pp:focus-visible~.wt-bar label[for=wt-pp],#wt-cr:focus-visible~.wt-bar label[for=wt-cr],#wt-mn:focus-visible~.wt-bar label[for=wt-mn]{outline:2px solid var(--ink);outline-offset:2px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin:10px 0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-all}
.tlist .in{color:#0a7a3b;font-weight:700}.tlist .out{color:#b3261e;font-weight:700}
.subnav{display:flex;gap:8px;margin:10px 0 18px}.subnav a{padding:7px 16px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600}.subnav a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.route-tag{display:inline-block;background:#fff4d6;color:#7a5200;border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:700;margin-left:6px}
.acc{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:0 0 12px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .t{font-weight:700}.acc summary .v{color:var(--muted);font-size:.92rem}
.acc summary:after{content:"›";font-size:1.4rem;transition:transform .15s}
.acc[open] summary:after{transform:rotate(90deg)}
.acc .body{padding:4px 18px 18px;border-top:1px solid var(--line)}