/* Copperline Territory, demonstration build.
   One stylesheet across five pages. This is the Storefront package, so the
   store is a real storefront: basket, coupons, gift cards, creator codes. */

:root{
  --void:#120C0A; --void-2:#0C0806; --slab:#1E1512; --slab-2:#291D18; --line:#3A2A22;
  --brass:#D9A65C; --brass-dim:#6B4A22; --blood:#A8452F; --sage:#7E9367;
  /* --faint was #786257. Lifted to clear 4.5:1 on --slab (#1E1512), the
     lightest background it is used on and so the worst case. The footer is
     where the "Built by Your Future Site" credit lives, so this is the one
     line on the page that has to be readable. */
  --text:#F2E7DA; --mute:#A99384; --faint:#907E74;
  --mono:ui-monospace,"Consolas",monospace;
  --face:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--face);font-size:17px;line-height:1.65}
body.locked{overflow:hidden}
h1,h2,h3,h4{margin:0;line-height:1.06;text-wrap:balance}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0}
.mute{color:var(--mute)}

.demo-bar{background:var(--brass);color:#150D06;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;padding:.55rem 1rem;font-weight:700}
.demo-bar a{color:#150D06}

header.top{position:sticky;top:0;z-index:40;background:rgba(12,8,6,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:1.5rem;padding:.8rem 0}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:900;letter-spacing:.01em;font-size:1.05rem}
.mark svg{width:28px;height:28px}
.mark small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;color:var(--faint);
  text-transform:uppercase;font-weight:400;margin-top:.15rem}
nav.links{margin-left:auto;display:flex;gap:1.4rem}
nav.links a{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
  text-decoration:none;padding-bottom:.2rem;border-bottom:1px solid transparent}
nav.links a:hover{color:var(--text)}
nav.links a[aria-current="page"]{color:var(--brass);border-color:var(--brass)}
@media(max-width:980px){nav.links{gap:.9rem}nav.links a{font-size:.6rem;letter-spacing:.07em}}
@media(max-width:720px){nav.links{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.72rem 1.15rem;background:var(--brass);
  color:#150D06;border:1px solid var(--brass);text-decoration:none;cursor:pointer;transition:transform .16s ease,filter .16s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn.small{padding:.5rem .8rem;font-size:.64rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.basket-btn{position:relative}
.basket-btn .count{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:10px;
  background:var(--sage);color:#0C1408;font-family:var(--mono);font-size:.62rem;font-weight:700;
  display:grid;place-content:center;padding:0 .35rem}
.basket-btn .count[hidden]{display:none}

.banner{border-bottom:1px solid var(--line);background:
  radial-gradient(85% 130% at 12% 0%,rgba(217,166,92,.14),transparent 62%),var(--void-2);
  padding:clamp(2.5rem,7vh,4.5rem) 0}
.banner h1{font-size:clamp(2rem,5.5vw,3.6rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin-top:.7rem}
.banner p{color:var(--mute);max-width:62ch;margin:1rem 0 0}

section{padding:clamp(3rem,8vh,5.5rem) 0}
.head h2{font-size:clamp(1.6rem,4.2vw,2.7rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin-top:.7rem}
.head p{color:var(--mute);max-width:62ch;margin:1rem 0 0}

.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.cell{background:var(--slab);padding:1.7rem}
.cell h3{font-size:1.05rem;font-weight:800}
.cell p{color:var(--mute);font-size:.92rem;margin:.6rem 0 0}
.cell .num{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--brass);display:block;margin-bottom:.9rem}

.stat{background:var(--slab);padding:1.2rem 1.3rem}
.stat b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat > span{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.stat b.live{display:flex;align-items:center;gap:.5rem}
.live i{display:inline-block;width:9px;height:9px;background:var(--sage);border-radius:50%;box-shadow:0 0 10px var(--sage)}

.note{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--faint);margin-top:1.8rem;
  border-left:2px solid var(--brass-dim);padding-left:.9rem;line-height:1.9}
.note code{color:var(--brass)}

footer{background:var(--void-2);border-top:1px solid var(--line);padding:2.8rem 0;color:var(--faint)}
.foot{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase}
.foot a{color:var(--brass);text-decoration:none}
.foot nav{display:flex;flex-wrap:wrap;gap:1.1rem}

/* ---------- the basket drawer ---------- */
#scrim{position:fixed;inset:0;z-index:50;background:rgba(6,4,3,.74);opacity:0;pointer-events:none;transition:opacity .3s ease}
#scrim.on{opacity:1;pointer-events:auto}
#basket{position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(420px,100vw);background:var(--slab);
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  translate:100% 0;transition:translate .34s cubic-bezier(.22,.61,.36,1)}
#basket.on{translate:0 0}
#basket header{display:flex;align-items:center;gap:1rem;padding:1.2rem;border-bottom:1px solid var(--line)}
#basket header h2{font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
#basket .close{margin-left:auto;background:none;border:0;color:var(--mute);font-size:1.5rem;cursor:pointer;line-height:1}
#basket .items{flex:1;overflow-y:auto;padding:.4rem 1.2rem}
.line{display:grid;grid-template-columns:44px 1fr auto;gap:.9rem;align-items:start;padding:1rem 0;border-bottom:1px solid var(--line)}
.line .sw{width:44px;height:44px;border:1px solid var(--line)}
.line b{display:block;font-size:.92rem;font-weight:700}
.line small{display:block;color:var(--faint);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;margin-top:.2rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:.55rem}
.qty button{background:none;border:0;color:var(--mute);width:26px;height:26px;cursor:pointer;font-size:.9rem;line-height:1}
.qty button:hover{color:var(--brass)}
.qty span{font-family:var(--mono);font-size:.75rem;min-width:24px;text-align:center}
.line .cash{font-family:var(--mono);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.line .drop{display:block;background:none;border:0;color:var(--faint);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:.4rem 0 0;margin-left:auto}
.line .drop:hover{color:var(--brass)}
.empty{color:var(--faint);font-size:.9rem;padding:2.5rem 0;text-align:center}
#basket .tail{border-top:1px solid var(--line);padding:1.2rem;display:grid;gap:.8rem}
.codes{display:grid;gap:.5rem}
.code-row{display:flex;gap:.5rem}
.code-row input{flex:1;min-width:0;font-family:var(--mono);font-size:.76rem;color:var(--text);background:var(--void-2);
  border:1px solid var(--line);padding:.6rem .7rem;text-transform:uppercase}
/* Keyboard focus stays visible everywhere. The border colour is the mouse
   affordance; the outline is what a keyboard user navigates by, and it is only
   dropped for a pointer focus. A bare `outline:none` on :focus removed it for
   both, which left the field indistinguishable from its neighbours to anyone
   tabbing through. */
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.code-row input:focus{border-color:var(--brass)}
.code-row input:focus:not(:focus-visible){outline:none}
.applied{display:flex;flex-wrap:wrap;gap:.4rem}
.tagline-chip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.32rem .5rem;border:1px solid var(--sage);color:var(--sage)}
.tagline-chip button{background:none;border:0;color:inherit;cursor:pointer;padding:0;font-size:.85rem;line-height:1}
.sums{display:grid;gap:.4rem;font-family:var(--mono);font-size:.76rem;color:var(--mute);
  border-top:1px solid var(--line);padding-top:.8rem}
.sums div{display:flex;justify-content:space-between;gap:1rem}
.sums .total{color:var(--text);font-size:1.05rem;font-weight:700;padding-top:.4rem}
.sums .off{color:var(--sage)}
.code-note{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--faint);line-height:1.7}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Skip link: a keyboard user would otherwise tab the whole nav on every page. */
.skip{position:fixed;top:0;left:0;z-index:200;padding:.7rem 1.1rem;background:var(--brass);
  color:#120C0A;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transform:translateY(-120%)}
.skip:focus{transform:translateY(0)}