/* Shop, customer and admin pages. Same room as the start page: sky-white canvas,
   frosted glass, navy ink from the logo, sunrise gold in small doses. */
:root{
  --canvas:#EEF3F8; --canvas-deep:#E2EAF2;
  --ink:#13203A; --ink-2:#4B5A72; --ink-3:#6A7890;
  --accent-ink:#45658F; --sky:#B5CCE6; --sky-deep:#5C80AE; --sun:#E0AF7E;
  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.74); --glass-edge:rgba(255,255,255,.92);
  --hair:rgba(40,62,96,.14); --hair-strong:rgba(40,62,96,.28);
  --card-band:#EBF0F5; --ok:#1F7A4D; --err:#B4232C;
  --shadow:0 18px 50px rgba(24,44,78,.10),0 2px 6px rgba(24,44,78,.05);
  --display:'Familjen Grotesk',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);
  font-size:clamp(15px,1vw,17px);line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--sky-deep);outline-offset:3px;border-radius:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1100px 720px at 8% -10%,rgba(181,204,230,.62),transparent 62%),
   radial-gradient(900px 640px at 0% 108%,rgba(224,175,126,.20),transparent 60%),
   radial-gradient(900px 700px at 100% 40%,rgba(119,134,158,.12),transparent 62%)}
.env::before{content:"";position:absolute;inset:-25% -15%;
  background:linear-gradient(116deg,transparent 57%,rgba(255,255,255,.55) 57.15%,rgba(255,255,255,.18) 61.5%,transparent 61.7%),
    linear-gradient(116deg,transparent 69%,rgba(255,255,255,.40) 69.12%,rgba(255,255,255,.10) 75.5%,transparent 75.7%)}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--gut);background:rgba(244,247,251,.70);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.72);box-shadow:0 6px 24px rgba(24,44,78,.06)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:40px;width:auto}
.brand .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);
  border:1px solid var(--hair-strong);border-radius:999px;padding:3px 9px}
.nav-links{display:flex;gap:clamp(12px,1.8vw,24px);align-items:center;font-size:.88rem;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{text-decoration:none;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-links .btn{color:#fff}
.badge{background:#fff;color:var(--ink);border-radius:999px;padding:0 7px;font-size:.78rem;line-height:1.6}
@media(max-width:820px){.area-admin .nav{flex-direction:column;align-items:flex-start}
  .area-admin .nav-links{justify-content:flex-start}}

/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:600;font-family:var(--display);font-size:.95rem;padding:12px 22px;border:0;
  border-radius:999px;cursor:pointer;box-shadow:0 8px 22px rgba(19,32,58,.18);
  transition:background .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:#22355A;transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-ghost{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid var(--hair-strong);box-shadow:none}
.btn-ghost:hover{background:#fff}
.btn-small{padding:8px 15px;font-size:.86rem}
.linkbtn{background:none;border:0;padding:0;color:var(--accent-ink);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.inline{display:inline}
@media(pointer:coarse){.btn{min-height:44px}}
label{display:grid;gap:6px;font-size:.9rem}
label span,legend{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
input,textarea,select{font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--hair-strong);border-radius:11px;padding:11px 13px;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sky-deep);box-shadow:0 0 0 3px rgba(92,128,174,.2)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--ink)}
.check,.radio{display:flex;align-items:center;gap:9px;font-size:.92rem}
fieldset{border:1px solid var(--hair);border-radius:16px;padding:14px 16px;margin:0;display:grid;gap:10px}
.stack{display:grid;gap:16px}
.grid2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}.grid2 .full{grid-column:1/-1}}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.muted{color:var(--ink-2)}
.small{font-size:.84rem}
.mono{font-family:var(--mono)}
.warn{color:var(--err)}

/* page frame */
.page{width:100%;max-width:1320px;margin:0 auto;padding:clamp(22px,3.5vw,44px) var(--gut) 70px;flex:1}
.head{margin-bottom:clamp(18px,2.5vw,30px)}
.head h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.025em;margin:6px 0 10px}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.kicker a{text-decoration:none}
.lede{color:var(--ink-2);max-width:66ch}
.lede a{color:var(--ink)}
.glass{background:var(--glass-strong);border:1px solid var(--glass-edge);border-radius:22px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.panel{padding:clamp(18px,2.4vw,30px);margin-bottom:18px}
.panel h2{font-size:1.25rem;margin-bottom:12px}
.narrow{max-width:460px;margin:clamp(10px,4vw,50px) auto;padding:clamp(24px,4vw,40px)}
.narrow h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:6px 0 10px}
.narrow .lede{margin-bottom:20px}
.narrow > p:last-child{margin-top:18px}
.flash{border-radius:14px;padding:13px 16px;margin:0 0 18px;background:#fff;border:1px solid var(--hair);border-left:4px solid var(--ok)}
.flash-err{border-left-color:var(--err)}
.foot-mini{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:22px var(--gut);
  border-top:1px solid var(--hair);color:var(--ink-2);font-size:.86rem;background:rgba(255,255,255,.35)}
.pill{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--hair-strong);border-radius:999px;padding:2px 9px;color:var(--ink-2);vertical-align:middle}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill.off{color:var(--err);border-color:var(--err)}

/* range */
.toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips a{text-decoration:none;font-size:.84rem;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.55);
  border:1px solid var(--hair);color:var(--ink-2);transition:background .3s var(--ease)}
.chips a:hover{background:#fff;color:var(--ink)}
.chips a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.search{min-width:min(100%,280px)}
.search input{border-radius:999px}
.cat{margin-bottom:clamp(30px,4vw,48px)}
.cat-h{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:14px}
.cat-h span{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);font-weight:400;margin-left:6px}
.pgrid{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media(max-width:520px){.pgrid{grid-template-columns:1fr 1fr}}
.pcard{display:flex;flex-direction:column;text-decoration:none;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--glass-edge);box-shadow:0 10px 30px rgba(24,44,78,.07);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.pcard:hover{box-shadow:0 22px 50px rgba(24,44,78,.14);transform:translateY(-2px)}
.ph{display:block;background:#fff}
.ph img{aspect-ratio:1;width:100%;object-fit:contain;transition:transform .6s var(--ease)}
.pcard:hover .ph img{transform:scale(1.03)}
.pc-body{display:grid;gap:4px;padding:12px 14px 14px;background:var(--card-band);flex:1}
.pc-name{font-family:var(--display);font-weight:600;font-size:1.05rem}
.pc-kind{font-size:.84rem;color:var(--ink-2);line-height:1.3}
.pc-dots{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:4px}
.pc-dots i{width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid rgba(19,32,58,.2)}
.pc-dots em{font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--ink-2);margin-left:4px}
.pc-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.84rem;margin-top:6px;
  padding-top:8px;border-top:1px solid var(--hair)}
.pc-meta span{color:var(--ink-2)}
.empty{color:var(--ink-2);padding:30px 0}

/* product */
.crumbs{font-size:.86rem;color:var(--ink-2);margin-bottom:16px}
.crumbs a{text-decoration:none}
.crumbs span{margin:0 6px;color:var(--ink-3)}
.product{display:grid;gap:clamp(22px,3.5vw,52px);grid-template-columns:1fr}
@media(min-width:960px){.product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .gallery{position:sticky;top:84px;align-self:start}}
.g-main{position:relative;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--glass-edge)}
.g-main img{width:100%;aspect-ratio:1;object-fit:contain}
.g-logo{position:absolute;inset:0;pointer-events:none}
/* the dashed line is the print area; the logo sits inside it at its own shape */
.g-logo div{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;
  outline:1px dashed rgba(150,162,180,.85);outline-offset:1px;border-radius:2px}
.g-logo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;
  filter:drop-shadow(0 0 .5px rgba(255,255,255,.35))}
.g-logo b{font-family:var(--mono);font-size:.6rem;font-weight:500;color:var(--accent-ink);background:rgba(255,255,255,.85);
  padding:1px 5px;border-radius:4px;letter-spacing:.06em}
.g-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.g-thumbs button{width:clamp(64px,8vw,92px);padding:0;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer}
.g-thumbs button[aria-current]{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.info h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.025em;margin:6px 0 6px}
.kind{font-size:1.05rem;color:var(--ink-2)}
.kind span{font-family:var(--mono);font-size:.78rem;margin-left:8px;color:var(--ink-3)}
.colours{margin:22px 0 24px}
.label{font-size:.92rem;margin-bottom:10px}
.label span{margin-left:8px;color:var(--ink-3)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.dot{width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;background:var(--c);
  border:1px solid rgba(19,32,58,.22);transition:transform .25s var(--ease)}
.dot:hover{transform:scale(1.15)}
.dot[aria-current="true"]{box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--ink)}
.order,.locked{padding:clamp(18px,2.4vw,28px);margin-bottom:26px;display:grid;gap:14px}
.o-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.o-head h2,.locked h2{font-size:1.35rem}
.o-price{font-family:var(--display);font-weight:600;font-size:1.15rem}
.o-price small{font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--ink-2)}
.o-stock-note{font-size:.84rem;color:var(--ink-2)}
.sizes{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.sz{display:grid;gap:4px;text-align:center;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:8px 6px}
.sz b{font-family:var(--display);font-size:.95rem}
.sz input{text-align:center;padding:7px 4px;border-radius:8px}
.sz small{font-family:var(--mono);font-size:.64rem;color:var(--ink-2)}
.sz.out{opacity:.5}
.sz.noprice input{background:var(--card-band)}
.o-price-note{font-size:.88rem;background:#FFF7EC;border:1px solid rgba(224,175,126,.6);border-radius:12px;padding:10px 12px}
.sz.low small{color:#9A5B12}
.printbox legend{padding:0 6px}
.logo-pick{display:grid;gap:10px;margin:6px 0 4px}
.upload{width:max-content;cursor:pointer}
.place{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:8px}
.place .x{background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--ink-2);padding:8px}
@media(max-width:520px){.place{grid-template-columns:1fr auto}.place label:nth-child(2){grid-column:1}}
.o-sum{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:14px}
.o-sum p{font-size:.95rem}
.o-sum b{font-family:var(--display);font-size:1.2rem}
.locked p{color:var(--ink-2)}
.spec{margin-bottom:26px}
.spec h2{font-size:1.2rem;margin-bottom:10px}
.feat{margin:0;padding:0;list-style:none;columns:2 260px;column-gap:28px}
.feat li{padding:6px 0 6px 18px;position:relative;break-inside:avoid;font-size:.95rem}
.feat li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1.5px;background:var(--sun)}
.note{font-size:.86rem;color:var(--ink-2);margin-top:6px}
.chart{border-collapse:collapse;width:100%;max-width:420px;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid var(--hair);font-size:.92rem}
.chart th,.chart td{padding:8px 14px;text-align:left;border-bottom:1px solid var(--hair)}
.chart th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:500}
.chart tr:last-child td{border-bottom:0}
.spec .muted{margin-top:8px}

/* cart and account */
.cline{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid var(--hair)}
.cline:first-of-type{padding-top:0}
.cline > img{border-radius:12px;background:#fff;border:1px solid var(--hair)}
.cl-body h3{font-size:1.1rem}
.cl-body h3 a{text-decoration:none}
.cl-body h3 span{font-family:var(--body);font-weight:400;font-size:.92rem;color:var(--ink-2);margin-left:6px}
.cl-sizes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cl-sizes label{width:76px;text-align:center;gap:3px}
.cl-sizes input{text-align:center;padding:6px 4px}
.cl-sizes small{font-family:var(--mono);font-size:.62rem;color:var(--ink-2)}
.cl-sizes small.warn{color:var(--err)}
.cl-sum{display:grid;gap:4px;justify-items:end;text-align:right}
@media(max-width:620px){.cline{grid-template-columns:64px 1fr}.cl-sum{grid-column:2;justify-items:start;text-align:left}}
.cart .row{margin-top:14px}
.checkout{display:grid;gap:18px}
.totals{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.totals .big{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2rem)}
.cols{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:960px){.cols{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.order-row{border-bottom:1px solid var(--hair);padding:12px 0}
.order-row summary{cursor:pointer;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.order-row .sum{margin-left:auto;font-family:var(--display);font-weight:600}
.order-body{padding-top:14px;overflow-x:auto}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 14px;font-size:.92rem}
.facts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);padding-top:.3em}
.facts dd{margin:0}
.facts.cols2{grid-template-columns:auto 1fr}
.logos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.logos li{display:flex;gap:12px;align-items:center;font-size:.9rem}
.logos img{width:54px;height:54px;object-fit:contain;background:#fff;border:1px solid var(--hair);border-radius:10px;padding:4px}
.file{width:54px;height:54px;display:grid;place-items:center;font-family:var(--mono);font-size:.7rem;background:#fff;
  border:1px solid var(--hair);border-radius:10px}

/* admin */
.tablewrap{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;font-size:.9rem}
.tbl th,.tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl th{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:500;white-space:nowrap}
.tbl a{text-decoration:none}
.tbl input{padding:7px 9px;border-radius:8px;min-width:90px}
.tbl input.num{max-width:130px;text-align:right}
.tbl input.short{max-width:90px;min-width:60px}
.tbl input[type=checkbox]{min-width:0}
.newrow td{background:rgba(255,255,255,.5)}
.narrowtbl{max-width:640px}
.prices .panel .tbl td:nth-child(2){max-width:200px;color:var(--ink-2)}
.fill{display:flex;gap:8px;align-items:center}
.fill input{width:110px;padding:7px 9px;border-radius:8px}
.savebar{position:sticky;bottom:14px;display:flex;justify-content:flex-end;padding:8px 0}
.savebar .btn{box-shadow:0 14px 34px rgba(19,32,58,.3)}
.todo{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:18px}
.todo a{text-decoration:none;margin:0;font-size:.95rem}
.todo b{font-family:var(--display);font-size:1.4rem;margin-right:6px}
.callout{border-left:4px solid var(--sun)}
.pwbox .row input{max-width:260px}
.app h2{font-size:1.2rem}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* admin: visitors */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-bottom:4px}
.tile{margin-bottom:14px}
.tile .big{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;margin:6px 0 2px}
.bars{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;align-items:end;height:200px;
  border-bottom:1px solid var(--hair);padding-top:8px;margin-bottom:22px}
.bar{position:relative;height:100%;display:flex;align-items:flex-end;outline:none}
.bar span{display:block;width:100%;background:var(--ink);border-radius:4px 4px 0 0;min-height:0;transition:opacity .2s}
.bars:hover .bar span{opacity:.55}
.bars .bar:hover span,.bars .bar:focus span{opacity:1}
.bar em{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--mono);
  font-size:.62rem;color:var(--ink-3);padding-top:4px}
.bar:hover::after,.bar:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:var(--ink);color:#fff;font-size:.78rem;padding:5px 9px;border-radius:8px;z-index:3;pointer-events:none}
.bar:first-child:hover::after,.bar:nth-child(-n+3):focus::after{left:0;transform:none}
.bar:nth-last-child(-n+4):hover::after,.bar:nth-last-child(-n+4):focus::after{left:auto;right:0;transform:none}
.cols3{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:1000px){.cols3{grid-template-columns:repeat(3,1fr)}}
.tbl .r{text-align:right}
/* admin: deleting a cancelled order */
.danger{border-left:4px solid var(--err)}
.btn-danger{background:var(--err)}
.btn-danger:hover{background:#8F1B22}
.noprint{margin-top:10px;font-size:.9rem;display:inline-block;background:#FFF7EC;border:1px solid rgba(224,175,126,.6);border-radius:999px;padding:5px 12px}