:root{--bg:#fff;--card:#fff;--ink:#2b2622;--muted:#6b635c;--line:#ece7e1;--field-line:#958a80;--focus:var(--accent);--accent:#b5562f;--accent-ink:#fff;--ok:#25693f;--warn:#8a5700;--err:#b3261e;--radius:14px;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--dark:#1d1a17}
/* accessibility (WCAG 2.2 AA): text 4.5:1, field outlines and focus rings 3:1 – checked for both themes, light and dark */
/* Aquilative's brand fonts, served from this site (nothing loaded from Google): Cinzel Decorative Bold for the first word
   of the logo and the headings, Cinzel (variable weight) for the rest – see assets/fonts/README.txt */
@font-face{font-family:"Cinzel Decorative";font-weight:700;font-style:normal;font-display:swap;src:local("Cinzel Decorative Bold"),local("CinzelDecorative-Bold"),url("fonts/CinzelDecorative-Bold.woff") format("woff")}
@font-face{font-family:"Cinzel";font-weight:400 900;font-style:normal;font-display:swap;src:url("fonts/Cinzel-VariableFont_wght.woff") format("woff")}
html{overflow-x:hidden}@supports(overflow:clip){html{overflow-x:clip}}*{box-sizing:border-box}body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--link,var(--accent));text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.demo{background:#2b2622;color:#f3e9df;text-align:center;font-size:13px;padding:6px 16px}
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.brand{font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.3px}
nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}nav a{color:var(--ink)}
.inline{display:inline}
.linkbtn{background:none;border:0;color:var(--link,var(--accent));cursor:pointer;font:inherit;padding:0}
main{padding:24px 16px 48px}main.with-side{margin-left:220px;max-width:none}
.side{position:fixed;top:var(--side-top,61px);left:0;width:200px;bottom:0;background:var(--card);border-right:1px solid var(--line);padding:16px 0}
.side-title{padding:0 20px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.side a{display:block;padding:9px 20px;color:var(--ink)}.side a.on{background:var(--bg);border-left:3px solid var(--accent);font-weight:600}
@media(max-width:800px){.side{position:static;width:auto;display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid var(--line)}.side-title{display:none}.side a{white-space:nowrap}main.with-side{margin-left:0}}
h1{font-size:26px;margin:0 0 16px;letter-spacing:-.4px}h2{font-size:19px;margin:28px 0 12px}h3{margin:0 0 6px;font-size:16px}
.muted{color:var(--muted)}.small{font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.prod{padding:0;overflow:hidden;display:flex;flex-direction:column}.prod .body{padding:12px 14px 14px}
.ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}.ph span{font-size:46px;font-weight:700;color:rgba(255,255,255,.85)}
.price{font-weight:700}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;border-radius:99px;padding:11px 22px;font:inherit;font-weight:600;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(.95);text-decoration:none}.btn.sm{padding:7px 14px;font-size:14px}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ok{background:var(--ok);color:#fff}.btn.err{background:#b3261e;color:#fff}.btn.block{display:block;width:100%}
.btn.apple{background:#000;color:#fff}.btn.gpay{background:#fff;color:#3c4043;border:1px solid #dadce0}
form.stack{display:grid;gap:12px;max-width:520px}
label{display:grid;gap:4px;font-weight:600;font-size:14px}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--field-line);border-radius:8px;background:#fff;width:100%}
textarea{min-height:90px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:#fbfaf8}
td.num,th.num{text-align:right}
.tablewrap{overflow-x:auto}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--offbg);color:var(--badge-ink)}
/* Status colours (1.60.0, Codex D4): one pair of tokens per meaning – ok, warn, err, off, info, sample – set here for the
   shop, for dark mode ([data-mode=dark] body, below) and for the admin area (.area-admin, near the end). Every status
   badge reads them: the b-<status> classes (status_badge(), subscription_badge()) and the st-<state> ones (Integrations,
   Legal, System…) are names for the same few colours. */
:root{--okbg:#e2f2e8;--okc:#25693f;--warnbg:#fff1d6;--warnc:#8a5700;--errbg:#fbe3e1;--errc:#b3261e;--offbg:#eee;--offc:#555;--infobg:#e3ecfb;--infoc:#2856a3;--samplebg:#ece6f7;--samplec:#5b3fa0;--badge-ink:currentColor}
.b-approved,.b-active,.b-delivered,.b-connected,.b-live,.badge.st-ok{background:var(--okbg);color:var(--okc)}
.b-pending,.b-paid,.b-to-dispatch,.badge.st-warn{background:var(--warnbg);color:var(--warnc)}
.b-rejected,.b-suspended,.b-refunded,.badge.st-err{background:var(--errbg);color:var(--errc)}
.b-draft,.b-none,.b-incomplete,.b-unpaid,.b-cancelled,.badge.st-off{background:var(--offbg);color:var(--offc)}
.b-dispatched{background:var(--infobg);color:var(--infoc)}.b-sample{background:var(--samplebg);color:var(--samplec)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:16px}.flash.ok{background:#e2f2e8;color:#1d5a37}.flash.err{background:#fbe3e1;color:#7c1a14}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:14px;margin-bottom:8px}
.stat .n{font-size:24px;font-weight:700}.stat .l{color:var(--muted);font-size:13px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}@media(max-width:800px){.two{grid-template-columns:1fr}}
.sum td{border:0;padding:4px 0}.sum .total td{font-weight:700;font-size:17px;border-top:1px solid var(--line);padding-top:10px}
code,pre{font-family:ui-monospace,Menlo,monospace;font-size:13px}pre{background:#2b2622;color:#f3e9df;padding:14px;border-radius:8px;overflow-x:auto}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:18px 0}.area-vendor .foot,.area-admin .foot{margin-left:220px}
@media(max-width:800px){.area-vendor .foot,.area-admin .foot{margin-left:0}}
.pay-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:6px 0}.pay-divider:before,.pay-divider:after{content:"";flex:1;border-top:1px solid var(--line)}
main.wrap{padding-top:24px;padding-bottom:48px}
@media(max-width:600px){.grid{grid-template-columns:1fr 1fr;gap:12px}.prod .body{padding:10px}.ph span{font-size:32px}h1{font-size:22px}}
.imp{background:#ffe08a;color:#3a2a00;padding:8px 16px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px}.imp .btn{background:#3a2a00}
form.stack{align-content:start}
.ph{overflow:hidden}.ph img{width:100%;height:100%;object-fit:cover;display:block}.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}.gallery-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr));gap:12px}.gimg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* ---- admin layout ---- */
.admin-side{overflow-y:auto;padding:10px 0 24px}
.side-group{padding:14px 20px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.side a .count{float:right;background:var(--accent);color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:1px 7px;margin-top:2px}
.admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.admin-head h1{margin:0}.admin-head .crumb{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.admin-head .crumb a{color:var(--muted)}.admin-head .intro{margin:6px 0 0;max-width:760px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;flex-wrap:wrap}
.tabs a{padding:8px 14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.tabs a.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}.tabs a:hover{text-decoration:none;color:var(--ink)}
.tcount{background:#eee;color:#555;border-radius:99px;font-size:11px;padding:1px 7px;margin-left:4px}.tabs a.on .tcount{background:var(--accent);color:var(--accent-ink)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.toolbar input,.toolbar select{width:auto}
.toolbar .fsel{display:flex;align-items:center;gap:8px;flex:0 1 auto;font-weight:600;white-space:nowrap}.toolbar .fsel select{flex:0 1 auto;min-width:150px!important}   /* the "Show" filter: its label beside the dropdown (1.60.0) */
table.list td,table.list th{vertical-align:middle}table.list tr:hover td{background:#fcfbf9}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0}
@media(max-width:800px){.admin-side{display:flex;overflow-x:auto}.side-group{display:none}.side a .count{float:none;margin-left:4px}}
form.inline{display:inline}

/* ---- 1.2: categories, samples, appearance admin ---- */
.chips{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:0 0 8px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:8px 16px;border-radius:99px;border:1px solid transparent;background:#f5f2ee;color:var(--ink);font-size:14px;font-weight:500}
.chip span{color:var(--muted);font-size:12px}.chip:hover{text-decoration:none}.chip.on{background:var(--dark);color:#fff}.chip.on span{color:inherit;opacity:.8}
.prod{color:inherit}.prod:hover{text-decoration:none}.prod .pr{margin-top:6px}
.brand img{max-height:40px;max-width:220px;display:block}.brand{display:inline-flex;align-items:center;gap:10px}.stage-tag{margin-left:.9em;font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:#fff1d6;color:#8a5700}[data-mode=dark] .stage-tag{background:rgba(230,160,40,.18);color:#f0c26a}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::placeholder{color:var(--muted);opacity:1}
/* links inside sentences are underlined, so they don't rely on colour alone (WCAG 1.4.1) */
p a:not(.btn):not(.chip),.flash a:not(.btn),.muted a:not(.btn),li > a:only-child:not(.btn):not([class]),.hint a:not(.btn),li a:not(.btn):not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
nav li > a,.side li > a,.fcols li > a{text-decoration:none}
.palette:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.palette{position:relative;display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:400}.palette.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.palette input{position:absolute;opacity:0;pointer-events:none}.palette:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pal-sw{display:flex;height:34px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.pal-sw i{flex:1}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:10px;margin-bottom:8px}
.pick button{border:0;padding:0;background:none;cursor:pointer;width:100%;border-radius:8px;overflow:hidden;display:block}.pick img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .2s}.pick button:hover img{transform:scale(1.04)}
.cover-preview{width:100%;max-height:200px;object-fit:cover;border-radius:8px;display:block}

details summary{cursor:pointer;color:var(--link,var(--accent))}.credit-line a{color:inherit;text-decoration:underline}

/* ---- small screens: nothing may push the page sideways ---- */
.two>*,.row>*,.stats>*,.grid>*{min-width:0}
code{overflow-wrap:anywhere}pre code{overflow-wrap:normal}
.toolbar input,.toolbar select{max-width:100%;min-width:0!important;flex:1 1 180px}
input[type=file]{max-width:100%;min-width:0}
img{max-width:100%}
@media(max-width:600px){main.wrap,main{padding-left:12px;padding-right:12px}.card:not(.prod){padding:14px}.admin-head{gap:10px}.tabs{flex-wrap:nowrap;overflow-x:auto}.tabs a{white-space:nowrap}
  .kv{grid-template-columns:1fr}.kv dd{margin-bottom:6px}}
.card pre{overflow-wrap:anywhere;max-width:100%}

/* ---- dark mode (html[data-mode=dark]; the shop and the dashboards each have their own switch) ---- */
.modeswitch{background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center}
.ms-track{position:relative;display:block;width:50px;height:28px;border-radius:99px;background:#e6dfd7;border:1px solid var(--line);transition:background .25s}
.ms-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.ms-knob svg{width:14px;height:14px}.ms-sun{color:#d08a12}.ms-moon{color:#3b3530;display:none}
.modeswitch:hover .ms-track{border-color:var(--accent)}.modeswitch:focus-visible .ms-track{outline:2px solid var(--accent);outline-offset:2px}
[data-mode=dark] .ms-track{background:#3a332d}[data-mode=dark] .ms-knob{transform:translateX(22px);background:#1e1b18}
[data-mode=dark] .ms-sun{display:none}[data-mode=dark] .ms-moon{display:block;color:#f3e1a8}
[data-mode=dark]{color-scheme:dark}
[data-mode=dark] body{--field-line:#7d736a;--err:#ff8a80;--bg:#121110;--card:#1e1b18;--ink:#ece6df;--muted:#a69c92;--line:#2f2a26;--field:#171513;--hi:#26221e;background:var(--bg)}
[data-mode=dark] a,[data-mode=dark] .linkbtn,[data-mode=dark] details summary{color:var(--link)}
[data-mode=dark] nav a,[data-mode=dark] .brand,[data-mode=dark] .side a,[data-mode=dark] .prod,[data-mode=dark] .chip,[data-mode=dark] .btn.ghost{color:var(--ink)}
[data-mode=dark] .btn{color:var(--accent-ink)}[data-mode=dark] .btn.ok,[data-mode=dark] .btn.err,[data-mode=dark] .btn.apple{color:#fff}[data-mode=dark] .btn.gpay{color:#3c4043}   /* (the text on a filled button is worked out from the brand colour – readable_on() – in dark mode too; Codex C54) */
[data-mode=dark] input,[data-mode=dark] select,[data-mode=dark] textarea{background:var(--field);color:var(--ink);border-color:var(--field-line)}
[data-mode=dark] input[type=color]{background:var(--card)}
[data-mode=dark] th{background:var(--hi)}[data-mode=dark] table.list tr:hover td{background:var(--hi)}
[data-mode=dark] body{--okbg:rgba(70,170,110,.18);--okc:#86d6a5;--warnbg:rgba(230,160,40,.18);--warnc:#f0c26a;--errbg:rgba(230,80,70,.18);--errc:#f19a91;--offbg:#2f2a25;--offc:#cfc6bc;--infobg:rgba(90,140,230,.2);--infoc:#a3c1f5;--samplebg:rgba(150,110,230,.22);--samplec:#c9b4f5;--badge-ink:#cfc6bc}
[data-mode=dark] .tcount{background:#2f2a25;color:#cfc6bc}
[data-mode=dark] .flash.ok{background:rgba(70,170,110,.16);color:#a5e0bb}[data-mode=dark] .flash.err{background:rgba(230,80,70,.16);color:#f5b3ac}
[data-mode=dark] pre[style]{background:var(--field)!important;color:var(--ink)!important;border-color:var(--line)!important}
[data-mode=dark] .tabs a.on .tcount,[data-mode=dark] .side a .count{color:#fff}
[data-mode=dark] .demo{background:#000}
.card.soft{background:#fbfaf8}.imp-row td{background:#fff8e1}.flash.warn{background:#fff1d6;color:#7a4d00}
[data-mode=dark] .card.soft{background:var(--hi)}[data-mode=dark] .imp-row td{background:rgba(255,200,60,.08)}[data-mode=dark] .flash.warn{background:rgba(230,160,40,.16);color:#f0c26a}
.card .row span{overflow-wrap:anywhere}
@media(max-width:480px){.top .wrap{gap:6px 12px;min-height:52px;padding-top:6px;padding-bottom:6px}.brand{font-size:18px}.brand img{max-height:32px}
  nav{font-size:14px}.demo{font-size:12px;padding:4px 10px}}

/* ---- profile menu ---- */
.profile{position:relative}.profile summary{list-style:none;cursor:pointer;border-radius:50%}.profile summary::-webkit-details-marker{display:none}
.profile summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.02em;user-select:none}
.profile[open] summary .avatar,.profile summary:hover .avatar{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.avatar.lg{width:42px;height:42px;font-size:15px;flex:none}
.pmenu{position:absolute;right:0;top:calc(100% + 10px);width:260px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.16);padding:6px;z-index:20}
.phead{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-wrap:anywhere}.phead .badge{margin-top:4px}
.pmenu a,.pmenu .pout{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;color:var(--ink);font:inherit;font-size:14px;background:none;border:0;cursor:pointer}
.pmenu a:hover,.pmenu .pout:hover{background:var(--bg);text-decoration:none}
.pmenu form{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}.pmenu .pout{color:var(--err)}
[data-mode=dark] .pmenu{box-shadow:0 14px 34px rgba(0,0,0,.5)}[data-mode=dark] .pmenu a{color:var(--ink)}[data-mode=dark] .pmenu .pout{color:#f19a91}[data-mode=dark] .pmenu a:hover,[data-mode=dark] .pmenu .pout:hover{background:var(--hi)}
@media(max-width:480px){.avatar{width:30px;height:30px;font-size:12px}.pmenu{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:8px}}
.cartlink{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--ink)}
.cartlink:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);text-decoration:none}
.cart-count{position:absolute;top:-1px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--card);box-sizing:border-box}
.cart-count{border-color:var(--bg)}
.paybox{max-width:960px;margin:0 auto}.paytotal{font-size:32px;font-weight:700;margin:4px 0 12px}
/* ---- basket / checkout lines ---- */
.ithumb{width:72px;height:72px;border-radius:10px;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-weight:700;font-size:24px;background:var(--line)}
.ithumb img{width:100%;height:100%;object-fit:cover;display:block}.ithumb.sm{width:44px;height:44px;font-size:16px;border-radius:8px}
.bline{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.bline:last-of-type{border-bottom:0}.btitle{font-weight:600;color:var(--ink)}.binfo{display:grid;gap:4px;min-width:0}
.bqty{display:flex;gap:14px;align-items:center;margin-top:4px}.bqty input{width:68px;padding:6px 8px}.bprice{font-weight:600;white-space:nowrap}
.sline{display:flex;gap:10px;align-items:center}.sum td{vertical-align:middle}
.bsummary h3{margin-bottom:10px}
@media(max-width:480px){.ithumb{width:60px;height:60px}.bline{gap:10px}}
/* ---- profile photos & store logos ---- */
.avatar img,.mav img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.avatar,.mav{overflow:hidden}
.avatar.xl{width:72px;height:72px;font-size:24px;flex:none}
.mav{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:24px;flex:none}
.mav.big{width:96px;height:96px;font-size:40px}
/* ---- product photo zoom ---- */
.zoomable{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}.zoomable img{width:100%;display:block}
.zoomhint{position:absolute;right:10px;bottom:10px;display:inline-flex;gap:6px;align-items:center;background:rgba(20,16,12,.65);color:#fff;font-size:12px;padding:5px 10px;border-radius:99px;opacity:0;transition:opacity .2s}
.zoomable:hover .zoomhint,.zoomable:focus-visible .zoomhint{opacity:1}@media(hover:none){.zoomhint{opacity:.9}}
.thumbs a.on img{outline:2px solid var(--accent);outline-offset:2px}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(12,10,8,.98);display:flex;flex-direction:column}.lightbox[hidden]{display:none}
.lb-bar{display:flex;align-items:center;gap:16px;padding:10px 16px;color:#ddd;font-size:13px}.lb-tip{flex:1;text-align:center;opacity:.7}
.lb-close{background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:0 6px}
.lb-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 56px 24px}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none}
.lb-stage.zoomed{overflow:auto;display:block;padding:0;cursor:zoom-out}.lb-stage.zoomed img{max-width:none;max-height:none;cursor:zoom-out;margin:auto;display:block}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:34px;width:46px;height:64px;border-radius:10px;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.22)}.lb-nav.prev{left:8px}.lb-nav.next{right:8px}
@media(max-width:600px){.lb-tip{display:none}.lb-stage{padding:0 0 16px}.lb-nav{width:38px;height:54px;font-size:28px}}
/* ---- dashboard widths: tables can use up to 1400px beside the menu; forms stay at a readable width ---- */
main.with-side{max-width:1432px}   /* 1400px of content + side padding */
form.settings{max-width:900px;display:grid;gap:16px}form.settings .card{display:grid;gap:12px}
.savebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.area-admin .top .wrap,.area-vendor .top .wrap{max-width:none;padding-left:20px;padding-right:24px}
.area-admin .foot .wrap,.area-vendor .foot .wrap{max-width:1432px;margin:0}
.area-admin .foot{padding:0;min-height:var(--foot-h,56px);box-sizing:border-box;display:flex;align-items:center}
/* the footer stays at the foot of the window, level with the menu's Collapse Menu row, on long pages too (not on phones, where the menu isn't fixed either) */
@media(min-width:801px){.area-admin .foot{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--bg)}   /* fixed like the menu, so the Mac's bounce past the end can't move it */
  body.area-admin{padding-bottom:var(--foot-h,56px)}
  .area-admin .sform .savebar{bottom:var(--foot-h,56px)}}   /* the sticky Save bar sits on the fixed footer, not behind it */
/* ---- footer stays at the bottom of the screen on short pages ---- */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
body>main.with-side{width:auto;align-self:stretch;margin-right:0}
body>.foot{flex-shrink:0}
/* profile menu: compact header, one line each for name and email, icons on links */
.pmenu{width:300px;padding:6px}
.phead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 10px 12px;overflow-wrap:normal}
.pwho{min-width:0;display:grid;gap:2px}
.pname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;line-height:1.3}
.prole{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pemail{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmenu a,.pmenu .pout{display:flex;align-items:center;gap:10px;padding:8px 10px}
.pmenu a svg{color:var(--muted);flex:none}.pmenu .pout svg{flex:none}
[data-mode=dark] .prole{color:var(--link)}

/* ---- fixed top bar: banners + header stay pinned; .topspace keeps content from sliding underneath ---- */
.topstack{position:fixed;top:0;left:0;right:0;z-index:20}
.topspace{height:var(--stack-h,61px);flex-shrink:0}
html{scroll-padding-top:calc(var(--stack-h,61px) + 12px)}

/* ---------- Brand wordmark: AQUILATIVE™ in Cinzel Decorative, MARKETPLACE in Cinzel (fonts: top of this file) ---------- */
.wm{--wm-a:"Cinzel Decorative","Cinzel","Trajan Pro","Trajan","Cormorant SC","Times New Roman",serif;--wm-b:"Cinzel","Trajan Pro","Trajan","Cormorant SC","Times New Roman",serif;
  display:inline-grid;justify-items:stretch;line-height:1;font-size:22px;color:inherit;letter-spacing:0;font-weight:400;white-space:nowrap}
.wm-a{font-family:var(--wm-a);font-weight:700;font-size:1em;letter-spacing:.03em;text-transform:uppercase;position:relative;font-variant-ligatures:none}
.wm-a sup{position:absolute;left:100%;top:-.05em;font:600 .46em/1 system-ui,-apple-system,"Segoe UI",sans-serif;margin-left:.12em;vertical-align:baseline}
.wm-b{font-family:var(--wm-b);font-weight:400;text-transform:uppercase}
.wm-stacked .wm-b{display:flex;justify-content:space-between;font-size:.44em;margin-top:.62em;padding:0 .08em}
/* (the wordmark box is centred in the bar; Cinzel's capitals sit slightly high in it, so it's nudged down 1px to look centred) */
.brand:has(.wm){display:flex;align-items:center}.brand .wm-stacked{position:relative;top:1px}
.wm-stacked .wm-b i{font-style:normal}.wm-stacked .wm-b .sp{flex:0 0 .6em}
.brand:has(.wm){letter-spacing:0;padding-right:.5em}
.brand .wm{font-size:24px}
/* (the big footer styles every span as a block link-like line – undo that for the wordmark) */
.fbrand .wm{font-size:28px;display:inline-grid;margin:0;color:#fff}.fbrand .wm .wm-a{display:block;margin:0;color:inherit;font-size:1em}
.fbrand .wm-stacked .wm-b{display:flex;margin:.62em 0 0;color:inherit;font-size:.44em}
@media(max-width:480px){.brand .wm{font-size:17px}}
.check{display:flex;gap:8px;align-items:center;font-weight:400}.check input{width:auto;margin:0}
@media(max-width:480px){.fbrand .wm{font-size:24px}}
/* Admin → Domains: store address cards */
.dcard{margin-bottom:12px}.dcard .daddr{font-size:17px}
.dchecks{list-style:none;padding:0;margin:12px 0 4px;display:grid;gap:4px;font-size:14px}.dchecks li span{display:inline-block;width:1.2em;font-weight:700}
.dchecks .ok span{color:var(--ok,#2f7d4f)}.dchecks .no span{color:var(--err,#b3261e)}
.dsteps{margin:8px 0 0;padding-left:20px;display:grid;gap:8px}.dsteps pre{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.ucredit{position:absolute;right:10px;bottom:10px;z-index:1;max-width:calc(100% - 20px);background:rgba(20,16,12,.55);color:#fff;font-size:11px;line-height:1.35;padding:3px 9px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}
.ucredit a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.scover,.maker-card .cover{position:relative}
.maker-wrap{position:relative;transition:transform .2s}.maker-wrap:hover{transform:translateY(-4px)}.maker-wrap .maker-card{height:100%}.maker-wrap .maker-card:hover{transform:none}
.mcredit{position:absolute;top:0;left:0;right:0;aspect-ratio:16/8;pointer-events:none}.mcredit .ucredit{right:8px;bottom:8px;font-size:10px;padding:2px 8px}
/* the profile picture sat ~3px high (the summary line box added space below it) */
.profile,.profile summary{display:flex;align-items:center}
/* choosing a cover / banner: Unsplash first, then upload */
.cover-preview-wrap{position:relative}.cover-preview-wrap .cover-preview{display:block;margin:0;aspect-ratio:4/1;height:auto;max-height:none;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.pchoose{margin-top:16px}.pchoose h4{margin:0 0 8px;font-size:14px}.usearch{display:flex;gap:8px;flex-wrap:nowrap}
.pc-or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--muted);font-size:13px}.pc-or::before,.pc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.card[id]{scroll-margin-top:calc(var(--stack-h,64px) + 16px)}
/* store name fonts */
.sname{text-transform:none;line-height:1.15}
.font-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.font-choice{position:relative;display:grid;gap:6px;align-content:space-between;border:1px solid var(--line);border-radius:10px;padding:14px 12px 10px;cursor:pointer;font-weight:400;min-width:0}
.font-choice:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.font-choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.font-choice input{position:absolute;opacity:0;pointer-events:none}
.fprev{font-size:22px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;min-height:1.4em}
.mav .sname,.avatar .sname{line-height:1;display:block}
/* the logo / store name in the top bar and footer: never underlined */
.brand,.brand:hover,.brand:focus,.brand *,.fbrand a,.fbrand a:hover{text-decoration:none}
/* the logo can't be selected like text (screen readers still read its name) */
.brand,.brand *,.fbrand,.fbrand *,.wm,.wm *{-webkit-user-select:none;user-select:none}
.brand,.fbrand a{-webkit-user-drag:none}
/* company & legal block (every footer): legal links, copyright, company details, then the designer credit */
.flegal{display:grid;gap:6px;font-size:13px;line-height:1.5;width:100%}.flegal .flinks{margin-bottom:8px}.flegal .frow{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-bottom:8px}.flegal .frow .flinks{margin:0}.flegal .fsecure{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;color:inherit;white-space:nowrap}.flegal .fsecure svg{flex-shrink:0}.bigfoot .flegal .fsecure{color:#cfc6bc}[data-palette=glow] .bigfoot .flegal .fsecure{color:#c9c5ef}   /* (the light colours only on the dark footer – on a store's own domain the footer is the page colour: ui-shop-8) */.flegal p{margin:0}
.flegal .flinks{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}.flegal .flinks a{font-size:inherit;font-weight:600;text-decoration:none;color:inherit}.flegal .flinks a:hover{text-decoration:underline}
.fmeta{font-size:12px}.fcredit{font-size:12px}   /* (full strength: at 12px, see-through text fell below 4.5:1 on Glow – ui-shop-21) */.flegal a{color:inherit;text-underline-offset:2px}.fmeta a{text-decoration:none}.fmeta a:hover{text-decoration:underline}
.fver{font-size:11px;opacity:.55}
/* a store's own domain: "<store> · Powered by Aquilative Marketplace", just above the footer */
.powered{margin:40px 0 0;font-size:13px;color:var(--muted);text-align:center}.powered a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px){.fsep{display:block;height:0;overflow:hidden}.flegal .flinks{gap:6px 16px}}

.bigfoot .flegal{color:#a69c92}.bigfoot .flinks a{color:#d8cfc5}
.bigfoot .flegal a{display:inline;margin:0;font-size:inherit}
.foot>.wrap:not(.fcols){display:block}

/* ==================== Shop layout (was the "Modern" theme; its always-on body class went in 1.60.0, Codex D8) ==================== */
body{background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,.brand,.fbrand{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
.top{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:var(--line)}
.brand{font-size:24px}
.topsearch{flex:1;max-width:380px}.topsearch input{border-radius:99px;background:#f5f2ee;border-color:var(--field-line);padding:8px 16px}
.topsearch input:focus{background:#fff;border-color:var(--field-line)}
nav{gap:18px}nav a,nav a.btn{font-size:14px;font-weight:500}
.card{border-radius:var(--radius)}
input,select,textarea{border-radius:10px}

/* hero */
.area-shop main.wrap{padding-top:32px}
.mhero{position:relative;margin:-32px calc(50% - var(--half-vw,50vw)) 28px;padding:72px max(16px,calc(var(--half-vw,50vw) - 534px)) 64px;color:#fff;
  background:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 55%),linear-gradient(135deg,#1d1a17 0%,#3a2c22 60%,#5a3e2c 100%);overflow:clip visible}   /* (clip sideways only, so the search suggestions can hang below) */
.mhero.has-img{background-size:cover;background-position:center;min-height:540px;display:flex;align-items:flex-end}
.mhero.has-img:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,12,.78) 0%,rgba(20,16,12,.45) 50%,rgba(20,16,12,.05) 100%)}
.mhero-in{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;width:100%}
.mhero.has-img .mhero-in{grid-template-columns:1fr}
.mhero-text{max-width:600px}
.mhero .eyebrow{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:5px 12px;margin-bottom:18px}.eyebrow b{font-weight:700;letter-spacing:.02em;font-size:13px;margin-right:3px}
.mhero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0 0 16px;color:#fff}
.mhero p{font-size:18px;line-height:1.55;opacity:.88;margin:0 0 26px;max-width:520px}
.herosearch{display:flex;background:#fff;border-radius:99px;padding:6px;max-width:500px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* ---------- search boxes (1.42.0): a magnifier button inside the field, suggestions as you type ---------- */
.sbox{position:relative}.sbox input{width:100%;box-sizing:border-box;padding-right:44px}
.sbox .sbtn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sbox .sbtn:hover{color:var(--ink);background:var(--hi,rgba(0,0,0,.05))}.sbox .sbtn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.herosearch.sbox{display:block;padding:0}.herosearch.sbox input{padding:16px 60px 16px 22px;border-radius:99px}
.herosearch.sbox .sbtn{right:7px;width:40px;height:40px;background:var(--accent);color:var(--accent-ink,#fff)}.herosearch.sbox .sbtn:hover{filter:brightness(1.08)}
.herosearch.sbox:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--focus),0 10px 30px rgba(0,0,0,.25)}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:var(--card,#fff);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.16);padding:6px;text-align:left;font-size:14px;line-height:1.35}
.sugg[hidden]{display:none}
.sugg h5{margin:8px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sugg a{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:9px;color:var(--ink);text-decoration:none}
.sugg a[aria-selected=true],.sugg a:hover{background:var(--hi,var(--bg))}
.sugg .th{width:36px;height:36px;border-radius:7px;background:var(--line);object-fit:cover;flex-shrink:0}.sugg .th.round{border-radius:50%;width:30px;height:30px;margin:0 3px}
.sugg .tx{min-width:0;flex:1}.sugg .tx b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sugg .tx span{color:var(--muted);font-size:13px}
.sugg .pr{margin-left:auto;font-size:13px;white-space:nowrap}.sugg mark{background:none;color:var(--link,var(--accent));font-weight:700}
.sugg .all{border-top:1px solid var(--line);margin-top:6px;padding:10px;font-weight:600;color:var(--link,var(--accent))}
.sugg .none{padding:10px;color:var(--muted)}
[data-mode=dark] .herosearch.sbox .sugg{color:var(--ink)}

.herosearch input{border:0;background:transparent;padding:10px 16px;color:var(--ink)}.herosearch.sbox input{background:#fff}.herosearch input:focus{outline:none}.herosearch:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--focus),0 10px 30px rgba(0,0,0,.25)}
.mhero .credit{position:absolute;right:16px;bottom:10px;font-size:11px;opacity:.75}.mhero .credit a{color:#fff;text-decoration:underline}
.collage{position:relative;height:380px}
.collage a{position:absolute;width:52%;background:#fff;border-radius:16px;padding:8px 8px 10px;box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--ink);transition:transform .25s}
.collage a:hover{text-decoration:none;transform:translateY(-6px) rotate(0)!important}
.collage .ph{border-radius:10px;aspect-ratio:1}.collage span{display:block;font-size:12px;margin-top:7px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collage .c0{left:0;top:40px;transform:rotate(-5deg);z-index:2}.collage .c1{left:30%;top:0;transform:rotate(3deg);z-index:3}.collage .c2{right:0;top:120px;transform:rotate(7deg);z-index:1}

/* sections */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:40px 0 16px}.sec-head h2{font-size:30px;margin:0}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:28px 22px}
.prod{border:0;background:transparent;border-radius:0;overflow:visible}
.prod .ph{border-radius:var(--radius);aspect-ratio:4/5;background-color:#f3efea}
.prod .ph img{transition:transform .5s ease}.prod:hover .ph img{transform:scale(1.05)}
.prod .body{padding:12px 2px 0}.prod h3{font-size:15px;font-weight:600;margin:0 0 2px}
.prod .price{font-size:15px}

.makers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:22px}
.maker-card{display:block;border-radius:18px;overflow:hidden;background:#faf8f5;color:var(--ink);transition:transform .2s,box-shadow .2s}
.maker-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 16px 36px rgba(40,28,18,.12)}
.maker-card .cover{aspect-ratio:16/8;background-size:cover;background-position:center}
.maker-card .mbody{padding:0 20px 20px;position:relative}.maker-card h3{font-family:var(--serif);font-size:21px;margin:8px 0 0}
.maker-card p{margin:8px 0 10px;color:#5d544c}
.mav{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font:600 24px var(--serif);border:4px solid #faf8f5;margin-top:-29px}
.mav.big{width:96px;height:96px;font-size:40px;border-color:#fff;margin-top:0;flex:none}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:56px 0 0;padding:34px;background:#f7f3ee;border-radius:20px}
.values div{display:grid;gap:6px}.values strong{font-family:var(--serif);font-size:19px}.values span{color:var(--muted);font-size:14px}
.sellband{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:28px 0 8px;padding:38px 40px;border-radius:20px;color:#fff;
  background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 70%,transparent),transparent 60%),var(--dark)}
.sellband h2{margin:0 0 6px;font-size:30px;color:#fff}.sellband p{margin:0;opacity:.85}.sellband .btn{background:#fff;color:var(--dark)}

/* store page */
.storehead{margin:0 0 8px}
.scover{height:300px;border-radius:22px;background-size:cover;background-position:center}
.sinfo{display:flex;gap:18px;align-items:flex-end;margin:-48px 0 0 28px;position:relative}.sinfo h1{margin:0 0 2px;font-size:34px}
.sinfo .mav.big{box-shadow:0 8px 20px rgba(0,0,0,.15)}.sinfo>div:last-child{padding-top:56px}
.sbio{max-width:720px;font-size:17px;line-height:1.6;color:#4d453e;margin:18px 0 24px}

/* product page */
.pmain{border:0;border-radius:18px}.pmain .ph{aspect-ratio:1}
.thumbs img{border-radius:10px}

/* footer */
.bigfoot{background:var(--dark);color:#cfc6bc;border:0;margin-top:24px;padding:52px 0 20px}
/* Bouncing past the end of a page (a Mac trackpad, a phone) shows the window's canvas, which Chrome paints in the root
   element's background colour – one colour for both ends. So: the canvas is the footer's colour (right under the dark
   footer), and a fixed strip behind the page covers the top half of the window in the page colour (right above the
   header). The body's --bg lives on the body, so the colours are repeated here per palette and mode –
   WHEN THE BRANDING CHANGES, UPDATE THESE FOUR PAIRS TOO (page colour / footer colour per theme and mode). */
html:has(body.area-shop>.bigfoot){background:#1d1a17}
body.area-shop:has(>.bigfoot)::before{content:"";position:fixed;top:0;left:0;right:0;height:50vh;background:#fff;z-index:-1;pointer-events:none}
html[data-mode=dark]:has(body.area-shop>.bigfoot){background:#0c0b0a}[data-mode=dark] body.area-shop:has(>.bigfoot)::before{background:#121110}
html[data-palette=glow]:has(body.area-shop>.bigfoot){background:#08035f}[data-palette=glow] body.area-shop:has(>.bigfoot)::before{background:#f6f5fe}
html[data-palette=glow][data-mode=dark]:has(body.area-shop>.bigfoot){background:#06021f}[data-palette=glow][data-mode=dark] body.area-shop:has(>.bigfoot)::before{background:#0b0329}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.fcols h2{color:#fff;margin:0 0 12px;font-size:13px;font-family:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.1em}   /* (h2 after the page's own sections – ui-shop-13) */
.fcols a,.fcols span{display:block;color:#cfc6bc;margin-bottom:8px;font-size:14px}.fcols a:hover{color:#fff}
.fbrand{font-size:24px;color:#fff;margin-bottom:8px}.fcols p{font-size:14px;max-width:320px;margin:0}
.fsmall{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:16px;font-size:12px;color:#9a9087}

@media(max-width:900px){.mhero-in{grid-template-columns:1fr}.collage{display:none}.values{grid-template-columns:1fr}.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .mhero{padding-top:44px;padding-bottom:40px}.mhero.has-img{min-height:440px}.mhero p{font-size:16px}
  .mgrid{grid-template-columns:1fr 1fr;gap:20px 12px}.sec-head h2{font-size:24px}
  .topsearch{order:3;max-width:none;flex-basis:100%;margin-bottom:10px}
  .chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.chip{white-space:nowrap}
  .scover{height:180px;border-radius:16px}.sinfo{margin-left:12px}.sinfo>div:last-child{padding-top:44px}.mav.big{width:72px;height:72px;font-size:30px}.sinfo h1{font-size:26px}
  .sellband{padding:28px 24px}.fcols{grid-template-columns:1fr}}

/* dark mode */
[data-mode=dark] .top{background:rgba(18,17,16,.88)}
[data-mode=dark] .topsearch input,[data-mode=dark] .chip,[data-mode=dark] .prod .ph{background-color:#221e1b}
[data-mode=dark] .topsearch input:focus{background:var(--card)}
[data-mode=dark] .chip.on{background:var(--ink);color:var(--bg)}
[data-mode=dark] .collage a{background:var(--card)}
/* the banner search stays white in dark mode too, so it stands out from the banner (WCAG 1.4.11) */
[data-mode=dark] .herosearch input{color:#2b2622}[data-mode=dark] .herosearch input::placeholder{color:#6b635c}
[data-palette=glow][data-mode=dark] .herosearch input{color:#120a3d}[data-palette=glow][data-mode=dark] .herosearch input::placeholder{color:#5d5890}[data-mode=dark] .herosearch input{background:transparent}[data-mode=dark] .herosearch.sbox input{background:#fff}
[data-mode=dark] .maker-card,[data-mode=dark] .values{background:#1c1916}[data-mode=dark] .maker-card p,[data-mode=dark] .sbio{color:var(--muted)}
[data-mode=dark] .mav{border-color:#1c1916}[data-mode=dark] .mav.big{border-color:var(--bg)}
[data-mode=dark] .sellband{background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 75%,transparent),transparent 65%),linear-gradient(135deg,#2e2722,#3a2f27);box-shadow:0 10px 30px rgba(0,0,0,.35)}
[data-mode=dark] .values{background:#221e1a}
[data-mode=dark] .bigfoot{background:#0c0b0a;border-top:1px solid var(--line)}
@media(max-width:480px){.brand{font-size:20px}}
.area-shop main.wrap{padding-bottom:32px}.sellband{margin-bottom:0}

/* ==================== Theme: Aquilative Glow (Admin → Appearance → Theme; <html data-palette="glow">) ====================
   Aquilative's brand colours: electric blue #1409e6, violet #a22bff, magenta #cf0099, crimson #c6016d on deep navy #08035f.
   Only colours change here – the layout is the same in both themes. Brand colour (--accent) still comes from Appearance. */
[data-palette=glow]{--glow:linear-gradient(90deg,#1409e6,#a22bff 45%,#cf0099 75%,#c6016d);--navy:#08035f;--violet:#a22bff;--magenta:#cf0099}
[data-palette=glow] body{--field-line:#8c86bd;--focus:#1409e6;--bg:#f6f5fe;--card:#fff;--ink:#120a3d;--muted:#5d5890;--line:#e4e1f6;--dark:#08035f;--hi:#efedfc;background:var(--bg);color:var(--ink)}
[data-palette=glow] .top{background:rgba(255,255,255,.88);border-bottom:3px solid transparent;border-image:var(--glow) 1}
[data-palette=glow] .topsearch input,[data-palette=glow] .chip:not(.on){background:#efedfc}
[data-palette=glow] .chip.on{background:var(--glow);color:#fff;border-color:transparent;background-origin:border-box}   /* (gradient under the border too – no repeated sliver at the edges) */
[data-palette=glow] .prod .ph{background:#eeecfb}
[data-palette=glow] th,[data-palette=glow] .card.soft{background:#f7f6fe}
[data-palette=glow] table.list tr:hover td{background:#faf9ff}
[data-palette=glow] .ms-track{background:#dcd8f3}
[data-palette=glow] .btn:not(.ghost):not(.gpay):not(.err):not(.choice):not(.sellband .btn){background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--violet)));border-color:transparent;background-origin:border-box}
[data-palette=glow] .btn:not(.ghost):not(.gpay):not(.err):not(.choice):not(.sellband .btn):hover{background:linear-gradient(135deg,var(--accent),var(--magenta));filter:none}
[data-palette=glow] main a:not(.btn):not(.prod):not(.chip):hover{color:var(--magenta)}
[data-palette=glow] .badge.b-live,[data-palette=glow] .tcount{background:#efe7ff;color:#5b14b8}
/* the home page banner (when there's no photo): Aquilative's glow artwork (assets/glow-banner.jpg, a smaller copy for phones) */
[data-palette=glow] .mhero:not(.has-img){background:#08035f url("glow-banner.jpg") center/cover no-repeat}
@media(max-width:700px){[data-palette=glow] .mhero:not(.has-img){background-image:url("glow-banner-sm.jpg")}}
[data-palette=glow] .mhero.has-img:before{background:linear-gradient(90deg,rgba(8,3,95,.82) 0%,rgba(8,3,95,.45) 50%,rgba(8,3,95,.05) 100%)}
[data-palette=glow] .maker-card{background:#f6f5fe}[data-palette=glow] .mav{border-color:#f6f5fe}
[data-palette=glow] .maker-card:hover{box-shadow:0 14px 34px rgba(20,9,230,.14)}
[data-palette=glow] .values{background:#f0eefd}
[data-palette=glow] .sellband{background:radial-gradient(circle at 100% 0,rgba(207,0,153,.7),transparent 60%),radial-gradient(circle at 0 100%,rgba(162,43,255,.6),transparent 55%),linear-gradient(135deg,#08035f,#1409e6)}
[data-palette=glow] .bigfoot{background:radial-gradient(circle at 0 0,rgba(162,43,255,.35),transparent 40%),radial-gradient(circle at 100% 100%,rgba(198,1,109,.3),transparent 45%),#08035f;color:#c9c5ef;border-top:3px solid transparent;border-image:var(--glow) 1}
[data-palette=glow] .fcols a,[data-palette=glow] .fcols span{color:#c9c5ef}
[data-palette=glow] .bigfoot .flegal{color:#b3aee0}   /* (4.5:1 even where the violet glow sits behind: 5.8 – ui-shop-21) */[data-palette=glow] .bigfoot .flinks a{color:#d9d6f6}
[data-palette=glow] .demo,[data-palette=glow] pre{background:#120a3d;color:#e9e6ff}
/* dark mode: near-black navy, with the same glow */
[data-palette=glow][data-mode=dark] body{--field-line:#6d64b8;--focus:#b9b3ff;--err:#ff8a80;--bg:#0b0329;--card:#140a3e;--ink:#eeebff;--muted:#a7a2d6;--line:#2a2163;--field:#0f0733;--hi:#1c1252;--dark:#06021f}
[data-palette=glow][data-mode=dark] .top{background:rgba(11,3,41,.88)}
[data-palette=glow][data-mode=dark] .topsearch input,[data-palette=glow][data-mode=dark] .chip:not(.on),[data-palette=glow][data-mode=dark] .prod .ph{background:#1c1252}
[data-palette=glow][data-mode=dark] .chip.on{background:var(--glow);color:#fff;border-color:transparent;background-origin:border-box}   /* (gradient under the border too – no repeated sliver at the edges) */
[data-palette=glow][data-mode=dark] th,[data-palette=glow][data-mode=dark] .card.soft,[data-palette=glow][data-mode=dark] .maker-card,[data-palette=glow][data-mode=dark] .values{background:#140a3e}[data-palette=glow][data-mode=dark] .mav{border-color:#140a3e}
[data-palette=glow][data-mode=dark] table.list tr:hover td{background:#1a1049}
[data-palette=glow][data-mode=dark] .ms-track{background:#2a2163}[data-palette=glow][data-mode=dark] .ms-knob{background:#0b0329}
[data-palette=glow][data-mode=dark] main a:not(.btn):not(.prod):not(.chip):hover{color:#ff6fcf}
[data-palette=glow][data-mode=dark] .badge.b-live,[data-palette=glow][data-mode=dark] .tcount{background:rgba(162,43,255,.22);color:#d6b8ff}
[data-palette=glow][data-mode=dark] .bigfoot{background:radial-gradient(circle at 0 0,rgba(162,43,255,.25),transparent 40%),radial-gradient(circle at 100% 100%,rgba(198,1,109,.22),transparent 45%),#06021f}

/* ==================== Home page rhythm: one gap between every section (56px, 40px on phones) ====================
   banner → chips → "New In" → products → "Meet the Makers" → makers → values → sell band → footer.
   The category chips sit closer to the products they filter; a heading sits 16px above what it introduces. */
.area-shop{--section:56px}
@media(max-width:700px){.area-shop{--section:40px}}
.area-shop .mhero{margin-bottom:32px}
.area-shop .sec-head{margin-top:var(--section)}
.area-shop .chips + .sec-head{margin-top:24px}
.area-shop .values{margin-top:var(--section)}
.area-shop .sellband{margin-top:var(--section)}
.area-shop main.wrap{padding-bottom:calc(var(--section) - 24px)}   /* + the footer's own 24px = one section gap */

/* ---------- Dashboards: settings pages (1.29) ----------
   <form class="sform" data-savebar> holds <section class="ssec">: a <header> (title + one line of help) on the left,
   the fields on the right. A field's help sits under it (.hint); a tick box's help under its label (.check).
   The form's Save bar (.savebar) sticks to the bottom of the window and says when there are unsaved changes (app.js). */
.dashfoot{padding:14px 0;font-size:12px}.dashfoot p{margin:0}.dashfoot a{color:var(--muted)}
.sform{display:block;max-width:1100px}
.ssec{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:28px;padding:24px 0;border-top:1px solid var(--line)}
.sform>.ssec:first-of-type{border-top:0;padding-top:6px}.sform+.sform>.ssec:first-of-type{border-top:1px solid var(--line);padding-top:24px}
.ssec>header h3{margin:0 0 6px;font-size:16px}.ssec>header p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.ssec .fields{display:grid;gap:16px;min-width:0;max-width:680px;align-content:start}
.ssec .fields .row{gap:12px}
.hint{display:block;font-size:13px;font-weight:400;color:var(--muted);line-height:1.45}
label .hint{margin-top:2px}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start;font-weight:600;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}.check .hint{grid-column:2}
.sform .savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 0;padding:12px 0;background:var(--bg);border-top:1px solid var(--line)}
.savebar .unsaved{display:none;font-size:13px;font-weight:600;color:var(--warn)}.sform.dirty .savebar .unsaved{display:inline}
.savebar .note{font-size:13px;color:var(--muted)}
/* a picture upload: a dashed area with the current picture, "Choose a file" and drop-to-upload (app.js sends it straight away) */
.upload{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;border:1.5px dashed var(--field-line);border-radius:12px;cursor:pointer;font-weight:400}
.upload:hover,.upload.over{border-color:var(--accent);background:var(--accent-soft)}
.upload:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload .up-now{flex:none;display:flex;align-items:center;justify-content:center;min-width:56px;min-height:48px}
.upload .up-now img{max-height:56px;max-width:240px;display:block}.upload .up-now .mav{margin:0;border:0;box-shadow:none}
.upload .up-text{flex:1;min-width:180px;font-size:14px}.upload .up-text strong{color:var(--accent);text-decoration:underline;text-underline-offset:2px}[data-mode=dark] .upload .up-text strong{color:color-mix(in srgb,var(--accent) 55%,#fff)}
.upload .up-text .hint{margin-top:2px}
.upactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
/* theme choices: one click picks (and previews) a theme */
.palettes.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:800px){.ssec{grid-template-columns:1fr;gap:12px;padding:18px 0}}
.incount{border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px}
.incount .ic-head{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:9px 14px;border-bottom:1px solid var(--line)}
.incount .ic-row{display:flex;justify-content:space-between;gap:12px;padding:9px 14px}.incount .ic-row+.ic-row{border-top:1px solid var(--line)}
/* a message at the top of the home page sits above the banner, not under it */
.flash~.mhero{margin-top:0}
/* Security: two-step sign-in set-up */
.steps{margin:0;padding-left:20px;display:grid;gap:16px}.steps li{padding-left:4px}
.qrbox{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:10px}
.qrbox svg{display:block;background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line);flex:none}
.totpkey{font-size:15px;letter-spacing:.06em;word-break:break-all}
.recodes{margin-bottom:20px;max-width:820px}.codes{list-style:none;padding:0;margin:12px 0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.codes code{display:block;font-size:15px;letter-spacing:.06em;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-align:center}

/* LIVE / TEST: which mode a connection is in – outlined, so it never reads as a status colour */
.badge.mode-live,.badge.mode-test{background:transparent;border:1px solid currentColor;letter-spacing:.06em;font-size:11px}.badge.mode-live{color:var(--ink,#2b2622)}.badge.mode-test{color:#8a5a00}
[data-mode=dark] .badge.mode-live{color:#e9e2da}[data-mode=dark] .badge.mode-test{color:#f0c26a}

/* ---------- admin menu (1.33.0): icons, groups, folds down to icons (shared design with Aquilative Dashboard) ---------- */
.area-admin .admin-side{width:236px;padding:10px 0 0;display:flex;flex-direction:column;overflow:hidden;transition:width .18s ease}
.area-admin .admin-side nav{display:block;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 8px;margin:0;gap:0}
.area-admin .admin-side .side-group{padding:10px 22px 3px;font-size:10.5px;letter-spacing:.09em;white-space:nowrap}
.area-admin .admin-side a{display:flex;align-items:center;gap:11px;margin:1px 10px;padding:6px 12px;line-height:1.35;border-radius:9px;border-left:0;color:var(--ink);white-space:nowrap;text-decoration:none;position:relative}
.area-admin .admin-side a .ni{flex-shrink:0;color:var(--muted);transition:color .12s}
.area-admin .admin-side a:hover{background:var(--hi,var(--bg))}.area-admin .admin-side a:hover .ni{color:var(--ink)}
.area-admin .admin-side a.on{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--ink);font-weight:600;border-left:0;box-shadow:inset 3px 0 0 var(--accent)}
.area-admin .admin-side a.on .ni{color:var(--accent)}
.area-admin .admin-side .sl{flex:1;overflow:hidden;text-overflow:ellipsis}
.area-admin .admin-side a .count{float:none;margin:0;flex-shrink:0}
.area-admin{--foot-h:56px}   /* the Collapse Menu row and the footer are the same height, so their top lines meet */
.side-toggle{display:flex;align-items:center;gap:11px;margin:0;height:var(--foot-h,56px);box-sizing:border-box;padding:0 22px;text-align:left;border:0;border-top:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;width:100%}
.side-toggle:hover{color:var(--ink)}.side-toggle .ni{flex-shrink:0;transition:transform .18s}
.area-admin main.with-side{margin-left:256px;transition:margin-left .18s ease}
/* folded: icons only (hover shows the name) */
.side-mini .admin-side{width:72px}
.side-mini main.with-side{margin-left:92px}
.side-mini .admin-side .sl{display:none}
.side-mini .admin-side .side-group{padding:0;margin:8px 16px;height:0;border-top:1px solid var(--line);font-size:0}
.side-mini .admin-side .side-group span{display:none}
.side-mini .admin-side a{justify-content:center;margin:1px 12px;padding:7px 0}
.side-mini .admin-side a .count{position:absolute;top:3px;right:5px;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px;text-align:center}
.side-mini .side-toggle{justify-content:center;padding:0}.side-mini .side-toggle .ni{transform:scaleX(-1)}
[data-palette=glow] .area-admin .admin-side a.on{background:linear-gradient(90deg,color-mix(in srgb,#1409e6 13%,transparent),color-mix(in srgb,#a22bff 6%,transparent))}
[data-palette=glow] .area-admin .admin-side a.on{box-shadow:inset 3px 0 0 #a22bff}
/* the same spacing as Aquilative Dashboard at every screen height (1.33.1): tighter under 940px tall; under 800px the
   group names become thin dividers; if it still can't fit, it scrolls with a fade at its foot (app.js adds .more) */
@media(min-width:801px) and (max-height:940px){
  .area-admin .admin-side a{padding-top:4px;padding-bottom:4px;font-size:13.5px}.area-admin .admin-side a .ni{width:18px;height:18px}
  .area-admin .admin-side .side-group{padding-top:7px;padding-bottom:1px;font-size:10px}
  .side-mini .admin-side a{padding-top:5px;padding-bottom:5px}.side-mini .admin-side .side-group{margin:5px 16px}
}
@media(min-width:801px) and (max-height:800px){
  .area-admin .admin-side a{padding-top:3.5px;padding-bottom:3.5px}
  .area-admin .admin-side .side-group{height:0;padding:0;margin:5px 22px;border-top:1px solid var(--line);font-size:0;overflow:hidden}
}
.area-admin .admin-side nav.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
/* pages that share a menu entry: tabs at the top */
.section-tabs{display:flex;gap:4px;margin:-6px 0 18px;padding:4px;background:var(--hi,var(--bg));border:1px solid var(--line);border-radius:12px;width:max-content;max-width:100%;overflow-x:auto}
.section-tabs a{padding:6px 14px;border-radius:9px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none}
.section-tabs a:hover{color:var(--ink)}.section-tabs a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
@media(max-width:800px){
  .area-admin .admin-side,.side-mini .admin-side{width:auto;flex-direction:row;padding:0}
  .area-admin .admin-side nav{display:flex;overflow-x:auto;padding:6px}.area-admin .admin-side .side-group{display:none}
  .area-admin .admin-side a,.side-mini .admin-side a{margin:0 2px;padding:8px 10px;justify-content:flex-start}.side-mini .admin-side .sl{display:inline}
  .side-toggle{display:none}.area-admin main.with-side,.side-mini main.with-side{margin-left:0}
}

/* dashboard (1.33.0, shared with Aquilative Dashboard): figure tiles – label, figure, note – with a coloured top edge; one "Needs Attention" list */
.stat{position:relative;overflow:hidden;padding:16px 18px}.stat .l{color:var(--muted);font-size:13px;margin:0 0 4px}.stat .n{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.2}.stat .s{color:var(--muted);font-size:12.5px;margin-top:3px}
.stat:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent);opacity:.75}[data-palette=glow] .stat:before{background:var(--glow);opacity:.9}
.attention-card{margin-top:18px}.attention-card h2{margin:0 0 6px;font-size:18px}
.attention{list-style:none;margin:0;padding:0}.attention li{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}.attention li:last-child{border-bottom:0}
.attention .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transform:translateY(-1px);background:#e0a030}.attention .dot.err{background:var(--err)}

/* ---------- admin type (1.33.2): one type system for the admin areas of both apps (same as Aquilative Dashboard) –
   headings in --admin-head, everything else in --admin-body at 14px. Change both apps together (APPEARANCE.md). ---------- */
.area-admin{--admin-head:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--admin-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.area-admin main{font-family:var(--admin-body);font-size:14px;line-height:1.55}
.area-admin main h1{font-family:var(--admin-head);font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.area-admin main h2{font-family:var(--admin-head);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.area-admin main th{font-size:11.5px;font-weight:600;letter-spacing:.06em}
.area-admin main label{font-size:13px}
.area-admin main input,.area-admin main select,.area-admin main textarea,.area-admin main .btn{font-size:14px}
/* the wordmark sits centred over the admin menu (1.33.2, same as Aquilative Dashboard); the Staging tag just after it */
@media(min-width:801px){
  .area-admin .top .wrap{padding-left:0}
  .area-admin .top .brand{position:relative;width:236px;flex:none;justify-content:center;padding-right:0}
  .area-admin .top .brand .stage-tag{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:4px}
}
/* top bar alignment (1.33.3, same as Aquilative Dashboard): the wordmark's letters centred top to bottom in the bar, and
   room kept for the scrollbar on every page so the switch and profile button never move between short and long pages */
.area-admin .top .brand .wm-stacked{top:4px}
html:has(body.area-admin){scrollbar-gutter:stable}
.area-admin main h1 .badge,.area-admin main h2 .badge,.area-admin main h3 .badge{font-family:var(--admin-body);vertical-align:middle}
.area-admin main .card>h2:first-child{margin-top:0}

/* ---------- one admin look for both Aquilative apps (1.35.0) – measured element by element against Aquilative Dashboard;
   each element takes whichever app did it better (Projects/assets/design/appearance.md §4) ---------- */
.area-admin main .card:not(.stat):not(.intcard){padding:20px}
.area-admin main .card{border-radius:14px;box-shadow:0 1px 2px rgba(18,10,61,.04),0 6px 18px rgba(18,10,61,.05)}
[data-mode=dark] .area-admin main .card{box-shadow:none}
.area-admin main .card h2{margin-bottom:12px}
.area-admin main>.card,.area-admin main>section.card{margin-bottom:16px}   /* cards stacked straight on the page keep the grid gap between them */
.area-admin main input:not([type=checkbox]):not([type=radio]),.area-admin main select,.area-admin main textarea{color:var(--ink);font-weight:400;border-radius:10px}
.area-admin main .flash{border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:10px;padding:11px 15px}
.area-admin main .section-tabs a.on{font-weight:600}
/* the footer lines up with the page content */
.area-admin .dashfoot{margin-left:236px;border-top:1px solid var(--line)}.area-admin .dashfoot .wrap{max-width:1452px;margin:0;padding:0 16px 0 36px}
.side-mini.area-admin .dashfoot{margin-left:72px}
@media(max-width:800px){.area-admin .dashfoot,.side-mini.area-admin .dashfoot{margin-left:0}.area-admin .dashfoot .wrap{padding:0 16px}}
[data-palette=glow] .area-admin main .tabs:not(.section-tabs) a.on{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#1409e6,#a22bff 45%,#cf0099 75%,#c6016d) 1}

/* Admin mode badges: mode is separate from connection health (shared guide §2).
   Scope these overrides to the admin area; shop and vendor badges keep their design. */
.area-admin .badge.mode-live,.area-admin .badge.mode-test{font-size:12px}
.area-admin .badge.mode-live{color:var(--okc)}
.area-admin .badge.mode-test{color:var(--muted)}

/* 1.35.4: one look with Aquilative Dashboard, measured property by property in both palettes, light and dark.
   Status colours (badges, messages) follow the palette – the same values in both apps (Projects/assets/design/appearance.md §4). */
.area-admin{--okc:#25693f;--okbg:#e7f3ea;--warnc:#8a5700;--warnbg:#fdf2dc;--errc:#b3261e;--errbg:#fbe9e7;--offc:#6b635c;--offbg:#f3eee7;--hi2:#fbfaf8;--shadow:0 1px 2px rgba(43,38,34,.04),0 6px 18px rgba(43,38,34,.05)}
[data-palette=glow] .area-admin{--okc:#1d6b3f;--okbg:#e6f5ec;--warnc:#8a5700;--warnbg:#fff4dc;--errc:#b3261e;--errbg:#fdecea;--offc:#5d5890;--offbg:#efedfc;--hi2:#f8f7fe;--shadow:0 1px 2px rgba(18,10,61,.04),0 6px 18px rgba(18,10,61,.05)}
[data-mode=dark] .area-admin{--okc:#86d6a5;--okbg:rgba(70,170,110,.16);--warnc:#f0c26a;--warnbg:rgba(230,160,40,.15);--errc:#ff8a80;--errbg:rgba(230,80,70,.16);--offc:#a69c92;--offbg:#26221e;--hi2:#26221e}
[data-palette=glow][data-mode=dark] .area-admin{--okc:#7fdca5;--offc:#a7a2d6;--offbg:#1c1252;--hi2:#170d47}
.area-admin main .flash.ok{background:var(--okbg);color:var(--okc)}.area-admin main .flash.warn{background:var(--warnbg);color:var(--warnc)}.area-admin main .flash.err{background:var(--errbg);color:var(--errc)}
.area-admin main .card{box-shadow:var(--shadow)}[data-mode=dark] .area-admin main .card{box-shadow:none}
.area-admin .pmenu .pout{color:var(--errc)}
/* tabs in dark mode: muted like in light mode (the link colour only for links) */
[data-mode=dark] .tabs a{color:var(--muted)}[data-mode=dark] .tabs a.on,[data-mode=dark] .tabs a:hover{color:var(--ink)}
html .area-admin main th,[data-palette] .area-admin main th{background:var(--hi2)}
/* figure tiles fill the row, the label always above the figure; lists sit in a card – as in Aquilative Dashboard */
.area-admin .stats{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:14px}
.area-admin .stat{display:flex;flex-direction:column}.area-admin .stat .l{order:-1}
.area-admin main .tablewrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
[data-mode=dark] .area-admin main .tablewrap{box-shadow:none}
.area-admin main .card .tablewrap{border:0;border-radius:0;padding:0;box-shadow:none;background:none;margin-bottom:0}
/* search: a field up to 420px and a secondary (outlined) Search button, as in Aquilative Dashboard */
.area-admin main .toolbar input[name=q]{flex:1 1 260px;max-width:420px;min-width:0 !important}
.area-admin .card-top{align-items:baseline;margin-bottom:12px}.area-admin .card-top h2{margin:0}
.nowrap{white-space:nowrap}
.area-admin main .tablewrap td .muted{overflow-wrap:anywhere}
.area-admin main .tablewrap>h2{margin:0 0 12px}
.area-admin .acct-cards,.area-vendor .acct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px;align-items:start}.area-admin .acct-cards>.card,.area-vendor .acct-cards>.card{margin:0!important}
/* pages of a long list, as in Aquilative Dashboard */
.pager{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;font-size:14px}.pager b,.pager a{padding:3px 9px;border-radius:6px}.pager b{background:var(--accent);color:var(--accent-ink)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}@media(max-width:900px){.cols{grid-template-columns:1fr}}
.area-admin main form.stack.card,.area-admin main .intset>.card{max-width:none}
.area-admin main .tablewrap>h2+p{margin:-6px 0 12px}
nav.pmenu{display:block;gap:0}

/* ---------- store web address field (1.44.0): prefix, the handle, and its live state ---------- */
.handle{display:flex;align-items:center;border:1px solid var(--field-line);border-radius:10px;background:var(--field,#fff);overflow:hidden}
.handle:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.handle .pre{padding:9px 0 9px 12px;color:var(--muted);font-size:13.5px;white-space:nowrap}
.handle input{border:0;border-radius:0;background:transparent;flex:1;min-width:0;padding:9px 8px;font-weight:400}.handle input:focus{outline:none;box-shadow:none}
.handle .hstate{padding:0 12px;font-size:12.5px;font-weight:600;white-space:nowrap}.handle .hstate.ok{color:var(--ok,#2e7d4f)}.handle .hstate.bad{color:var(--err,#b23b3b)}
.handle.bad{border-color:var(--err,#b23b3b)}
.hsugg{font-size:12.5px;color:var(--muted);margin-top:5px}.hsugg a{margin-right:10px}
.callout{padding:10px 14px;border-radius:10px;background:#fff1d6;color:#7a4d00;font-size:13.5px;line-height:1.5}[data-mode=dark] .callout{background:rgba(230,160,40,.16);color:#f0c26a}
.settings .lbl,.sform .lbl{display:block;font-weight:600;font-size:13px;margin-bottom:6px}.subsum{display:flex;gap:10px;flex-wrap:wrap}.subsum span{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted)}.subsum b{display:block;font-size:20px;font-weight:700;color:var(--ink)}.subsum .warn b{color:var(--warnc,#9a6100)}.subsum .bad b{color:var(--err)}

/* Keep the two primary order actions together; the table wrapper scrolls on phones. */
.order-doc-actions{white-space:nowrap}
.order-doc-actions .refund{display:inline-block;vertical-align:middle;margin-left:8px;white-space:normal}

/* Vendor → Delivery: adding an option (1.50.0 – on a phone the fields stack, the prices side by side; Codex C36) */
.shipadd{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr auto;gap:12px;align-items:end}
.shipadd label{margin:0}
@media(max-width:700px){.shipadd{grid-template-columns:1fr 1fr}.shipadd .sa-name,.shipadd .sa-time,.shipadd .btn{grid-column:1/-1}}
/* (1.56.0, Codex C44) any form with data-savebar – not only settings pages – gets the sticky Save bar and "Unsaved changes" (the email editor) */
form[data-savebar]:not(.sform) .savebar{position:sticky;bottom:0;z-index:5;margin:8px -4px 0;padding:12px 4px;background:var(--card);border-top:1px solid var(--line)}
form[data-savebar].dirty .savebar .unsaved{display:inline}
@media(min-width:801px){.area-admin form[data-savebar]:not(.sform) .savebar{bottom:var(--foot-h,56px)}}
/* (1.58.0) Contact the Store: a folded card; the spam trap is off-screen */
.contact summary{cursor:pointer;font-weight:600}.contact[open] summary{margin-bottom:10px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* (1.58.2) the cookie choice: a card floating over the page at the bottom of the window until the visitor chooses – it
   stays in view while they scroll (1.58.0's bar under the header slid behind it). A pure overlay: the page isn't moved */
.cookiebar{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(860px,calc(100% - 32px));
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 40px rgba(20,12,40,.18);font-size:13.5px}
.cookiebar .wrap{display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;max-width:none;margin:0}
.cookiebar p{margin:0;flex:1 1 360px;min-width:0;color:var(--muted)}.cookiebar p strong{display:block;color:var(--ink);margin-bottom:2px}
.cookiebar form{gap:8px;flex-wrap:nowrap}
@media(max-width:600px){.cookiebar{bottom:calc(8px + env(safe-area-inset-bottom,0px));width:calc(100% - 16px)}.cookiebar form{width:100%}.cookiebar form .btn{flex:1}}
@media(prefers-reduced-motion:no-preference){.cookiebar{animation:cookie-in .3s ease-out}@keyframes cookie-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}}
/* Legal documents (1.59.0): the public pages (legal.php, cookies.php, returns.php) and Admin → Legal's comparison */
.legal-page{max-width:820px}.legal-page h1{margin-bottom:4px}.legal-meta{margin:0 0 16px}
.legal-card{max-width:none;line-height:1.65}.legal-doc>:first-child{margin-top:0}.legal-doc>:last-child{margin-bottom:0}
.legal-doc h2{font-size:1.3rem;margin:1.6em 0 .5em}.legal-doc h3{font-size:1.08rem;margin:1.4em 0 .4em}.legal-doc h4{font-size:1rem;margin:1.2em 0 .3em}
.legal-doc ul,.legal-doc ol{padding-left:1.4em}.legal-doc li{margin:.3em 0}.legal-doc a{overflow-wrap:anywhere}
.legal-doc .tablewrap{margin:12px 0}.legal-doc table{font-size:.93rem}.legal-doc th,.legal-doc td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal-history{max-width:none;margin-top:16px}.legal-history h2{margin-top:0;font-size:1.1rem}.legal-history ul{margin:0;padding-left:1.2em}
.legal-diff{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.55;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.legal-diff>div{padding:1px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.legal-diff .da{background:#e2f2e8;color:#1d5a37}.legal-diff .dd{background:#fbe3e1;color:#7c1a14;text-decoration:line-through}.legal-diff .dg{color:var(--muted);font-style:italic;background:var(--hi,#f6f4f1)}
[data-mode=dark] .legal-diff .da{background:rgba(70,170,110,.18);color:#86d6a5}[data-mode=dark] .legal-diff .dd{background:rgba(230,80,70,.18);color:#f19a91}

/* ==================== 1.68.0 – screens and accessibility (shop) ==================== */
/* text only screen readers hear, and the "Skip to content" link that appears when it's reached with the keyboard (ui-shop-13) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;z-index:100;left:12px;top:-60px;background:var(--card);color:var(--ink);padding:10px 16px;border-radius:10px;border:2px solid var(--accent);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}
.sec-head h1{font-size:30px;margin:0}@media(max-width:600px){.sec-head h1{font-size:24px}}
/* "Not found" pages (ui-shop-4) */
.notfound{max-width:560px;margin:24px 0}.notfound h1{margin:0}.notfound p{margin:0}
/* the cookie choice: both buttons look the same – saying no is as easy to see as saying yes (ui-shop-11) */
.btn.choice{background:var(--card);color:var(--ink);border:1.5px solid var(--ink)}
[data-mode=dark] .btn.choice{background:transparent;color:var(--ink)}
/* a field marked as the one to fix (ui-shop-6) */
[aria-invalid=true]{border-color:var(--err)!important;box-shadow:0 0 0 1px var(--err)}
/* basket: a payment in progress (ui-shop-2), quantity and delivery with their own Update buttons (ui-shop-7) */
.paywait{border-left:4px solid var(--accent)}
.bqty input{width:64px}.bship select{min-width:0}
/* contact forms: Name and Email side by side, stacked on a phone (ui-shop-17) */
.cf-two{align-items:start}.cf-two>label{flex:1 1 220px;min-width:0}
/* the store's delivery list: the price always on the right of its own method (ui-shop-17) */
.dlist{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:baseline}.dlist .dprice{text-align:right}
/* links that aren't underlined elsewhere: the soft cards, section heads and fold-outs (ui-shop-10) */
.card.soft a:not(.btn),.sec-head a,details.contact summary,.ptitle-store a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* the product photo hint: "Tap to zoom" on touch screens (ui-shop-16) */
.zoomhint .tap,.lb-tip .tap{display:none}@media(hover:none){.zoomhint .tap,.lb-tip .tap{display:inline}.zoomhint .click,.lb-tip .click{display:none}}
/* a phone's top bar for guests: the logo and its links on one row, the search under them (ui-shop-9) */
@media(max-width:480px){
  .area-shop .top .wrap{column-gap:8px}
  .area-shop .top nav{gap:6px;flex-wrap:nowrap;margin-left:auto}
  .area-shop .top nav .btn.sm{padding:6px 10px}
  .area-shop .top .cartlink{width:30px}
  .area-shop .topsearch{margin-bottom:8px}
}
@media(max-width:400px){.area-shop .top .brand .wm{font-size:15px}}
@media(max-width:360px){.area-shop .top nav{gap:4px}.area-shop .top nav>a:not(.btn){font-size:13px}.area-shop .top nav .btn.sm{padding:6px 8px;font-size:13px}}
fieldset.radios{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}fieldset.radios legend{padding:0;margin-bottom:4px;font-weight:600;font-size:14px}   /* (a group of radio buttons with its name – ui-vendor-12) */
.pvtabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 14px;font:inherit;font-weight:500;color:var(--muted);cursor:pointer}.pvtabs button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}.pvtabs button:hover{color:var(--ink)}   /* (the email preview's Design / Plain Text switch – F15) */
.legal-diff .dm{display:inline-block;width:1.2em;font-weight:700;text-decoration:none}   /* (+ / − before a changed line – ui-admin-15) */

/* ==================== 1.68.0 – screens and accessibility (admin and vendor areas) ==================== */
/* phone tables (sweep ui-admin-6, ui-vendor-4, -5): each row becomes a small card – every column, actions included, is in
   view without scrolling sideways, each value labelled with its column's name (app.js copies it from the header row) */
@media(max-width:600px){
  .area-admin .tablewrap table.list,.area-vendor .tablewrap table.list{display:block;border:0}
  .area-admin .tablewrap table.list>tbody,.area-vendor .tablewrap table.list>tbody{display:block}
  .area-admin .tablewrap table.list tr:first-child:not(:has(td)),.area-vendor .tablewrap table.list tr:first-child:not(:has(td)){display:none}
  .area-admin .tablewrap table.list tr,.area-vendor .tablewrap table.list tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .area-admin .tablewrap table.list td,.area-admin .tablewrap table.list th,.area-vendor .tablewrap table.list td,.area-vendor .tablewrap table.list th{display:block;border:0;padding:2px 0;text-align:left;width:auto!important}
  .tablewrap table.list td[data-label]:not([data-label=""])::before{content:attr(data-label) " ";color:var(--muted);font-size:12px;font-weight:600;margin-right:4px}
  .tablewrap table.list td:empty{display:none}
  .area-vendor .tablewrap table.list input:not([type=checkbox]):not([type=radio]){width:100%!important}
  .area-vendor .tablewrap table.list .row{flex-wrap:wrap}
}
/* codes and references never break in the middle of a word in admin tables – only where they have a hyphen (ui-admin-6) */
.area-admin td code{overflow-wrap:normal;word-break:normal}
@media(max-width:600px){.area-admin .tablewrap table.list td.nowrap{white-space:normal}}
/* the phone admin and vendor menus are one row that scrolls sideways, as are the section tabs – they never wrap (ui-admin-7, ui-vendor-16) */
.area-vendor .side nav{display:block}
@media(max-width:800px){
  .area-admin .admin-side nav,.section-tabs,.area-vendor .side nav{flex-wrap:nowrap}
  .area-vendor .side nav{display:flex;gap:0;overflow-x:auto;width:100%}
  .area-admin .admin-side a,.area-vendor .side a{flex:none}
}
/* Legal → Fill-Ins on a phone: the code above its value, never on top of it (ui-admin-16) */
.fillrow{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}.fillrow code{white-space:nowrap}.fillrow>span{max-width:58%;text-align:right;overflow-wrap:anywhere}
@media(max-width:600px){.fillrow{flex-direction:column;gap:0}.fillrow>span{max-width:none;text-align:left}}
/* the two-step key in groups of four that never break apart (ui-admin-16) */
.totpkey{word-break:normal}.totpkey span{display:inline-block;white-space:nowrap}
/* a counter under a long field (ui-vendor-3) */
.counter{font-size:12.5px;color:var(--muted);font-weight:400}.counter.over{color:var(--err);font-weight:600}
/* a product hidden from the shop (ui-vendor-9) */
.b-hidden{background:var(--offbg);color:var(--offc)}
@media(max-width:800px){.payfirst{order:-1}}   /* (payouts not set up: first on a phone – ui-vendor-10) */
/* the seller's details before anyone pays (1.72.0) */
.seller-panel{margin:18px 0}.seller-panel h2,.seller-panel h3{font-size:17px;margin:0 0 10px}
.seller-kv{grid-template-columns:140px 1fr;font-size:13.5px}
.seller-agent{color:var(--ink);margin:0 0 10px}
@media(max-width:600px){.seller-kv{grid-template-columns:1fr}}
.seller-fields [hidden]{display:none!important}