/* Oxi shops (oxishops.com): the buyer pages' look, layered over seller.css and loaded only by pages.shell().
   Same principles as oxiai.africa: a clean ground, Geist type set tight, a frosted pill top bar, pill buttons,
   soft cards that lift, one bold moment on the home page. OxiSeller's palm-oil accent marks the main action.
   Colours come from tokens; the dark block redefines them so the seller.css dark mode still holds. */
:root {
  --bg: #F4F3F0;
  --paper: #FFFFFF;
  --ink: #13201A;
  --muted: #5E6862;
  --line: #E4E2DB;
  --palm: #C2401E;
  --palm-ink: #8F2E14;
  --sh-deep: #14301F;
  --sh-deep-ink: #F2F5EF;
  --sh-volt: #D4F25A;
  --sh-glass: rgba(255, 255, 255, .78);
  --sh-shadow: 0 1px 0 rgba(19, 32, 26, .04), 0 14px 30px -18px rgba(19, 32, 26, .35);
  --sh-shadow-up: 0 1px 0 rgba(19, 32, 26, .04), 0 26px 44px -22px rgba(19, 32, 26, .45);
  --sh-word: #FBF4EE;
  --sh-word-shadow: rgba(143, 46, 20, .26);
  --radius: 18px;
  --sh-display: "Geist", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sh-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D110F; --paper: #151B18; --ink: #EEF2EC; --muted: #9DA8A2; --line: #26302B;
    --palm: #FF7656; --palm-ink: #FF9A80; --sh-deep: #0A1710; --sh-deep-ink: #EEF2EC;
    --sh-glass: rgba(21, 27, 24, .78);
    --sh-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .8);
    --sh-shadow-up: 0 1px 0 rgba(0, 0, 0, .3), 0 26px 44px -22px rgba(0, 0, 0, .9);
    --sh-word: #F1E3D8; --sh-word-shadow: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D110F; --paper: #151B18; --ink: #EEF2EC; --muted: #9DA8A2; --line: #26302B;
  --palm: #FF7656; --palm-ink: #FF9A80; --sh-deep: #0A1710; --sh-deep-ink: #EEF2EC;
  --sh-glass: rgba(21, 27, 24, .78);
  --sh-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .8);
  --sh-shadow-up: 0 1px 0 rgba(0, 0, 0, .3), 0 26px 44px -22px rgba(0, 0, 0, .9);
  --sh-word: #F1E3D8; --sh-word-shadow: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

body { background: var(--bg); color: var(--ink); font-family: var(--sh-display); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--sh-display); font-stretch: normal; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-weight: 700; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700; }

/* ---------- Top bar: a frosted pill on the clean ground ---------- */
:root .oxs-top { background: transparent; color: var(--ink); top: env(safe-area-inset-top, 0px); padding: 10px 0 0; }
:root .oxs-top .in { max-width: 1120px; margin: 0 auto; padding: 6px 8px 6px 18px; min-height: 52px; border-radius: 999px;
  background: var(--sh-glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--sh-shadow), inset 0 0 0 1px var(--line); width: calc(100% - 24px); }
:root .oxs-top a { color: var(--ink); }
:root .oxs-top .brand { font: 800 1.15rem/1 var(--sh-display); letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 8px; }
:root .oxs-top .brand::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--palm); box-sizing: border-box; box-shadow: 9px -9px 0 -6px var(--sh-volt); }
:root .oxs-top a.mine { background: var(--sh-deep); color: var(--sh-deep-ink); padding: 8px 16px; }
:root .oxs-top a.mine:hover { text-decoration: none; opacity: .92; }
:root .oxs-top a.back:hover, :root .oxs-top .brand:hover { text-decoration: none; color: var(--palm-ink); }

/* ---------- Shared pieces ---------- */
:root .btn { border-radius: 999px; min-height: 44px; padding: 0 20px; font-weight: 600; transition: transform .2s, background .2s, box-shadow .2s; }
:root .btn:hover { transform: translateY(-1px); }
:root .btn.small { min-height: 36px; padding: 0 14px; }
:root .panel { border-radius: var(--radius); border: 0; box-shadow: var(--sh-shadow), inset 0 0 0 1px var(--line); }
:root .badge { border-radius: 999px; }
:root label.f input, :root label.f select, :root label.f textarea { border-radius: 14px; }
:root .chipset a { padding: 7px 14px; background: var(--paper); border-color: var(--line); }
:root .chipset a.on { background: var(--sh-deep); border-color: var(--sh-deep); color: var(--sh-deep-ink); }

:root .shop-head { background: transparent; border-bottom: 0; }
:root .shop-head .in { max-width: 1120px; padding: 34px 20px 14px; }
:root .shop-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-stretch: normal; }
:root .shop-head .where { margin-top: 8px; font-size: .95rem; }
:root .shop-logo { border-radius: 20px; box-shadow: var(--sh-shadow); }
:root .jump { gap: 6px !important; margin-top: 14px !important; flex-wrap: wrap; }
:root .jump a { padding: 6px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-size: .9rem; color: var(--ink) !important; }
:root .jump a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
:root .shop-body { max-width: 1120px; padding: 18px 20px 56px; }
:root .goods { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
:root .good, :root .svc, :root .dish { border: 0; border-radius: 20px; box-shadow: var(--sh-shadow); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
:root .good:hover, :root .svc:hover, :root .dish:hover { transform: translateY(-3px); box-shadow: var(--sh-shadow-up); }
:root .good img { border-radius: 14px; }
:root .good .p, :root .svc .p { font-stretch: normal; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:root .finder { background: var(--paper); padding: 12px; border-radius: 22px; box-shadow: var(--sh-shadow); }
:root .finder label.f { margin-bottom: 0; }
:root .cart-bar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 999px; background: var(--sh-deep); color: var(--sh-deep-ink); }
:root .cart-bar a.go { background: var(--sh-volt); color: #14301F; }
:root .oxi-explore a { color: var(--muted); }

/* ---------- Home page (oxishops.com) ---------- */
.shops-home { overflow-x: hidden; }
.sh-wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sh-kicker { font: 500 .75rem/1.4 var(--sh-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.sh-h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.04em; margin: 10px 0 0; max-width: 20ch; }
.sh-lead { font-size: 1.1rem; color: var(--muted); max-width: 58ch; margin: 0; }
.sh-sec { padding-block: clamp(56px, 8vw, 104px); }
.sh-head { display: grid; gap: 14px; margin-bottom: 32px; }
@media (min-width: 900px) { .sh-head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; } }

.sh-hero { position: relative; text-align: center; padding-top: 10px; }
.sh-stage { position: relative; max-width: 980px; margin: 0 auto; }
.sh-word { display: block; width: min(100%, 900px); height: auto; margin: 0 auto; overflow: visible; }
.sh-word text { font-family: var(--sh-display); font-weight: 900; letter-spacing: -3px; }
.sh-tag { margin: 0 auto; max-width: 32ch; font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.4; font-weight: 500; }
.sh-tag b { color: var(--palm-ink); font-weight: 700; background: linear-gradient(var(--sh-volt), var(--sh-volt)) 0 92% / 100% 30% no-repeat; padding: 0 2px; }

.sh-search { display: flex; gap: 6px; align-items: center; max-width: 640px; margin: 22px auto 0; padding: 6px; border-radius: 999px; background: var(--paper); box-shadow: var(--sh-shadow-up), inset 0 0 0 1px var(--line); text-align: left; }
.sh-search label { flex: 1; min-width: 0; display: flex; }
.sh-search input, .sh-search select { border: 0; background: transparent; font: 500 1rem var(--sh-display); color: var(--ink); padding: 10px 12px; min-width: 0; width: 100%; }
.sh-search input:focus, .sh-search select:focus { outline: none; }
/* Fixed colours for the search box and every form field on buyer pages, so Windows never draws its own white
   behind light text (the dropdown list, the typed text, browser autofill), in light or dark mode. */
.sh-search input, .sh-search select { background: var(--paper); color: var(--ink); -webkit-text-fill-color: var(--ink); min-height: 46px; border: 0; box-shadow: none; }
.sh-search input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
:root input, :root select, :root textarea { background-color: var(--paper); color: var(--ink); }
:root select option, :root select optgroup { background-color: var(--paper); color: var(--ink); }
:root input:-webkit-autofill, :root input:-webkit-autofill:hover, :root input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--paper) inset; caret-color: var(--ink); }
.sh-search:focus-within { box-shadow: var(--sh-shadow-up), inset 0 0 0 2px var(--palm); }
.sh-search .sh-state { flex: 0 0 auto; border-left: 1px solid var(--line); }
.sh-search .sh-state select { width: auto; max-width: 150px; }
.sh-search button { flex: none; min-height: 46px; }
@media (max-width: 560px) { .sh-search .sh-state { display: none; } }
.sh-hints { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; font-size: .85rem; }
.sh-hints a { padding: 5px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.sh-hints a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.sh-float { position: absolute; z-index: 3; width: 88px; height: 88px; display: block; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sh-float svg { width: 100%; height: 100%; animation: sh-bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 14px 14px rgba(19, 32, 26, .2)); transition: transform .3s; }
.sh-float:hover svg { transform: scale(1.12) rotate(-6deg); }
.sh-float span { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; font: 500 .7rem var(--sh-mono); color: var(--muted); opacity: 0; transition: opacity .2s; }
.sh-float:hover span, .sh-float:focus-visible span { opacity: 1; }
@keyframes sh-bob { 0%, 100% { translate: 0 0; rotate: var(--r0, -4deg); } 50% { translate: 0 -12px; rotate: var(--r1, 4deg); } }
.sh-f1 { left: 0; top: 4%; --d: -1s; }
.sh-f2 { right: 1%; top: 0; --d: -3s; --r0: 6deg; --r1: -3deg; }
.sh-f3 { left: 7%; top: 50%; --d: -2s; }
.sh-f4 { right: 7%; top: 48%; --d: -4s; --r0: 3deg; --r1: -6deg; }
.sh-f5 { left: 27%; top: -6%; --d: -5s; width: 62px; height: 62px; }
.sh-f6 { right: 26%; top: -7%; --d: -.5s; width: 64px; height: 64px; }
@media (max-width: 720px) { .sh-float { width: 52px; height: 52px; } .sh-f3, .sh-f4 { top: 60%; } .sh-f5, .sh-f6 { display: none; } .sh-f1 { top: -4%; left: -2%; } .sh-f2 { top: -6%; right: -2%; } }

.sh-fan { position: relative; height: 270px; margin-top: 18px; }
.sh-card { position: absolute; left: 50%; bottom: 6px; width: 180px; height: 238px; margin-left: -90px; border-radius: 22px; overflow: hidden; text-align: left; text-decoration: none; color: var(--ink); background: var(--paper); box-shadow: var(--sh-shadow-up); transform-origin: 50% 120%; transform: rotate(calc(var(--i) * 9deg)) translateY(calc(var(--a) * 10px)); transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.sh-card .tint { position: absolute; inset: 0 0 auto; height: 56%; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.sh-card .tint svg { position: absolute; right: 12px; top: 14px; width: 60px; height: 60px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.sh-card em { position: absolute; left: 14px; top: 12px; font: 500 .7rem var(--sh-mono); font-style: normal; color: rgba(255, 255, 255, .92); }
.sh-card .body { position: absolute; left: 0; right: 0; top: 56%; bottom: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.sh-card b { font: 700 1rem/1.15 var(--sh-display); letter-spacing: -0.01em; }
.sh-card i { font: 500 .72rem/1.3 var(--sh-mono); font-style: normal; color: var(--muted); }
.sh-fan:hover .sh-card { transform: rotate(calc(var(--i) * 12deg)) translateY(calc(var(--a) * 14px - 18px)); }
.sh-fan .sh-card:hover, .sh-fan .sh-card:focus-visible { transform: rotate(calc(var(--i) * 12deg)) translateY(calc(var(--a) * 14px - 54px)); z-index: 5; }
@media (max-width: 720px) {
  .sh-fan { height: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 18px; margin-top: 26px; }
  .sh-card { position: relative; left: auto; bottom: auto; margin: 0; flex: 0 0 156px; height: 214px; transform: none !important; scroll-snap-align: start; }
}

.sh-strip { background: var(--paper); border-block: 1px solid var(--line); position: relative; z-index: 2; }
.sh-strip .sh-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; padding-block: 18px; color: var(--muted); font-size: .95rem; }
.sh-strip b { color: var(--ink); }

.sh-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sh-shop { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--paper); text-decoration: none; color: var(--ink); box-shadow: var(--sh-shadow); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; min-width: 0; }
.sh-shop:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow-up); }
.sh-shop .tint { position: relative; height: 124px; background: linear-gradient(150deg, var(--c1, #E0703F), var(--c2, #A8341A)); overflow: hidden; }
.sh-shop .tint::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.sh-shop .tint svg { position: absolute; right: 16px; top: 50%; width: 92px; height: 92px; margin-top: -46px; z-index: 1; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .2)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.sh-shop:hover .tint svg { transform: rotate(-8deg) scale(1.08); }
.sh-shop .tint em { position: absolute; left: 16px; bottom: 14px; z-index: 1; font: 500 .7rem/1 var(--sh-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .95); }
.sh-shop .body { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 18px; flex: 1; }
.sh-shop b { font: 700 1.1rem/1.2 var(--sh-display); letter-spacing: -0.015em; }
.sh-shop .meta { color: var(--muted); font-size: .88rem; }
.sh-shop .go { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: .9rem; color: var(--palm-ink); }

.sh-rows { border-top: 1px solid var(--line); }
.sh-row { border-bottom: 1px solid var(--line); }
.sh-row summary { list-style: none; display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 16px; padding-block: 22px; cursor: pointer; }
.sh-row summary::-webkit-details-marker { display: none; }
.sh-row .n { font: 700 clamp(1.3rem, 2.6vw, 2rem)/1 var(--sh-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-row h3 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.035em; margin: 0; }
.sh-row summary:hover h3 { text-decoration: underline; text-decoration-color: var(--sh-volt); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.sh-plus { width: 40px; height: 40px; position: relative; }
.sh-plus::before, .sh-plus::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2.5px; margin-top: -1.25px; background: var(--palm); border-radius: 2px; transition: transform .35s; }
.sh-plus::after { transform: rotate(90deg); }
.sh-row[open] .sh-plus::after { transform: rotate(0); }
.sh-row .txt { padding: 0 0 26px 80px; color: var(--muted); max-width: 72ch; }
.sh-row .txt p { max-width: none; }
@media (max-width: 640px) { .sh-row summary { grid-template-columns: 40px 1fr 40px; } .sh-row .txt { padding-left: 0; } }

/* the assistant demo: a frosted phone */
.sh-demo { background: var(--paper); border-block: 1px solid var(--line); }
.sh-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px; scrollbar-width: none; }
.sh-tabs::-webkit-scrollbar { display: none; }
.sh-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 8px 15px 8px 8px; border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 .9rem var(--sh-display); }
.sh-tab i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(150deg, var(--c1), var(--c2)); }
.sh-tab[aria-selected="true"] { background: var(--sh-deep); color: var(--sh-deep-ink); }
.sh-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) { .sh-grid { grid-template-columns: 1fr 370px 1fr; gap: 36px; } }
.sh-grid > * { min-width: 0; }
.sh-side h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; margin: 8px 0 0; }
.sh-side p { color: var(--muted); margin-top: 12px; }
.sh-side .btn { margin-top: 18px; }
.sh-phone { width: 100%; max-width: 350px; margin: 0 auto; aspect-ratio: 350 / 740; border-radius: 48px; padding: 10px; background: #E9EAE6; box-shadow: 0 1px 0 #fff inset, 0 40px 80px -40px rgba(19, 32, 26, .55), 0 0 0 1px rgba(19, 32, 26, .08); }
.sh-screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; display: flex; flex-direction: column; color: #13201A; background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 33%, #EFF0F1 64%, #F7F7F6 100%); transition: background .6s; }
.sh-notch { position: absolute; left: 50%; top: 11px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #0B0F0D; }
.sh-sbar { display: flex; justify-content: space-between; padding: 14px 24px 0; font: 600 .8rem var(--sh-display); color: #fff; }
.sh-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 20px 22px 12px; color: #fff; }
.sh-ph h4 { margin: 0; font: 600 1.5rem/1.08 var(--sh-display); letter-spacing: -0.02em; }
.sh-ph p { margin: 4px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.sh-ring { width: 54px; height: 54px; flex: none; position: relative; }
.sh-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.sh-ring circle { fill: none; stroke-width: 3; }
.sh-ring .bg { stroke: rgba(255, 255, 255, .35); }
.sh-ring .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.sh-ring b { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 .8rem/1 var(--sh-display); color: #fff; }
.sh-ring small { display: block; font: 500 .5rem/1.1 var(--sh-display); opacity: .85; margin-top: 2px; }
.sh-glass { margin: 0 12px; border-radius: 26px; background: rgba(255, 255, 255, .62); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px -18px rgba(20, 40, 60, .35); }
.sh-ctx { display: flex; justify-content: space-between; gap: 8px; padding: 11px 16px; font-size: .72rem; color: #33403A; }
.sh-focus { margin: -2px 6px 0; padding: 15px 16px 14px; border-radius: 22px; background: rgba(255, 255, 255, .88); box-shadow: 0 8px 24px -14px rgba(20, 40, 60, .4); min-height: 210px; display: flex; flex-direction: column; transition: opacity .3s, transform .3s, filter .3s; }
.sh-focus.swap { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px); }
.sh-ftop { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .68rem; color: #5B6660; }
.sh-ftop .who { display: flex; align-items: center; gap: 7px; }
.sh-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(150deg, var(--c1), var(--c2)); display: grid; place-items: center; color: #fff; font: 700 .55rem var(--sh-display); }
.sh-focus h5 { margin: 10px 0 0; font: 600 1.25rem/1.15 var(--sh-display); letter-spacing: -0.02em; color: #0E1511; }
.sh-focus p { margin: 7px 0 0; font-size: .8rem; line-height: 1.45; color: #3E4944; }
.sh-ffoot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-cta { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 9px; border-radius: 999px; background: #0E1511; color: #fff; font: 600 .74rem var(--sh-display); }
.sh-cta::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #D4F25A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l5 4-5 4z' fill='%230E1511'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sh-cta.done { background: #E8F7D0; color: #2C4700; cursor: default; padding-left: 14px; }
.sh-cta.done::before { display: none; }
.sh-meta { font-size: .66rem; color: #5B6660; text-align: right; }
.sh-focus.handed .sh-ftop::after { content: "Passed to the shop"; font-weight: 600; color: #2C4700; background: #E8F7D0; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.sh-think { display: flex; gap: 5px; margin-top: 16px; }
.sh-think i { width: 7px; height: 7px; border-radius: 50%; background: #9AA59F; animation: sh-th 1s infinite; }
.sh-think i:nth-child(2) { animation-delay: .15s; } .sh-think i:nth-child(3) { animation-delay: .3s; }
@keyframes sh-th { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.sh-next { display: flex; gap: 8px; padding: 10px 16px; font-size: .68rem; color: #4A5650; }
.sh-next b { color: #1B2621; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-week { margin-top: 10px; padding: 12px 14px 14px; }
.sh-week-h { display: flex; justify-content: space-between; font-size: .68rem; color: #4A5650; margin-bottom: 8px; }
.sh-week-g { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; text-align: center; }
.sh-week-g div { padding: 7px 0 8px; border-radius: 14px; font-size: .6rem; color: #6B7670; }
.sh-week-g b { display: block; margin-top: 3px; font: 600 .78rem var(--sh-display); color: #1B2621; }
.sh-week-g .on { background: rgba(255, 255, 255, .95); box-shadow: 0 6px 14px -8px rgba(20, 40, 60, .5); }
.sh-sugg { display: flex; gap: 6px; overflow-x: auto; padding: 12px 12px 8px; margin-top: auto; scrollbar-width: none; }
.sh-sugg::-webkit-scrollbar { display: none; }
.sh-sugg button { flex: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1B2621; font: 500 .7rem var(--sh-display); box-shadow: 0 4px 12px -8px rgba(20, 40, 60, .5); }
.sh-sugg button.used { opacity: .45; }
.sh-prompt { display: flex; align-items: center; gap: 8px; margin: 0 12px 14px; padding: 6px 6px 6px 16px; border-radius: 999px; background: #fff; box-shadow: 0 10px 26px -14px rgba(20, 40, 60, .55); min-height: 46px; }
.sh-prompt span { flex: 1; min-width: 0; font-size: .8rem; color: #1B2621; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-prompt span.ph { color: #8A948F; }
.sh-prompt span.typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #1B2621; animation: sh-blink .9s steps(1) infinite; }
@keyframes sh-blink { 50% { opacity: 0; } }
.sh-prompt i { width: 34px; height: 34px; border-radius: 50%; background: #0E1511; display: grid; place-items: center; flex: none; }
.sh-bts { border-radius: 22px; background: var(--bg); padding: 20px; }
.sh-bts h4 { margin: 0 0 4px; font: 700 1.1rem var(--sh-display); }
.sh-bts > p { font-size: .88rem; color: var(--muted); margin: 0; }
.sh-log { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.sh-log li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: .88rem; padding: 10px 12px; border-radius: 14px; background: var(--paper); animation: sh-in .35s ease-out both; }
.sh-log li b { font: 500 .68rem/1.6 var(--sh-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sh-log li.rule { box-shadow: inset 3px 0 0 var(--sh-volt); }
.sh-log li.person { box-shadow: inset 3px 0 0 var(--palm); }
@keyframes sh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sh-note { margin-top: 24px; font-size: .82rem; color: var(--muted); max-width: 90ch; }

.sh-band { background: var(--sh-deep); color: var(--sh-deep-ink); }
.sh-band .sh-wrap { display: grid; gap: 24px; padding-block: clamp(56px, 7vw, 96px); }
@media (min-width: 880px) { .sh-band .sh-wrap { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.sh-band h2 { color: var(--sh-deep-ink); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.04em; margin: 10px 0 0; max-width: 18ch; }
.sh-band p { color: inherit; opacity: .8; margin-top: 14px; }
.sh-band .sh-kicker { color: inherit; opacity: .7; }
.sh-band .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-band .btn.primary { background: var(--sh-volt); border-color: var(--sh-volt); color: #14301F; }
.sh-band .btn.ghost { background: transparent; color: var(--sh-deep-ink); border-color: rgba(255, 255, 255, .35); }
.sh-farm { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 22px 24px; border-radius: 24px; background: linear-gradient(120deg, #EAF5D2, #F7F3E2); color: #14301F; }
.sh-farm b { font: 700 1.2rem/1.2 var(--sh-display); letter-spacing: -0.015em; display: block; }
.sh-farm span { color: #3E4F3F; font-size: .95rem; }
.sh-farm a.btn { background: #14301F; border-color: #14301F; color: #fff; }

/* search results header */
.sh-results-h { padding-block: 26px 8px; }
.sh-results-h h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.04em; line-height: 1; margin: 0; }
.sh-results-h .sh-search { margin: 18px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .sh-float svg, .sh-think i, .sh-prompt span.typing::after, .sh-log li { animation: none !important; }
  .sh-card, .sh-float, .sh-focus, .good, .sh-shop, .btn { transition: none !important; }
}

/* ---------- oxiseller.com sign-up page (public/index.html) ---------- */
.seller-home .sl-h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.04em; margin: 4px auto 12px; max-width: 18ch; }
.sl-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.sl-split { display: grid; gap: 36px; align-items: start; }
@media (min-width: 940px) { .sl-split { grid-template-columns: 1.25fr 1fr; gap: 56px; } }
.sl-split > * { min-width: 0; }
:root .sl-signin { border: 0; border-radius: 26px; padding: 26px; background: var(--paper); box-shadow: var(--sh-shadow-up), inset 0 0 0 1px var(--line); position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); }
.sl-signin h2 { margin: 8px 0 6px; }
:root .signin-box button { border-radius: 999px; min-height: 46px; padding: 0 22px; font-weight: 600; }
:root .demo-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
:root .demo-card { border: 0; border-radius: 22px; padding: 20px; box-shadow: var(--sh-shadow); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
:root .demo-card:hover, :root .demo-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-shadow-up); }
.demo-card b { font: 700 1.1rem/1.2 var(--sh-display); letter-spacing: -0.015em; }
.sl-credit { text-align: center; color: var(--muted); font-size: .82rem; padding: 18px 16px 28px; margin: 0 auto; }

/* ---------- oxishops.com/agro: the farm window ---------- */
.agro-home .chipset { margin: 14px 0 0; }
.agro-home .sh-results-h .sh-lead { margin-top: 12px; }
.agro-chips { display: grid; gap: 4px; margin-top: 18px; }

/* The top bar on pages that are not drawn by pages.shell() (oxiseller.com's sign-up page). */
:root .oxs-top { position: sticky; z-index: 45; }
:root .oxs-top .in { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
:root .oxs-top a { text-decoration: none; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
:root .oxs-top a.mine { border-radius: 999px; white-space: nowrap; }

/* oxiseller.com: from WhatsApp seller to proper books, and the busy-shop features (several tills, partner shops, identification). */
.sl-journey { background: var(--paper); border-block: 1px solid var(--line); }
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 860px) { .sl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.sl-steps li { position: relative; background: var(--bg); border-radius: 24px; padding: 24px 22px 20px; box-shadow: inset 0 0 0 1px var(--line); display: grid; align-content: start; gap: 8px; }
.sl-steps h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.1; margin: 4px 0 0; }
.sl-steps p { margin: 0; color: var(--muted); }
.sl-num { width: 40px; height: 40px; border-radius: 50%; background: var(--palm); color: #fff; display: grid; place-items: center; font: 800 1.05rem/1 var(--sh-display); }
.sl-steps li:nth-child(3) .sl-num { background: #1F8F4E; }
.sl-from { font: 500 .78rem/1.4 var(--sh-mono); letter-spacing: .04em; color: var(--ink) !important; margin-top: 6px !important; padding-top: 10px; border-top: 1px dashed var(--line); }
.sl-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sl-ch { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; background: var(--bg); border-radius: 999px; padding: 9px 16px; font-size: .92rem; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.sl-ch b { color: var(--ink); }
.sl-ch.soon { border: 1px dashed var(--muted); box-shadow: none; }
.sl-ch i, .sl-card i { font-style: normal; font: 600 .7rem/1 var(--sh-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--sh-volt); color: #14301F; padding: 4px 7px; border-radius: 999px; }
.sl-see { margin: 22px 0 0; }
.sl-cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .sl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-card { background: var(--paper); border-radius: 24px; padding: 24px 22px; box-shadow: var(--sh-shadow), inset 0 0 0 1px var(--line); display: grid; align-content: start; gap: 10px; }
.sl-card h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.1; margin: 0; }
.sl-card p { margin: 0; color: var(--muted); }
.sl-card a { color: var(--palm-ink); font-weight: 700; text-underline-offset: 4px; margin-top: 4px; }

/* Oxi Ads (src/oxiads/render.js): the sponsored banner inside shops, the home page's featured slot and the sponsored
   search result. Always marked "Sponsored", with the advertiser's name. */
.oxiad-wrap { padding-top: 12px; padding-bottom: 0; }
.oxiad-home { padding-top: 22px; }
.oxiad a { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--paper); text-decoration: none; color: var(--ink); box-shadow: var(--sh-shadow), inset 0 0 0 1px var(--line); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.oxiad a:hover { transform: translateY(-2px); box-shadow: var(--sh-shadow-up), inset 0 0 0 1px var(--line); }
.oxiad img, .oxiad-mark { width: 132px; aspect-ratio: 16 / 9; border-radius: 12px; object-fit: cover; background: var(--bg); }
.oxiad-mark { display: grid; place-items: center; font: 800 1.1rem/1 var(--sh-display); color: var(--muted); }
.oxiad-t { display: grid; gap: 2px; min-width: 0; }
.oxiad-t small { font: 500 .72rem/1.3 var(--sh-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.oxiad-t b { font-size: 1.05rem; line-height: 1.2; }
.oxiad-t span { color: var(--muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxiad-cta { white-space: nowrap; font-weight: 700; color: var(--sh-deep-ink); background: var(--sh-deep); padding: 8px 14px; border-radius: 999px; font-size: .9rem; }
.oxiad-feature a { grid-template-columns: 260px minmax(0, 1fr) auto; padding: 14px 18px 14px 14px; }
.oxiad-feature img, .oxiad-feature .oxiad-mark { width: 260px; }
.oxiad-feature .oxiad-t b { font-size: 1.35rem; }
.oxiad-search { margin-bottom: 18px; }
@media (max-width: 640px) {
  .oxiad a, .oxiad-feature a { grid-template-columns: 96px minmax(0, 1fr); }
  .oxiad img, .oxiad-mark, .oxiad-feature img, .oxiad-feature .oxiad-mark { width: 96px; }
  .oxiad-cta { grid-column: 1 / -1; justify-self: start; }
}

/* Shop cards, compact (31 Oct 2026): half the old size so long lists scroll less; two across on phones. The top shows
   the shop's own card picture (Settings > Shop card picture in OxiSeller), else its logo, else the drawn icon. */
.sh-shops { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sh-shop { border-radius: 16px; }
.sh-shop .tint { height: auto; aspect-ratio: 16 / 9; }
.sh-shop .tint::after { width: 90px; height: 90px; right: -20px; bottom: -28px; }
.sh-shop .tint svg { width: 58px; height: 58px; margin-top: -29px; right: 12px; }
.sh-shop .tint.pic::after { display: none; }
.sh-shop .tint.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-shop .tint.pic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.sh-shop .tint.pic em { z-index: 2; }
.sh-shop .tint img.lg { position: absolute; right: 12px; top: 50%; width: 58px; height: 58px; margin-top: -29px; z-index: 1; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; }
.sh-shop .tint em { left: 10px; bottom: 9px; font-size: .62rem; }
.sh-shop .body { gap: 2px; padding: 10px 12px 12px; }
.sh-shop b { font-size: .98rem; overflow-wrap: anywhere; }
.sh-shop .meta { font-size: .8rem; }
.sh-shop .go { font-size: .84rem; padding-top: 4px; }
@media (max-width: 720px) {
  .sh-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sh-shop .body { padding: 8px 10px 10px; }
  .sh-shop b { font-size: .9rem; overflow-wrap: anywhere; }
  .sh-shop .meta { font-size: .74rem; }
  .sh-shop .meta:nth-of-type(2) { display: none; }   /* the kind of shop is already on the picture */
  .sh-shop .go { display: none; }                      /* the whole card opens the shop */
  .sh-shop .tint svg, .sh-shop .tint img.lg { width: 44px; height: 44px; margin-top: -22px; }
  .sh-shop .tint em { font-size: .56rem; letter-spacing: .04em; }
}
/* The shop's logo on top of a picture (stock photo until the shop uploads its own card picture). */
.sh-shop .tint.pic img.lg { position: absolute; inset: auto 10px auto auto; top: 10px; width: 46px; height: 46px; margin: 0; z-index: 2; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
@media (max-width: 720px) { .sh-shop .tint.pic img.lg { width: 36px; height: 36px; top: 8px; right: 8px; margin: 0; } }