/* shop.object.computer
   Palette, type, header, nav, footer, buttons, and the numbered-line voice
   are carried over from object.computer so the subdomain reads as one site. */

:root {
  color-scheme: light;
  --text: #4A4137;
  --link: #696f58;
  --link_visited: #696f58;
  --accent1: #6F6356;
  --accent2: #8A7E70;
  --background: #ECE6D3;
  --code: #E0D8BF;
  --button-text: #4A4137;
  --blockquote: #F5EFDC;
  --alert: #F2D6D3;
  --alert-border: #C24A4A;
  --field: #E0D8BF;
  --hairline: rgba(74, 65, 55, 0.18);
  --accent-red: #ba1a1a;

  --font-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, Georgia, serif;
  --font-sans: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

html { scrollbar-gutter: stable; }

body {
  max-width: 40em;
  margin: 2em auto;
  padding: 0 1em;
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "liga", "kern", "onum";
}

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link_visited); }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

img { max-width: 100%; height: auto; }

/* Header and nav */
header { margin-bottom: 2em; }
.site-header { text-align: center; }
.site-header img { width: 108px; }
.site-header nav,
.site-header a {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.site-header .nav-current {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: default;
}
.cart-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent2);
  margin-left: 0.35em;
  font-feature-settings: "lnum";
}
.cart-count::before { content: "("; }
.cart-count::after { content: ")"; }

/* Page title: the site hides h2.p-name on Pages; the shop keeps it, small and quiet. */
.page h2.p-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 1.6em;
}

.lede { margin-top: 0; }

/* Sticker list: the made-page line voice, one line per sticker, with art above. */
.sticker-list {
  display: flex;
  flex-direction: column;
  gap: 2.6em;
  margin: 2em 0 1.5em;
}
.sticker { min-width: 0; }
.sticker-art {
  background: var(--code);
  border-radius: 5px;
  padding: 6% 8%;
  margin-bottom: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-art img { display: block; width: 100%; height: auto; }

.made-line { display: flex; align-items: baseline; }
.made-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent2);
  min-width: 34px;
  flex: none;
  font-feature-settings: "lnum";
}
/* Long names wrap instead of shoving the price off the edge; the leader
   only gets what's left on the last line. */
.made-title { font-style: italic; font-size: 1.15em; flex: 0 1 auto; min-width: 0; line-height: 1.25; text-transform: lowercase; text-wrap: pretty; }
.cart-line .name { text-transform: lowercase; }
.made-dots {
  flex: 1 1 16px;
  border-bottom: 1px dotted var(--accent2);
  margin: 0 10px;
  transform: translateY(-4px);
  min-width: 16px;
}
.made-dest {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent2);
  flex: none;
  font-feature-settings: "lnum";
}
.made-annot {
  margin: 0.25em 0 0 34px;
  font-size: 0.95em;
  color: var(--accent1);
}
.made-annot .size {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent2);
  margin-top: 0.2em;
  font-feature-settings: "lnum";
}
.sticker-actions {
  margin: 0.6em 0 0 34px;
  display: flex;
  align-items: baseline;
  gap: 0.8em;
}
.sold-out,
.added {
  font-family: var(--font-sans);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  color: var(--accent2);
}

/* Buttons and fields, straight from the theme. */
button,
input[type=submit] {
  vertical-align: baseline;
  padding: 5px 10px;
  font-size: 0.9em;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: 5px;
  border: 1px solid var(--link);
  background: none;
  color: var(--link);
  -webkit-appearance: none;
  margin-top: 5px;
  font-weight: normal;
  cursor: pointer;
}
button:hover,
input[type=submit]:hover { background: var(--link); color: var(--background); }
button:disabled { opacity: 0.5; cursor: default; }
button:disabled:hover { background: none; color: var(--link); }
button.quiet {
  border: 0;
  padding: 0 0.4em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
}
button.quiet:hover { background: none; color: var(--text); text-decoration: underline; }

/* Running head links (the site's read-more voice). */
.running-head { text-align: center; margin-top: 2em; }
a.read-more {
  font-family: var(--font-sans);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  font-size: 0.85em;
  color: var(--accent1);
  text-decoration: none;
}
a.read-more::before { content: "\00B7\2002"; color: var(--accent2); }
a.read-more::after  { content: "\2002\00B7"; color: var(--accent2); }
a.read-more:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
a.read-more:hover::before,
a.read-more:hover::after { color: var(--link); }

/* Cart: hairline-ruled lines, mono numerals, in the notes-margin voice. */
.cart-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 0 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.cart-line img, .cart-line .cart-art { display: block; width: 96px; height: auto; background: var(--code); border-radius: 5px; padding: 6px; box-sizing: border-box; }
.cart-line .name { font-style: italic; font-size: 1.05em; min-width: 0; }
.cart-line .name small {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent2);
  font-feature-settings: "lnum";
}
.qty { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 13px; font-feature-settings: "lnum"; }
.qty output { min-width: 2ch; text-align: center; }
.cart-line .amount {
  font-family: var(--font-mono);
  font-size: 13px;
  min-width: 6ch;
  text-align: right;
  font-feature-settings: "lnum";
}
.cart-totals {
  margin: 0.6em 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15em 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-feature-settings: "lnum";
}
.cart-totals dt { text-align: right; color: var(--accent2); }
.cart-totals dd { margin: 0; min-width: 6ch; text-align: right; }
.cart-totals .grand dt, .cart-totals .grand dd { color: var(--text); padding-top: 0.35em; }
.cart-totals .grand dd { border-top: 1px solid var(--hairline); }
.cart-actions { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.6em; gap: 1em; flex-wrap: wrap; }
.cart-error { color: var(--accent-red); font-size: 0.9em; margin: 0.6em 0 0; }
.cart-note, .cart-empty { color: var(--accent1); font-size: 0.95em; }
.cart-note { margin-top: 2em; font-size: 0.85em; color: var(--accent2); }
@media (max-width: 540px) {
  .cart-line { grid-template-columns: 72px 1fr auto; row-gap: 4px; }
  .cart-line img, .cart-line .cart-art { width: 72px; grid-row: 1 / 3; }
  .cart-line .name { grid-column: 2 / 4; }
  .cart-line .qty { grid-column: 2; grid-row: 2; }
  .cart-line .amount { grid-column: 3; grid-row: 2; }
}

/* Sticky checkout bar on the shop page, shown once the cart has something in it. */
.checkout-bar {
  position: sticky;
  bottom: 0;
  margin-top: 1.5em;
  padding: 0.7em 0 0.9em;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em 1em;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent1);
}
.checkout-bar[hidden] { display: none; }
.checkout-bar .mono { font-family: var(--font-mono); font-feature-settings: "lnum"; color: var(--text); }
.checkout-bar-actions { display: flex; align-items: center; gap: 1em; }
.checkout-bar button { margin-top: 0; }
.checkout-bar .cart-error { flex-basis: 100%; margin: 0; }

/* Alerts, as on the blog. */
.alert {
  background: var(--alert);
  border-left: 4px solid var(--alert-border);
  border-radius: 5px;
  padding: 0.6em 1em;
  font-size: 0.92em;
}

/* Footer */
footer { margin-top: 2em; text-align: center; }
footer .custom_footer { font-size: 0.75em; color: var(--accent2); }
footer .custom_footer img { display: block; margin: 0 auto 0.6em; }