/* ============================================================
   COLORS — change these lines to restyle the whole site.
   ============================================================ */
:root {
  --ink:        #1a1a2e;   /* main text */
  --ink-soft:   #5c5c72;   /* quieter text */
  --accent:     #ff5c39;   /* buttons and highlights */
  --accent-dk:  #e04322;   /* button when you hover it */
  --paper:      #ffffff;   /* card background */
  --bg:         #ffd9c2;   /* page background */
  --line:       #f0c9ae;   /* borders */
  --band:       #c2410c;   /* the wide dark-orange stripes */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* When JavaScript marks something as hidden, it stays hidden -- full stop.
   Without this, any rule below that sets a display (like "label { display:
   block }") quietly wins and the thing shows up anyway. That's what made
   "What should it say?" appear on the dragons. */
[hidden] { display: none !important; }

body {
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Side gutter only. The up-and-down space comes from `section` just below.
   These have to stay as two separate properties (padding-inline vs
   padding-block). If .wrap used the `padding` shorthand it would quietly
   beat `section` -- a class outranks a tag name -- and every section on the
   page would lose its top and bottom space. */
.wrap { max-width: 1000px; margin: 0 auto; padding-inline: 24px; }

section { padding-block: 64px; }
/* The wide stripes. Dark orange, so the writing on them turns white.
   The peach boxes sitting inside them keep their dark writing -- see the
   "put the dark writing back" rules further down. */
.band { background: var(--band); color: #fff; }
.band .wrap { padding-block: 0; }
.band .steps { color: rgba(255, 255, 255, 0.92); }
.band > .wrap > .fine { color: rgba(255, 255, 255, 0.92); }
/* Same trick the hero uses: on a coloured stripe the button goes white. */
.band .button { background: #fff; color: var(--ink); }
.band .button:hover { background: #fff; }

h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 8px; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; margin-bottom: 4px; }

.section-note { color: var(--ink-soft); margin-bottom: 28px; }
.fine { font-size: 0.85rem; color: var(--ink-soft); margin-top: 16px; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(150deg, var(--accent) 0%, #ff8a5c 55%, #ffc46b 100%);
  color: #fff;
  padding: 88px 0 96px;
  text-align: center;
}
.hero .tagline { font-size: 1.15rem; opacity: 0.95; margin: 14px 0 30px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.12s ease;
}
.button:hover { background: #000; }
.hero .button { background: #fff; color: var(--ink); }
.hero .button:hover { background: #fff; }

/* A phone can't hover. Without this the lift sticks on after a tap and the
   card looks stuck in mid-air until you touch something else. */
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
}

/* ---------- Product cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}


.card-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: #ffe9db;
  display: block;
}
/* Shown when there's no photo yet */
.card-img-missing {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #ffe9db, #ffe9db 12px, #ffd9c2 12px, #ffd9c2 24px);
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
}

.card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.price { font-weight: 700; font-size: 1.15rem; color: var(--accent); white-space: nowrap; }
.card p { color: var(--ink-soft); font-size: 0.92rem; }

.meta { font-size: 0.8rem; color: var(--ink-soft); }
.colors { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}
.card .button { margin-top: auto; text-align: center; }

.sold-out { opacity: 0.55; }
.sold-out-tag {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 13px;
  border-radius: 999px;
  font-weight: 600;
  margin-top: auto;
}

/* ---------- How it works ---------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.num {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.how-step p { color: var(--ink-soft); font-size: 0.92rem; }

.steps { margin: 16px 0 0 20px; color: var(--ink-soft); }
.steps li { margin-bottom: 6px; }

#custom-order-button { margin-top: 18px; }

/* ---------- Payment options ---------- */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.pay-card {
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  background: var(--bg);
}
.pay-card.best { border-color: var(--accent); background: #fff6f3; }
.pay-card h3 { display: flex; align-items: center; gap: 8px; }
.pay-card p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 6px; }
.badge {
  font-size: 0.7rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pay-card a { color: var(--accent-dk); font-weight: 600; display: inline-block; margin-top: 4px; }

.lightning-address {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  cursor: pointer;
  user-select: all;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.lightning-address:hover { background: var(--accent-dk); }

/* ---------- "Never used Bitcoin?" helper box ---------- */
.helper {
  margin-top: 28px;
  padding: 24px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px dashed var(--line);
}
.helper h3 { font-size: 1.1rem; margin-bottom: 8px; }
.helper > p { color: var(--ink-soft); font-size: 0.92rem; }

/* These two are pale boxes standing on a dark stripe, so they keep the
   normal dark writing instead of inheriting the stripe's white. */
.band .pay-card,
.band .helper { color: var(--ink); }
.band .helper .steps,
.band .helper .fine { color: var(--ink-soft); }

/* ---------- Footer ---------- */
footer {
  background: var(--ink);
  color: #fff;
  padding: 40px 0;
  text-align: center;
}
footer .fine { color: rgba(255,255,255,0.6); }

/* The big login button at the bottom of the shop. */
.owner-button {
  margin-top: 20px;
  background: var(--accent);
  color: #fff;
  padding: 17px 46px;
  font-size: 1.1rem;
}
.owner-button:hover { background: var(--accent-dk); }

/* ---------- Form bits, shared ---------- */
label {
  display: block;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 0.9rem;
}
.req { color: var(--accent); }
.hint { display: block; font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); }

input, select, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;      /* MUST stay at 16px or bigger -- see note below */
  font-weight: 400;
  background: #fff;
  color: var(--ink);
}
/* ^ An iPhone zooms the page in when you tap a box whose writing is
   smaller than 16px. These sit inside <label>, which is 0.9rem, so
   without the line above they inherited 14.4px and every tap zoomed. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { resize: vertical; }
button.button { border: none; cursor: pointer; font: inherit; font-weight: 600; }

.error {
  color: #b3261e;
  background: #fdecea;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.88rem;
  margin-top: 10px;
}

/* A box only a robot would fill in. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- The order pop-up ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
  overflow-y: auto;
}
.modal[hidden] { display: none; }

.modal-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 30px;
  width: min(480px, 100%);
  position: relative;
  max-height: 90vh;
  max-height: 90svh;    /* so it always fits above a phone's URL bar */
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
/* Leave room for the X in the corner so long titles don't run under it. */
.modal-card h2 { margin-bottom: 4px; padding-right: 44px; }
.modal-card .button { width: 100%; margin-top: 6px; }

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 6px;
}
.modal-close:hover { color: var(--ink); }

/* ---------- Owner: the password screen ---------- */
body.admin { background: var(--bg); }

.gate {
  min-height: 100vh;
  min-height: 100svh;   /* phones: the real height, not counting the URL bar */
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate[hidden] { display: none; }

.gate-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
  width: min(380px, 100%);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.07);
}
.gate-box h1 { font-size: 1.7rem; }
.gate-box p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }
.gate-box .button { width: 100%; }
.gate-box .fine { margin-top: 16px; }
.gate-box a { color: var(--ink-soft); }

/* ---------- Owner: the order list ---------- */
main#orders-view,
main#account-view { padding: 48px 0; }

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The shop's front page wants a huge h1. An order list doesn't. */
.admin-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 9px 18px;
}
.button.ghost:hover { background: var(--paper); transform: none; }

.order {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.order-printing { border-left-color: #e6a700; }
.order-done { border-left-color: #cfcac4; opacity: 0.65; }

.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.status-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.status-new { background: var(--accent); color: #fff; }
.status-printing { background: #ffefc2; color: #7a5c00; }
.status-done { background: #f3e2d6; color: var(--ink-soft); }

.order-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.order-details dt { color: var(--ink-soft); }
.order-details dd { font-weight: 600; word-break: break-word; }

.order-total { font-weight: 700; color: var(--accent); margin-bottom: 12px; }

.order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--ink);
}
.chip-button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-button.danger:hover { background: #b3261e; border-color: #b3261e; }

@media (max-width: 600px) {
  section { padding-block: 48px; }
  .hero { padding: 64px 0 72px; }
  .modal-card { padding: 24px 20px; }
  .order-details { grid-template-columns: 1fr; gap: 2px; }
  .order-details dd { margin-bottom: 8px; }
}

/* ---------- Log in / Sign up tabs on the account page ---------- */
.tabs {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}
.tab {
  flex: 1;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  padding: 9px 0;
  border-radius: 999px;
  cursor: pointer;
}
.tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.gate-box form { text-align: left; }
.gate-box .button { margin-top: 4px; }

.warn {
  background: #fff6e5;
  border: 1px solid #ffdfa3;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 400;
  color: #6b5200;
  margin-bottom: 14px;
}

/* Download button for a customer's uploaded 3D file. */
.file-button {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  margin-bottom: 12px;
  background: var(--accent);
  font-size: 0.9rem;
  padding: 11px 18px;
  word-break: break-all;
}
.file-button:hover { background: var(--accent-dk); }

/* The spinning model. One wide filmstrip, slid sideways frame by frame. */
.card-spin {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: 1600% 100%;   /* 16 frames side by side */
  background-position: 0 0;
  background-color: #fff;
}

/* Little hint that the picture does something. */
.card { position: relative; }
.spin-hint {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(26,26,46,0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
}

/* "Pay with Bitcoin" button on a customer's own order. */
.pay-now {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  background: var(--accent);
  margin-top: 4px;
}
.pay-now:hover { background: var(--accent-dk); }

/* On a phone there's no room to be clever -- these go full width. */
@media (max-width: 600px) {
  .file-button, .pay-now { display: block; }
}

/* The Bitcoin payment QR code. */
.qr-box {
  display: block;
  width: min(220px, 70%);
  margin: 6px auto 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-caption {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 8px 0 10px;
}
.pay-now { font-size: 0.85rem; }

/* ============================================================
   PHONES
   ============================================================ */

/* Anything you drive with a finger instead of a mouse. Small buttons are
   fine to click and miserable to tap, so the little ones grow. Apple's
   guideline is about 44px square; these were nearer 28px. */
@media (pointer: coarse) {
  .chip-button { padding: 11px 18px; font-size: 0.86rem; }
  .tab { padding: 13px 0; }
  .modal-close {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    padding: 0;
  }
  /* A tap shouldn't have to land on the exact word. */
  .lightning-address { padding: 10px 14px; }
  .pay-card a { padding: 6px 0; }
}

@media (max-width: 400px) {
  /* Narrow phones need the side margins back as usable width. */
  .wrap { padding-inline: 18px; }
  .order { padding: 16px; }
  .gate-box { padding: 26px 20px; }
  .card-body { padding: 16px; }
}

/* Lightning / on-chain chooser on a customer's order. */
.pay-ways { margin-top: 6px; }
.pay-ways .tabs { max-width: 240px; margin: 0 auto 10px; }
.pay-ways .qr-box { margin-top: 0; }
.pay-ways .fine { text-align: center; margin-top: 6px; }

/* ---------- "See it in your room" ---------- */
.see-it {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  padding: 9px 14px;
  margin-top: auto;
}

.ar-card { width: min(560px, 100%); }
#ar-holder { margin-top: 10px; }

model-viewer {
  width: 100%;
  height: 340px;
  background: var(--bg);
  border-radius: 14px;
  --poster-color: transparent;
}

.ar-button {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  white-space: nowrap;
}
.ar-button:hover { background: var(--accent-dk); transform: translateX(-50%) translateY(-2px); }

@media (max-width: 600px) {
  model-viewer { height: 260px; }
}