/* Paekakariki Press shop */
:root {
  --paper: #faf8f3;
  --ink: #1d1c1a;
  --muted: #6b675f;
  --rule: #ddd7cb;
  --red: #a8261b;
  --card: #fff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#1b1a18; --ink:#ece8df; --muted:#a39e93; --rule:#3a3732; --red:#e0685c; --card:#24221f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--serif); }
a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem;
  padding: 1.1rem clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--rule); }
.press { font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.masthead nav { display: flex; gap: 1.4rem; }
.masthead nav { flex-wrap: wrap; }
.masthead nav a { text-decoration: none; }
.masthead nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.count { display: inline-block; min-width: 1.5em; padding: 0 .4em; border-radius: 1em; background: var(--red);
  color: #fff; font-size: .8em; text-align: center; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem clamp(16px, 4vw, 48px) 3rem; }
h1 { font-weight: normal; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: .4rem 0 .6rem; }
.intro p { max-width: 42em; color: var(--muted); }

.search { display: flex; gap: .5rem; margin: 1.2rem 0 1.8rem; max-width: 30rem; }
input, select, button { font: inherit; }
input[type=search], input#code, select, .qty { padding: .45rem .6rem; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); border-radius: 3px; }
.search input { flex: 1; min-width: 0; }
button { cursor: pointer; padding: .45rem .9rem; border: 1px solid var(--ink); background: var(--ink);
  color: var(--paper); border-radius: 3px; }
button.secondary { background: transparent; color: var(--ink); }
button.linkish { border: 0; background: none; color: var(--muted); padding: 0; text-decoration: underline; }

.flash { background: var(--card); border-left: 3px solid var(--red); padding: .7rem 1rem; }
.empty { color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.2rem 1.6rem; }
.card { display: flex; flex-direction: column; }
/* Every cover box is the same size: the box's shape is fixed and the
   image is fitted inside it, so a tall, wide, large or small image
   can never stretch the box. */
.card .cover { position: relative; display: block; width: 100%; max-width: 100%; height: 0; padding-top: 133.333%; /* 3:4, works in every browser */
  background: var(--card); border: 1px solid var(--rule); overflow: hidden; box-sizing: border-box; }
.card .cover img { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px);
  max-width: none; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.isbn { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.card h2 { font-size: 1.08rem; font-weight: normal; margin: .7rem 0 .1rem; line-height: 1.3; }
.card h2 a { text-decoration: none; }
.byline { margin: 0; color: var(--muted); font-size: .92rem; }
.byline .ill { display: block; font-style: italic; }
.tag.soon { text-transform: none; letter-spacing: 0; font-size: .85rem; font-style: italic; color: var(--muted); text-align: right; }
/* Books printed letterpress throughout */
.badge.full { font-size: .8rem; letter-spacing: .05em; }
.fleuron { font-size: 1.15em; letter-spacing: 0; text-transform: none; }
.printing.full { margin: 1.1rem 0 0; padding: .7rem 0 .75rem; border-top: 2px solid var(--red); border-bottom: 1px solid var(--red);
  color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.printing.full p { margin: 0; }
.printing.full .lp-head { color: var(--red); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.printing.full .lp-sub { margin-top: .2rem; color: var(--muted); font-style: italic; font-size: .92rem; }
.badge { margin: .35rem 0 0; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.printing { margin: 1rem 0 0; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.filters { margin: -1rem 0 1.8rem; font-size: .92rem; }
/* "Only 2 left": sits just above the price row, which stays at the foot of the card. */
.stock { color: var(--red); font-size: .8rem; letter-spacing: .04em; }
.card .stock { margin: auto 0 0; padding-top: .6rem; }
.card .stock + .buy { margin-top: 0; padding-top: .15rem; }
.buy { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.price { font-variant-numeric: lining-nums; }
/* The price is made as tall as the Add button (its text line + padding + border),
   so prices sit on one line across a row whether a card has a button or "Sold out". */
.card .price { line-height: calc(.9rem * 1.55 + .6rem + 2px); }
.add button { padding: .3rem .7rem; font-size: .9rem; }
.soldout .cover { opacity: .55; }
.tag { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }

.book { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 1rem; }
.book-cover img { border: 1px solid var(--rule); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.book .byline { font-size: 1.05rem; }
.buy.big { justify-content: flex-start; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); font-size: 1.2rem; }
.buy.big .add button { font-size: 1rem; padding: .5rem 1.1rem; }
/* Type: the large picture in a fixed square frame, whatever the picture's own shape. */
.frame { position: relative; height: 0; padding-top: calc(100% - 2px); /* square, borders included */
  border: 1px solid var(--rule); background: var(--card); overflow: hidden; }
.book-cover .frame img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; border: 0; box-shadow: none; }
/* Type: several pictures, and its size, series and strength in two lined-up columns. */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.thumb { position: relative; display: block; height: 0; padding-top: calc(100% - 2px); /* square, borders included */ border: 1px solid var(--rule); background: var(--card); overflow: hidden; }
.book-cover .thumb img { border: 0; box-shadow: none; }
.thumb img { position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); max-width: none; object-fit: contain; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1.4rem; margin: 1.1rem 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: lining-nums; }
.description { margin-top: 1rem; }
.meta { color: var(--muted); font-size: .85rem; }
.related { margin-top: 3.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.related h2 { font-weight: normal; }
@media (max-width: 700px) { .book { grid-template-columns: 1fr; } .book-cover { max-width: 320px; } }

.basket table { width: 100%; border-collapse: collapse; }
.basket th { text-align: left; font-weight: normal; color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--rule); padding: .4rem; }
.basket td { padding: .7rem .4rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
/* The picture and title sit side by side inside the cell. (The cell itself must
   stay a table cell, or the columns and the rule under each row go astray.) */
.basket .item { display: flex; gap: .8rem; align-items: center; }
.basket .item img { width: 48px; flex: none; }
.basket .item span { min-width: 0; overflow-wrap: anywhere; }
.basket td:first-child { width: 100%; }
.basket th.num { text-align: right; }
/* Phones: tighten the columns so the table never runs off the side. */
@media (max-width: 480px) {
  .basket th, .basket td { padding-left: .25rem; padding-right: .25rem; }
  .basket .item { gap: .6rem; }
  .basket .item img { width: 36px; }
  .basket .qty { width: 3.4em; padding-left: .4rem; padding-right: .2rem; }
  .basket .linkish { font-size: .85rem; }
}
@media (max-width: 360px) { .basket .item img { display: none; } }
.basket .num { text-align: right; white-space: nowrap; }
.qty { width: 4.2em; }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }
.summary { max-width: 26rem; margin-left: auto; }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem 0; }   /* no column gap, so the rule above Total is unbroken */
.summary dd { margin: 0; padding-left: 1rem; text-align: right; }
.summary .total { font-size: 1.25rem; border-top: 1px solid var(--rule); padding-top: .4rem; }
.code { margin: 1rem 0 1.4rem; }
.code label { display: block; font-size: .92rem; color: var(--muted); margin-bottom: .3rem; }
.code .row { display: flex; gap: .5rem; }
.code input { flex: 1; min-width: 0; text-transform: uppercase; }
.hint { color: var(--muted); font-size: .88rem; }
.error { color: var(--red); }
#paypal-buttons { min-height: 50px; }

.colophon { border-top: 1px solid var(--rule); color: var(--muted); font-size: .88rem;
  padding: 1.4rem clamp(16px, 4vw, 48px) 2rem; }
.colophon p { max-width: 1180px; margin: .2rem auto; }

/* --- Admin pages (admin/shop.php: books, cards, type, numbers) --- */
.admin .press small { font-size: .65em; letter-spacing: .14em; color: var(--muted); }
.button { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 3px; text-decoration: none; }
.button.secondary { background: transparent; color: var(--ink); }
.list-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.2rem; }
.admin-list { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.admin-list th { text-align: left; font-weight: normal; color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--rule); padding: .4rem .5rem; }
.admin-list td { padding: .5rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.admin-list .num { text-align: right; }
.admin-list .off td { color: var(--muted); }
.admin-list td.none { color: var(--red); }
@media (max-width: 640px) { .admin-list .less { display: none; } .admin-list th, .admin-list td { padding-left: .3rem; padding-right: .3rem; } }

/* Under the heading of a page about one thing: the way back to its list, and beside it what has just happened. */
.back-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; max-width: 46rem; margin: .6rem 0 1rem; }
.back-line .back { color: var(--muted); }
.back-line .said { border-left: 3px solid var(--red); padding-left: .6rem; }

/* The form: labels in one column, fields in the next, so every field starts at the same place. */
.admin-form { max-width: 46rem; margin-top: 1rem; }
.admin-form .field { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1rem; align-items: baseline; margin-bottom: .8rem; }
.admin-form .field > label { color: var(--muted); }
.admin-form input:not([type=checkbox]), .admin-form textarea, .admin-form select { padding: .45rem .6rem; border: 1px solid var(--rule); background: var(--card);
  color: var(--ink); border-radius: 3px; font: inherit; max-width: 100%; font-variant-numeric: lining-nums; }
/* Text boxes, date boxes and lists are all one height, so a row of the form is the same depth whatever it holds. */
.admin-form input:not([type=checkbox]), .admin-form select { height: 2.5rem; }
.admin-form .short { width: 9rem; }
.admin-form .medium { width: 20rem; }
.admin-form .date { width: 11rem; }
.admin-form .wide { width: 100%; }
.admin-form textarea { display: block; line-height: 1.45; }
.admin-form .tick { display: flex; gap: .5rem; align-items: baseline; }
.admin-form .tick input { margin: 0; flex: none; position: relative; top: .1em; }   /* the box starts where the text fields start */
.admin-form .hint, .admin-form .error { margin: .25rem 0 0; font-size: .85rem; }
.admin-form .bad input, .admin-form .bad textarea { border-color: var(--red); }
.admin-form .hint.warn, .admin-form .fixed + .hint { color: var(--red); }   /* a warning, not a refusal */
.admin-form details { margin: 1.2rem 0 .8rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.admin-form summary { cursor: pointer; margin-bottom: .8rem; }
.admin-form .cancel { margin-left: 1rem; color: var(--muted); }
@media (max-width: 560px) {
  .admin-form .field { grid-template-columns: 1fr; }
  .admin-form .field > label { margin-bottom: .2rem; }
}

/* The pool of ISBNs and EANs (admin/pool.php). The numbers at the top stand in the
   same column as the title box, set in by the box's own border and padding, so their
   first digit is directly above the first letter typed. */
.admin-form .field > .label { color: var(--muted); }
.admin-form .fixed { font-variant-numeric: tabular-nums lining-nums; }
.pool-take .fixed { display: inline-block; min-width: 8.5rem; padding-left: calc(.6rem + 1px); }
.pool-take .free { color: var(--muted); font-size: .85rem; }
.take-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.take-buttons button[disabled] { opacity: .3; cursor: default; }
.took-number { font-size: 1.35rem; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .04em; margin-right: .3rem; }
.pool-kind { font-weight: normal; font-size: 1.3rem; margin: 2.2rem 0 .3rem; }
.pool-kind span { margin-left: .6rem; font-size: .85rem; color: var(--muted); }
/* Fixed column widths, so the ISBN table and the EAN table line up with each other. */
.pool-list { max-width: 46rem; table-layout: fixed; }
.pool-list .number { width: 9rem; }
.pool-list .used { width: 3.5rem; text-align: center; }
.pool-list .less { width: 7.5rem; color: var(--muted); }
.pool-list td { overflow-wrap: anywhere; }
.pool-list th:first-child, .pool-list td:first-child { padding-left: 0; }   /* the numbers start under the headings and the labels above */
.pool-list .free td { color: var(--muted); }
.pool-list .next { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pool-list .check { display: block; color: var(--red); font-size: .85rem; }
.pool-list .just td { background: var(--card); }
@media (max-width: 560px) { .pool-take .fixed { padding-left: 0; } }
@media (max-width: 640px) { .pool-list .number { width: 7.6rem; } .pool-list .used { width: 2.8rem; } }

/* Orders (admin/orders.php). The facts of an order use the form's two columns, so they line up with every other admin page. */
.order { margin-bottom: 1.6rem; }
.order .field { margin-bottom: .45rem; }
.order .address { white-space: pre-line; }
.order-list .check { display: block; color: var(--red); font-size: .85rem; }
.order-lines { max-width: 46rem; }
.order-lines tfoot td { border-bottom: 0; padding-top: .25rem; padding-bottom: .25rem; }
.order-lines tfoot tr:first-child td { padding-top: .6rem; }
.order-lines tfoot .total td { font-size: 1.1rem; border-top: 1px solid var(--rule); padding-top: .4rem; }
.order-lines th:first-child, .order-lines td:first-child, .order-list th:first-child, .order-list td:first-child { padding-left: 0; width: 3rem; }
.order-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.6rem; max-width: 46rem; }
.order-buttons form.inline { margin: 0; }
.order-buttons .cancel { color: var(--muted); margin-left: auto; }
.order-buttons.lesser { margin-top: .9rem; gap: .4rem 1.4rem; font-size: .92rem; }
.order-hint { max-width: 46rem; margin-top: 1.2rem; }

/* The invoice and packing note (admin/invoice.php): a page to print. Black on white, whatever the screen's colours. */
body.invoice-page { background: #fff; color: #000; }
.invoice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; max-width: 46rem; margin: 0 auto; padding: 1rem clamp(16px, 4vw, 48px) 0; }
.invoice-bar .flash { flex: 0 0 100%; margin: 0 0 .4rem; }
.invoice { max-width: 46rem; margin: 0 auto; padding: 1.5rem clamp(16px, 4vw, 48px) 3rem; font-variant-numeric: tabular-nums lining-nums; }
.invoice h1 { margin: 0 0 .2rem; font-size: 2rem; }
.invoice h2 { margin: 0 0 .2rem; font-size: 1rem; font-weight: bold; }
.invoice-press { margin: 0 0 1.8rem; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.invoice-parties p { margin: 0; overflow-wrap: anywhere; }
.invoice .address { white-space: pre-line; }
.invoice table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; }
.invoice th { text-align: left; font-weight: bold; font-size: .85rem; border-bottom: 1px solid #000; padding: .35rem .5rem .35rem 0; }
.invoice td { padding: .35rem .5rem .35rem 0; border-bottom: 1px solid #bbb; vertical-align: baseline; overflow-wrap: anywhere; }
.invoice th.num, .invoice td.num { text-align: right; padding-right: 0; padding-left: .5rem; white-space: nowrap; }
.invoice-lines tfoot td { border-bottom: 0; text-align: right; padding-top: .2rem; padding-bottom: .2rem; padding-right: 0; }   /* the labels end under Unit, the sums under Amount */
.invoice-lines tfoot tr:first-child td { padding-top: .6rem; }
.invoice-lines tfoot .total td { font-weight: bold; }
.invoice-thanks { margin: 2rem 0 1.2rem; }
.invoice-foot { margin: 0; font-size: .9rem; }
@media (max-width: 560px) { .invoice-parties { grid-template-columns: 1fr; } }
@media print {
  .invoice-bar { display: none; }
  .invoice { max-width: none; padding: 0; }
  .invoice a { color: inherit; text-decoration: none; }
}

/* Pictures: a square thumbnail, its name, and its buttons, each in its own column. */
.pics { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: .5rem; max-width: 46rem; }
.pics h2 { font-weight: normal; }
.pic-list { list-style: none; margin: 1rem 0; padding: 0; }
.pic-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 15rem; gap: 0 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.pic-list .thumb { width: 72px; padding-top: 70px; }
.pic-name { font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.pic-buttons { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.pic-buttons button { padding: .3rem .6rem; font-size: .85rem; }
.pic-buttons button.linkish { padding: 0; margin-left: .4rem; }
.pic-buttons button[disabled] { opacity: .3; cursor: default; }
.waiting .pic-name { color: var(--muted); font-style: italic; }
.waiting .thumb { opacity: .6; }
.drop { margin-top: 1rem; padding: 1.2rem 1rem; border: 2px dashed var(--rule); border-radius: 4px; text-align: center; }
.drop.over { border-color: var(--red); background: var(--card); }
.drop p { margin: .2rem 0; }
.choose { position: relative; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; cursor: pointer; }
.choose input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) {
  .pic-list li { grid-template-columns: 56px minmax(0, 1fr); }
  .pic-list .thumb { width: 56px; padding-top: 54px; grid-row: span 2; }
  .pic-buttons { justify-content: flex-start; margin-top: .3rem; }
}