/* 3D print shop and its admin. Builds on tokens.css and site.css. */

.shop-closed {
  margin-top: var(--space-md); display: inline-block; padding: var(--space-2xs) var(--space-sm);
  background: var(--color-accent); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); font-weight: 600;
}
.shop-closed a { color: var(--color-ink); }
.shop-section + .shop-section { border-top: var(--rule-hair) solid var(--color-rule); }
.section-intro { max-width: 32rem; }
.shop-soon { max-width: 48rem; }

/* ---------- Catalog cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-md); }
.product-card {
  display: flex; flex-direction: column; gap: var(--space-3xs); height: 100%;
  background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); overflow: hidden;
  color: var(--color-ink); text-decoration: none; padding-bottom: var(--space-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.product-card:hover { color: var(--color-ink); transform: translateY(-3px); box-shadow: 0 6px 0 var(--color-ink); }
.product-thumb { display: block; aspect-ratio: 1; background: var(--color-paper-3); border-bottom: var(--rule-ink) solid var(--color-ink); margin-bottom: var(--space-2xs); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb-empty { display: grid; place-items: center; height: 100%; color: var(--color-sign); }
.product-thumb-empty svg { width: 3.5rem; height: 3.5rem; }
.product-name, .product-summary, .product-price { padding-inline: var(--space-sm); }
.product-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.15; }
.product-summary { color: var(--color-muted); font-size: var(--text-sm); }
.product-price { margin-top: auto; padding-top: var(--space-2xs); font-family: var(--font-display); font-weight: 800; color: var(--color-sign); }

/* ---------- Product page ---------- */
.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.crumbs a { color: var(--color-muted); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.gallery { position: sticky; top: var(--space-md); }
.gallery-main { aspect-ratio: 1; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-3); margin: 0; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-empty { display: grid; place-items: center; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.gallery-thumbs a { display: block; width: 4.5rem; aspect-ratio: 1; border: var(--rule-ink) solid var(--color-rule); border-radius: var(--radius); overflow: hidden; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-accent); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Photos / 3D view tabs and the model viewer (assets/js/model-viewer.js) */
.gallery-tabs { display: flex; gap: var(--space-3xs); margin-bottom: var(--space-xs); }
.gallery-tabs [role="tab"] {
  font: inherit; font-weight: 700; font-size: var(--text-sm); cursor: pointer; min-height: 2.5rem; padding: 0 var(--space-sm);
  background: transparent; color: var(--color-ink); border: var(--rule-ink) solid var(--color-rule); border-radius: var(--radius);
}
.gallery-tabs [role="tab"]:hover { border-color: var(--color-ink); }
.gallery-tabs [aria-selected="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.gallery-tabs [role="tab"]:focus-visible { outline: 3px solid var(--color-sign); outline-offset: 2px; }
.model-stage { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--color-paper), var(--color-paper-3)); }
.model-canvas { position: absolute; inset: 0; }
.model-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.model-canvas canvas:active { cursor: grabbing; }
.model-load { position: relative; z-index: 1; }
.model-viewer [hidden] { display: none; }
.model-load small { font-weight: 400; opacity: 0.85; margin-left: 0.25rem; }
.model-reset { position: absolute; z-index: 1; right: var(--space-xs); bottom: var(--space-xs); background: var(--color-paper); }
.model-status { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.model-viewer.is-loading .model-stage::after {
  content: ""; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 4px solid var(--color-rule); border-top-color: var(--color-sign); animation: model-spin 0.9s linear infinite;
}
@keyframes model-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .model-viewer.is-loading .model-stage::after { animation-duration: 3s; } }

.product-price-big { margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-sign); }
.product-desc { margin-top: var(--space-md); }
.lead-time { margin-top: var(--space-sm); font-weight: 600; display: flex; gap: var(--space-2xs); align-items: center; }
.lead-time::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--color-accent); border: 2px solid var(--color-ink); border-radius: 2px; }
.product-info .notice { margin-top: var(--space-lg); }
.order-form { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-ink) solid var(--color-ink); }

.choice-group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.choice-group legend { margin-bottom: var(--space-2xs); }
.choice {
  display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; min-height: 3.25rem;
  padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2);
  border: var(--rule-ink) solid var(--color-rule); border-radius: var(--radius);
}
.choice:hover { border-color: var(--color-ink); }
.choice:has(input:checked) { border-color: var(--color-sign); box-shadow: inset 0 0 0 1px var(--color-sign); }
.choice input { accent-color: var(--color-sign); width: 1.15rem; height: 1.15rem; flex: none; }
.choice > span:first-of-type { flex: 1; font-weight: 600; }
.choice small { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); }
.choice-price { font-family: var(--font-display); font-weight: 800; }
.qty-field { max-width: 8rem; }
.check { display: flex; gap: var(--space-xs); align-items: flex-start; cursor: pointer; }
.check input { accent-color: var(--color-sign); width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; }
.pay-hint { margin-top: var(--space-xs); }

/* QR code signs */
.choice-off { cursor: not-allowed; opacity: 0.55; }
.choice-off:hover { border-color: var(--color-rule); }
.sign-preview { padding: 0; background: var(--color-paper-3); }
.sign-preview canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.sign-what { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.swatch {
  position: relative;
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; min-height: 2.75rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem; background: var(--color-paper-2); font-weight: 600; font-size: var(--text-sm);
  border: var(--rule-ink) solid var(--color-rule); border-radius: var(--radius);
}
.swatch:hover { border-color: var(--color-ink); }
.swatch:has(input:checked) { border-color: var(--color-sign); box-shadow: inset 0 0 0 1px var(--color-sign); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--color-sign); outline-offset: 2px; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-chip { width: 1.75rem; height: 1.75rem; border-radius: 4px; border: 2px solid var(--color-ink); flex: none; }

/* ---------- Thank-you page ---------- */
.order-facts { max-width: 40rem; }
.next-steps { margin-top: var(--space-lg); }
.next-steps h2 { margin-top: 0; }

/* ---------- Admin ---------- */
.admin { padding-block: var(--space-lg) var(--space-xl); }
.admin-login { max-width: 24rem; margin: var(--space-xl) auto; }
.admin-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-lg); border-bottom: var(--rule-ink) solid var(--color-ink);
}
.admin-nav > a { font-family: var(--font-display); font-weight: 800; color: var(--color-ink); text-decoration: none; padding-block: var(--space-3xs); border-bottom: 3px solid transparent; }
.admin-nav > a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.admin-status { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.admin-flash { margin-bottom: var(--space-md); }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.admin-sub { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
.admin-panel { background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); padding: var(--space-md); margin-top: 0; }
.admin-panel .admin-sub:first-child { margin-top: 0; }
.admin-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-lg); align-items: start; }
.admin-cols .facts { margin-top: 0; }
.admin-empty { padding: var(--space-lg) 0; }
.admin-notes { white-space: normal; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius); padding: var(--space-sm); }

.pill { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; border: 1px solid var(--color-ink); background: var(--color-paper-2); }
.pill-on, .pill-completed, .pill-shipped, .pill-ready { background: var(--color-sign); border-color: var(--color-sign); color: #fff; }
.pill-paid, .pill-test { background: var(--color-accent); }
.pill-printing { background: #cfe3d7; }
.pill-off, .pill-pending, .pill-expired, .pill-cancelled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); }

.seg-links { display: inline-flex; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); overflow: hidden; }
.seg-links a { padding: var(--space-3xs) var(--space-sm); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.seg-links a + a { border-left: var(--rule-ink) solid var(--color-ink); }
.seg-links a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }

.table-wrap { overflow-x: auto; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th, .admin-table td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.admin-table th { font-weight: 700; background: var(--color-paper-3); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td a { font-weight: 700; }

.admin-products { display: grid; gap: var(--space-2xs); }
.admin-products a {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space-sm); align-items: center;
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs); background: var(--color-paper-2);
  border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); color: var(--color-ink); text-decoration: none;
}
.admin-products a:hover { box-shadow: 0 4px 0 var(--color-ink); }
.admin-thumb { width: 3.5rem; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--color-paper-3); }
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-pname { font-weight: 700; }
.admin-products .muted { font-size: var(--text-sm); }

.admin-form { max-width: 52rem; }
.admin-fieldset { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md) var(--space-md); margin: 0; display: grid; gap: var(--space-sm); }
.admin-fieldset legend { padding-inline: var(--space-2xs); }
.opt-rows { display: grid; gap: var(--space-2xs); }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: var(--space-2xs); }
.price-input { position: relative; display: block; }
.price-input > span { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.price-input .input { padding-left: 1.75rem; }
.admin-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-sm); }
.admin-images li { position: relative; display: grid; gap: var(--space-2xs); }
.admin-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: var(--rule-hair) solid var(--color-rule); }
.admin-images .pill { position: absolute; top: var(--space-2xs); left: var(--space-2xs); }
.img-btns { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.img-btns .btn-small { min-height: 2rem; padding: 0 var(--space-xs); font-size: var(--text-xs); }
.btn-danger { color: #8f2c18; border-color: #8f2c18; }
.btn-danger:hover { background: #8f2c18; border-color: #8f2c18; color: #fff; }
.admin-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-sm); }
.admin-photos a { display: grid; place-items: center; aspect-ratio: 1; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); overflow: hidden; background: var(--color-paper-3); text-align: center; font-weight: 700; font-size: var(--text-sm); }
.admin-photos img { width: 100%; height: 100%; object-fit: cover; }
code { font-size: 0.9em; background: var(--color-paper-3); padding: 0.1em 0.35em; border-radius: 4px; }

@media (max-width: 60rem) {
  .product-layout, .admin-cols { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; }
  .admin-products a { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .admin-products a .muted { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 47.5rem) {
  .opt-row { grid-template-columns: minmax(0, 1fr) 7rem; }
  .admin-status { margin-left: 0; }
}

/* Admin email (admin@jeffcotechco.com) */
.mail-addr { font-size: var(--text-sm); font-weight: 400; margin-left: var(--space-2xs); }
.mail-folders { margin-bottom: var(--space-md); flex-wrap: wrap; }
.mail-list { list-style: none; margin: 0; padding: 0; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-2); }
.mail-list li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.mail-list a { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) var(--space-sm); color: var(--color-ink); text-decoration: none; min-height: 44px; }
.mail-list a:hover, .mail-list a:focus-visible { background: var(--color-paper-3); }
.mail-who, .mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-new .mail-who, .mail-new .mail-subject { font-weight: 700; }
.mail-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-sign); margin-right: 0.4rem; vertical-align: middle; }
.mail-when { font-size: var(--text-sm); white-space: nowrap; }
.mail-pager { display: flex; gap: var(--space-md); align-items: center; margin-top: var(--space-sm); }
.mail-foot { margin-top: var(--space-md); font-size: var(--text-sm); }
.mail-read-subject { margin: 0; overflow-wrap: anywhere; }
.mail-meta { margin-top: var(--space-sm); }
.mail-meta div { grid-template-columns: 6.5rem minmax(0, 1fr); }
@media (max-width: 40rem) { .mail-meta div { grid-template-columns: 4.5rem minmax(0, 1fr); padding-inline: var(--space-sm); } }
.mail-meta dd { overflow-wrap: anywhere; }
.mail-body { margin-top: var(--space-md); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-base, 1rem); line-height: 1.55; }
.mail-files { padding-left: 1.2rem; }
.mail-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.mail-actions form { margin: 0; }
.mail-textarea { min-height: 18rem; font-family: inherit; line-height: 1.5; }
@media (max-width: 40rem) {
  .mail-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .mail-subject { grid-column: 1 / -1; grid-row: 2; }
}

/* Admin: QR sign print files */
.sign-files { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-top: var(--space-sm); }
.sign-files canvas { width: 100%; height: auto; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); image-rendering: pixelated; }
.sign-payload { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); margin: 0; }
.sign-dl { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.sign-howto summary { cursor: pointer; font-weight: 700; }
.sign-howto ol { margin: var(--space-2xs) 0 0 1.2rem; display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
@media (max-width: 30rem) { .sign-files { grid-template-columns: minmax(0, 1fr); } .sign-files canvas { max-width: 14rem; } }

/* Admin: 3D model */
.admin-model { max-width: 22rem; }
.admin-color { padding: 0.25rem; height: 2.75rem; width: 5rem; cursor: pointer; }