/* Späti: a corner-shop shelf under fluorescent light.
   The one loud thing is the day-glo price sticker. Everything else stays quiet.
   System fonts only: no third-party font requests (DSGVO). */

:root {
  --tube:    #eef1ef;   /* fluorescent-lit wall */
  --paper:   #ffffff;
  --ink:     #000000;
  --muted:   #555a57;
  --shelf:   #c9ccc7;   /* shelf edge */
  --sticker: #ff4f9a;   /* day-glo price gun label */
  --link:    #0a3ccf;
  --warn:    #fff27a;

  --sans: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
  --cond: "Arial Narrow", "Helvetica Neue Condensed", "Nimbus Sans Narrow", "Liberation Sans Narrow",
          "Roboto Condensed", "Arial", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--tube); color: var(--ink); }
body {
  margin: 0 auto; max-width: 72rem; padding: 0 1.25rem 3rem;
  font: 1rem/1.5 var(--sans);
}
a { color: var(--link); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.top {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem 0 1.25rem;
}
.mark {
  font: 700 clamp(3rem, 11vw, 6.5rem)/0.85 var(--cond);
  letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
}
.by { color: var(--muted); }
.by a { color: inherit; }

/* ---------------------------------------------------------------- shelf */
.shelf {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: 2.5rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.item a { display: block; color: inherit; text-decoration: none; }
.item { border-bottom: 0.6rem solid var(--shelf); padding-bottom: 0.9rem; }
.pic {
  position: relative; display: block; aspect-ratio: 1;
  background: var(--paper);
}
.pic img { width: 100%; height: 100%; object-fit: contain; }
.price {
  position: absolute; top: 0.7rem; right: 0.7rem;
  background: var(--sticker); color: var(--ink);
  font: 700 1.35rem/1 var(--cond);
  padding: 0.4em 0.5em 0.35em; border-radius: 2px;
  transform: rotate(-4deg);
}
.name { display: block; margin-top: 0.8rem; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.how  { display: block; color: var(--muted); font-size: 0.9rem; }
.item a:hover .name { text-decoration: underline; }
.is-out .pic img { opacity: 0.35; filter: grayscale(1); }
.is-out .price { background: var(--paper); border: 2px solid var(--ink); }

/* ---------------------------------------------------------------- product */
.product {
  display: grid; gap: 2rem 3rem; margin-top: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.product .price { font-size: 2rem; top: 1rem; right: 1rem; }
.product h1 { font: 700 clamp(2rem, 4vw, 2.75rem)/1.05 var(--cond); margin: 0 0 1rem; }
.desc { max-width: 38em; margin-bottom: 1.5rem; }

.buy { max-width: 26rem; }
.buy fieldset { border: 0; padding: 0; margin: 1.25rem 0; }
.buy legend { font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.opt { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; }
.qty { display: flex; gap: 0.75rem; align-items: center; font-weight: 600; }
.qty input { width: 5rem; }
.check { display: flex; gap: 0.6rem; align-items: baseline; margin: 0.8rem 0; font-size: 0.95rem; }
.aside { color: var(--muted); font-size: 0.9rem; }
.pickup { margin: 0.4rem 0 0 1.6rem; }
.binding { font-weight: 600; margin: 1.25rem 0 0.75rem; }
.msg { background: var(--warn); padding: 0.6rem 0.8rem; }
.notice { font-weight: 600; }

.sum { border-collapse: collapse; width: 100%; margin: 1.25rem 0 0.25rem; }
.sum td { padding: 0.3rem 0; border-bottom: 1px solid var(--shelf); }
.sum td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum .total td { font-weight: 700; border-bottom: 0; padding-top: 0.5rem; font-size: 1.1rem; }

input, textarea, select, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]), textarea {
  border: 1px solid var(--muted); background: var(--paper); padding: 0.45rem 0.55rem; border-radius: 2px;
}
button, .button {
  display: inline-block; background: var(--ink); color: var(--paper); border: 0;
  padding: 0.6rem 1.1rem; border-radius: 2px; cursor: pointer; text-decoration: none; font-weight: 600;
}
button.linkish {
  background: none; color: var(--link); padding: 0; font-weight: 400; text-decoration: underline;
}

/* ---------------------------------------------------------------- receipt, legal, empty */
.receipt, .legal, .empty { max-width: 38rem; margin-top: 1rem; }
.receipt h1, .empty h1, .legal h1 { font: 700 2.5rem/1.05 var(--cond); margin: 0 0 1rem; }
.ref { font-family: var(--cond); font-size: 1.2em; letter-spacing: 0.04em; }
.legal h2 { margin-top: 2rem; }

/* ---------------------------------------------------------------- footer */
.foot {
  margin-top: 4rem; padding-top: 1rem; border-top: 0.6rem solid var(--shelf);
  font-size: 0.9rem; color: var(--muted);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.foot a { color: inherit; }

/* ---------------------------------------------------------------- admin */
.admin .adminnav {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
  padding: 0.6rem 0.9rem; background: var(--paper); margin-bottom: 1.5rem;
}
.admin .adminnav form { margin-left: auto; }
.admin h1 { font: 700 2rem/1.1 var(--cond); margin: 0 0 1rem; }
.panel { background: var(--paper); padding: 1.5rem; max-width: 40rem; }
.panel label:not(.opt) { display: block; margin: 0 0 1rem; font-weight: 600; }
.panel label:not(.opt) input:not([type=file]), .panel textarea { display: block; width: 100%; margin-top: 0.25rem; font-weight: 400; }
.panel fieldset { border: 1px solid var(--shelf); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.login { max-width: 22rem; }
.flash { background: var(--warn); padding: 0.5rem 0.75rem; }
.thumb { width: 4rem; height: 4rem; object-fit: cover; background: var(--tube); }
.edit .thumb { width: 8rem; height: 8rem; margin-bottom: 0.75rem; }

.list { border-collapse: collapse; width: 100%; background: var(--paper); }
.list td { padding: 0.6rem; border-bottom: 1px solid var(--tube); vertical-align: middle; }
.list .inactive { opacity: 0.5; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 1rem 0.25rem 0; }

.order { background: var(--paper); margin-bottom: 0.5rem; }
.order summary {
  display: grid; grid-template-columns: 7rem 1fr 9rem 6rem 6rem 9rem;
  gap: 0.75rem; padding: 0.7rem 0.9rem; cursor: pointer; align-items: baseline;
}
.order .st { font-weight: 600; }
.status-paid .st { background: var(--sticker); padding: 0 0.3rem; justify-self: start; }
.status-review .st, .status-pending .st { background: var(--warn); padding: 0 0.3rem; justify-self: start; }
.status-created, .status-cancelled, .status-denied, .status-refunded { opacity: 0.6; }
.odetail { padding: 0 0.9rem 0.9rem; }
.odetail pre { font: inherit; margin: 0 0 0.75rem; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 44rem) {
  .product { grid-template-columns: 1fr; }
  .order summary { grid-template-columns: 1fr 1fr; }
  .panel .row { grid-template-columns: 1fr; }
}