/* Makefew's own pages. Tokens: dev/plans/09-storefront-design.md */
:root {
  --paper: #fbfaf7; --ink: #141414; --ink-2: #5c5c5c; --line: #e4e1da;
  --accent: #037362; --accent-ink: #fff; --radius: 4px;   /* Kickstarter-like: deep green, near-square corners */
  --font: "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --max: 1200px;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 12px; }
.muted { color: var(--ink-2); }
.staging-notice { padding: 8px 16px; background: #fff3d6; color: #604700; text-align: center; font-size: 14px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; color: var(--accent); margin: 0 0 8px; }
.lede { font-size: 20px; margin: 0 0 12px; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; border-bottom: 1px solid var(--line); background: #fff; }
.topbar nav { display: flex; align-items: center; gap: 28px; } .topbar nav a { text-decoration: none; font-weight: 500; font-size: 16px; }
.topbar .topbar-login { padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; cursor: pointer; list-style: none; user-select: none; } .topbar .topbar-login::-webkit-details-marker { display: none; } .topbar .topbar-login:hover, .menu[open] .topbar-login { border-color: var(--ink); }
.menu { position: relative; } .menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 10px; display: flex; flex-direction: column; z-index: 50; }
.menu-panel a { padding: 10px 12px; border-radius: calc(var(--radius) - 2px); font-weight: 500; } .menu-panel a:hover { background: var(--paper); }
.menu-head { margin: 8px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .menu-head + .menu-head, .menu-panel a + .menu-head { margin-top: 12px; }
.menu-note { margin: 0 12px 8px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.how { scroll-margin-top: 80px; }
.mf-logo { display: inline-flex; align-items: center; flex-shrink: 0; padding: 12px; background: #fff; border-radius: 4px; }
.mf-logo img { width: 124px; height: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: -0.02em; color: var(--ink); }
/* Public header on phones: the same wordmark at its existing sizes (124, 88 and 64 px). Each step
   happens before the logo and the first link would come closer than 8 px (Figtree, 320-1440 px). */
@media (max-width: 440px) {
  .topbar:not(.studio) nav { gap: 12px; } .topbar:not(.studio) nav a { font-size: 15px; white-space: nowrap; }
  .topbar:not(.studio) .topbar-login { padding: 8px 10px; }
}
@media (max-width: 400px) { .topbar:not(.studio) .mf-logo img { width: 88px; } .topbar:not(.studio) .mf-logo { padding: 8px; } }
@media (max-width: 359px) { .topbar:not(.studio) .mf-logo img { width: 64px; } }
@media (max-width: 340px) { .topbar:not(.studio) nav { gap: 8px; } .topbar:not(.studio) .topbar-login { padding: 8px; } }
main { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* Shared footer stays readable on maker backgrounds and wraps on small screens. */
.site-footer { position: relative; margin-top: 48px; padding: 32px 24px; background: var(--s-bg, var(--paper)); color: var(--s-ink, var(--ink)); border-top: 1px solid var(--s-line, var(--line)); font-size: 14px; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; }
.site-footer-brand { display: inline-flex; text-decoration: none; }
.site-footer p { margin: 4px 0 0; color: var(--s-ink2, var(--ink-2)); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.site-footer .site-copyright { flex-basis: 100%; font-size: 12px; }
.site-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.info-copy { padding-bottom: 24px; }
.info-copy h2 { margin-top: 32px; font-size: 24px; }
@media print { .site-footer { display: none; } }

.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 13px 22px; border-radius: var(--radius); text-decoration: none; border: 0; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; cursor: pointer; }
.btn:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 12px 21px; } .btn-ghost:hover { background: rgba(0,0,0,.05); }
.btn[disabled] { opacity: .5; cursor: default; }

/* Feature (home hero) */
.feature { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; padding: 40px 0 24px; }
.feature-media { display: block; position: relative; aspect-ratio: 4 / 3; background: #eceae4; border-radius: var(--radius); overflow: hidden; }
.feature-media img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
/* An inset edge keeps the home images' dimensions and framing unchanged. */
.home-page .feature-media::after, .home-page .card-media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.feature h1 { font-size: clamp(28px, 4vw, 44px); }
.feature-price { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 12px; } .feature h1 a { text-decoration: none; }

/* Rows and cards */
.row { padding: 32px 0; } .row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.row-head h2 { font-size: 22px; margin: 0; display: inline-block; background: #ebebe7; color: var(--ink); padding: 6px 14px; border-radius: 6px; } .row-head a:not(.btn) { color: var(--ink-2); font-size: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { display: block; text-decoration: none; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: #eceae4; }
.card-media img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: 12px 2px 0; } .card-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.card-title { font-size: 19px; margin: 0 0 2px; }
.card-price { font-size: 19px; font-weight: 700; white-space: nowrap; }
.card-maker { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }

/* Batch bar (shared). State colors are semantic and the same on every store so buyers learn them once. */
:root { --state-open: var(--accent); --state-preorder: #6d28d9; --state-shipped: #15803d; --state-neutral: #9a9a94; }
.batch { font-size: 14px; }
.batch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.batch-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--state); }
.batch-num { font-size: 13px; color: var(--s-ink2, var(--ink-2)); }
.batch-track { position: relative; height: 10px; background: var(--s-line, var(--line)); border-radius: 5px; }
.batch-fill { height: 100%; border-radius: 5px; background: var(--state); }
/* Product detail only: balanced rows, at most 25 actual units per row and 60 total.
   Gray includes sold units and checkout holds; the adjacent count remains authoritative. */
.batch-units { display: grid; grid-template-columns: repeat(var(--batch-columns), minmax(0, 1fr)); gap: 3px; }
.batch-unit { height: 12px; min-width: 0; border-radius: 2px; background: var(--s-line, var(--line)); }
.batch-unit.is-available { background: var(--state); }
/* Product detail, ready to ship: the quantity in the Buy form, set by storefront.js. A ring in the
   store's text color plus a light stripe, so the choice never rests on hue alone; no motion. The
   continuous slice keeps true proportions (no minimum width), so its ring is drawn inside it. */
.batch-unit.is-picked, .batch-pick { background: repeating-linear-gradient(135deg, var(--state) 0 2px, color-mix(in srgb, var(--state) 25%, var(--s-bg, #fff)) 2px 4px); }
.batch-unit.is-picked { outline: 2px solid var(--s-ink, var(--ink)); outline-offset: 1px; }
.batch[data-selectable] .batch-track { overflow: hidden; }
.batch-pick { position: absolute; top: 0; bottom: 0; border-radius: 0 5px 5px 0; box-shadow: inset 0 0 0 2px var(--s-ink, var(--ink)); }
.batch-selection { min-height: 1.55em; min-height: 1lh; }
.batch-goal { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--s-ink, var(--ink)); }
.batch-words { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--s-ink2, var(--ink-2)); }
.batch-words strong { color: var(--s-ink, var(--ink)); font-weight: 600; }
.batch.is-open { --state: var(--s-accent, var(--state-open)); }
.batch.is-preorder { --state: var(--state-preorder); }
.batch.is-shipped { --state: var(--state-shipped); }
.batch.is-upcoming, .batch.is-sold_out { --state: var(--state-neutral); }
.batch.is-upcoming .batch-fill { background: repeating-linear-gradient(135deg, var(--state) 0 6px, transparent 6px 12px); opacity: .45; width: 100% !important; }
.batch.is-sold_out .batch-fill { opacity: .5; }

/* How / sell band */
.how { padding: 48px 0; border-top: 1px solid var(--line); margin-top: 24px; }
.how ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 0; margin: 0; list-style: none; counter-reset: n; }
.how li { counter-increment: n; } .how li::before { content: counter(n); display: block; font-size: 32px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.sell-band { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; text-align: center; margin: 24px 0; }
.sell-band p { max-width: 560px; margin: 0 auto 20px; color: var(--ink-2); }

/* Explore */
.explore-head { padding: 32px 0 16px; } .explore-head h1 { font-size: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 15px; background: #fff; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); } .chip-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }

.studio-main, .admin-main { max-width: var(--max); margin: 0 auto; padding: 32px 24px; }

@media (max-width: 800px) {
  .feature, .grid-3, .how ol { grid-template-columns: 1fr; }
  .topbar nav { gap: 18px; } .topbar nav a:nth-child(2) { display: none; }
  .topbar { padding: 0 16px; } main { padding: 0 16px; }
}
/* Smallest phones (320 px): keep the logo and every header link on one line. */
@media (max-width: 380px) {
  .topbar nav { gap: 12px; } .topbar nav a { font-size: 15px; white-space: nowrap; } .topbar .topbar-login { padding: 8px 10px; }
  .brand { font-size: 18px; gap: 6px; white-space: nowrap; }
}

/* Platform pages: sell, login, help, legal */
.page-hero { padding: 56px 0 24px; max-width: 760px; } .page-hero.narrow { max-width: 640px; }
.page-hero h1 { font-size: clamp(32px, 4.5vw, 48px); margin: 0 0 12px; } .page-hero .lede { font-size: 20px; color: var(--ink-2); margin: 0 0 20px; }
.cta-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.btn-quiet { color: var(--ink); font-weight: 500; }
.page-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 24px 0 56px; } .page-cols h3 { margin: 0 0 6px; } .page-cols p { margin: 0; color: var(--ink-2); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; padding: 8px 0 64px; }
/* After the base rules above, so phones get one column (it was overridden when it sat in the earlier media query). */
@media (max-width: 800px) { .page-cols, .choice-grid { grid-template-columns: 1fr; } }
.choice { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; text-decoration: none; color: inherit; }
.choice h2 { margin: 0; font-size: 24px; } .choice p { margin: 0; color: var(--ink-2); }
.choice-btn { align-self: flex-start; margin-top: 10px; } .choice.soft { background: transparent; } .small { font-size: 14px; }
.faq.narrow { max-width: 640px; padding-bottom: 64px; } .faq details { border-top: 1px solid var(--line); padding: 14px 0; } .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; } .faq details p { margin: 10px 0 0; color: var(--ink-2); }
.nf-routes { margin: 0 0 28px; padding-left: 20px; color: var(--ink-2); line-height: 1.5; } .nf-routes li { margin: 0 0 10px; } .nf-routes strong { color: var(--ink); }
.page-hero .btn { overflow-wrap: anywhere; }

/* Message threads (buyer page on the public host; studio inbox reuses .msgs) */
.thread { max-width: 720px; padding: 32px 0 64px; }
.thread-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; }
.thread-head h1 { font-size: 26px; margin: 0 0 4px; } .thread-head p { margin: 0; }
.msgs { display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.msg { max-width: 85%; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); white-space: pre-wrap; line-height: 1.5; }
.msg.me { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.msg .meta { display: block; font-size: 12px; opacity: .72; margin-bottom: 4px; white-space: normal; }
.thread-reply { display: grid; gap: 10px; } .thread-reply textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; min-height: 100px; resize: vertical; }
.thread-reply button { justify-self: start; }
.thread-ok { padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 16px; }
.inbox { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--line); }
.inbox li { border-bottom: 1px solid var(--line); } .inbox a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 8px; text-decoration: none; color: inherit; }
.inbox a:hover { background: #fff; } .inbox .who { font-weight: 500; } .inbox .unread .who::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.inbox .snip { color: var(--ink-2); font-size: 15px; grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox .at { color: var(--ink-2); font-size: 14px; }

/* Checkout and order status */
.co, .os { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding: 24px 0 64px; }
.co-main h1, .os-main h1 { margin: 0 0 8px; } .co-hold { background: #fff7e6; border: 1px solid #f3dca6; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 20px; font-size: 15px; }
.co-form { max-width: 640px; } .co-pay { margin-top: 32px; max-width: 640px; } .btn-pay { font-size: 18px; padding: 15px 28px; }
.co-side { min-width: 0; }
.co-side .co-summary { position: static; }
.co-side .co-pay { margin-top: 20px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; scroll-margin-top: 24px; }
.co-pay-form[hidden], #paypal-buttons[hidden] { display: none; }
.co-cancel { margin-top: 20px; } .co-cancel .linklike { color: var(--ink-2); font-size: 14px; }
/* Checkout on phones (UI plan B16, B17): a collapsed summary with the total leads; errors sit beside their
   fields; anything focused or linked to clears the sticky header. */
.co-compact { display: none; margin: 0 0 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.co-compact > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; cursor: pointer; font-weight: 500; list-style: none; }
.co-compact > summary::-webkit-details-marker { display: none; }
.co-compact > summary span::before { content: "▸ "; color: var(--ink-2); } .co-compact[open] > summary span::before { content: "▾ "; }
.co-compact[open] > summary { border-bottom: 1px solid var(--line); }
.co-compact > .co-item, .co-compact > .co-totals { margin-left: 16px; margin-right: 16px; } .co-compact > .co-totals { padding-bottom: 12px; }
.field-error { margin: 0; color: #8a1c1c; font-size: 14px; font-weight: 500; }
.co [aria-invalid="true"] { border-color: #b42318; }
.co input, .co select, .co textarea, .co .form-errors, .co-side .co-pay { scroll-margin-top: 80px; }
.co .form-errors p { margin: 0 0 6px; } .co .form-errors ul { margin: 0; padding-left: 20px; } .co .form-errors a { color: inherit; }
@media (max-width: 900px) { .co-compact { display: block; } }
.co-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; position: sticky; top: 80px; }
.co-summary h2 { font-size: 18px; margin: 0 0 12px; } .co-summary h3 { font-size: 14px; margin: 16px 0 4px; color: var(--ink-2); font-weight: 500; }
.co-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.co-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 8px; } .co-totals dd { margin: 0; text-align: right; } .co-totals dt { color: var(--ink-2); }
.co-totals .total { font-weight: 700; font-size: 20px; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); }
.small { font-size: 14px; } .fake-pay .eyebrow { color: #a15c00; }
.os-steps { list-style: none; padding: 0; margin: 12px 0 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.os-steps li { position: relative; padding: 22px 8px 0 0; font-size: 14px; color: var(--ink-2); } .os-steps li.done { color: var(--ink); font-weight: 600; }
.os-steps li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); } .os-steps li.done::before { background: var(--accent); }
.os-steps .dot { position: absolute; top: 2px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line); } .os-steps li.done .dot { background: var(--accent); border-color: var(--accent); }
.os-items li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); } .os-amt { margin-left: auto; }
.os-address { font-style: normal; line-height: 1.5; } .os-main h2 { font-size: 18px; margin: 28px 0 8px; }
/* One column: checkout shows its summary first; the order page keeps its confirmation and number first. */
@media (max-width: 900px) { .co, .os { grid-template-columns: 1fr; } .co-summary { position: static; } .co > .co-summary { order: -1; } }

/* Studio orders */
.orders-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; } .orders-search { display: flex; gap: 8px; margin-left: auto; }
.orders-search input { font: inherit; font-size: 15px; padding: 0 12px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-width: 240px; } .orders-search .btn { padding: 9px 14px; font-size: 15px; }
.orders-export { font-size: 14px; color: var(--ink-2); } .chip-n { opacity: .7; font-size: 12px; margin-left: 2px; }
.orders-table td { font-size: 15px; } .orders-table tr.late td { background: #fff8f6; } .empty-note { padding: 32px 0; }
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.order-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } .order-card h2 { font-size: 16px; margin: 0 0 12px; }
.order-note { background: var(--paper); padding: 10px 12px; border-radius: var(--radius); margin: 12px 0; }
.ship-form { margin-top: 16px; } .danger-zone summary { cursor: pointer; font-weight: 600; color: #8a1c1c; } .danger-zone[open] summary { margin-bottom: 10px; }
.btn-danger { background: #8a1c1c; } .btn-danger:hover { background: #701616; }
h1 .badge { vertical-align: middle; font-size: 13px; margin-left: 8px; }
@media (max-width: 900px) { .order-grid { grid-template-columns: 1fr; } }

/* Admin */
.topbar.admin { border-bottom-color: #c9b36b; } .topbar.admin .brand-sub { color: #8a6d00; } .topbar nav a.on { text-decoration: underline; text-underline-offset: 6px; }
.review-card { padding: 18px 20px; } .review-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.review-check { margin: 10px 0; font-size: 14px; } .review-check summary { cursor: pointer; color: var(--ink-2); } .review-check ul { margin: 6px 0 0; padding-left: 20px; color: var(--ink-2); }
.review-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.review-note { display: flex; gap: 8px; } .review-note input { font: inherit; font-size: 14px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-width: 260px; }
.review-note .btn, .review-actions .btn { padding: 9px 14px; font-size: 15px; } .danger-text { color: #8a1c1c; }
.row-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; } .inline-details { display: inline; } .inline-details summary { cursor: pointer; display: inline; text-decoration: underline; }
.timeline li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }

/* Studio forms and auth */
.brand-sub { font-weight: 500; color: var(--ink-2); }
.topbar.studio nav { display: flex; align-items: center; gap: 24px; } .topbar.studio nav a { margin: 0; }
form.inline { display: inline; } .linklike { background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; padding: 0; text-decoration: underline; }
.auth-card { max-width: 440px; margin: 48px auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.auth-card.wide { max-width: 640px; } .auth-card h1 { font-size: 28px; }
.stack { display: grid; gap: 18px; } .stack > * { min-width: 0; }
/* Field system: label on top, control, hint + counter underneath. Controls share one height (44px). */
.stack label, .field { display: grid; gap: 6px; font-weight: 500; min-width: 0; align-content: start; }
.field > label { display: block; font-weight: 500; }
:where(.stack, .field) :where(input:not([type=checkbox], [type=radio], [type=file]), textarea, select) {
  width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink); padding: 0 14px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
:where(.stack, .field) textarea { height: auto; min-height: 96px; padding: 11px 14px; line-height: 1.5; resize: vertical; }
:where(.stack, .field) select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
:where(.stack, .field) :where(input, textarea, select):focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.stack input[disabled], .field input[disabled] { background: var(--paper); color: var(--ink-2); }
.hint { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 400; color: var(--ink-2); line-height: 1.4; min-height: 1em; } .hint .count { flex: none; font-variant-numeric: tabular-nums; } .hint .count.over { color: #8a1c1c; font-weight: 600; }
.hint .ok { color: #0b5c3b; } .hint .bad { color: #8a1c1c; }
.form-actions { display: flex; gap: 12px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.form-section { font-size: 18px; margin: 16px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prefix-input { display: flex; align-items: center; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.prefix-input span { padding: 0 0 0 14px; color: var(--ink-2); white-space: nowrap; font-weight: 400; } .prefix-input input { border: 0; height: 42px; padding-left: 2px; } .prefix-input input:focus { outline: none; }
.prefix-input:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Pills: collections */
.pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.pills:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #ebebe7; font-size: 14px; font-weight: 500; }
.pill button { all: unset; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 1; color: var(--ink-2); } .pill button:hover { background: rgba(0,0,0,.08); color: var(--ink); }
.pills input { flex: 1 1 140px; border: 0; height: 32px; padding: 0 6px; min-width: 120px; } .pills input:focus { outline: none; }
/* Color rows: swatch + hex */
.color-row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; }
.color-row input[type=color] { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; overflow: hidden; }
.color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 4px; } .color-row input[type=color]::-webkit-color-swatch { border: 0; border-radius: 2px; } .color-row input[type=color]::-moz-color-swatch { border: 0; border-radius: 2px; }
.color-row input[type=text] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; text-transform: lowercase; }
.radio-cards { display: grid; gap: 10px; } .radio-card { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-weight: 400; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .radio-card input { margin: 3px 0 0; } .radio-card strong { display: block; font-weight: 600; } .radio-card span { color: var(--ink-2); font-size: 14px; }
.code-input { letter-spacing: .3em; font-size: 22px; font-variant-numeric: tabular-nums; }
.form-errors { background: #fdf2f2; color: #8a1c1c; border: 1px solid #f3c7c7; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; }
ul.form-errors { padding-left: 30px; } .form-ok { background: #effaf4; color: #0b5c3b; border: 1px solid #bfe6d1; border-radius: var(--radius); padding: 10px 14px; }
.setup-steps { padding-left: 22px; } .setup-steps li { margin-bottom: 14px; }
.qr { width: 200px; margin: 12px 0; } .qr svg { width: 100%; height: auto; } .secret { user-select: all; font-size: 14px; }
.recovery-codes { columns: 2; list-style: none; padding: 0; font-size: 18px; } .recovery-codes li { margin: 6px 0; }
.store-list { list-style: none; padding: 0; } .store-list li { padding: 14px 0; border-bottom: 1px solid var(--line); } .store-list a { text-decoration: none; }
.pp-specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; } .pp-specs dt { color: var(--ink-2); } .pp-specs dd { margin: 0; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eee; color: var(--ink-2); }

/* Batches in the product editor */
.batch-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.batch-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.batch-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .batch-actions { margin-left: auto; display: flex; gap: 12px; font-size: 14px; }
.badge.soon { background: #ede9fe; color: #4c1d95; } .badge.out { background: #fde8e4; color: #8a2c13; }
.batch-bar { display: flex; height: 8px; border-radius: 4px; background: #eceae4; overflow: hidden; margin: 10px 0 6px; } .batch-bar .sold { background: var(--accent); } .batch-bar .held { background: #f4b740; }
.batch-counts { margin: 0; font-size: 14px; color: var(--ink-2); } .batch-counts strong { color: var(--ink); }
.batch-edit { margin-top: 10px; font-size: 15px; } .batch-edit summary { cursor: pointer; color: var(--ink-2); font-weight: 500; } .batch-edit .stack { margin-top: 12px; }

/* Studio screens */
.crumbs { color: var(--ink-2); font-size: 14px; margin: 0 0 4px; } .crumbs a { color: inherit; }
.store-nav { display: flex; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); margin: 8px 0 24px; }
.nav-count { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; text-align: center; vertical-align: 2px; }
.store-nav a { padding: 12px 0; text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; color: var(--ink); }
.store-nav a.on { border-bottom-color: var(--ink); } .store-nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.badge.live { background: #d9f2e6; color: #0b5c3b; }
.dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.dash-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .dash-card h2 { font-size: 15px; color: var(--ink-2); margin: 0 0 6px; font-weight: 500; }
.dash-num { font-size: 36px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; }
.publish-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; max-width: 640px; }
.form-wide { max-width: 720px; } .form-wide h2 { font-size: 18px; margin: 16px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; } .four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.table th, .table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.table .thumb img { border-radius: 4px; object-fit: cover; } .table a { text-decoration: none; }
.edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.edit-side section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .edit-side h2 { font-size: 18px; margin: 0 0 12px; }
.media-list { list-style: none; padding: 0; margin: 0 0 16px; } .media-list li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.media-list img { border-radius: 4px; object-fit: cover; } .media-actions { margin-left: auto; display: flex; gap: 10px; } .media-actions form { display: inline; }
.linklike.danger { color: #8a1c1c; } .plain { list-style: none; padding: 0; } .plain li { padding: 6px 0; }
.design-grid { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 40px; align-items: start; }
.colors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.img-slot { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.img-slot-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; } .img-slot-thumb.logo { width: 54px; } .img-slot-empty { display: grid; place-items: center; width: 72px; height: 54px; border: 1px dashed var(--line); border-radius: 4px; color: var(--ink-2); font-size: 12px; }
.design-preview { position: sticky; top: 16px; } .preview-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.preview-tabs button { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; } .preview-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); } .preview-tabs a { margin-left: auto; font-size: 14px; }
#preview { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
@media (max-width: 1000px) { .edit-grid, .design-grid { grid-template-columns: 1fr; } .dash { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .two, .three, .colors { grid-template-columns: 1fr; } }

.delivery-note { white-space: pre-line; overflow-wrap: anywhere; }

/* Native radios keep the buyer feedback form usable without JavaScript. */
.os-rating { padding: 20px 0; margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.os-rating h2 { margin-top: 0; }
.rating-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 16px; }
.rating-choices legend { font-weight: 600; margin-bottom: 8px; }
.rating-choices label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.rating-choices label:has(input:checked) { border-color: var(--ink); background: var(--bg-2, #f2f2ef); }
.rating-choices input { width: auto; margin: 0; accent-color: var(--ink); }
.rating-choices label:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Product photography uses one responsive 4:3 window, independent of source dimensions. */
.product-image-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--s-radius, var(--radius)); background: color-mix(in srgb, var(--s-ink, var(--ink)) 5%, var(--s-bg, var(--paper))); }
.product-image-frame > img, .product-image-link, .product-image-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-image-link:focus-visible { outline: 3px solid var(--s-ink, var(--ink)); outline-offset: -3px; }
.image-expand { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: #141414; border: 1px solid #d8d8d8; border-radius: 50%; box-shadow: 0 2px 8px #0002; }
.image-expand:hover { background: #f0f0ed; }
.image-expand:focus-visible, .image-viewer-close:focus-visible { outline: 3px solid #037362; outline-offset: 3px; }
.image-viewer { width: min(1200px, calc(100vw - 32px)); height: min(960px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 16px; border: 1px solid #ddd; border-radius: 12px; background: #fbfaf7; color: #141414; box-shadow: 0 24px 80px #0006; }
.image-viewer[open] { display: flex; flex-direction: column; gap: 12px; }
.image-viewer:not([open]) { display: none; }
.image-viewer::backdrop { background: #000b; }
.image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 14px/1.4 var(--font); }
.image-viewer-close { display: inline-flex; gap: 12px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #141414; font: inherit; cursor: pointer; }
.image-viewer-close span { font-size: 24px; line-height: 1; }
.image-viewer .image-viewer-photo { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.image-viewer p { margin: 0; max-height: 20%; overflow: auto; overflow-wrap: anywhere; font: 14px/1.5 var(--font); }
html.image-viewer-open { overflow: hidden; }
@media (max-width: 600px) { .image-viewer { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 12px; } }