/* Γραμματοσειρές φιλοξενούνται τοπικά (χωρίς Google Fonts). Άδεια: SIL Open Font License 1.1 */
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gfs-didot-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gfs-didot-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/commissioner-greek-wght-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/commissioner-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: quiet vitrine — narrow header, one-line hero, filterable grid of "display cases", slide-in bag */
:root{
  --bg:#f1ebe2; --surface:#faf6f0; --case:#e8dfd2; --fg:#2e241c; --muted:#6e5f52; --line:#d8ccbc;
  --accent:#8a6a2f; --accent-fg:#fff; --gold:#b8913f; --silver:#a59d95; --ok:#6b6a2f; --warn:#a2541c;
  --display:"GFS Didot","Didot","Bodoni 72",Georgia,serif;
  --body:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font-family:var(--display);font-size:26px;letter-spacing:.02em}
.logo small{display:block;font-family:var(--body);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:-2px}
.bagbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:8px 14px;border-radius:999px;font:inherit;cursor:pointer}
.bagbtn b{background:var(--accent);color:var(--accent-fg);border-radius:999px;min-width:22px;padding:0 6px;font-size:12px;line-height:22px;text-align:center}
.notice{background:var(--case);color:var(--muted);font-size:12.5px;text-align:center;padding:6px 16px}
.hero{padding-block:48px 28px;display:grid;gap:10px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,58px);line-height:1.05;margin:0;text-wrap:balance;max-width:16ch}
.hero p{color:var(--muted);max-width:52ch;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding-block:8px 22px}
.chip{border:1px solid var(--line);background:transparent;color:var(--fg);padding:7px 14px;border-radius:999px;font:inherit;font-size:13.5px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 22px;padding-bottom:56px}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.case{aspect-ratio:4/5;max-width:100%;background:var(--case);border-radius:4px;display:grid;place-items:center;position:relative;overflow:hidden}
.case svg{width:62%;height:auto}
.tag{position:absolute;top:10px;left:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--surface);color:var(--muted);padding:3px 8px;border-radius:2px}
.card h3{font-family:var(--display);font-weight:400;font-size:21px;margin:0}
.meta{color:var(--muted);font-size:13px;margin:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font-variant-numeric:tabular-nums;font-weight:500}
select,input,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 10px}
.add{background:var(--accent);color:var(--accent-fg);border:0;border-radius:999px;padding:8px 16px;font:inherit;font-weight:500;cursor:pointer}
.add:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.stock{font-size:12.5px;display:flex;align-items:center;gap:6px;margin:0;color:var(--muted)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.stock.low{color:var(--warn)}.stock.low::before{background:var(--warn)}
.stock.out::before{background:var(--muted)}
.case.soldout svg{opacity:.4}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.add:active{transform:translateY(1px)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.info{border-top:1px solid var(--line);padding-block:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.info h4{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 6px}
.info p{color:var(--muted);margin:0;font-size:14px}
footer{color:var(--muted);font-size:12.5px;padding-block:20px 40px;border-top:1px solid var(--line)}
/* bag drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:40;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:-10px 0 40px rgba(0,0,0,.18)}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.dhead h2{font-family:var(--display);font-weight:400;font-size:24px;margin:0}
.x{background:none;border:0;color:var(--fg);font-size:26px;line-height:1;cursor:pointer}
.dbody{overflow:auto;padding:16px 20px;display:grid;gap:16px;align-content:start;flex:1}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.line .meta{grid-column:1}
.qty{display:flex;gap:6px;align-items:center}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.totals{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-weight:600;font-size:17px;padding-top:6px;border-top:1px solid var(--line)}
form{display:grid;gap:10px}
form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
fieldset{border:1px solid var(--line);border-radius:4px;padding:10px 12px;display:grid;gap:6px;margin:0}
legend{font-size:13px;color:var(--muted);padding:0 4px}
fieldset label{display:flex;gap:8px;align-items:flex-start;color:var(--fg);font-size:14px}
.submit{background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:12px;font:inherit;font-weight:600;cursor:pointer}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.done{display:grid;gap:10px}
.done h3{font-family:var(--display);font-weight:400;font-size:26px;margin:0;color:var(--ok)}
.bank{background:var(--case);padding:10px 12px;border-radius:4px;font-size:13.5px}
@media (prefers-reduced-motion:no-preference){.drawer{animation:slide .25s ease-out}@keyframes slide{from{transform:translateX(30px);opacity:.6}}}
.case img{width:100%;height:100%;object-fit:cover;display:block}
.status{grid-column:1/-1;color:var(--muted);text-align:center;padding:48px 0}
.status button{margin-top:12px}
.err{background:var(--case);border-left:3px solid var(--warn);padding:10px 12px;border-radius:4px;font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit:disabled{opacity:.6;cursor:progress}
.ts{min-height:65px}
.form-note{font-size:12px;color:var(--muted);margin:0}