/* the logo's Space Grotesk Bold, served from this site so the logo never depends on Google Fonts (SIL Open Font License, see public/fonts) */
@font-face{font-family:"CC Logo";font-weight:700;font-display:swap;src:url(/public/fonts/space-grotesk-700.woff2) format("woff2")}
/* base reset (the hosted preview supplied this; a standalone page needs it) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* CC Holdings: a dealing-desk look. Warm paper, deep emerald, brass for "we buy" prices, square corners and hairlines,
   Space Grotesk headings with IBM Plex Sans text and IBM Plex Mono figures (IBM Plex Sans Arabic on Arabic pages). */
:root{
  --bg:#f4f2ec; --surface:#fffffe; --raise:#ebe8df; --ink:#0f1f19; --muted:#56655e; --line:#d8d3c6;
  --gold:#0b5a42; --gold-hi:#167a5a; --on-gold:#ffffff; --good:#1f7a4d; --warn:#a5561c;
  --brass:#8a6a25; --brass-bg:#f3ecdc; --brass-hi:#d7b56b;
  --banner-a:#0d4434; --banner-b:#072a20; --banner-ink:#eef2ec;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pill:2px; --r-lg:2px; --r:2px;
  color-scheme:light;
}
/* Colour schemes (the switcher is hidden by default: showPaletteSwitcher in config.json) */
:root[data-palette="vault"]{
  --bg:#f4f2ec; --surface:#fffffe; --raise:#ebe8df; --ink:#0f1f19; --muted:#56655e; --line:#d8d3c6;
  --gold:#0b5a42; --gold-hi:#167a5a; --on-gold:#ffffff; --good:#1f7a4d; --warn:#a5561c;
  --brass:#8a6a25; --brass-bg:#f3ecdc; --brass-hi:#d7b56b;
  --banner-a:#0d4434; --banner-b:#072a20; --banner-ink:#eef2ec; color-scheme:light}
:root[data-palette="ledger"]{
  --bg:#0b1411; --surface:#111d19; --raise:#172621; --ink:#e7eee9; --muted:#9db0a7; --line:#24382f;
  --gold:#3fb08a; --gold-hi:#6fd1ad; --on-gold:#04140e; --good:#6fd1ad; --warn:#e6a95e;
  --brass:#d6b56a; --brass-bg:#1d1f15; --brass-hi:#e9cf8f;
  --banner-a:#10332a; --banner-b:#06110d; --banner-ink:#eef2ec; color-scheme:dark}
:root[data-palette="sand"]{
  --bg:#efe7d8; --surface:#fbf7ef; --raise:#e5dccb; --ink:#2a1d16; --muted:#6e5c50; --line:#d6cab4;
  --gold:#7a3f23; --gold-hi:#9a5532; --on-gold:#ffffff; --good:#2c7a4c; --warn:#a4621a;
  --brass:#0b5a42; --brass-bg:#e3eadf; --brass-hi:#8fc2a8;
  --banner-a:#4a2617; --banner-b:#2a150c; --banner-ink:#f6eee4; color-scheme:light}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);padding-inline:16px;padding-block:0 56px}
.wrap{max-width:1240px;margin:0 auto}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mono,.amt,.row .v,.tot .big,.specs{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
.eyebrow{font:600 12.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-inline:-16px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;text-decoration:none;color:inherit}
.brand .mark{width:30px;height:30px}
.brand b{font:600 22px/1 var(--display);letter-spacing:.01em}
.brand b em{font-style:italic;color:var(--gold)}
nav.metals{display:flex;gap:18px;font-size:15.5px}
nav.metals a{color:var(--muted);text-decoration:none}
nav.metals a:hover{color:var(--ink)}
@media (max-width:820px){nav.metals{display:none}}
.cart-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:7px 8px 7px 16px;font-weight:600;font-size:15.5px}
.cart-btn .n{min-width:24px;height:24px;display:grid;place-items:center;border-radius:var(--pill);background:var(--gold);color:var(--on-gold);font:600 13.5px var(--mono)}

/* full-width banner slider */
.banner{position:relative;margin-inline:-16px;overflow:hidden;color:var(--banner-ink);background:var(--banner-b)}
.btrack{display:flex;transition:transform .7s cubic-bezier(.6,0,.2,1)}
@media (prefers-reduced-motion:reduce){.btrack{transition:none}}
.bslide{flex:0 0 100%;min-width:0;background:radial-gradient(90% 140% at 78% 40%,var(--banner-a),var(--banner-b) 70%)}
.bin{max-width:1240px;margin:0 auto;padding:52px 16px 64px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
.bin .eyebrow{color:var(--gold-hi)}
.bin h2{font:500 clamp(34px,5.4vw,66px)/1 var(--display);letter-spacing:-.01em;margin:12px 0 0;text-wrap:balance}
.bin h2 em{font-style:italic;color:var(--gold-hi)}
.bin p{margin:16px 0 0;max-width:46ch;font-size:17px;color:color-mix(in srgb,var(--banner-ink) 72%,transparent)}
.bcta{margin-top:24px;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--pill);padding:12px 22px;font-weight:600;background:linear-gradient(135deg,#f2dc97,#d0a948);color:#1a1405}
.bart{display:flex;justify-content:center;align-items:center;min-height:200px;position:relative}
.bart svg{width:min(320px,80%);height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.bart .second{position:absolute;width:min(170px,42%);inset-inline-end:6%;bottom:2%}
.tickers{display:grid;grid-template-columns:repeat(2,auto);gap:12px;justify-content:center}
.tickers span{border:1px solid color-mix(in srgb,var(--banner-ink) 25%,transparent);border-radius:var(--pill);padding:12px 26px;font:600 22px var(--mono);text-align:center}
.tickers span:nth-child(odd){background:color-mix(in srgb,var(--banner-ink) 8%,transparent)}
.bctrl{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;align-items:center;gap:14px}
.bctrl button.arr{width:34px;height:34px;border-radius:var(--pill);border:1px solid color-mix(in srgb,var(--banner-ink) 30%,transparent);background:transparent;color:var(--banner-ink);font-size:19px;line-height:1}
.bdots{display:flex;gap:8px}
.bdots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:color-mix(in srgb,var(--banner-ink) 40%,transparent);transition:width .3s}
.bdots button[aria-current="true"]{width:26px;background:var(--gold-hi)}
@media (max-width:760px){.bin{grid-template-columns:1fr;padding-block:36px 72px}.bart{min-height:150px}.bart svg{width:min(220px,64%)}.tickers span{padding:8px 18px;font-size:17px}}

/* palette switcher */
.palette{position:fixed;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;display:flex;align-items:center;gap:6px;padding-block:6px;padding-inline:14px 8px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:13.5px}
.palette .lbl{color:var(--muted);font-weight:600;margin-inline-end:4px}
.palette button{display:flex;align-items:center;gap:6px;border:1px solid transparent;background:none;border-radius:var(--pill);padding:4px 10px 4px 5px;font-size:13.5px;font-weight:600}
.palette button[aria-pressed="true"]{border-color:var(--gold)}
.palette i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(128,128,128,.4)}
@media (max-width:480px){.palette .lbl{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:56px 40px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding-block:36px 28px}}
.hero h1{font:500 clamp(40px,6.4vw,78px)/.98 var(--display);letter-spacing:-.015em;margin:14px 0 0;text-wrap:balance}
.hero h1 em{color:var(--gold);font-style:italic}
.hero .lede{margin:20px 0 0;color:var(--muted);font-size:18px;max-width:52ch}
.hero-coin{display:flex;align-items:center;gap:22px;margin-top:30px}
/* a real coin photo spinning in 3D: two faces back to back, a thin gold edge between them, and a shadow on the "floor" */
.hero-coin .spin{width:104px;height:122px;flex:none;perspective:700px;position:relative}
.coin3d{position:absolute;top:0;left:0;width:104px;height:104px;transform-style:preserve-3d;animation:coinspin 12s linear infinite}
.coin3d .face{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.coin3d .front{transform:translateZ(4.2px)}
.coin3d .back{transform:rotateY(180deg) translateZ(4.2px)}
.coin3d .rim{position:absolute;inset:1px;border-radius:50%;transform:translateZ(var(--z));background:radial-gradient(circle,#a37a24 0 60%,#f1d27c 80%,#9b7420 100%)}
.hero-coin .floor{position:absolute;left:12px;right:12px;bottom:0;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);animation:coinshadow 12s linear infinite}
@keyframes coinspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes coinshadow{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.25)}50%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.coin3d{animation:none;transform:rotateY(-18deg)}.hero-coin .floor{animation:none}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;font-size:14.5px;color:var(--muted)}
.steps b{display:block;color:var(--ink);font-weight:600;font-size:15.5px}
.steps span{font:500 12.5px var(--mono);color:var(--gold)}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* fixing board */
.board{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.board-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.status{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.dot.live{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 25%,transparent)}
.coins{display:flex;flex-wrap:wrap;gap:6px;padding:14px 18px 6px}
.coins button{border:1px solid var(--line);background:transparent;border-radius:var(--pill);padding:4px 11px;font:500 13.5px var(--mono);color:var(--muted)}
.coins button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rows{padding:4px 18px 8px}
.row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.el{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;position:relative;font:600 19px var(--display);color:#1b1b1b}
.el small{position:absolute;top:3px;inset-inline-start:5px;font:500 8px var(--mono);opacity:.7}
.el.au{background:linear-gradient(135deg,#f6dd8c,#c4952c)} .el.ag{background:linear-gradient(135deg,#f5f7f9,#a9b0b8)}
.el.pt{background:linear-gradient(135deg,#eef2f7,#8f99a8)} .el.pd{background:linear-gradient(135deg,#efe9df,#9d9486)}
.row .nm{font-weight:600}
.row .nm small{display:block;color:var(--muted);font:13.5px var(--mono);font-weight:400}
.row .v{text-align:end;font:500 17px var(--mono)}
.row .v small{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.board-f{display:flex;justify-content:space-between;gap:10px;padding:12px 18px;background:var(--raise);font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.linkish{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:13.5px}

.rates{margin:0 0 24px;padding:16px;border:1px dashed var(--line);border-radius:var(--r-lg)}
.rates p{margin:0 0 12px;color:var(--muted);font-size:14.5px;max-width:72ch}
.rates .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.rates label{display:flex;flex-direction:column;gap:4px;font:600 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rates input{font:15.5px var(--mono);padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}

/* filters */
.filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + 57px);z-index:10;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 0;background:var(--bg);border-block:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;border-radius:var(--pill);padding:5px 13px;font-size:14.5px;color:var(--muted)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.filters input,.filters select{border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:6px 14px;font-size:15.5px}
.filters input{flex:1 1 200px;min-width:0}
@media (max-width:640px){.filters{position:static}}

/* product sections */
.metal-sec{padding-top:44px;scroll-margin-top:130px}
.sec-h{display:flex;align-items:end;gap:18px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.sec-h h2{font:500 clamp(30px,4vw,44px)/1 var(--display);margin:0}
.sec-h h2 em{font-style:italic;color:var(--gold)}
.sec-h .fact{color:var(--muted);font:13.5px var(--mono);margin-inline-start:auto}
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
/* per-product image gallery */
.gal{position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1/1;display:grid;place-items:center;background:radial-gradient(110% 85% at 50% 18%,var(--raise),var(--surface) 72%)}
.slide svg{width:74%;height:auto;max-height:84%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);font-size:19px;line-height:1;opacity:0;transition:opacity .2s}
.gal:hover .gnav,.gnav:focus-visible{opacity:1}
@media (hover:none){.gnav{display:none}}
.gnav.prev{inset-inline-start:10px}.gnav.next{inset-inline-end:10px}
.gdots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gdots span{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.45;transition:all .2s}
.gdots span.on{width:16px;border-radius:3px;background:var(--gold);opacity:1}
.vlabel{position:absolute;top:12px;inset-inline-start:12px;font:600 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* featured slider */
.featured{padding-top:40px}
.feat-h{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:18px}
.feat-h h2{font:500 clamp(28px,3.6vw,40px)/1 var(--display);margin:6px 0 0}
.feat-h h2 em{font-style:italic;color:var(--gold)}
.fnav{display:flex;gap:8px}
.fnav button{width:42px;height:42px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);font-size:20px;line-height:1}
.fnav button:hover{border-color:var(--gold);color:var(--gold)}
.feat-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(640px,90%);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.feat-track::-webkit-scrollbar{display:none}
.feat{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:0}
.feat .fa{aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;background:radial-gradient(110% 85% at 50% 18%,var(--raise),var(--surface) 72%)}
.feat .fa svg{width:80%;height:auto;filter:drop-shadow(0 22px 24px rgba(0,0,0,.4))}
.feat .fb{padding:26px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.feat h3{font:500 clamp(24px,2.6vw,30px)/1.1 var(--display);margin:0}
.feat p{margin:0;color:var(--muted);font-size:15.5px}
.feat .amt{font-size:24px}
@media (max-width:560px){.feat{grid-template-columns:1fr}.feat .fa{aspect-ratio:4/3}}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:0;transition:transform .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
.art{aspect-ratio:5/4;max-width:100%;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 15%,var(--raise),var(--surface) 70%)}
.art svg{width:66%;height:auto;max-height:86%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.35))}
.body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--muted)}
.card h3{margin:2px 0 0;font:600 17px/1.3 var(--body)}
.specs{font:13.5px var(--mono);color:var(--muted)}
.price{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.amt{font:500 19px var(--mono);white-space:nowrap;color:var(--ink)}
.amt i{font-style:normal;font-size:12.5px;color:var(--gold);margin-inline-start:5px;letter-spacing:.05em}
.price small{display:block;font:12.5px var(--mono);color:var(--muted)}
.add{flex:none;border:0;background:var(--ink);color:var(--bg);border-radius:var(--pill);padding:8px 15px;font-weight:600;font-size:14.5px}
.add:hover{background:var(--gold);color:var(--on-gold)}
.flash{animation:fl .8s ease}
@keyframes fl{from{color:var(--gold-hi)}to{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
.empty{color:var(--muted);padding:40px 0}

/* basket */
.scrim{position:fixed;inset:0;background:rgba(5,8,12,.55);z-index:30}
.drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;width:min(440px,100%);z-index:40;background:var(--surface);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) 20px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:-20px 0 60px rgba(0,0,0,.35)}
.dh{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dh h2{margin:0;font:500 28px var(--display)}
.x{border:1px solid var(--line);background:none;border-radius:var(--pill);width:34px;height:34px;font-size:19px;line-height:1}
.lines{flex:1;overflow:auto;padding:6px 0}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line b{font-weight:500;font-size:15.5px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border:1px solid var(--line);background:var(--raise);border-radius:var(--pill)}
.totals{padding-top:14px;display:flex;flex-direction:column;gap:10px}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tot .big{font:500 24px var(--mono)}
.lock{display:flex;justify-content:space-between;font-size:14.5px;color:var(--muted);padding:10px 12px;border-radius:var(--r);background:var(--raise)}
.lock .mono{color:var(--ink)}
.lock.expired .mono{color:var(--warn)}
.go{border:0;border-radius:var(--pill);padding:13px;font-weight:600;background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--on-gold)}
.go:disabled{opacity:.4;cursor:not-allowed}
.pay{border:1px dashed var(--line);border-radius:var(--r);padding:12px;font-size:14.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.pay strong{color:var(--ink)}
footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer p{margin:0;max-width:70ch}

/* links inside cards */
.card h3 a,.feat h3 a{color:inherit;text-decoration:none}
.card h3 a:hover,.feat h3 a:hover{color:var(--gold)}
a.fa{display:grid}
.brand{cursor:pointer}

/* product page */
.crumbs{padding-block:22px 0;font-size:14.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;padding-block:24px 10px;align-items:start}
@media (max-width:860px){.pdp{grid-template-columns:1fr;gap:24px}}
.pdp .gal{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pdp .gal .gnav{opacity:1}
.pdp h1{font:500 clamp(34px,4.6vw,56px)/1.02 var(--display);margin:10px 0 0;text-wrap:balance}
.pdp .lede{color:var(--muted);font-size:17px;margin:16px 0 0;max-width:58ch}
.pdp .big-price{margin-top:24px;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.pdp .big-price .amt{font-size:34px}
.buy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.buy .qty{border:1px solid var(--line);border-radius:var(--pill);padding:4px}
.buy .qty button{border:0;background:var(--raise)}
.buy .qty input{width:44px;text-align:center;border:0;background:transparent;font:500 16px var(--mono)}
.buy .add{padding:12px 22px;font-size:15.5px}
.facts{width:100%;border-collapse:collapse;margin-top:26px;font-size:15.5px}
.facts th{text-align:start;font-weight:500;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line);width:42%}
.facts td{padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-variant-numeric:tabular-nums}
.allcoins{margin-top:28px}
.allcoins h2{font:500 26px var(--display);margin:0 0 10px}
.allcoins .tbl{overflow-x:auto}
.allcoins table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:320px}
.allcoins td,.allcoins th{padding:9px 0;border-bottom:1px solid var(--line);text-align:end;font-family:var(--mono);font-variant-numeric:tabular-nums}
.allcoins th{color:var(--muted);font-weight:500;font-family:var(--body)}
.allcoins td:first-child,.allcoins th:first-child{text-align:start}
.related{padding-top:30px}
.related h2{font:500 30px var(--display);margin:0 0 18px}
.quote{border:1px solid var(--gold);border-radius:var(--r);padding:12px;font-size:14.5px;display:flex;flex-direction:column;gap:6px}
.quote strong{font-size:15.5px}
.quote .mono{color:var(--ink)}
.err{color:var(--warn);font-size:14.5px}

/* basket line reference price */
.line-ref{color:var(--muted);font-size:13.5px;text-align:end}

/* language switch */
.lang{color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600;border:1px solid var(--line);border-radius:var(--pill);padding:6px 14px}
.lang:hover{border-color:var(--gold);color:var(--gold)}

/* right-to-left: mirror the arrows, the drawer shadow and the banner glow */
/* product photos (used instead of the drawings once added to public/images) */
/* photos carry their own shadow (added by tools/prepare-photos.py), so no browser shadow here:
   some browsers clip a CSS drop-shadow at the image edge */
.slide img,.feat .fa img,.bart img{width:88%;height:auto;max-height:100%;object-fit:contain;filter:none}
.feat .fa img{width:92%}
.bart img{width:min(360px,90%)}
.bart img.second{position:absolute;width:min(190px,47%);inset-inline-end:6%;bottom:2%}
/* product description section */
.about{margin-top:36px;padding-block:36px 4px;border-top:1px solid var(--line)}
.about-in{max-width:68ch}
.about h2{font:500 clamp(26px,3vw,34px)/1.15 var(--display);margin:0 0 12px;text-wrap:balance}
.about p+h2{margin-top:30px}
.about p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--ink)}
/* product FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--pill);color:var(--gold);font-weight:400;font-size:19px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--gold)}
.faq details p{margin:0 0 18px;color:var(--muted)}
/* "image is illustrative" note on coin pages */
.pdp .note{margin:14px 0 0;max-width:58ch;font-size:14.5px;line-height:1.55;color:var(--muted);padding-inline-start:12px;border-inline-start:2px solid var(--gold)}

/* ---------- price charts ---------- */
/* one line colour per metal: lighter tints on the dark schemes, deeper ones on Ivory */
:root,:root[data-palette="vault"],:root[data-palette="sand"]{--c-au:#8c6812;--c-ag:#5d6b80;--c-pt:#3f6ea8;--c-pd:#8a5a33}
:root[data-palette="ledger"]{--c-au:#d8b65e;--c-ag:#c9d4e3;--c-pt:#8fb0d9;--c-pd:#d3b38f}
@media (prefers-color-scheme:light){:root:not([data-palette]):not([data-theme="dark"]){--c-au:#8c6812;--c-ag:#5d6b80;--c-pt:#3f6ea8;--c-pd:#8a5a33}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-charts{color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600;border:1px solid var(--line);border-radius:var(--pill);padding:6px 14px;white-space:nowrap}
.nav-charts:hover,.nav-charts[aria-current="page"],.nav-charts.on{border-color:var(--gold);color:var(--gold)}
.charts-head{padding-block:28px 6px;max-width:70ch}
.charts-head h1{font:500 clamp(36px,5vw,60px)/1.02 var(--display);margin:12px 0 0;text-wrap:balance}
.charts-head h1 em{font-style:italic;color:var(--gold)}
.charts-head .lede{color:var(--muted);font-size:17px;margin:16px 0 0}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
@media (max-width:900px){.chart-grid{grid-template-columns:1fr}}
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cc-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cc-title{display:flex;flex-direction:column;min-width:0}
.cc-title h2{margin:0;font:500 26px/1.1 var(--display)}
.cc-title span{font-size:13.5px;color:var(--muted)}
.cc-cur{margin-inline-start:auto}
.cc-cur select{border:1px solid var(--line);background:var(--raise);color:var(--ink);border-radius:var(--pill);padding:7px 12px;font:500 14.5px var(--body);max-width:100%}
.cc-fig{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cc-val{font:500 28px var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cc-chg{font:600 14.5px var(--body);direction:ltr;unicode-bidi:isolate}
.cc-chg.up{color:var(--good)}.cc-chg.down{color:var(--warn)}
.cc-ranges{display:flex;gap:6px;flex-wrap:wrap}
.cc-ranges button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--pill);padding:4px 12px;font-size:13.5px;font-weight:600}
.cc-ranges button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.cc-plot{position:relative;direction:ltr;min-height:220px;border-radius:var(--r);touch-action:pan-y}
.cc-plot:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.cc-svg{display:block;width:100%;height:auto;overflow:visible}
.cc-svg.c-au{color:var(--c-au)}.cc-svg.c-ag{color:var(--c-ag)}.cc-svg.c-pt{color:var(--c-pt)}.cc-svg.c-pd{color:var(--c-pd)}
.cc-grid{stroke:var(--line);stroke-width:1}
.cc-axis{fill:var(--muted);font:12.5px var(--mono);font-variant-numeric:tabular-nums}
.cc-cross{stroke:var(--muted);stroke-width:1}
.cc-ring{stroke:var(--surface);stroke-width:2}
.cc-msg{margin:0;padding:80px 0;text-align:center;color:var(--muted);font-size:15.5px}
.cc-tip{position:absolute;pointer-events:none;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.25);white-space:nowrap;z-index:2}
.cc-tip strong{display:block;font:600 15.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.cc-tip span{font-size:13.5px;color:var(--muted)}
.cc-foot{margin:0;font-size:13.5px;color:var(--muted);direction:ltr;unicode-bidi:isolate;text-align:start}
.today{margin-top:44px}
.today h2{font:500 clamp(26px,3vw,34px)/1.15 var(--display);margin:0}
.today-sub{color:var(--muted);margin:8px 0 16px;font-size:15.5px}
.today .tbl{overflow-x:auto}
.today-tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:620px}
.today-tbl th,.today-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:end;white-space:nowrap}
.today-tbl thead th{color:var(--muted);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase}
.today-tbl th[scope="row"]{text-align:start;font-weight:600}
.today-tbl th[scope="row"] span{color:var(--muted);font-weight:400;margin-inline-start:6px}
.today-tbl td{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr}
.src-note{margin:18px 0 0;color:var(--muted);font-size:13.5px;max-width:90ch}
/* compact header on narrower screens so it stays on one row */
@media (max-width:900px){
  .top-in{gap:10px}
  .nav-charts,.lang{padding:5px 11px;font-size:14.5px}
  .cart-btn{padding:5px 6px 5px 12px;font-size:14.5px}
}
@media (max-width:560px){
  .brand b{font-size:19px}
  .brand .mark{width:26px;height:26px}
  .top-in{gap:8px}
  .cart-btn{font-size:0;gap:0;padding:4px}   /* icon-sized basket: the count stays, the word is still read by screen readers */
  .cart-btn .n{font-size:13.5px}
}
@media (max-width:420px){
  .nav-charts,.lang{padding:4px 9px;font-size:13.5px}
  .top-in{gap:6px}
  .brand{gap:6px}
}

/* ---------- metal price chart pages ---------- */
/* comparison-chart colours: one per currency, never reassigned (validated against each scheme's surface) */
:root{--s-eur:#2a78d6;--s-gbp:#c9541f;--s-chf:#138a60;--s-cad:#b0287a;--s-aed:#8a6a25}
:root[data-palette="ledger"]{--s-eur:#3987e5;--s-gbp:#d95926;--s-chf:#199e70;--s-cad:#e05aa8;--s-aed:#d6b56a}
.s-USD{color:var(--muted)}.s-EUR{color:var(--s-eur)}.s-GBP{color:var(--s-gbp)}.s-CHF{color:var(--s-chf)}.s-CAD{color:var(--s-cad)}.s-AED{color:var(--s-aed)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:currentColor;flex:none}
.cc-title h2 a{color:inherit;text-decoration:none}
.cc-title h2 a:hover{color:var(--gold)}
.mc-head .lede{margin-top:12px}
.mc-snap{margin:16px 0 0;max-width:70ch;font-size:17px;line-height:1.7;padding-inline-start:14px;border-inline-start:2px solid var(--gold)}
.mc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px;align-items:start}
@media (max-width:1000px){.mc-grid{grid-template-columns:1fr}}
.cmp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cmp-card h2{margin:0;font:500 24px/1.15 var(--display);text-wrap:balance}
.cmp-sub{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.cmp-legend{display:flex;flex-wrap:wrap;gap:6px}
.cmp-legend button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--pill);padding:4px 11px;font:600 13.5px var(--mono)}
.cmp-legend button[aria-pressed="false"]{color:var(--muted);opacity:.6}
.cmp-legend button[aria-pressed="false"] .sw{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.cc-zero{stroke:var(--muted);stroke-width:1}
.cmp-tip{min-width:120px}
.cmp-tip .tip-date{display:block;font-size:13.5px;color:var(--muted);margin-bottom:4px}
.cmp-tip .tip-row{display:grid;grid-template-columns:10px auto 1fr;align-items:center;gap:8px;font-size:14.5px;line-height:1.6}
.cmp-tip .tip-row strong{font:600 14.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);display:inline;text-align:end}
.cmp-tip .tip-row span{color:var(--muted);font:500 13.5px var(--mono)}
.perf-tbl td.up{color:var(--good)}.perf-tbl td.down{color:var(--warn)}
.mc-copy{margin-top:44px}
.mc-pop-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.mc-pop-h h2{margin:0}
.mc-pop-h a,.chart-link a{color:var(--gold);font-weight:600;text-decoration:none}
.mc-pop-h a:hover,.chart-link a:hover{text-decoration:underline}
.chart-link{font-family:var(--body)!important}
.mc-others{margin-top:44px}
.mc-others h2{font:500 26px var(--display);margin:0 0 14px}
.mc-others div{display:flex;flex-wrap:wrap;gap:10px}
.mc-others a{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px}
.mc-others a:last-child{padding-inline-start:16px}
.mc-others a:hover{border-color:var(--gold);color:var(--gold)}
.mc-others .el{width:28px;height:28px;font-size:14.5px;border-radius:6px}
.mc-others .el small{font-size:6px;top:1px;inset-inline-start:3px}
/* links to the chart pages: price panel rows, chart cards, footer */
a.row{color:inherit;text-decoration:none;border-radius:var(--r);transition:background .15s}
a.row:hover{background:var(--raise)}
a.row:hover .nm{color:var(--gold)}
a.row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cc-more{align-self:flex-start;color:var(--gold);font-weight:600;font-size:15.5px;text-decoration:none}
.cc-more:hover{text-decoration:underline}
.foot-links{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:15.5px}
.foot-links span{font-weight:600;color:var(--muted);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.foot-links a{color:var(--ink);text-decoration:none}
.foot-links a:hover{color:var(--gold)}
.foot-links + footer{margin-top:20px}

/* footer columns */
.foot-cols{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.foot-cols .fcol h2{margin:0 0 12px;line-height:1.4;font-weight:600;font-size:13.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcol a{color:var(--ink);text-decoration:none;font-size:15.5px}
.fcol a:hover,.fcol a:focus-visible{color:var(--gold);text-decoration:underline}
.foot-cols + footer{margin-top:28px}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:340px){.foot-cols{grid-template-columns:1fr}}

/* information pages */
.info-page article{max-width:760px;padding-top:40px}
.info-page h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,5vw,48px);line-height:1.1;margin:0}
.info-page .lede{color:var(--muted);font-size:18px;line-height:1.6;margin:16px 0 8px}
.info-page section{margin-top:32px}
.info-page h2{font-size:19px;margin:0 0 10px}
.info-page p{line-height:1.7;margin:0 0 12px}
mark.todo{background:color-mix(in srgb,var(--gold) 26%,transparent);color:inherit;border-radius:4px;padding:0 3px}
.draft-note{margin:24px 0 0;padding:12px 16px;border:1px dashed var(--gold);border-radius:var(--r);font-size:15.5px;color:var(--ink);max-width:760px}
.cform{display:grid;gap:16px;margin-top:8px}
.cform label{display:grid;gap:6px;font-size:15.5px;font-weight:500}
.cform input,.cform textarea{font:inherit;font-size:17px;padding:11px 13px;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--ink);width:100%;box-sizing:border-box}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.cform .go{justify-self:start;padding:13px 28px;cursor:pointer}
.cform .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cf-msg{padding:12px 16px;border-radius:var(--r);border:1px solid var(--line)}
.cf-msg.ok{border-color:var(--good)}
.cf-msg.err{border-color:var(--warn)}

/* price board: lifted panel with a gold edge so it reads as the centrepiece of the hero */
.board{position:relative;border-color:color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65),0 10px 24px -12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.board::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold-hi),var(--gold),var(--gold-hi));z-index:1}
.board-h{padding:20px 22px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent)}
.board-h .eyebrow{color:var(--gold)}
.board .coins{padding:16px 22px 8px}
.board .coins button[aria-pressed="true"]{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--on-gold);border-color:transparent}
.board .rows{padding:4px 12px 10px}
.board .row{padding:13px 10px;border-bottom:0;position:relative;border-radius:var(--r)}
.board .row + .row::before{content:"";position:absolute;inset:0 10px auto;border-top:1px solid var(--line)}
.board .row .v{font-size:20px;letter-spacing:-.01em}
.board .row .nm{font-size:18px}
.board .el{box-shadow:0 2px 6px rgba(0,0,0,.18)}
.board .board-f{padding:14px 22px;font-size:14.5px}

/* ---------- customer accounts ---------- */
.acct-link{display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600;border:1px solid var(--line);border-radius:var(--pill);padding:6px 14px;white-space:nowrap}
.acct-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.acct-link:hover,.acct-link.on{border-color:var(--gold);color:var(--gold)}
@media (max-width:900px){.acct-link{padding:5px 11px;font-size:14.5px}}
@media (max-width:560px){.acct-link{padding:6px}.acct-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-width:420px){.acct-link{padding:5px}}
.acct{padding-top:32px}
.acct h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,5vw,44px);line-height:1.1;margin:0}
.acct-narrow{max-width:520px}
.acct-mid{max-width:760px}
.acct .lede{color:var(--muted);font-size:17px;line-height:1.6;margin:12px 0 20px}
.acct h2{font-size:19px;margin:26px 0 4px}
.acct h3{font-size:17px;margin:18px 0 0}
.acct-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.acct-h .fh{margin:6px 0 0}
.acct-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-top:18px;max-width:860px}
.acct-card h2{margin-top:0}
.acct-alt{margin-top:22px;color:var(--muted)}
.acct a:not(.go):not(.btn-ghost){color:var(--gold)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fgrid .wide{grid-column:1/-1}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.cform select{font:inherit;font-size:17px;padding:11px 13px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.cform .fh,.acct .fh{color:var(--muted);font-size:14.5px;font-weight:400}
.cform .fe{color:var(--warn);font-size:14.5px;font-weight:500}
.cform .bad input,.cform .bad select,.cform .bad textarea{border-color:var(--warn)}
.form-err{padding:12px 16px;border-radius:var(--r);border:1px solid var(--warn);color:var(--ink)}
.radios{border:0;padding:0;margin:0;display:grid;gap:8px;font-size:15.5px}
.radios legend{font-weight:500;margin-bottom:6px;line-height:1.5}
.radios label{display:flex;gap:8px;align-items:center;font-weight:400}
.radios input,.check input{width:auto;accent-color:var(--gold)}
.cform .file input{padding:9px;font-size:15.5px}
.cform .check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-weight:400;line-height:1.5}
.cform .check .fe{grid-column:1/-1}
.btn{display:inline-block;text-decoration:none;padding:11px 22px}
.btn-ghost{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:var(--pill);padding:9px 18px;text-decoration:none;font-weight:600;font-size:15.5px}
.vst{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:var(--pill);border:1px solid currentColor;font-size:13.5px;font-weight:700;margin-inline-end:6px;color:var(--muted)}
.vst.submitted,.vst.more{color:var(--warn)}.vst.approved{color:var(--good)}.vst.rejected{color:var(--warn)}
.tscroll{overflow-x:auto}
.otable{width:100%;border-collapse:collapse;font-size:15.5px}
.otable th,.otable td{text-align:start;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.otable th{color:var(--muted);font-size:13.5px;font-weight:600}
.otable td small{display:block;color:var(--muted);font-size:13.5px}
.ost{font-size:13.5px;font-weight:600;color:var(--muted)}.ost.paid,.ost.shipped{color:var(--good)}.ost.awaiting_payment{color:var(--warn)}
/* basket: who it's for */
.who{font-size:14.5px;color:var(--muted)}
.who .ship{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.who .linkish{font-size:14.5px}
.err a{color:var(--gold)}
.fgrid label{align-content:start}
@media (max-width:420px){
  .brand b{font-size:18px}
  .brand .mark{width:22px;height:22px}
  .nav-charts,.lang{padding:4px 8px}
}
@media (max-width:360px){.nav-charts,.lang{font-size:12.5px;padding:4px 7px}.top-in{gap:5px}}
.nav-charts .ns{display:none}
@media (max-width:560px){.nav-charts .nl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nav-charts .ns{display:inline}}
/* customer profile */
.acct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;max-width:860px}
@media (max-width:700px){.acct-grid{grid-template-columns:1fr}}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-h a{font-size:15.5px;font-weight:600}
.card-f{margin:14px 0 0;font-size:15.5px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:12px 0 0;font-size:16px}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.acct address{font-style:normal;line-height:1.6;margin-top:12px}
.crumb{margin:0 0 14px;font-size:15.5px}
.mono-h{font-family:var(--mono)!important;font-size:clamp(22px,4vw,32px)!important;letter-spacing:-.01em}
.olist{list-style:none;margin:8px 0 0;padding:0}
.olist li+li{border-top:1px solid var(--line)}
.orow{display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto auto;gap:6px 18px;align-items:center;padding:14px 4px;color:var(--ink)!important;text-decoration:none;border-radius:var(--r)}
.orow:hover{background:var(--raise)}
.orow .o1,.orow .o3{display:grid;gap:2px}.orow .o3{text-align:end}
.orow .o2{font-size:15.5px;color:var(--muted)}
.orow .o4{display:flex;align-items:center;gap:10px}
.chev{color:var(--muted);font-size:20px}
@media (max-width:700px){.orow{grid-template-columns:1fr auto}.orow .o2{grid-column:1/-1;order:3}.orow .o3{text-align:start}.orow .o4{grid-row:1;grid-column:2}}
.ost{display:inline-block;padding:3px 10px;border-radius:var(--pill);border:1px solid currentColor;white-space:nowrap}
.ost.cancelled,.ost.expired{color:var(--muted)}
.tline{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;position:relative}
.tline li{display:grid;gap:4px;padding-top:24px;position:relative;color:var(--muted)}
.tline li::before{content:"";position:absolute;top:7px;inset-inline:0;height:2px;background:var(--line)}
.tline li.done{color:var(--ink)}.tline li.done::before{background:var(--gold)}
.tline .tdot{position:absolute;top:0;inset-inline-start:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:var(--surface);z-index:1}
.tline li.done .tdot{border-color:var(--gold);background:var(--gold)}
.tline li.cancelled.done .tdot,.tline li.expired.done .tdot{border-color:var(--warn);background:var(--surface)}
.tline b{font-size:15.5px}
.trk{margin:8px 0 0}
.otable tfoot th{text-align:end}.otable tfoot td small{display:block;color:var(--muted)}
.acct .trk{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
@media (max-width:560px){
  .tline{grid-template-columns:1fr;gap:0}
  .tline li{padding:0 0 18px;padding-inline-start:30px}
  .tline li::before{top:16px;bottom:0;inset-inline-start:7px;inset-inline-end:auto;width:2px;height:auto}
  .tline li:last-child::before{display:none}
}
.inv-dl{margin:14px 0 0}
/* AML form: signature pad */
.sig{display:grid;gap:8px;margin-top:6px}
.sig-l{font-weight:500;font-size:15.5px}
.sig canvas{width:100%;max-width:520px;height:160px;border:1px dashed var(--gold);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);touch-action:none;cursor:crosshair}
.sig.bad canvas{border-color:var(--warn)}
.sig .linkish{justify-self:start;font-size:14.5px}
/* live price flashes: green when a price rises, red when it falls (the arrow means it isn't colour alone) */
:root{--up:#3fbf7f;--down:#f0605d}
:root[data-palette="vault"],:root[data-palette="sand"]{--up:#1f8a52;--down:#c8342c}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-palette]){--up:#1f8a52;--down:#c8342c}}
.flash-up,.flash-down{border-radius:6px;animation:fn-flash 2s ease-out}
.flash-up{--fc:var(--up)}.flash-down{--fc:var(--down)}
.flash-up::after,.flash-down::after{font-size:.7em;margin-inline-start:.25em;color:var(--fc);animation:fn-fade 2s ease-out forwards}
.flash-up::after{content:"▲"}.flash-down::after{content:"▼"}
@keyframes fn-flash{0%{color:var(--fc);background:color-mix(in srgb,var(--fc) 22%,transparent)}60%{color:var(--fc);background:color-mix(in srgb,var(--fc) 10%,transparent)}100%{background:transparent}}
@keyframes fn-fade{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.flash-up,.flash-down{animation:none;color:var(--fc)}.flash-up::after,.flash-down::after{animation:none}}

/* ---------- guides ---------- */
nav.metals .nav-guides{border-inline-start:1px solid var(--line);padding-inline-start:18px}
nav.metals .nav-guides.on{color:var(--gold)}
.g-head{max-width:760px;padding-top:28px}
.g-head h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,5vw,48px);line-height:1.12;margin:0}
.g-head .lede{color:var(--muted);font-size:18px;line-height:1.6;margin:16px 0 0}
.g-meta{color:var(--muted);font-size:14.5px;margin:14px 0 0}
.guides-page .g-grid{margin-top:32px}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.g-card a{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none;transition:border-color .2s ease}
.g-card a:hover,.g-card a:focus-visible{border-color:var(--gold)}
.g-card h3{font-size:20px;line-height:1.35;margin:10px 0 8px}
.g-card p{color:var(--muted);line-height:1.6;margin:0 0 16px;font-size:15.5px}
.g-date{color:var(--muted);font-size:13.5px}
.g-more{margin-top:auto;color:var(--gold);font-weight:600;font-size:15.5px}
.g-strip{padding-top:56px}
.g-strip h2{font:500 30px var(--display)}
.guide{max-width:760px}
.g-toc{margin:28px 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.g-toc h2{margin:0 0 10px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.g-toc ol{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.g-toc a{color:var(--ink);text-decoration:none}
.g-toc a:hover{color:var(--gold);text-decoration:underline}
.g-body{font-size:17px;line-height:1.75}
.g-body h2{font-size:25px;line-height:1.3;margin:44px 0 12px;scroll-margin-top:90px}
.g-body h3{font-size:19px;margin:28px 0 8px}
.g-body p{margin:0 0 16px}
.g-body ul,.g-body ol{margin:0 0 18px;padding-inline-start:24px}
.g-body li{margin:0 0 8px}
.g-body a{color:var(--gold)}
.g-body strong{color:var(--ink);font-weight:600}
.g-note{margin:22px 0;padding:14px 18px;border-inline-start:3px solid var(--gold);background:var(--surface);border-radius:0 var(--r) var(--r) 0}
.g-note p{margin:0 0 8px}.g-note p:last-child{margin:0}
.g-table{overflow-x:auto;margin:8px 0 22px;border:1px solid var(--line);border-radius:var(--r-lg)}
.g-table table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.5}
.g-table th,.g-table td{padding:10px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.g-table tr:last-child th,.g-table tr:last-child td{border-bottom:0}
.g-table thead th{background:var(--surface);color:var(--muted);font-weight:600;font-size:14px}
.g-table tbody th{font-weight:600}
.g-body .grid-p{margin:12px 0 26px;font-size:16px;line-height:1.5}
@media (max-width:560px){.g-body{font-size:16.5px}.g-body h2{font-size:22px}.g-card a{padding:18px}}
.g-body .grid-p{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media (min-width:1100px){
  .guide{max-width:none;display:grid;grid-template-columns:minmax(0,760px) 280px;column-gap:56px;align-items:start}
  .guide .g-head{grid-column:1}
  .guide .g-body{grid-column:1}
  .guide .g-toc{grid-column:2;grid-row:1 / span 2;position:sticky;top:96px;margin-top:40px}
  .guide .g-toc ol{font-size:15px}
}


/* ---------- language menu ---------- */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;color:var(--ink);font-size:15px;font-weight:600;border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px;display:flex;align-items:center;gap:6px}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang-menu summary:hover,.lang-menu[open] summary{border-color:var(--gold);color:var(--gold)}
.lang-menu ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 16px 40px rgba(0,0,0,.3);min-width:150px}
.lang-menu li a{display:block;padding:8px 12px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:15px}
.lang-menu li a:hover{background:var(--raise)}
.lang-menu li a[aria-current="true"]{color:var(--gold);font-weight:600}
@media (max-width:900px){.lang-menu summary{padding:5px 10px;font-size:14px}}
@media (max-width:420px){.lang-menu summary{padding:4px 8px}}

/* ---------- delivery country (sets the VAT shown) ---------- */
.ctry{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.ctry select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:5px 8px;font-size:14px;max-width:100%}
.ctry select:disabled{opacity:.75}
.board-ctry{padding:4px 18px 14px}
.pdp .big-price .ctry{margin-top:-2px}
.who .ctry{margin-bottom:8px}
.amt + small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.tot.sub{font-size:14px;color:var(--muted)}
.tot.sub .mono{color:var(--ink)}

/* ---------- price lock, order placed and bank details ---------- */
.quote .qv{font-size:13px;color:var(--muted)}
.quote .go{margin-top:6px}
.quote.placed{border-color:var(--good)}
.bankkv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:6px 0;font-size:13.5px}
.bankkv dt{color:var(--muted)}.bankkv dd{margin:0;overflow-wrap:anywhere;color:var(--ink);font-weight:600}
.pay-card{border-color:var(--gold)}
.pay-card .bankkv{font-size:15px;padding:12px 14px;background:var(--raise);border-radius:var(--r)}
@media (max-width:420px){.bankkv{grid-template-columns:1fr}.bankkv dt{margin-top:4px}}
.otable tfoot tr.grand th,.otable tfoot tr.grand td{font-size:16px}
/* basket lines: price on the right, the VAT note wraps under it instead of widening the column */
.line > .mono:not(.line-ref){justify-self:end;text-align:end;white-space:nowrap}
.line-ref{max-width:22ch;justify-self:end;font-family:var(--body);font-size:12.5px}
@media (max-width:520px){
  .otable{font-size:13.5px}
  .otable th,.otable td{padding:8px 4px}
  .otable td.mono{white-space:nowrap}
  .otable thead th{font-size:11.5px}
  .otable tfoot th{font-weight:500}
}
@media (max-width:380px){.otable{font-size:12.5px}.otable th,.otable td{padding:7px 3px}}

/* banner 2: the bank transfer payment card */
.paycard{width:min(440px,100%);padding:20px 20px 18px;border-radius:var(--r-lg);color:var(--banner-ink);
  background:linear-gradient(160deg,color-mix(in srgb,var(--banner-ink) 13%,transparent),color-mix(in srgb,var(--banner-ink) 4%,transparent));
  border:1px solid color-mix(in srgb,var(--banner-ink) 22%,transparent);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);backdrop-filter:blur(6px);position:relative;overflow:hidden}
.paycard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold-hi),var(--gold))}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pc-title{font:500 21px/1.1 var(--display);letter-spacing:-.01em}
.pc-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:var(--pill);font:600 13.5px var(--mono);font-variant-numeric:tabular-nums;
  color:var(--gold-hi);border:1px solid color-mix(in srgb,var(--gold-hi) 45%,transparent);background:color-mix(in srgb,var(--gold-hi) 10%,transparent)}
.pc-badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.pc-flow{list-style:none;margin:20px 0 18px;padding:0;display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:start}
.pc-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.pc-step i{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;margin-bottom:4px;
  background:color-mix(in srgb,var(--gold-hi) 14%,transparent);border:1px solid color-mix(in srgb,var(--gold-hi) 40%,transparent)}
.pc-step svg{width:24px;height:24px;fill:none;stroke:var(--gold-hi);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pc-step svg .ok{stroke:var(--good)}
.pc-step b{font-size:13.5px;line-height:1.25;font-weight:600}
.pc-step small{font-size:11.5px;line-height:1.3;color:color-mix(in srgb,var(--banner-ink) 65%,transparent)}
.pc-link{height:46px;display:flex;align-items:center}
.pc-link span{display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--gold-hi) 0 5px,transparent 5px 9px);background-size:18px 2px;animation:pcflow 1.1s linear infinite;opacity:.8}
@keyframes pcflow{to{background-position:18px 0}}
@media (prefers-reduced-motion:reduce){.pc-link span{animation:none}}
.pc-rails{list-style:none;margin:0;padding:14px 0 0;border-top:1px dashed color-mix(in srgb,var(--banner-ink) 25%,transparent);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pc-rails li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:var(--r);background:color-mix(in srgb,var(--banner-ink) 7%,transparent);min-width:0}
.pc-rails b{font:600 15px var(--mono)}
.pc-rails span{font-size:11px;line-height:1.25;text-align:center;color:color-mix(in srgb,var(--banner-ink) 65%,transparent)}
@media (max-width:760px){.paycard{padding:16px 14px 14px}.pc-flow{grid-template-columns:1fr 18px 1fr 18px 1fr;margin:16px 0 14px}.pc-step i{width:40px;height:40px}.pc-link{height:40px}
  .pc-step b{font-size:12.5px}.pc-step small{font-size:10.5px}.pc-rails{grid-template-columns:repeat(2,minmax(0,1fr))}}
.banner{overflow:clip}  /* nothing inside the slider may scroll it sideways */

/* banner 3: three silver coins fanned out */
.bart .coinfan{position:relative;width:min(400px,92%);aspect-ratio:3/2}
.bart .coinfan .c1,.bart .coinfan .c2,.bart .coinfan .c3{position:absolute;width:54%;height:auto;max-height:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.45))}
.bart .coinfan .c1{left:0;top:16%;transform:rotate(-9deg)}
.bart .coinfan .c2{left:23%;top:0;z-index:2}
.bart .coinfan .c3{right:0;top:20%;transform:rotate(8deg)}

/* =====================================================================
   CC Holdings: the shop's own look (overrides the shared layout above)
   ===================================================================== */
body{font:16px/1.6 var(--body);background:var(--bg)}
h1,h2,h3{font-family:var(--display)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:7px;height:7px;background:currentColor;flex:none}
:focus-visible{outline-color:var(--gold)}

/* header: a dark strip of live prices, then a white bar */
header.top{padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:none}
.tick{margin-inline:-16px;background:var(--banner-b);color:var(--banner-ink);overflow:hidden;font:12.5px var(--mono)}
.tick ul{list-style:none;margin:0 auto;padding:6px 16px;max-width:1240px;display:flex;gap:6px 26px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.tick ul::-webkit-scrollbar{display:none}
.tick li{display:flex;gap:8px;align-items:baseline}
.tick b{font-weight:500;color:color-mix(in srgb,var(--banner-ink) 70%,transparent);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.tick span{font-variant-numeric:tabular-nums}
.tick em{font-style:normal;color:var(--brass-hi);font-variant-numeric:tabular-nums}
.top-in{padding-block:12px}
.brand{direction:ltr;gap:10px}
.brand .tile{width:36px;height:36px;display:grid;place-items:center;background:var(--gold);color:var(--on-gold);font:700 16px/1 "CC Logo",var(--display);letter-spacing:-.02em;position:relative}
.brand .tile::after{content:"";position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--brass-hi) 80%,transparent)}
.brand b.word{font:700 17px/1 "CC Logo",var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
nav.metals{gap:20px;font-size:15px}
nav.metals a{color:var(--ink);font-weight:500}
nav.metals a:hover{color:var(--gold)}
.nav-sell{color:var(--on-gold);background:var(--gold);text-decoration:none;font-size:15px;font-weight:600;padding:7px 14px;white-space:nowrap;border:1px solid var(--gold)}
.nav-sell:hover,.nav-sell.on{background:var(--gold-hi)}
.nav-charts,.acct-link,.lang-menu summary{border-radius:var(--pill)}
.cart-btn{border-radius:var(--pill);background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cart-btn .n{background:var(--brass-hi);color:#1b1404;border-radius:0}
@media (max-width:1100px){nav.metals{display:none}}
@media (max-width:640px){.nav-sell{padding:5px 9px;font-size:13.5px}.brand b.word{font-size:15px;letter-spacing:.16em}.brand .tile{width:32px;height:32px;font-size:14.5px}}
@media (max-width:420px){.brand b.word{display:none}}
.filters{top:calc(env(safe-area-inset-top,0px) + 92px)}

/* home: buy and sell side by side */
.duo{margin-inline:-16px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.duo-in{padding:56px 40px 48px;max-width:720px}
.duo-buy{background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 56px,var(--bg);background-blend-mode:normal;display:flex;justify-content:flex-end;position:relative;overflow:hidden}
.duo-buy::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0 30%,color-mix(in srgb,var(--bg) 70%,transparent));pointer-events:none}
.duo-buy .duo-in{position:relative;width:100%}
.duo h1{font:500 clamp(40px,5.6vw,72px)/1 var(--display);letter-spacing:-.035em;margin:16px 0 0;text-wrap:balance}
.duo h1 em,.duo h2 em{font-style:normal;color:var(--gold)}
.duo .lede{margin:18px 0 0;color:var(--muted);font-size:17.5px;max-width:50ch}
.range-note{margin:18px 0 0;display:inline-block;font:500 13px var(--mono);padding:6px 10px;border:1px solid var(--line);background:var(--surface)}
.bcta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--gold);border-radius:var(--pill);padding:12px 22px;font-weight:600;font-size:15.5px;background:var(--gold);color:var(--on-gold);text-decoration:none;cursor:pointer}
.bcta:hover{background:var(--gold-hi)}
.bcta.alt{background:var(--brass-hi);border-color:var(--brass-hi);color:#1b1404}
.bcta.alt:hover{filter:brightness(1.06)}
.duo-art{display:flex;align-items:flex-end;gap:0;margin-top:34px;height:150px}
.duo-art img,.duo-art svg{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.25))}
.duo-art .c2{margin-inline-start:-34px;width:132px;height:132px}
.duo-art .c3{margin-inline-start:-30px;width:118px;height:118px}
.duo-sell{background:linear-gradient(160deg,var(--banner-a),var(--banner-b));color:var(--banner-ink);position:relative}
.duo-sell::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 55px,color-mix(in srgb,var(--banner-ink) 5%,transparent) 55px 56px);pointer-events:none}
.duo-sell .duo-in{position:relative}
.duo-sell .eyebrow{color:var(--brass-hi)}
.duo-sell h2{font:500 clamp(34px,4.4vw,56px)/1.02 var(--display);letter-spacing:-.03em;margin:16px 0 0}
.duo-sell h2 em{color:var(--brass-hi)}
.duo-sell p{margin:16px 0 0;font-size:17px;max-width:44ch;color:color-mix(in srgb,var(--banner-ink) 78%,transparent)}
.mini-steps{list-style:none;margin:30px 0 0;padding:18px 0 0;border-top:1px solid color-mix(in srgb,var(--banner-ink) 20%,transparent);display:grid;gap:10px;font-size:15px}
.mini-steps li{display:flex;align-items:center;gap:12px}
.mini-steps span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--brass-hi);color:var(--brass-hi);font:500 13px var(--mono);flex:none}
@media (max-width:900px){.duo{grid-template-columns:1fr}.duo-in{padding:40px 16px 36px;max-width:none}.duo-buy{justify-content:flex-start}.duo-art{height:120px}.duo-art img,.duo-art svg{width:120px;height:120px}.duo-art .c2{width:104px;height:104px}.duo-art .c3{width:92px;height:92px}}

/* home: the dealing desk */
.board.desk{margin-top:40px;border:1px solid var(--line);box-shadow:none;border-radius:0}
.board.desk::before{height:4px;background:var(--gold)}
.desk .board-h{padding:22px 24px 14px;align-items:flex-start}
.desk .board-h h2{margin:0;font:500 26px/1.1 var(--display);letter-spacing:-.02em}
.desk-sub{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.desk .coins{padding:4px 24px 10px}
.coins button{border-radius:0;font-size:13px}
.board .coins button[aria-pressed="true"],.coins button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.desk .rows{padding:0 12px 6px}
.desk .row{grid-template-columns:44px minmax(0,1fr) repeat(3,minmax(0,1.1fr));gap:14px;padding:14px 12px}
.desk .row .v{font-size:19px;text-align:end}
.desk .row .v small{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.desk .row .v.wb span{color:var(--brass)}
.desk .row .v.pg{font-size:15px;color:var(--muted)}
.desk .row .nm small{font-size:12px}
.desk .board-f{align-items:center;padding:12px 24px}
.desk .board-f .ctry{margin-inline-start:auto}
@media (max-width:760px){.desk .row{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px 6px}.desk .row .v{font-size:16px}.desk .row .v.pg{display:none}.desk .board-h,.desk .coins,.desk .board-f{padding-inline:14px}}
@media (max-width:420px){.desk .row{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr)}.desk .row .nm{display:none}.el{width:34px;height:34px;font-size:16px}}
.el{border-radius:0}

/* home: buying in three steps */
.ribbon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-block:1px solid var(--line)}
.ribbon div{padding:20px 22px;font-size:14.5px;color:var(--muted)}
.ribbon div + div{border-inline-start:1px solid var(--line)}
.ribbon span{display:block;font:500 13px var(--mono);color:var(--gold);margin-bottom:6px}
.ribbon b{display:block;color:var(--ink);font:500 18px var(--display);margin-bottom:2px}
@media (max-width:700px){.ribbon{grid-template-columns:1fr}.ribbon div + div{border-inline-start:0;border-top:1px solid var(--line)}}

/* product grid and cards */
.filters{margin-top:36px;border-radius:0}
.chip{border-radius:0}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.filters input,.filters select{border-radius:0}
.sec-h{border-bottom:2px solid var(--ink)}
.sec-h h2{font:500 clamp(28px,3.6vw,40px)/1 var(--display);letter-spacing:-.025em}
.sec-h h2 em{font-style:normal;color:var(--ink)}
.grid-p{gap:0;border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.card{border-radius:0;border-width:0;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}
.card:hover{transform:none;background:color-mix(in srgb,var(--surface) 60%,var(--raise))}
.slide,.feat .fa,.art{background:radial-gradient(70% 60% at 50% 45%,var(--surface),var(--raise))}
.card .body{padding:16px 18px 18px;gap:8px}
.tag{border-radius:0;font-size:11px}
.card h3{font:500 18px/1.25 var(--display);letter-spacing:-.01em}
.dual{display:grid;grid-template-columns:1fr 1fr;margin-top:auto;border:1px solid var(--line)}
.dual .pp{padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dual .lbl{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dual .amt{font:500 17px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dual small{font:11.5px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dual .sell{background:var(--brass-bg);border-inline-start:1px solid var(--line);text-decoration:none;color:inherit}
.dual .sell .amt{color:var(--brass)}
.dual .sell:hover{background:color-mix(in srgb,var(--brass-bg) 70%,var(--brass-hi))}
.card .add,.feat .add{width:100%;margin-top:10px;border-radius:0;padding:10px;background:var(--ink);color:var(--bg)}
.card .add:hover,.feat .add:hover{background:var(--gold);color:var(--on-gold)}
@media (max-width:360px){.dual{grid-template-columns:1fr}.dual .sell{border-inline-start:0;border-top:1px solid var(--line)}}

/* home: how selling works */
.sellhow{margin-top:64px;padding:44px 40px;background:linear-gradient(160deg,var(--banner-a),var(--banner-b));color:var(--banner-ink);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:36px}
.sellhow .eyebrow{color:var(--brass-hi)}
.sh-head h2{font:500 clamp(30px,3.6vw,44px)/1.05 var(--display);letter-spacing:-.03em;margin:12px 0 0}
.sh-head p{color:color-mix(in srgb,var(--banner-ink) 78%,transparent);margin:14px 0 0}
.sellhow .bcta{background:var(--brass-hi);border-color:var(--brass-hi);color:#1b1404}
.sh-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border-top:1px solid color-mix(in srgb,var(--banner-ink) 22%,transparent)}
.sh-steps li{padding:18px 18px 18px 0;border-bottom:1px solid color-mix(in srgb,var(--banner-ink) 22%,transparent);padding-inline:0 18px}
.sh-steps span{font:500 13px var(--mono);color:var(--brass-hi)}
.sh-steps b{display:block;font:500 18px/1.25 var(--display);margin:6px 0 4px}
.sh-steps p{margin:0;font-size:14.5px;color:color-mix(in srgb,var(--banner-ink) 75%,transparent)}
.sellhow.plain{margin-top:36px;padding:0;background:none;color:var(--ink);grid-template-columns:1fr;gap:16px}
.sellhow.plain .sh-head h2{font-size:clamp(26px,3vw,34px)}
.sellhow.plain .sh-steps{border-color:var(--line)}
.sellhow.plain .sh-steps li{border-color:var(--line)}
.sellhow.plain .sh-steps span{color:var(--gold)}
.sellhow.plain .sh-steps p{color:var(--muted)}
@media (max-width:900px){.sellhow{grid-template-columns:1fr;padding:32px 20px;margin-inline:-16px}.sellhow.plain{margin-inline:0}}

/* home: paying is simple */
.paysec{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.paysec h2{font:500 clamp(28px,3.4vw,40px)/1.05 var(--display);letter-spacing:-.03em;margin:12px 0 0}
.paysec h2 em{font-style:normal;color:var(--gold)}
.paysec p{color:var(--muted);font-size:16.5px;max-width:50ch}
.paysec .paycard{background:linear-gradient(160deg,var(--banner-a),var(--banner-b));border-radius:0;justify-self:end}
.paycard::before{background:var(--brass-hi)}
.pc-rails{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-rails li,.pc-badge,.pc-step i{border-radius:0}
@media (max-width:860px){.paysec{grid-template-columns:1fr}.paysec .paycard{justify-self:stretch;width:100%}}

/* product page */
.pdp h1{font:500 clamp(32px,4.4vw,52px)/1.02 var(--display);letter-spacing:-.03em}
.pdp .gal{border-radius:0}
.pdp .big-price{border-radius:0;border-top:4px solid var(--gold)}
.buy .qty,.qty button,.x,.gnav,.fnav button{border-radius:0}
.buy .add{border-radius:0}
.sellbox{margin-top:12px;padding:16px 20px;background:var(--brass-bg);border:1px solid var(--line);border-top:4px solid var(--brass-hi);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.sellbox .lbl{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.sellbox .amt{font:500 28px var(--mono);color:var(--brass)}
.sellbox small{display:block;color:var(--muted);font-size:13.5px;max-width:42ch}
.sellbox .bcta{margin:0}
.pdp .note{border-color:var(--brass-hi)}
.about h2,.related h2,.allcoins h2{font-family:var(--display);letter-spacing:-.02em}
.faq summary::after{border-radius:0}

/* the Sell to us page */
.sell-head{padding-top:30px;max-width:72ch}
.sell-head h1{font:500 clamp(36px,5.4vw,64px)/1 var(--display);letter-spacing:-.035em;margin:14px 0 0;text-wrap:balance}
.sell-head h1 em{font-style:normal;color:var(--gold)}
.sell-head .lede{color:var(--muted);font-size:18px;margin:16px 0 0}
.sell-facts{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--surface)}
.sell-facts li{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.sell-facts li + li{border-inline-start:1px solid var(--line)}
.sell-facts b{font:500 30px/1 var(--display);color:var(--gold);letter-spacing:-.02em}
.sell-facts span{color:var(--muted);font-size:14px}
@media (max-width:760px){.sell-facts{grid-template-columns:1fr 1fr}.sell-facts li:nth-child(3){border-inline-start:0}.sell-facts li:nth-child(n+3){border-top:1px solid var(--line)}}
.sell-done{margin-top:28px;padding:22px 24px;border:1px solid var(--good);border-top:4px solid var(--good);background:var(--surface)}
.sell-done h2{margin:0;font:500 24px var(--display)}
.sell-done p{color:var(--muted);margin:8px 0 0}
.sellform{margin-top:44px}
.sell-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;align-items:start}
@media (max-width:960px){.sell-grid{grid-template-columns:1fr}}
.sl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.sl-head h2{margin:0;font:500 clamp(26px,3vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.sl-head p{margin:6px 0 0;color:var(--muted);font-size:14.5px;max-width:52ch}
.sl-head .coins{padding:0}
.sl-metal{display:flex;align-items:center;gap:10px;margin:26px 0 8px;font:500 20px var(--display)}
.sl-metal .el{width:32px;height:32px;font-size:15px}
.sl-metal .el small{font-size:6.5px;top:2px;inset-inline-start:3px}
.sl-p{color:var(--muted);font-size:14.5px;margin:0 0 10px}
.tbl{overflow-x:auto}
.sl-tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.sl-tbl th,.sl-tbl td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.sl-tbl thead th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sl-tbl tbody th{font-weight:500}
.sl-tbl tbody th a{color:inherit;text-decoration:none}
.sl-tbl tbody th a:hover{color:var(--gold)}
.sl-tbl td:nth-child(2){color:var(--muted);font:13.5px var(--mono)}
.sl-tbl td.mono{color:var(--brass);font-weight:500;white-space:nowrap}
.sl-tbl td:last-child{width:96px}
.sl-tbl tr:target{background:var(--brass-bg)}
.sq{width:84px;padding:7px 9px;border:1px solid var(--line);background:var(--surface);font:15px var(--mono);border-radius:0}
.sq:focus{outline:2px solid var(--gold);outline-offset:0}
.sellform textarea,.sell-you input,.sell-you select{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;border-radius:0}
.sell-side{position:sticky;top:110px;display:grid;gap:16px}
@media (max-width:960px){.sell-side{position:static}}
.sell-est{padding:18px 20px;background:var(--brass-bg);border:1px solid var(--line);border-top:4px solid var(--brass-hi)}
.sell-est .lbl{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.sell-est .amt{font:500 34px var(--mono);color:var(--brass);margin-top:4px}
.sell-est p{margin:2px 0 6px;font-size:14.5px}
.sell-est small{color:var(--muted);font-size:13px}
.sell-you{margin:0;padding:18px 20px 20px;border:1px solid var(--line);background:var(--surface);display:grid;gap:12px}
.sell-you legend{font:500 20px var(--display);padding:0 6px;margin-inline-start:-6px}
.sell-you label{display:grid;gap:5px;font-size:14.5px;font-weight:500}
.sell-you .chk{grid-template-columns:auto 1fr;align-items:start;gap:10px;font-weight:400;color:var(--muted);font-size:13.5px}
.sell-you .chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold)}
.sell-you .go{border-radius:0;padding:14px;font-size:16px;background:var(--gold);color:var(--on-gold);border:0;cursor:pointer}
.sell-you .go:hover{background:var(--gold-hi)}
.sell-you .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sell-info{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sell-info > div{padding:22px 24px;border:1px solid var(--line);background:var(--surface)}
.sell-info h2{margin:0 0 10px;font:500 22px var(--display)}
.sell-info ul{margin:0;padding-inline-start:18px;display:grid;gap:8px;color:var(--muted);font-size:15px}
@media (max-width:760px){.sell-info{grid-template-columns:1fr}}

/* buttons, panels and the basket: square throughout */
.go{border-radius:0;background:var(--gold);color:var(--on-gold)}
.go:hover{background:var(--gold-hi)}
.drawer{border-radius:0}
.quote,.lock,.pay,.cf-msg,.draft-note{border-radius:0}
.chart-card,.cmp-card,.g-card a,.today .tbl{border-radius:0}
.cc-ranges button,.cmp-legend button,.mc-others a,.mc-others .el{border-radius:0}
footer .legal-line{flex-basis:100%;max-width:none;font-size:12.5px;opacity:.85}
.foot-cols{border-top:2px solid var(--ink)}
.charts-head h1 em,.feat-h h2 em{font-style:normal}

/* Arabic: right to left, IBM Plex Sans Arabic, no letter-spacing (it breaks joined letters); the logo stays left to right */
html[lang="ar"]{--display:"IBM Plex Sans Arabic","Space Grotesk",Tahoma,sans-serif;--body:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,sans-serif}
html[lang="ar"] body *{letter-spacing:0!important}
html[lang="ar"] .brand b.word{letter-spacing:.24em!important}
html[lang="ar"] .duo h1,html[lang="ar"] .duo-sell h2,html[lang="ar"] .sell-head h1{line-height:1.2}
html[lang="ar"] .eyebrow,html[lang="ar"] .dual .lbl,html[lang="ar"] .sellbox .lbl,html[lang="ar"] .sell-est .lbl,html[lang="ar"] .desk .row .v small,html[lang="ar"] .sl-tbl thead th{font-family:var(--body);font-size:12.5px}
[dir="rtl"] .gnav,[dir="rtl"] .fnav button,[dir="rtl"] .bctrl .arr{transform:translateY(-50%) scaleX(-1)}
[dir="rtl"] .fnav button,[dir="rtl"] .bctrl .arr{transform:scaleX(-1)}
[dir="rtl"] .duo-buy::before{background:linear-gradient(270deg,var(--bg) 0 30%,color-mix(in srgb,var(--bg) 70%,transparent))}
[dir="rtl"] .duo-buy{justify-content:flex-start}
[dir="rtl"] .mono,[dir="rtl"] .amt,[dir="rtl"] .tick span,[dir="rtl"] .tick em{unicode-bidi:plaintext}
.dual .pp{text-align:start;align-items:flex-start}
.dual .amt{font-size:15.5px;overflow:visible}
.dual small{white-space:normal;line-height:1.35}
.desk .board-h{background:none}
.sellhow{grid-template-columns:1fr;gap:26px}
.sellhow:not(.plain) .sh-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 40px;align-items:end}
.sellhow:not(.plain) .sh-head .eyebrow,.sellhow:not(.plain) .sh-head h2{grid-column:1}
.sellhow:not(.plain) .sh-head p{grid-column:2;grid-row:1/3;margin:0}
.sellhow:not(.plain) .sh-head .bcta{grid-column:1;justify-self:start;margin-top:14px}
@media (min-width:1000px){.sh-steps{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:760px){.sellhow:not(.plain) .sh-head{grid-template-columns:1fr}.sellhow:not(.plain) .sh-head p{grid-column:1;grid-row:auto}}
.paysec .paycard{--gold-hi:var(--brass-hi);--gold:var(--brass-hi)}
.sl-tbl{table-layout:fixed}
.sl-tbl th:nth-child(1){width:42%}.sl-tbl th:nth-child(2){width:24%}.sl-tbl th:nth-child(3){width:19%}.sl-tbl th:nth-child(4){width:15%}
.sl-tbl tbody th{width:auto}
.sell-grid > *{min-width:0}
@media (max-width:860px){.pdp{grid-template-columns:minmax(0,1fr)}}
.duo-art img{mix-blend-mode:multiply}
.foot-cols > *{min-width:0}
.fcol a,.foot-cols .fcol h2{overflow-wrap:anywhere;hyphens:auto}
.g-body table{display:block;max-width:100%;overflow-x:auto}

/* ---------- alternative looks (choose one with "palette" in config.json). The shop uses "midnight": navy and gold with Montserrat ---------- */
:root{--logo:"CC Logo",var(--display)}
.brand .tile,.brand b.word{font-family:var(--logo)}
:root[data-palette="midnight"]{
  --bg:#f7f5f0; --surface:#ffffff; --raise:#eeeae1; --ink:#121a2b; --muted:#5d6474; --line:#ddd8cc;
  --gold:#1c2c52; --gold-hi:#2b3f70; --on-gold:#ffffff; --good:#2c7a4c; --warn:#a5561c;
  --brass:#946f22; --brass-bg:#f6f0e1; --brass-hi:#d4b062;
  --banner-a:#1f3160; --banner-b:#0c1530; --banner-ink:#f3efe6;
  --display:"Montserrat",system-ui,sans-serif; --body:"Montserrat",system-ui,sans-serif; --mono:"Montserrat",system-ui,sans-serif; --logo:"Montserrat",system-ui,sans-serif; color-scheme:light}
:root[data-palette="graphite"]{
  --bg:#f3f3f1; --surface:#ffffff; --raise:#e8e8e5; --ink:#1c1f22; --muted:#5e6368; --line:#d9dad6;
  --gold:#a95f37; --gold-hi:#c27449; --on-gold:#ffffff; --good:#2c7a4c; --warn:#a5561c;
  --brass:#9a5a36; --brass-bg:#f6ece5; --brass-hi:#e2a17b;
  --banner-a:#30353b; --banner-b:#16191c; --banner-ink:#f2f0ec;
  --display:"Montserrat",system-ui,sans-serif; --body:"Montserrat",system-ui,sans-serif; --mono:"Montserrat",system-ui,sans-serif; --logo:"Montserrat",system-ui,sans-serif; color-scheme:light}
:root[data-palette="ivory"]{
  --bg:#fbfaf7; --surface:#ffffff; --raise:#f1eee8; --ink:#0d0d0d; --muted:#5f5b55; --line:#e2ddd3;
  --gold:#0d0d0d; --gold-hi:#2e2e2e; --on-gold:#ffffff; --good:#2c7a4c; --warn:#a5561c;
  --brass:#99772f; --brass-bg:#f6f0e2; --brass-hi:#cfae63;
  --banner-a:#1c1c1c; --banner-b:#050505; --banner-ink:#f5f1e8;
  --display:"Bodoni Moda",Didot,Georgia,serif; --body:"Jost",system-ui,sans-serif; --mono:"Jost",system-ui,sans-serif; --logo:"Bodoni Moda",Didot,Georgia,serif; color-scheme:light}
:root[data-palette="plum"]{
  --bg:#f7f4f6; --surface:#ffffff; --raise:#ede6eb; --ink:#22152a; --muted:#6a5c70; --line:#ded4db;
  --gold:#4a2357; --gold-hi:#64317a; --on-gold:#ffffff; --good:#2c7a4c; --warn:#a5561c;
  --brass:#97731f; --brass-bg:#f5eedf; --brass-hi:#dcb767;
  --banner-a:#55296a; --banner-b:#24102e; --banner-ink:#f6f0f4;
  --display:"Outfit",system-ui,sans-serif; --body:"Outfit",system-ui,sans-serif; --mono:"Outfit",system-ui,sans-serif; --logo:"Outfit",system-ui,sans-serif; color-scheme:light}
:root[data-palette="ivory"] .duo h1,:root[data-palette="ivory"] .duo-sell h2,:root[data-palette="ivory"] .sell-head h1{letter-spacing:-.01em;font-weight:600}
:root[data-palette="ivory"] .brand b.word{font-weight:600;font-size:19px}
.duo-buy .bcta{display:flex;width:max-content}
/* Arabic pages keep their Arabic font whichever look is chosen (Latin letters and figures stay in the look's font) */
html[lang="ar"][data-palette]{--display:"Montserrat","IBM Plex Sans Arabic",Tahoma,sans-serif;--body:"Montserrat","IBM Plex Sans Arabic",Tahoma,sans-serif;--mono:"Montserrat","IBM Plex Sans Arabic",Tahoma,sans-serif}
/* larger coins on the home page */
.duo-art{height:auto;margin-top:38px}
.duo-art img,.duo-art svg{width:250px;height:250px}
.duo-art .c2{margin-inline-start:-58px;width:220px;height:220px}
.duo-art .c3{margin-inline-start:-52px;width:195px;height:195px}
@media (max-width:1100px){.duo-art img,.duo-art svg{width:200px;height:200px}.duo-art .c2{width:176px;height:176px;margin-inline-start:-46px}.duo-art .c3{width:156px;height:156px;margin-inline-start:-42px}}
@media (max-width:520px){.duo-art img,.duo-art svg{width:150px;height:150px}.duo-art .c2{width:132px;height:132px;margin-inline-start:-36px}.duo-art .c3{width:116px;height:116px;margin-inline-start:-32px}}